El bloque «Índice» genera automáticamente un menú de navegación en el que se puede hacer clic basado en los encabezados que se encuentran en tu página SeedProd. Los visitantes pueden echar un vistazo rápido a todas tus secciones y saltar directamente al contenido que necesitan, sin tener que desplazarse por toda la página.
Este bloque es especialmente útil para contenidos extensos, como guías detalladas, tutoriales, documentación de productos y páginas de destino con varias secciones. Tú controlas qué niveles de encabezado se incluyen, si se muestra la numeración, cómo se sangran los elementos anidados y si los visitantes pueden contraer el cuadro. El diseño es totalmente personalizable, con controles independientes de tipografía, color y bordes para el título, los enlaces y el contenedor.
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, después de una breve 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», los ajustes se organizan en dos grupos.
General:
- Mostrar título: Activa o desactiva la visualización del título encima del índice. Establece el valor en Sí para mostrar una etiqueta de encabezado o en No para mostrar solo los enlaces.
- Texto del título: Introduzca el texto que aparecerá como encabezado del índice cuando la opción Mostrar título esté activada (por defecto: «Índice»).
- Etiqueta de título: Elige la etiqueta de encabezado HTML que se usará para mostrar el título: H2, H3, H4 o DIV.
- Incluir encabezados: Introduzca una lista separada por comas de los niveles de encabezado que se deben buscar para los enlaces (por ejemplo, h2, h3, h4). Solo los encabezados que coincidan con estas etiquetas aparecerán en la navegación generada.
- Contenedor de contenido: Introduzca un selector CSS para limitar el escaneo de encabezados a un área específica de la página. Déjelo en blanco para escanear toda la página.
- Excluir selectores: Introduzca selectores CSS separados por comas para cualquier encabezado que desee omitir en la tabla de contenido.
- Mostrar números: Activar o desactivar la numeración automática de los elementos del índice (Sí/No).
- Numeración jerárquica: Utilice numeración anidada para los subtítulos cuando la opción Mostrar números esté activada (por ejemplo, 1.1, 1.2, 2.1).
- Desplazamiento suave: habilita una animación de desplazamiento suave cuando los visitantes hacen clic en un enlace del índice (Sí/No).
- Desplazamiento de desplazamiento (px): establece el número de píxeles para desplazar el destino del desplazamiento, lo que resulta útil cuando la página tiene un encabezado fijo que, de otro modo, ocultaría el encabezado de destino.
- Estilo de lista: Elija el estilo de viñeta para los elementos del índice: Ninguno, Disco, Círculo, Cuadrado o Decimal.
Opciones adicionales:
- Minimizar cuadro: Permite a los visitantes contraer y expandir todo el índice utilizando un botón de alternancia (Sí/No).
- Icono de expansión: Elija el icono que se muestra en el botón de alternancia cuando el índice está contraído.
- Icono de contraer: Elija el icono que se muestra en el botón de alternancia cuando se expande la tabla de contenido.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual y el comportamiento del bloque Tabla de contenido.
Estilos de título (visibles solo cuando la opción Mostrar título está habilitada):
- Tipografía del título: Establezca la familia tipográfica, el tamaño, el grosor, el estilo, la altura de línea, el espaciado entre letras y el uso de mayúsculas y minúsculas para el título del índice.
- Color del título: Elija el color del texto para el encabezado.
- Espaciado del título: Ajusta el margen inferior entre el título y la lista de enlaces (0-50 píxeles).
Estilos de enlace:
- Tipografía de enlaces: Establezca la familia de fuentes, el tamaño, el grosor, el estilo y otras propiedades tipográficas para los enlaces de navegación.
- Color del enlace: Establece el color predeterminado para los enlaces del índice.
- Color al pasar el cursor por encima del enlace: Establece el color que se muestra en los enlaces cuando los visitantes pasan el cursor por encima de ellos.
- Espaciado entre elementos: controla el espacio vertical entre cada elemento de la lista (0-30 píxeles).
- Sangría de lista: establece la sangría horizontal aplicada a los niveles de encabezado anidados (0-100 píxeles).
Estilos de contenedores:
- Color de fondo: Establece el color de fondo para todo el contenedor del índice.
- Ancho del contenedor: Ajuste el ancho del contenedor utilizando un control deslizante, con un selector de unidades para cambiar entre píxeles (0-1200) y porcentaje (0-100).
- Relleno del contenedor: establece el espacio interior entre los bordes del contenedor y el contenido que hay dentro (1-100 píxeles).
- Borde: añade y configura un borde alrededor del contenedor: elige el estilo del borde, establece anchuras individuales para cada lado (superior, derecho, inferior, izquierdo) y selecciona un color para el borde.
- Radio del borde: redondea las esquinas del contenedor (0-50 píxeles).
Espaciado:
- Margen: establece el espacio exterior alrededor del bloque en los cuatro lados, con controles independientes para ordenador, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: añade una o más clases CSS personalizadas al contenedor del bloque para aplicar un estilo específico.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puede utilizarlo para hacer referencia al bloque en CSS o JavaScript personalizados.
- Atributos personalizados: añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato clave|valor.
Posición:
- Posición: Establece la posición CSS del bloque (estática, relativa, fija, absoluta o adhesiva) con valores independientes para ordenadores de sobremesa, tabletas y dispositivos móviles.
- Desplazamiento: cuando utilices el posicionamiento fijo, absoluto o adhesivo, establece las distancias de desplazamiento superior, derecha, inferior e izquierda por dispositivo.
- Z-Index: Establece el orden de apilamiento del bloque en relación con otros elementos de la página, con valores por dispositivo.
- Desbordamiento: controla cómo se gestiona el contenido que se extiende más allá de los límites del bloque (visible, oculto, desplazamiento o automático) según el dispositivo.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Activa esta opción para ocultar el bloque cuando se vea en pantallas de escritorio.
- Ocultar en tableta: Activa esta opción para ocultar el bloque cuando se vea en pantallas de tableta.
- Ocultar en dispositivos móviles: Activa esta opción para ocultar el bloque cuando se vea en pantallas de dispositivos móviles.
Efectos de animación:
- Efecto de desplazamiento: aplica una animación activada por desplazamiento al bloque, incluyendo opciones de desplazamiento vertical y horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto ratón: aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
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 herramienta de navegación ayuda a los visitantes a comprender de inmediato la estructura de tu página y a acceder a las secciones más relevantes para ellos. Experimenta con los niveles de encabezado, los estilos de lista y el diseño de los contenedores para crear una tabla de contenido que se integre de forma natural en el diseño de tu página y mantenga el interés de tu público.