El bloque «Índice» genera automáticamente un menú de navegación en el que se puede hacer clic basado en los encabezados del contenido de la página. Este bloque ayuda a los visitantes a examinar rápidamente y navegar a secciones específicas de la página, lo que mejora la experiencia del usuario y hace que el contenido extenso sea más accesible.
Los bloques de tabla de contenido son especialmente útiles para guías detalladas, tutoriales, documentación de productos, entradas de blog y cualquier página con varias secciones a las que los usuarios quieran acceder directamente.
Añadir el bloque «Índice» a tus páginas
Sigue estos pasos para añadir un bloque de tabla de contenido a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastre y suelte el bloque Tabla de contenido en la sección deseada de su página. Este bloque suele colocarse cerca de la parte superior del contenido de la página, después de la introducción pero antes de que comiencen las secciones principales.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque «Índice» para abrir su configuración. En la pestaña «Contenido», encontrarás varias opciones para personalizar el funcionamiento de tu índice:
Configuración general:
- Mostrar título: Activa o desactiva la visualización de un título encima del índice (por ejemplo, «Índice» o «En esta página»).
- Texto del título: Personaliza el texto que aparece como título.
- Etiqueta de título: Elige la etiqueta de encabezado HTML para el título (H2, H3, H4 o DIV).
- Incluir encabezados: especifique qué niveles de encabezado desea incluir en la tabla de contenido utilizando una lista separada por comas (por ejemplo, h2, h3, h4). Esto determina qué encabezados de su página aparecerán como enlaces.
- Contenedor de contenido: Introduzca el selector CSS del contenedor en el que SeedProd debe buscar los encabezados. Déjelo en blanco para escanear toda la página.
- Excluir selectores: Añade selectores CSS para cualquier encabezado que desees excluir de la tabla de contenido (separados por comas).
Opciones de visualización:
- Mostrar números: Añade numeración automática a los elementos de tu tabla de contenido (por ejemplo, 1, 2, 3).
- Numeración jerárquica: Utilice numeración anidada para los subtítulos (por ejemplo, 1.1, 1.2, 2.1).
- Desplazamiento suave: habilita la animación de desplazamiento suave cuando los usuarios hacen clic en los enlaces del índice.
- Desplazamiento de desplazamiento: Establece el número de píxeles para desplazar la posición de desplazamiento, útil cuando tienes un encabezado fijo.
- Estilo de lista: Elija el estilo de viñeta para su tabla de contenido (Ninguno, Disco, Círculo, Cuadrado o Decimal).
Opciones adicionales:
- Minimizar cuadro: permite a los usuarios contraer y expandir la tabla de contenido con un botón de alternancia.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puede personalizar el aspecto visual de su tabla de contenido:
Estilos de título:
- Tipografía del título: Ajuste la familia tipográfica, el tamaño, el grosor y la altura de línea del título.
- Color del título: Establece el color del texto del título.
- Espaciado del título: controla el espaciado alrededor del título.
Estilos de enlace:
- Tipografía de enlaces: personaliza la configuración de la fuente para los enlaces del índice.
- Color del enlace: Establece el color predeterminado para los enlaces.
- Color al pasar el cursor por encima del enlace: elige el color que se mostrará cuando los usuarios pasen el cursor por encima de los enlaces.
- Espaciado entre elementos: Ajuste el espacio entre cada elemento del índice.
- Sangría de lista: controla la sangría para los niveles de encabezado anidados.
Estilos de contenedores:
- Color de fondo: Establece el color de fondo del contenedor del índice.
- Ancho del contenedor: Ajuste el ancho en píxeles o porcentaje.
- Relleno del contenedor: añade espacio interno dentro del contenedor.
- Borde: Añadir y personalizar bordes alrededor de la tabla de contenido.
- Radio del borde: crea esquinas redondeadas para el contenedor.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Tabla de contenido y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de tabla de contenido a tu página! Esta potente herramienta de navegación ayuda a los visitantes a encontrar exactamente lo que buscan, mejorando la interacción y la experiencia del usuario. Prueba diferentes estilos y configuraciones para crear una tabla de contenido que se adapte a tu marca y satisfaga a tu público.