Widget de tabla de contenido de Elementor, no se necesita Pro
El propio widget de Tabla de contenido de Elementor viene con Elementor Pro. El widget de Tabla de contenido en complementos maestros se ejecuta en Elementor sin Pro. 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. Los lectores pueden plegar el cuadro, una flecha de atrás hacia arriba los vuelve a abrir y una breve regla CSS mantiene el cuadro a la vista en una barra lateral.
Cómo agregar una tabla de contenido en Elementor
Necesita complementos Elementor y Master. Elementor Pro no es necesario. 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 y la flecha de atrás a arriba.
- 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.
Tabla de contenidos de un vistazo
Qué hace el widget, leído en Master Addons 3.2.3.
| Artículo | Widget de tabla de contenidos |
|---|---|
| Donde encuentra encabezados | Primero dentro de .entry-content, luego .page-content, luego el área de contenido de Elementor |
| Niveles de encabezado | Cualquiera de H1 a H6, con H2, H3 y H4 seleccionados de forma predeterminada |
| Deja un título | Agregue el encabezado jltma-toc-hide de clase CSS a ese encabezado |
| Estilo de lista | Predeterminado (sin marcador), Balas o Números |
| Anidando | Siempre anidado por nivel de encabezado |
| Caja plegable | Alternar junto al título, con Mantener colapsado inicialmente |
| Desplazamiento | Desplazamiento suave que se detiene aproximadamente 30 px por encima del encabezado |
| De nuevo arriba | Flecha en la esquina inferior derecha después de 250 px de desplazamiento |
| Artículo activo | El elemento en el que hizo clic por última vez el lector (sin desplazamiento espía) |
| Pegajoso | Sin interruptor; posición: pegajoso a través de CSS personalizado o Elementor Pro Motion Effects |
| Necesidades | Elementor y complementos maestros, ningún Elementor Pro |
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 un interruptor adhesivo propio. Para mantener el cuadro a la vista mientras la gente lee, consulte Haga que la tabla de contenido sea adhesiva a continuación.
Saltos suaves y una flecha de regreso a la cima
Al hacer clic en un elemento, la página se desplaza suavemente hasta su encabezado y se detiene aproximadamente 30 px por encima de él, por lo que el encabezado no queda al ras de la parte superior de la pantalla. Si su sitio tiene un encabezado fijo alto, las preguntas frecuentes a continuación tienen una solución CSS de dos líneas que mantiene los encabezados alejados de él.
- 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ó.
Haga que la tabla de contenidos sea pegajosa
El widget no tiene un interruptor adhesivo propio. Lo fija haciendo que el widget sea adhesivo dentro de una columna de la barra lateral, y Elementor sin Pro puede hacerlo a través de los complementos maestros Extensión CSS personalizada.
- Coloque el artículo y el índice en una fila: una columna ancha para el contenido y una columna estrecha para el widget de índice. Deje la columna estrecha a su altura predeterminada para que se extienda hasta la altura de la fila.
- Seleccione el widget Tabla de contenido, ábralo Avanzado, entonces los complementos maestros Css personalizado sección y pegar
selector { position: sticky; top: 32px; } - Aumente el valor superior si su sitio tiene un encabezado fijo, por ejemplo, 110px bajo un encabezado de 80px.
- Obtenga una vista previa de la página y desplácese. El cuadro permanece a la vista hasta el final de la fila.
Con Elementor Pro puedes usarlo Avanzado, Efectos de movimiento, Pegajoso: Arriba en su lugar, con la columna Permanecer en encendido activada.
Dos cosas dejan de funcionar: un contenedor principal con el desbordamiento configurado en oculto y una columna de barra lateral que no es más alta que la caja. En los teléfonos, la barra lateral cae debajo del artículo, así que active Hacer que el contenido sea plegable allí u oculte esta copia en el móvil y coloque una tabla de contenido colapsada encima del artículo.
El demostración de barra lateral pegajosa a mitad de página. El cuadro permanece en la parte superior de la columna mientras el artículo se desplaza.
La regla estricta en la sección CSS personalizado de complementos maestros del widget.
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 de 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 sin Pro y agrega una flecha de regreso a la parte superior.
| Característica | Elemento Pro | Complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Incluido en los complementos maestros, no Elementor Pro |
| 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 | Desplazamiento suave que se detiene aproximadamente 30 px por encima del encabezado |
| Pegajoso | No hay configuración en el widget; utilice Motion Effects Sticky en el widget o su columna | No hay configuración en el widget; agregue la posición: pegajoso con CSS personalizado o use Motion Effects Sticky con Pro |
| 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 contenidos sin Elementor Pro, con un cuadro plegable y una flecha de regreso a la parte superior, use esta.
Combina bien con: Barra de progreso de lectura para un bar que se llena mientras la gente lee Acordeón avanzado y Pestañas para doblar secciones largas, Contenido fuera del lienzo (Pro) para un menú deslizable y blog para las listas de publicaciones, esos artículos largos se encuentran.
¿complemento de tabla de contenido o un widget Elementor?
WordPress tiene dos tipos de índice: complementos que funcionan en el contenido de la publicación y widgets que coloca en el editor Elementor. El correcto depende de cómo se construye la página.
| Opción | Donde funciona | Mejor para |
|---|---|---|
| Tabla de contenidos de complementos maestros | En cualquier lugar donde lo coloques en Elementor, incluidas las plantillas | Sitios de Elementor que desean que la caja tenga el diseño y una flecha de regreso a la parte superior |
| Tabla de contenidos de Elementor Pro | En cualquier lugar de Elementor, con licencia Elementor Pro | Sitios que ya están en Pro y que desean que el elemento activo siga el desplazamiento |
| Tabla de contenido sencilla, LuckyWP | Publicar contenido, insertado automáticamente o con un código corto | Blogs escritos en el editor de bloques o en el Editor Clásico |
| Rango Bloque de índice de matemáticas | Bloquee publicaciones de editores en sitios que utilizan Rank Math | Publicaciones de Gutenberg que sólo necesitan una lista sencilla |
Nuestro resumen de los mejores complementos de índice para WordPress compara ocho de ellos, con recuentos de instalación, códigos cortos y opciones adhesivas.
Tabla de contenidos Ejemplos
Cuatro demostraciones en vivo creadas con el widget. Abra uno y luego importe el mismo diseño desde el Visor de plantillas a continuación.
- Barra lateral pegajosa: una lista numerada en una columna estrecha que permanece a la vista mientras el artículo se desplaza, H3 anidados debajo de sus H2 y un encabezado omitido con jltma-toc-hide-heading.
- Listar estilos: Predeterminado, Balas y Números uno al lado del otro, construidos a partir de los mismos títulos.
- Página de Términos y Condiciones: el cuadro en una barra lateral derecha que enumera cada sección de una página legal larga.
- Página de política de privacidad: el cuadro de la izquierda, con el elemento en el que se hizo clic en el color Activo.
Los tres estilos de lista en los mismos títulos.
Preguntas frecuentes sobre el índice
¿necesito Elementor Pro para este índice?
No. El widget de Tabla de contenido es parte de los complementos maestros y se ejecuta en Elementor sin Pro. Se incluyen todas las configuraciones de esta página. El propio widget de Tabla de contenidos de Elementor es el que 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.
¿Puedo hacer que el índice sea pegajoso?
Sí, aunque no desde un interruptor en el widget. Colóquelo en una columna de la barra lateral y luego agréguelo selector { position: sticky; top: 32px; } en CSS avanzado y personalizado. Con Elementor Pro puedes usar Motion Effects, Sticky en su lugar. Aumente el valor superior si hay un encabezado fijo encima.
¿Cómo mantengo la tabla de contenidos expandida o colapsada cuando se carga la página?
Active Hacer que el contenido sea plegable. Con Keep Collapsed Inicialmente desactivado, la caja se carga abierta y los lectores pueden plegarla. Con él encendido, la caja se carga mostrando solo su título. No hay configuración por dispositivo, por lo que para una caja cerrada en teléfonos y otra abierta en escritorio, use dos copias y oculte cada una en Avanzado, Responsivo.
¿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.
¿por qué mi índice está vacío o enumera los encabezados incorrectos?
El widget busca encabezados dentro de .entry-content primero, luego .page-content, luego el área de contenido de Elementor y solo para las etiquetas elegidas en Heading Tags. Un cuadro vacío muestra “Agregar un encabezado para comenzar a generar la tabla de contenido” y generalmente significa que los encabezados usan una etiqueta que no seleccionó ni se sentó fuera de esa área. Si un complemento de almacenamiento en caché retrasa JavaScript hasta el primer desplazamiento o clic, la lista permanece vacía hasta entonces, así que excluya los scripts de complementos maestros del retraso.
Un encabezado fijo cubre el encabezado después de un salto. ¿Cómo lo arreglo?
El salto se detiene aproximadamente 30 px por encima del encabezado, lo cual no es suficiente debajo de un encabezado fijo alto. Agregue esto en Apariencia, Personalizar, CSS adicional: .elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; } Luego, cada encabezado cae 90 px más abajo y se ve igual en la página. Utilice la altura de su encabezado más un poco de espacio.
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
