Widget gratuito de tabla de contenidos de Elementor
El propio widget de Tabla de contenido de Elementor viene con Elementor Pro. El widget de Tabla de contenido en complementos maestros es gratuito. Déjelo en una publicación o página y leerá los encabezados allí, luego creará una lista vinculada a partir de ellos en orden de encabezado. Un clic en cualquier elemento desplaza al lector a esa sección. Usted elige qué etiquetas de encabezado incluir y si la lista muestra viñetas o números. Puede permitir que los lectores doblen el cuadro y agreguen una flecha hacia atrás y superior, y el título, el separador y los enlaces tienen cada uno sus propios controles de estilo.
Cómo agregar una tabla de contenido en Elementor
Necesitas Elementor y el complemento gratuito Master Addons, nada más. La página también necesita etiquetas de encabezado reales (H2, H3, etc.), porque la lista se construye a partir de ellas.
- Instalar y activar Addones maestros de WordPress.orgy verifique que la Tabla de contenido esté habilitada en el panel de complementos maestros.
- Abra su publicación o página con Elementor y busque en el panel de widgets Tabla de contenidos.
- Arrástrelo donde debería estar la lista, generalmente encima de la primera sección o en una columna de la barra lateral.
- En Contenido, establezca el título, elija un estilo de lista y elija las etiquetas de encabezado que se incluirán.
- Abierto Plegable y Desplazarse para agregar el interruptor, la flecha de atrás hacia arriba y un desplazamiento desplazado para su encabezado.
- Diseñe el título, el separador y los enlaces en la pestaña Estilo, luego obtenga una vista previa de la página y haga clic en algunos elementos para probar los saltos.
Cada entorno está cubierto en el Tabla de contenido Configuración del widget guía.
Crea la lista a partir de sus encabezados
Elige los niveles en Etiquetas de encabezado. H2, H3 y H4 se seleccionan de forma predeterminada y se puede agregar cualquiera de H1 a H6. Cuando la página se carga, el widget encuentra esos encabezados, le da a cada uno una identificación si no tiene ninguna y anida la lista por nivel de encabezado. Cambie el nombre o agregue un encabezado y la lista lo recogerá en la siguiente carga, por lo que no hay enlaces de anclaje que mantener a mano.
- Estilo de lista: Predeterminado (sin marcador), Balas o Números.
- Saltar un título: agregue la clase CSS
jltma-toc-hide-headingen la pestaña Avanzado de ese encabezado. - Mostrar separador: una línea opcional bajo el título con estilo, color, grosor y espaciado propios.
- Los ID de encabezado se crean a partir del texto del encabezado, por lo que también puede vincular directamente a una sección desde otro lugar.
Caja plegable para barras laterales y móviles
Encender Hacer que el contenido sea plegable y aparece un icono de alternancia junto al título. Los lectores hacen clic en él para abrir o cerrar la lista y se desliza en lugar de saltar. Encender Mantener colapsado inicialmente si desea que la caja se cargue mostrando solo su título, lo que ayuda en páginas legales largas y en columnas estrechas de la barra lateral.
- Controles de tamaño de icono y color de icono para alternar.
- El separador se retira con la lista.
- El widget no tiene una configuración propia y adhesiva. Para mantener el cuadro a la vista mientras la gente lee, haga que su columna sea adhesiva con su tema o con Elementor Pro Motion Effects.
Saltos suaves y una flecha de regreso a la cima
Al hacer clic en un elemento, la página se desplaza hacia abajo hasta su encabezado. Retraso de animación de desplazamiento (ms) establece cuánto tiempo tarda ese desplazamiento, 500 de forma predeterminada y hasta 2000. Con Desplazamiento suave sobre ti también obtienes Desplazamiento de desplazamiento suave (px), que no llega al encabezado, por lo que un encabezado fijo no lo cubre. Puede configurar un desplazamiento diferente para escritorio, tableta y dispositivos móviles.
- Desplácese hasta Arriba agrega una pequeña flecha en la esquina inferior derecha que muestra una vez que un visitante se desplaza hacia abajo.
- La flecha lleva a los lectores de regreso a la tabla de contenido o a la posición que configuró en Desplazamiento hasta el desplazamiento superior.
- Controles de tamaño, color de icono y color de fondo para la flecha.
- El elemento en el que hizo clic un lector mantiene el color activo en la sección Estilo de contenido, para que pueda ver dónde saltó.
Tabla de contenido de Elementor Pro frente a tabla de contenido de complementos maestros
El widget de tabla de contenido de Elementor necesita una licencia Elementor Pro y le brinda más control sobre qué encabezados aparecen y cómo se comporta la lista mientras se desplaza. Master Addons maneja el trabajo diario de forma gratuita y agrega una flecha de regreso a la parte superior.
| Característica | Elementor Pro | Complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Gratis con complementos maestros |
| Cuáles títulos | Anclajes por etiquetas (H1 a H6) más un selector de contenedor para limitar el área de búsqueda | Etiquetas de encabezado (H1 a H6) de la publicación principal o del contenido de la página |
| Dejando los rumbos afuera | Anclajes Por Selector, cualquier selector CSS | Clase CSS jltma-toc-hide-heading en cada encabezado |
| Marcadores | Números o Balas con un icono que elijas | Predeterminado, balas o números |
| Anidando | La vista jerárquica alterna y contrae subitems | Siempre anidado por nivel de encabezado |
| Colapso | Minimice Box con íconos de expansión y colapso, y un punto de interrupción donde comienza minimizado | Haga que el contenido sea plegable y manténgalo colapsado inicialmente |
| Artículo activo | Sigue la sección a la vista a medida que el lector se desplaza | Marca el elemento en el que hizo clic el lector |
| Se înlocuiește-te | No hay controles de velocidad o compensación en el widget | Retraso de animación de desplazamiento y desplazamiento suave por dispositivo |
| Volver a la flecha superior | Ninguno | Desplácese hasta Arriba con controles de tamaño y color |
Si ya paga por Elementor Pro y desea que la lista rastree al lector a medida que se desplaza, use su widget. Si desea una tabla de contenido gratuita con un cuadro plegable y una flecha de regreso a la parte superior, use esta. Relacionado: Barra de progreso de lectura, Acordeón avanzado y Contenido fuera del lienzo (Pro).
Preguntas frecuentes sobre el índice
¿el widget de tabla de contenido es gratuito?
Sí. Es parte del complemento gratuito Master Addons en WordPress.org, y cada configuración descrita en esta página está en la versión gratuita. El propio widget de tabla de contenidos de Elementor necesita Elementor Pro.
¿Cómo excluyo un título del índice?
Para eliminar un nivel completo, elimine esa etiqueta de las etiquetas de encabezado, por ejemplo H4. Para ocultar un encabezado, selecciónelo en Elementor, abra la pestaña Avanzado y agréguelo jltma-toc-hide-heading al campo Clases CSS. Permanece en la página pero queda fuera de la lista.
¿El elemento activo cambia a medida que el lector se desplaza?
No. El color activo en Estilo, el contenido estiliza el elemento en el que hace clic un lector y se mueve cuando hace clic en otro elemento. La lista no rastrea la sección en la pantalla mientras se desplaza. El widget de tabla de contenido de Elementor Pro hace eso.
¿Aparecerá la flecha de desplazamiento a la parte superior en cada página?
Sólo en páginas que contienen este widget con Desplazamiento a la parte superior activado. La flecha se encuentra en la esquina inferior derecha y se muestra después de que el visitante se haya desplazado aproximadamente 250 px hacia abajo en la página.
¿Puedo utilizar iconos personalizados para los marcadores de lista?
No desde el panel de widgets. El estilo de lista ofrece valores predeterminados, viñetas y números, y la sección Estilo de contenido establece la fuente y los colores. Los iconos de marcadores personalizados necesitarían su propio CSS. El widget de Elementor Pro tiene un selector de iconos para las balas.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
