Cómo agregar una tabla de contenido a las publicaciones de tu blog en Elementor

Crear contenido de blog de forma larga es excelente para SEO, pero también puede hacer que sus publicaciones se sientan ... bueno, mucho. Desplácese a través de un artículo masivo sin saber dónde se encuentra o cuánto queda puede ser frustrante para los lectores. Ahí es donde una tabla de contenido (TOC) es útil.

Una tabla de contenido (TOC) actúa como un mapa, ayudando a los lectores a encontrar rápidamente lo que necesitan, saltar a una sección y obtener un mejor sentido de su estructura de contenido. Además, puede aumentar su SEO al habilitar fragmentos ricos en los resultados de búsqueda.

Si está utilizando Elementor para diseñar su sitio y publicaciones de blog, agregar una tabla de contenido es súper simple, especialmente cuando usa el complemento PowerPack Addons.

En esta guía, le mostraremos cómo agregar una tabla de contenido a su publicación de blog en Elemoror sin agregar ningún código HTML o CSS.

Por qué debes agregar una tabla de contenido

Antes de saltar a la tutela, hablemos rápidamente de por qué un TOC es una adición inteligente a las publicaciones de su blog.

• Mejora la experiencia del usuario: los lectores pueden saltar instantáneamente a la sección que los interesa.
• Boosts SEO: los motores de búsqueda a menudo muestran enlaces de TOC como enlaces de sitio, lo que puede mejorar las tasas de clics.
• Fomenta una participación más larga: al dar a los usuarios el control sobre la navegación, los mantiene en la página más tiempo.
• Reduce la tasa de rebote: los visitantes no se sienten abrumados por el contenido largo cuando pueden escatimar fácilmente.

Ahora entra en cómo puede agregar un TOC totalmente funcional y elegante en Elementer.

Cómo agregar una tabla de contenido a las publicaciones de su blog en Elemoror

Paso 1: Instale complementos de Powerpack para Elementor

Antes de continuar, asegúrese de haber instalado y activado complementos de PowerPack para Elementor en su sitio web. Para obtener más información, consulte nuestra guía sobre cómo instalar y activar PowerPack Addons Pro.

Paso 2: Habilitar el widget de la tabla de contenido

Una vez que el complemento está activo, es una buena idea asegurarse de que el widget de TOC esté realmente habilitado.

Para hacer esto, vaya a Elements Elements >> Powerpack >> en su tablero de WordPress. A partir de ahí, busque el widget "Tabla de contenido" y asegúrese de que la alternancia al lado esté encendida (azul).

Ahora estás listo para usarlo en Elemoror.

Paso 3: Crea una sola plantilla de publicación en Elementor

Para aplicar la tabla de contenido de manera consistente en todas las publicaciones de su blog, es mejor agregarla dentro de una sola plantilla de publicación.

Aquí está como:

• Vaya a plantillas >> Agregar nuevo.
• En el menú desplegable, elija una sola publicación.
• Dale un nombre a tu plantilla, como " Diseño del blog " o " plantilla de publicación ", y luego haga clic en " Crear plantilla ".

Elementor ahora le preguntará si desea comenzar desde un lienzo en blanco o usar un diseño preconstruido.

Paso 4: Use una plantilla de publicación prediseñada (opcional)

Si no desea construir el diseño desde cero, Elementor facilita la inserción de una plantilla preparada. Elija una de las opciones prediseñadas; Por lo general, incluirá elementos esenciales como el título de la publicación, la imagen destacada, el cuadro de autor y el contenido de la publicación.

Siempre puede modificarlos más tarde para adaptarse mejor al diseño de su blog.

Paso 5: Agregue la tabla de contenido widget a su plantilla

A continuación, necesitamos agregar la tabla de contenido widget.

En el panel Elementer, busque "Tabla de contenido". Cuando aparezca el widget (busque el icono PP en la esquina), arrastre y suelte en su diseño.

Un lugar común para colocar la tabla de contenido (TOC) está justo debajo del título de la publicación o la imagen destacada, pero puede colocarlo donde sea que tenga sentido para su contenido.

Una vez que agregue el widget, detectará y mostrará automáticamente todos los encabezados (como H2S y H3) de su publicación.

Paso 6: Personalizar la configuración de contenido

Con el widget en la página, verá una lista de todos los encabezados del contenido de su publicación. Ahora, personalizemos la tabla de contenido.

En la pestaña Contenido, encontrará varias configuraciones:

Puede cambiar el título de la tabla de contenido (TOC) a algo como "navegación rápida" o "en esta página". Si está pensando en el SEO y la accesibilidad, también puede ajustar la etiqueta HTML del título y establecerla como H2 o H3 , dependiendo de cómo se ajuste en su jerarquía.

Luego, hay configuraciones para incluir o excluir ciertos niveles de rumbo . Por ejemplo, solo debe mostrar H2S y H3S y omitir H4 y abajo. Y puede elegir el estilo de lista, ir con números para una sensación estructurada, paso a paso o balas para un aspecto más mínimo.

Paso 7: Explore funciones adicionales (opcional pero útil)

El widget de la tabla de contenido Powerpack viene repleta de características que ayudan a mejorar la usabilidad y el diseño.

Puede hacer que la tabla de contenido (TOC) se pueda plegar , lo cual es ideal para usuarios móviles o cuando desea mantener el diseño limpio. Agregue un icono para expandir/colapsar y especifique cuándo el widget debe colapsar en dispositivos móviles, tabletas, escritorio o todos los dispositivos.

También hay una opción de vista jerárquica . Esto muestra la relación entre H2S, H3S y H4s al sangrar subtidings bajo sus encabezados para padres. Si tiene una publicación detallada, crear una tabla de contenido (TOC) lo hace más organizado y más fácil de escanear.

Para publicaciones más largas, habilitar Sticky TOC en Scroll es muy útil. Mantiene el TOC visible a medida que los usuarios se desplazan para que puedan saltar entre secciones en cualquier momento. Incluso puede agregar un desplazamiento al botón superior directamente dentro del widget para ayudar a los usuarios a regresar rápidamente al comienzo de su publicación.

Si tiene un encabezado adhesivo en su sitio, considere ajustar el desplazamiento de desplazamiento para que los encabezados no estén ocultos detrás de él cuando un usuario hace clic en un enlace TOC.

Paso 8: diseñe el TOC para que coincida con su sitio

Ahora que la funcionalidad está configurada, nos aseguremos de que el widget se vea genial. En la pestaña Estilo, encontrará un conjunto completo de opciones de personalización:

• Estilización de caja: puede ajustar el color de fondo de TOC, el tipo de borde y el radio de borde e incluso agregar una sombra de caja para que se destaque. Si vas por un diseño limpio, un borde sutil y un fondo ligero funcionan maravillosamente.
• Estilización de encabezado: ¿Quieres personalizar el título de TOC? Puede establecer la alineación del texto, cambiar el relleno y ajustar los colores, la tipografía e íconos. Incluso puede agregar una línea de separador y personalizar su ancho y color.
• Estilización de la lista: aquí es donde personaliza los elementos de TOC reales los enlaces de la sección. Ajuste el relleno, cambie el texto y la tipografía de encabezado, elija la sangría para los subtítulos y personalice el estilo del marcador (como el color y el tamaño de la bala).

Con estas opciones de estilo, puede hacer que el TOC se sienta como una extensión natural de su sitio web en lugar de algo que acaba de caer.

Paso 9: Publicar y establecer condiciones

Una vez que todo se ve como quieras, continúe y presione publicar. Elementor le preguntará dónde mostrar esta plantilla.

Elija la condición 'incluir >> todas las publicaciones' para que la plantilla (y el TOC dentro) se aplique a cada publicación de blog en su sitio.

Haga clic en Guardar y cerrar , y ¡ya está!

Destacados clave del widget de la tabla de contenido Powerpack

El widget de la tabla de contenido Powerpack está repleta de características útiles que no solo mejoran la experiencia de lectura, sino que también le proporcionan un control completo sobre cómo aparece su tabla de contenido y funciona en su sitio web.

Personaliza fácilmente el título de la tabla

Puede personalizar el título de su tabla de contenido para que se ajuste mejor al tono o propósito de su publicación. Ya sea que desee nombrarlo "navegación rápida", "contenido" o "saltar a la sección", el widget Powerpack TOC le permite actualizarlo en solo unos pocos clics.

Incluir o excluir encabezados

Una de las características destacadas de este widget es la flexibilidad que le brinda cuando se trata de administrar los niveles de encabezado. Puede elegir qué etiquetas de encabezado (H1, H2, H3, etc.) deben aparecer en el TOC. Aún mejor, utilizando la funcionalidad selectora CSS incorporada, puede incluir específicamente o excluir secciones o encabezados particulares de su tabla, lo que le brinda un control completo sobre lo que aparece.

Elija su estilo de lista preferido

¿Quiere presentar su contenido en una lista limpia y minimalista o ir por un formato numerado más estructurado? Tienes opciones. El widget le permite establecer su estilo de lista en 'ninguno', 'balas' o 'números', dependiendo de su preferencia de diseño.

¿Largos encabezados? Ningún problema

Si sus encabezados tienden a ser largos, no se preocupe. Puede habilitar la opción Word Wrap para garantizar que el texto se rompa cuidadosamente y su tabla de contenido (TOC) permanezca limpia y alineada.

Colapsar el TOC basado en el tipo de dispositivo

Puede optar por colapsar la tabla de contenido de forma predeterminada, dependiendo del tipo de dispositivo: móvil, tableta o escritorio. Esto ayuda a mantener las cosas ordenadas en pantallas más pequeñas. Además, puede habilitar una vista jerárquica, permitiendo que los encabezados anidados (como los H3 bajo H2S) estén claramente sangrados y estructurados.

Mesa de contenido pegajosa para publicaciones largas

Para el contenido de forma larga, tener una tabla de contenido (TOC) que se desplaza con el usuario es un cambio de juego. La función Sticky TOC permite que la lista de contenidos se mantenga visible a medida que los visitantes del sitio se desplazan hacia abajo en la página. Esto les facilita saltar entre secciones en cualquier momento sin tener que desplazarse de regreso a la cima.

Las mejores prácticas para usar la tabla de contenido en las publicaciones de blog

Para aprovechar al máximo su TOC, tenga en cuenta estos consejos:

• Use una estructura de encabezado adecuada: comience con H2S para secciones principales, seguido de H3S y H4S según sea necesario. Evite omitir niveles, como pasar de H2 a H4, ya que esto puede confundir tanto a los lectores como a la tabla de contenido (TOC) en sí.
• Mantenga sus encabezados claros y concisos: recuerde, sus lectores los usarán para navegar su publicación. Mantenga la tabla de contenido (TOC) corta y plegable. Especialmente para usuarios móviles, habilitar el colapso puede mantener su diseño limpio.
• Vista previa de todos los dispositivos: asegúrese de que su tabla de contenido (TOC) aparezca correctamente y funcione correctamente en escritorios, tabletas y teléfonos móviles.

Preguntas frecuentes

Ques. ¿Puedo ocultar la tabla de contenido (TOC) en dispositivos móviles?

Ans. Sí, puede usar la configuración "colapso de colapso" para que el TOC se minimice de forma predeterminada en dispositivos móviles o tabletas.

Ques. ¿Se actualizará automáticamente cuando agregue nuevas secciones a mi publicación?

Ans. ¡Sí! El widget extrae dinámicamente etiquetas de encabezado de su contenido, por lo que se actualiza automáticamente.

Ques. ¿Puedo usar este widget fuera de las publicaciones de blog?

Ans. Absolutamente. Puede agregarlo a cualquier página de diseño de elementor, tipo de publicación personalizado o incluso una descripción del producto, siempre que haya etiquetas de encabezado para recoger.

¡Envolviendo!

Una tabla de contenido no es solo una característica de diseño; Es una actualización de usabilidad que puede mejorar la experiencia de sus lectores, aumentar el SEO y hacer que su contenido sea más atractivo.

Con complementos de Elementor y Powerpack, agregar y personalizar una tabla de contenido (TOC) es sorprendentemente fácil. Obtiene el control total sobre cómo se ve y se comporta, todo sin escribir una sola línea de código.

Puede hacer mucho más con los complementos PowerPack para Elementor. Hay más de 70 widgets creativos que puede usar para personalizar sus páginas de elementos. Si desea obtener más información sobre los complementos PowerPack para Elementor, consulte aquí.