Tablas de contenidos para Wordpress con elementor

Cómo crear tablas de contenidos con Elementor

Entre las novedades más destacables que ofrece la versión 2.8 de Elementor resalta la de un nuevo widget para poder crear tablas de contenidos. Simplifica considerablemente que el contenido más sea accesible, permitiendo a los usuarios  escanearlo y tener una idea de la estructura del contenidos. En este post os vamos a explicar cómo crear tablas de contenidos con Elementor Pro y Ultimate addons for Elementor.

Índice de contenidos

Qué es una tabla de contenidos

Una tabla de contenido es un reflejo de la estructura de un documento y contiene los títulos de los temas y subtemas que forman el documento y en el que se establecen enlaces directos a cada uno de los puntos que forman el documento, facilitando así el acceso directo a una información en concreto.

A parte de mejorar la experiencia de navegación de los usuarios, el uso de tablas de contenidos crea enlaces internos, factor que beneficia el SEO de tu web.

Ejemplo de tabla de contenidos
Ejemplo de tabla de contenidos

Creando mi primera tabla de contenidos con Elementor pro

Una vez creada nuestra entrada o página en WordPress y habiendo seleccionado como editor del contenido a Elementor, crearemos todo el contenido (encabezados y párrafos) y acto seguido seleccionaremos el widget «table of contents» y lo arrastraremos hasta el punto donde queremos que se muestre. Podremos observar como de forma automática se crea una lista de todos los encabezados del contenido de la pagina.

Repasemos las opciones de configuración del widget.

  1. Título de la tabla de contenidos.
  2. Html tag: Definimos que tipo de etiqueta html será el titulo de la tabla.
  3. Selector para definir que etiquetas de encabezados incluiremos o excluiremos de la tabla de contenidos.
  4. Anchors by tag: En este apartado definiremos que encabezados formarán la lista de elementos de la tabla. Posteriormente explicaremos como excluir elementos de la lista en el caso que fuera necesario.
  5. Container: Definiremos de que contenedor se tienen que extraer los encabezados para crear la tabla. Por lo general el contenedor a seleccionar es «main» pero puede variar dependiendo de la plantilla, en ese caso a través de la herramienta de desarrolladores te tocará investigar que nombre tiene el contenedor que engloba los encabezados que te interesan incluir.
  6. Marker view: Selector para definir si queremos que la lista sea numérica o por puntos.
  7. Word Wrap: Esta opción sirve para acortar los títulos de encabezados y no hagan saltos de línea.
  8. Minimize box: Ofrece al usuario la opción de minimizar la tabla de contenidos.
  9. Opciones de personalización del icono para minimizar la tabla.
  10. Ofrece la posibilidad de mostrar la tabla minimizada para tablets o movil.
  11. Hierarchical view: Muestra todos los encabezados en la misma jerarquía, es decir, sin subelementos.
  12. Collapse subitems: Esta opción ofrece la posibilidad de ocultar los subelementos.
Elementor tabla de contenidos elemplo

El siguiente paso sería personalizar la tabla de contenidos 

Como excluir encabezados de la tabla de contenidos con Elementor Pro

Se nos pueden presentar 2 casos de encabezados que nos interese excluir de la tabla:

El encabezado que queremos excluir esta dentro del contenedor que hemos definido para que incluya los encabezados en la lista, pero forma parte de la plantilla.

En este caso lo que deberemos realizar es averiguar con que clase o ID  está definida el encabezado. Para ello lo que haremos será hacer click con el botón derecho de nuestro ratón sobre el encabezado y inspeccionar elemento. Una vez se nos habra el inspector nos aparecerá marcada en color la línea de código en la que se define el encabezado que queremos excluir. Copiamos la clase o la ID y nos dirigimos al widget de la tabla de contenidos y lo pegamos en el apartado donde nos permite excluir encabezados. Delante pondremos un punto si es una clase o una almohadilla si es una ID.

 

excluir encabezados tablas de contenidos elementor pro

Segundo caso:

El encabezado que queremos excluir esta dentro del contenedor que hemos definido para que incluya los encabezados en la lista, pero forma parte del contenido creado.

En este caso realizaremos todo lo contrario. En lugar de buscar la clase  la ID la definiremos. Para ello seleccionamos el encabezado que queramos excluir y nos vamos al apartado avanzado (recuadro rojo de la imagen). Acto seguido le daremos a el encabezado o la ID que nosotros queramos (recuadro verde de la imagen). En este caso no tendremos que poner ni punto ni almohadilla.

Volvemos al widget de la tabla de contenidos y en el apartado para excluir encabezados le añadimos la que acabamos de definir.

Excluir encabezados tablas de contenidos elementor

Demos un repaso a todo lo visto en este video.

Cómo crear tablas de contenidos con Ultimate addons for Elementor

Como crear tablas de contenidos con ultimate addons for elementor Tutorial

Cómo la tabla de contenidos se crea igual que con Elementor Pro vamos a hacer hincapié en las opciones de configuración que no son comunes con Ultimate addons for Elementor.

  1. Exclude Headings: Basicamente te informa de que clase debes aplicar a los encabezados que quieres excluir de la lista. Un poco más abajo te explicamos como hacerlo.
  2. Make Content Collapsible: Habilita la opción al usuario de minimizar el contenido de la tabla.
  3. Keep Collapsed Initially: Activando esta opción se muestra la tabla minimizada por defecto.
  4. Icon size: Define el tamaño del icono para minimizar la tabla.
  5. Icon color: Define el color del icono.
  6. Scroll on top: Habilita un botón en el pie de página para hacer scroll al inicio de la página (recuadro rojo de la imagen)
  7. Size: Define el tamaño del botón del pie de página.
  8. Ociones de personalización del botón del pie de página.
  9. Smooth Scroll: Activando esta opción se habilita la opción de definir la velocidad del scroll desde la tabla hasta los encabezados.
  10. Smooth scroll upto destination: Define la velocidad de transición entre los encabezados de la tabla y los del contenidos.
Como crear tablas de contenidos con ultimate addons for elementor

Excluir encabezados con Ultimate addons for Elementor

Lo que tenemos que hace para excluir encablezados es añadir la clase CSS uae-toc-hide-heading al encabezado que quieres excluir de la tabla. Para ello iremos a los ajustes avanzados(recuadro rojo de la imagen) y añadiremos dicha clase en los ajustes para definir la clase del encabezado (recuadro verde de la imagen). Actualizamos y podremos comprobar como el encabezado se ha excluido.

Excluir encabezados tablas de contenidos ultimate addons for elementor

Los dos plugins son buenas opciones para crear tablas de contenidos, sin embargo, nosostros, por las opciones de personalización y configuración nos decantamos por Ultimate addons for Elementor, pero la decisión es tuya, para gustos los colores. 😉

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Crear un child theme en Wordpress con plugins

Cómo crear un child theme en 3 minutos

Sí has llegado hasta aquí es porque posiblemente no sepas que és y para que sirve un child theme o tema hijo. Don´t worry, hoy te vamos a explicar cual es su función y cómo crear un child theme en 3 minutos. Índice de contenidos

Como publicar videos de acceso restringido con Wordpress

Cómo publicar vídeos de acceso restringido con WordPress

Si estás pensando en montar una plataforma de e-learning o un sistema de membresía, una de las condiciones esenciales que debes implementar es limitar el acceso al contenido de pago de tu página web. Si tu método de formación consiste o se refuerza con la

Como añadir reseñas de Google a tu Wordpress

Cómo añadir las reseñas de Google a WordPress

Seguro que como internauta un factor que te hace decidirte por comprar un producto o un servicio de una empresa son las reseñas. En el post de hoy vamos a facilitarte esa tarea explicando cómo añadir las reseñas de Google a tu WordPress. Para llevar

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba