Las publicaciones largas son más fáciles de leer cuando los visitantes pueden ver toda la forma al frente y saltar directamente a la parte que desean. El gratis Widget de tabla de contenidos en Complementos maestros para Elementor lee los encabezados de su página y los convierte en un índice vinculado. No hay lista manual para crear ni ninguna para mantener sincronizada más adelante.
Colocas el widget, eliges qué niveles de encabezado incluir y se llena solo. Desde allí puedes hacerlo plegable, agregar un botón de desplazamiento hacia arriba y diseñar todo. Esta guía cubre todas las configuraciones del widget.
Qué hace el widget de tabla de contenidos #
El widget escanea la página en busca de encabezados y crea una lista anidada de enlaces a partir de ellos. Cada elemento apunta a su encabezado, por lo que un clic salta a esa sección. Agregue un encabezado más tarde y la lista lo recogerá por sí sola, que es la parte que ahorra más tiempo.
Dos pestañas lo ejecutan. Contenido contiene el título, los niveles de encabezado, la opción plegable y el comportamiento de desplazamiento. Estilo controla el relleno del contenedor, el título, el separador y los elementos de la lista. Las opciones habituales de Elementor Advanced se encuentran junto a ellas.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una página o publicación con encabezados reales (H2, H3, etc.) para que lea el widget.
Cómo agregar el widget de tabla de contenido #
En el editor Elementor, abra el Elementos panel y búsqueda Tabla de contenidos, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrastrelo a la parte superior de su contenido o a una barra lateral, y se llenará solo desde los encabezados de la página de inmediato.
Establezca el título y qué títulos incluir #
Abre el Contenido pestaña y el Tabla de contenidos sección. Aquí es donde nombras el cuadro, eliges el estilo de la lista y eliges qué niveles de encabezado aparecen.
- Introduceți textul titlui: el encabezado encima de la lista, como Tabla de contenido o TOC.
- Estilo de lista: Predeterminado (sin marcador), balas o números.
- Incluir / Excluir: la pestaña Incluir contiene etiquetas de encabezado y la pestaña Excluir explica cómo omitir encabezados individuales.
- Etiquetas de encabezado: elija los niveles para ingresar, como H2 y H3. Agregue o elimine etiquetas para controlar qué tan profunda llega la lista.
¿Quieres saltarte un solo título? Agregar el jltma-toc-hide-heading clasifique en la pestaña Avanzado de ese encabezado, en el campo Clases CSS, y el widget lo omita. Práctico cuando el encabezado de una sección simplemente abarrotaría la lista.
Haga que la lista sea plegable #
El Plegable las opciones permiten a los visitantes plegar la lista solo hasta el título. Eso ayuda en dispositivos móviles o en una barra lateral donde el espacio es reducido.
- Hacer que el contenido sea plegable: agregue un interruptor para que la lista se abra y cierre.
- Mantener colapsado inicialmente: cárguelo cerrado para que solo muestre el título hasta que haga clic.
- Tamaño y color del icono: la apariencia del colapso alterna.
Configure el comportamiento de desplazamiento #
Abre el Desplazarse sección sobre cómo se mueve la página cuando alguien usa el índice. Puede agregar un botón de regreso a la parte superior y activar el desplazamiento suave.
- Desplácese hasta arriba: agregue una flecha fija en la esquina inferior derecha. Aparece una vez que un visitante se desplaza hacia abajo y lo lleva de regreso al índice.
- Desplácese hasta el desplazamiento superior: una posición de desplazamiento para enviar lectores en lugar de la tabla de contenido.
- Retraso de animación de desplazamiento y desplazamiento suave: el retraso establece cuánto tiempo tarda el desplazamiento (500 ms de forma predeterminada). Al activar Smooth Scroll se agrega Smooth Scroll Offset (px), que no llega al encabezado, por lo que un encabezado fijo no lo cubre.
Estilee el contenedor y el título #
Abre el Estilo pestaña. El Contenedor la sección establece el acolchado alrededor de toda la caja y el Título la sección diseña el encabezado sobre la lista.
- Contenedor: relleno para el cuadro. Agregue un fondo, borde o radio desde la pestaña Avanzado.
- Título: alineación, color, tipografía y espaciado inferior del encabezado.
- Separador: estilo, color, grosor y espaciado inferior de la línea debajo del título. La flecha de desplazamiento a superior tiene el estilo de la sección Desplazamiento.
Diseñe los elementos de la lista #
El Contenido la sección en la pestaña Estilo maneja los enlaces ellos mismos. Obtienes tipografía, espacio entre elementos y colores separados para los estados Normal, Flotar y Activo.
- Tipografía y espaciado: la fuente y el espacio entre filas.
- Normal / Flotar / Activo: un color para cada estado. Activo se aplica al elemento en el que hizo clic por última vez un lector.
- Color textului: el color del enlace para el estado que ha seleccionado.
Casos de uso comunes #
- Largos tutoriales y guías brindando a los lectores un mapa y saltos rápidos.
- Páginas de documentación donde cada título es una sección que la gente busca.
- Barras laterales con un índice plegable al lado del artículo.
- Resumen y listas para que los visitantes puedan saltar a la entrada que deseen.
- Páginas jurídicas y políticas que necesitan anclas claras a cada cláusula.
Consejos para trabajar con el widget de tabla de contenido #
- Utilice una estructura de encabezado limpia. La lista es tan buena como sus H2 y H3, así que escriba encabezados que lean bien por sí solos.
- Incluye sólo dos niveles. H2 y H3 suelen formar un índice ordenado. Introduzca H4 y más allá y comenzará a hacer ruido.
- Colapsalo en el móvil. Mantener colapsado Inicialmente guarda mucho desplazamiento en pantallas pequeñas.
- Active el desplazamiento suave. Un deslizamiento hacia la sección se lee mejor que un salto fuerte, y el desplazamiento mantiene los títulos alejados de un encabezado pegajoso.
- Saltar títulos perdidos. Utilice la clase jltma-toc-hide-heading en encabezados que no desee en la lista, como un CTA o un título de barra lateral.
Preguntas frecuentes #
¿cuál es el widget de tabla de contenido en complementos maestros?
Es un widget Elementor gratuito que lee los encabezados de su página y crea un índice vinculado a partir de ellos automáticamente. Cada elemento salta a su sección al hacer clic y usted controla qué niveles de encabezado aparecen, si la lista colapsa y cómo se ve, todo desde el panel Elementor.
¿cómo sabe el widget qué encabezados enumerar?
Elige las etiquetas de encabezado en la pestaña Contenido, como H2 y H3, y el widget enumera todos los encabezados coincidentes de la página. Para omitir un nivel completo, deje esa etiqueta fuera. Para eliminar un encabezado específico, agregue la clase jltma-toc-hide-heading en la pestaña Avanzado.
¿puedo hacer que el índice sea plegable?
Sí. Las opciones plegables agregan un interruptor para que los visitantes puedan doblar la lista solo al título. Active Mantener colapsado inicialmente para cargarlo cerrado, lo que funciona bien en una barra lateral o en un dispositivo móvil donde desea ahorrar espacio vertical.
¿se actualiza cuando agrego nuevos encabezados?
Sí. La lista se genera a partir de los encabezados de la página, por lo que cuando agrega, elimina o cambia el nombre de un encabezado, la tabla de contenido refleja el cambio. No hay una lista manual para mantener sincronizada, que es la razón principal para usar el widget en lugar de una creada a mano.
¿Puedo agregar un desplazamiento suave y un botón de regreso a la cima?
Sí. Al hacer clic en un elemento, se desplaza a su sección y el retardo de animación de desplazamiento establece cuánto tiempo lleva. Smooth Scroll agrega un desplazamiento para encabezados fijos. Scroll to Top agrega una flecha en la esquina inferior derecha con su propio desplazamiento, tamaño y colores.
Envolviendo #
El widget de tabla de contenido convierte sus encabezados en un índice vinculado sin ningún mantenimiento manual: colóquelo, elija los niveles de encabezado, hágalo plegable, configure el comportamiento de desplazamiento y luego diseñelo para que coincida. Para obtener una descripción general y una comparación con Elementor Pro, consulte el Widget de tabla de contenido de Elementor página. Para widgets relacionados, consulte Cronograma y Menú de navegación, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
