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
Cosas que no gustan a los suscriptores de un blog

Qué es lo que odian los suscriptores de tu blog

Tener un feedback con nuestros suscriptores a través de nuestras listas es un habito cada vez más extendido, ya que es un método eficaz para hacer llegar información, pero, ¿estás seguro de que lo estás haciendo bien? Es importante cuidar la relación con tus suscriptores.

Crear paginas web gratis con Wordpress

Crear tu web gratis con WordPress y Demoswp

Quizás la forma más práctica y barata de desarrollar un proyecto web es instalando xampp o wamp, programas que te permite trabajar desde tu ordenador con un servidor apache y bases de datos. Sin embargo el gran inconveniente que tiene trabajar de esta forma es

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

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í.

6 comentarios en “Cómo crear tablas de contenidos con Elementor”

  1. Hola buenas noches.
    Mi nombre es Rocío y tengo una duda acerca de la tabla de contenidos que no tengo forma de averiguar cómo se hace. Yo he editado el contenido y luego arrastro el widget y sale, ahí todo bien, el problema es, que el objetivo de la tabla de contenido es que, el usuario cuando pinche en el enlace, se abra otra página, pero claro, el contenido editado se queda debajo de la tabla y eso es lo que quiero que no se vea.

    Gracias de antemano.
    Un saludo.

    1. Hola Rocío:

      Realmente los enlaces de la tabla, cuando clicas sobre ellos no deben abrir otra página.

      El fin de las tablas de contenido es el de crear un índice de contenido de la misma página/entrada en la que se encuentra la tabla y cada uno de los puntos que forma la tabla ofrece la opción de acceder directamente a la información seleccionada en el punto de la tabla.

      Por esta razón, lo más recomendable es que la tabla este antes del contenido editado.

      Si tienes cualquier otra duda….!Dispara!

      Un saludo.

    2. Hola Rocío:

      No se si ya conseguiste encontrar solución al problema que nos planteaste, pero como ya sois varios los que buscáis una solución para este problema, en breve publicaremos en nuestro canal de You Tube una alternativa para poder conseguir lo que quieres.

      Este es nuestro canal: https://www.youtube.com/channel/UCMWNMvh0Giwh_ka7P9HiVyQ

      Suscríbete y activa las notificaciones para enterarte de cuando lo publicamos.

      Un saludo.

  2. estoy con rocio, quiero tener una tabla de contenidos pero cuando presiones en un encabezado de esos te mande a una pagina, o sea que abra otra pestaña con diferente contenido, agradecería que me respondieras y me ayudaras a saber como hacerlo.

    SALUDOS!!!

    1. Hola Ricard:

      Cómo comenté a Rocío, la función del widget de tabla de contenidos no es crear enlaces que apunten a otras páginas. Los enlaces de la tabla se crean de forma dinámica en relación a los encabezados que se crean en el contenido. Sin embargo como ya sois varios los que buscáis una solución para este problema, en breve publicaremos en nuestro canal de You Tube una alternativa para poder conseguir lo que quieres.

      Este es nuestro canal: https://www.youtube.com/channel/UCMWNMvh0Giwh_ka7P9HiVyQ

      Suscríbete y activa las notificaciones para enterarte de cuando lo publicamos.

      Un saludo.

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