Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

Si publica contenido extenso, agregar una tabla de contenido ayuda tanto a los motores de búsqueda como a los visitantes humanos a navegar y comprender su contenido.

Con el widget Widget de tabla de contenido para WordPress, puede agregar fácilmente una tabla de contenido a su sitio web que genera automáticamente su contenido en función de la jerarquía de etiquetas de título en su contenido.

Por ejemplo:

Cómo agregar contenido de tabla elemento de wordpress o etiqueta de blogpascher

Si usa este widget con el creador de temas visuales de Elementor Pro, puede agregar automáticamente una tabla de contenido a todo su contenido sin mover un dedo. Cuando un visitante hace clic en un enlace en la tabla de contenido, actúa como un ancla y lo lleva a esa sección de la página.

En esta publicación, le mostraremos exactamente cómo configurar el widget Widget de tabla de contenido para WordPress con Elementor Theme Builder.

Pero antes, descubramos juntos ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog.

Luego, volviendo a por qué estamos aquí.

Cómo agregar una tabla de contenido con Elementor

En primer lugar, debemos tener en cuenta que también puede utilizar este widget de forma básica. Sin embargo, en este tutorial, nos enfocamos en agregar automáticamente TOC a todo (o parte) de su contenido usando Elementor Theme Builder y plantillas de publicación única.

Aquí está cómo hacerlo.

1. Crea o modifica una plantilla de publicación única.

Para comenzar, use Elementor Theme Builder para crear una nueva plantilla de publicación única o edite cualquiera de sus plantillas de publicaciones únicas existentes donde desee agregar la tabla de contenido.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

Puede aplicar su plantilla a cualquier tipo de publicación (blog, página, tipo de publicación personalizada), pero nos centraremos en las publicaciones de blog.

2. Agregue el widget de tabla de contenido

Una vez que haya abierto su plantilla de publicación única, agregue el widget Tabla de contenidos donde desea que aparezca su tabla de contenido. Se encuentra en la categoría Único, con los widgets para el título y el contenido de la publicación:

Cómo agregar contenido de tabla wordpress elementor blogpascher 1

Una vez que haya agregado el widget, debería ver automáticamente una lista de todos los títulos que están presentes en la publicación.

Ahora es el momento de configurar los ajustes de este widget.

3. Configure la tabla de widgets

Asegúrese de abrir la Configuración para el widget Tabla de contenido. Entonces usa la pestaña Mi contenido para configurar el contenido que aparece en su tabla de contenido.

Primero, agregue el título, por ejemplo, "Tabla de contenido". Se trata de texto estático que aparece encima de la lista de enlaces de ancla que el widget genera automáticamente.

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

Luego elige el contenido que deseas incluir. En la pestaña Incluir, puedes pasar :

  • Etiqueta HTML. Por ejemplo, puede incluir y, pero nada menos. Necesita definir sus etiquetas de título en el editor de WordPress.
  • Contenedores. También puede agregar enlaces de anclaje a otros contenedores fuera del contenido de su publicación. Por ejemplo, el dedo del pie. Esta es una característica avanzada.

Cómo agregar contenido de tabla wordpress elementor blogpascher 2

Si accede a la pestaña Excluir, puede excluir encabezados específicos de su publicación usando un selector de CSS. Por ejemplo, si desea excluir un solo título , puedes agregar una clase CSS especial " pasar por alto A ese encabezado usando el editor de WordPress, luego excluirlo usando la regla  Anclajes por selector :

Cómo agregar contenido de tabla wordpress elementor blogpascher 3

Entonces puedes usar el parámetro Vista de marcador para elegir entre números y viñetas en su tabla de contenido. Si usted elige " balas ", puede elegir entre cualquier icono de Font Awesome.

Finalmente, puedes usar la sección Opciones adicionales para controlar otros parámetros:

Ajuste de línea - si los elementos pueden tomar varias líneas o no.

Minimizar caja - si los visitantes pueden contraer o no el índice. Si habilita esta opción, también podrá elegir iconos personalizados y definir el comportamiento de respuesta. Por ejemplo, puede contraer automáticamente esta tabla de contenido para visitantes móviles.

Vista jerárquica - cuando está habilitado, los subtítulos se sangrarán debajo de los encabezados principales. Si está deshabilitado, todo se muestra en una sola lista sin sangría.

Cómo agregar contenido de tabla wordpress elementor blogpascher 4

4. Configure los ajustes de estilo

A continuación, vaya a la pestaña Estilo para configurar el diseño de su tabla de contenido. Puede cambiar todos los colores y la tipografía para crear una experiencia fácil de usar y que coincida con el resto del diseño de su sitio web:

Cómo agregar contenido de tabla wordpress elementor blogpascher 5

5. Configure los ajustes avanzados

Para terminar, ve a la pestaña Avanzado para configurar algunos ajustes más sobre cómo funciona su tabla de contenido.

Por ejemplo, si configura Ancho  igual a Personalizado et Posición igual a fijo en la sección Posicionamiento, puede asegurarse de que la tabla de contenido permanezca en la misma posición incluso cuando los usuarios comiencen a desplazarse por la página.

Si utiliza Posicionamiento para mostrar su tabla de contenido encima de otro elemento (como su encabezado), también puede aumentar el índice Z para que aparezca en la parte superior:

Cómo agregar contenido de tabla wordpress elementor blogpascher 6

Y es todo ! Acaba de aprender cómo agregar automáticamente una tabla de contenido a su contenido utilizando el widget Elementor Visual Theme Builder y Tabla de contenido.

Para empezar, compra Elementor Pro hoy y cree su tabla de contenido en Elementor Theme Builder.