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.
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.
- Título de la tabla de contenidos.
- Html tag: Definimos que tipo de etiqueta html será el titulo de la tabla.
- Selector para definir que etiquetas de encabezados incluiremos o excluiremos de la tabla de contenidos.
- 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.
- 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.
- Marker view: Selector para definir si queremos que la lista sea numérica o por puntos.
- Word Wrap: Esta opción sirve para acortar los títulos de encabezados y no hagan saltos de línea.
- Minimize box: Ofrece al usuario la opción de minimizar la tabla de contenidos.
- Opciones de personalización del icono para minimizar la tabla.
- Ofrece la posibilidad de mostrar la tabla minimizada para tablets o movil.
- Hierarchical view: Muestra todos los encabezados en la misma jerarquía, es decir, sin subelementos.
- Collapse subitems: Esta opción ofrece la posibilidad de ocultar los subelementos.
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.
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.
Demos un repaso a todo lo visto en este video.
Cómo crear tablas de contenidos con Ultimate addons for Elementor
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.
- 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.
- Make Content Collapsible: Habilita la opción al usuario de minimizar el contenido de la tabla.
- Keep Collapsed Initially: Activando esta opción se muestra la tabla minimizada por defecto.
- Icon size: Define el tamaño del icono para minimizar la tabla.
- Icon color: Define el color del icono.
- 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)
- Size: Define el tamaño del botón del pie de página.
- Ociones de personalización del botón del pie de página.
- Smooth Scroll: Activando esta opción se habilita la opción de definir la velocidad del scroll desde la tabla hasta los encabezados.
- Smooth scroll upto destination: Define la velocidad de transición entre los encabezados de la tabla y los del contenidos.
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.
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. 😉
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.
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.
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.
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!!!
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.
Gracias
Hola Ricard, ya probaste lo de excluir los encabezados con CSS? Utilizas ultimate addons for Elementor para crear tus tablas?
Un saludo
Buenas noches,
Debo editar una tabla de contenidos de una entrada de blog y la misma muestra no sólo los encabezados de esa entrada, sino que después del último encabezado muestra los títulos de otras entradas de blog, no sé por qué. Gracias de antemano si puedes orientarme.
Hola Loly, puedes mandarme la Url de la página.
Un saludo.
Hola, a mí me pasa lo mismo que a Loli, no sé cómo quitar algunos encabezado que salen en la tabla, como los mejores artículos relacionados o dejar un comentario.
Os paso el enlace para ver si podéis ayudarme:
https://soymatematicas.com/division-de-polinomios/
Muchas gracias y enhorabuena por vuestro blog, que sigo desde hace un tiempo.
Saludos