El bloque de Tabla de Contenidos 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 de SeedProd. Los visitantes pueden escanear todas tus secciones de un vistazo y saltar directamente al contenido que necesitan, sin tener que desplazarse por toda la página.
Este bloque es especialmente útil para contenido extenso, 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 muestran los números, cómo se anidan los elementos, y si los visitantes pueden contraer el cuadro. El diseño es totalmente personalizable con controles de tipografía, color y borde independientes para el título, los enlaces y el contenedor.
Añadir el Bloque de Tabla de Contenidos a tus Páginas
Sigue estos pasos para añadir un bloque de Tabla de Contenidos a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Tabla de Contenidos en la sección deseada de tu página. Este bloque se suele colocar cerca de la parte superior de tu 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 de Tabla de Contenidos para abrir su configuración. En la pestaña Contenido, la configuración se organiza en dos grupos.
General:
- Mostrar Título: Activa o desactiva si se muestra un título encima de la tabla de contenidos. Configúralo en Sí para mostrar una etiqueta de encabezado, o en No para mostrar solo enlaces.
- Texto del Título: Introduce el texto que aparece como encabezado de la tabla de contenidos cuando Mostrar Título está activado (por defecto: “Tabla de Contenidos”).
- Etiqueta del Título: Elige la etiqueta de encabezado HTML que se utiliza para mostrar el título: H2, H3, H4 o DIV.
- Incluir Encabezados: Introduce una lista separada por comas de los niveles de encabezado para buscar enlaces (por ejemplo, h2,h3,h4). Solo los encabezados que coincidan con estas etiquetas aparecerán en la navegación generada.
- Contenedor de Contenido: Introduce un selector CSS para limitar la búsqueda de encabezados a un área específica de la página. Déjalo en blanco para escanear toda la página.
- Excluir Selectores: Introduce selectores CSS separados por comas para cualquier encabezado que quieras omitir de la tabla de contenidos.
- Mostrar Números: Activa o desactiva la numeración automática para los elementos de la tabla de contenidos (Sí/No).
- Numeración Jerárquica: Usa numeración anidada para los sub-encabezados cuando Mostrar Números esté activado (por ejemplo, 1.1, 1.2, 2.1).
- Desplazamiento Suave: Activa una animación de desplazamiento suave cuando los visitantes hagan clic en un enlace de la tabla de contenidos (Sí/No).
- Desplazamiento de Compensación (px): Establece el número de píxeles para compensar el destino del desplazamiento; útil cuando tu página tiene una cabecera fija que de otro modo ocultaría el encabezado de destino.
- Estilo de Lista: Elige el estilo de viñeta para los elementos de la tabla de contenidos: Ninguno, Disco, Círculo, Cuadrado o Decimal.
Opciones Adicionales:
- Minimizar cuadro: Permita que los visitantes colapsen y expandan toda la tabla de contenido usando un botón de alternancia (Sí/No).
- Icono de expansión: Elija el icono que se muestra en el botón de alternancia cuando la tabla de contenido está colapsada.
- Icono de colapso: Elija el icono que se muestra en el botón de alternancia cuando la tabla de contenido está expandida.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puede personalizar la apariencia visual y el comportamiento de su bloque de Tabla de Contenido.
Estilos del título (visible solo cuando Mostrar título está habilitado):
- Tipografía del título: Establezca la familia de fuentes, tamaño, grosor, estilo, altura de línea, espaciado entre letras y mayúsculas/minúsculas para el encabezado de la tabla de contenido.
- Color del título: Elija el color del texto para el encabezado.
- Espaciado del título: Ajuste el margen inferior entre el título y la lista de enlaces (0–50px).
Estilos de enlace:
- Tipografía del enlace: Establezca la familia de fuentes, tamaño, grosor, estilo y otras propiedades tipográficas para los enlaces de navegación.
- Color del enlace: Establezca el color predeterminado para los enlaces de la tabla de contenido.
- Color al pasar el ratón sobre el enlace: Establezca el color que muestran los enlaces cuando los visitantes pasan el ratón sobre ellos.
- Espaciado entre elementos: Controle el espacio vertical entre cada elemento de la lista (0–30px).
- Sangría de lista: Establezca la sangría horizontal aplicada a los niveles de encabezado anidados (0–100px).
Estilos del contenedor:
- Color de fondo: Establezca el color de fondo para todo el contenedor de la tabla de contenido.
- Ancho del contenedor: Ajuste el ancho del contenedor usando un control deslizante, con un interruptor de unidad para cambiar entre píxeles (0–1200) y porcentaje (0–100).
- Relleno del contenedor: Establezca el espaciado interior entre los bordes del contenedor y el contenido interior (1–100px).
- Borde: Agregue y configure un borde alrededor del contenedor: elija el estilo del borde, establezca anchos individuales para cada lado (Superior, Derecho, Inferior, Izquierdo) y elija un color de borde.
- Radio del borde: Redondee las esquinas del contenedor (0–50px).
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, 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 una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Posición:
- Posición: Establezca el posicionamiento CSS del bloque: Estático, Relativo, Fijo, Absoluto o Pegajoso, con valores independientes para escritorio, tableta y móvil.
- Desplazamiento: Al usar posicionamiento Fijo, Absoluto o Pegajoso, establezca las distancias de desplazamiento Superior, Derecho, Inferior e Izquierdo por dispositivo.
- Z-Index: Establezca el orden de apilamiento del bloque en relación con otros elementos de la página, con valores por dispositivo.
- Desbordamiento: Controle cómo se maneja el contenido que se extiende más allá de los límites del bloque: Visible, Oculto, Desplazamiento o Automático, por dispositivo.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que haya terminado de configurar el bloque de Tabla de Contenido y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has agregado con éxito un bloque de Tabla de Contenidos 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 llegar a las secciones más relevantes para ellos. Experimenta con los niveles de encabezado, los estilos de lista y el estilo del contenedor para crear una tabla de contenidos que se sienta natural dentro del diseño de tu página y mantenga a tu audiencia interesada.