¡Cree fácilmente su sitio web hoy!

¡ELEMENTOR es la herramienta de blogs más fácil del mundo!

parada perder tiempo y mucho dinero para pagar a un desarrollador cuando se puede Crea fácilmente tu sitio web o blog con un diseño profesional solo unos minutos ! No se requieren conocimientos técnicos.

Si publica contenido largo, agregar una tabla de contenido ayuda tanto a los motores de búsqueda como a visitantes humanos para 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 está utilizando este widget con el generador 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 Creador de temas.

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.

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 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.

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 el visitantes puede o no colapsar la tabla de contenido. Si habilita esta opción, también podrá elegir iconos personalizados y establecer un comportamiento receptivo. Por ejemplo, puede colapsar 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 combinar con el resto de su diseño. 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 Mínimo  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.

%d bloggers les gusta esta página: