El bloque Pestañas te permite organizar y mostrar contenido en varios paneles intercambiables en una sola página de SeedProd. En lugar de apilar toda tu información verticalmente, las pestañas permiten a los visitantes navegar entre secciones al instante, lo que mantiene tus páginas limpias, centradas y fáciles de leer.
El bloque admite diseños de pestañas horizontales y verticales, iconos por pestaña, contenido de texto enriquecido en cada panel y un conjunto completo de controles de estilo para los colores, la tipografía, los bordes y el relleno de las pestañas. Las plantillas prediseñadas te permiten aplicar un aspecto pulido con un solo clic, mientras que la pestaña Avanzado te ofrece un control detallado sobre cada detalle visual.
Añadir el bloque de pestañas a tus páginas
Sigue estos pasos para añadir un bloque de pestañas a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Pestañas en la sección deseada de tu página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Pestañas para abrir su configuración. En la pestaña Contenido, la sección Pestañas te permite crear y gestionar todos tus paneles de pestañas:
- Nombre de la pestaña: Introduzca la etiqueta que aparecerá en cada botón de pestaña. Haga clic en cualquier elemento de pestaña existente para expandirlo y editar su nombre, icono y contenido.
- Icono: Opcionalmente, asigne un icono a cada pestaña utilizando el selector de iconos. El icono aparecerá junto a la etiqueta de la pestaña en la barra de pestañas.
- Contenido: Introduzca el contenido del cuerpo para cada panel de pestañas. Cada pestaña tiene su propia área de contenido independiente.
- Añadir nuevo elemento: Haga clic en este botón para añadir paneles de pestañas adicionales al bloque.
- Eliminar/Duplicar: cada elemento de la pestaña incluye opciones para eliminarlo o crear una copia con la misma configuración y contenido.
- Ocultar icono de pestaña: Active o desactive esta opción para mostrar u ocultar los iconos de todas las pestañas a la vez.
- Color del icono: Establece un color para todos los iconos de pestañas utilizando el selector de color.
- Tamaño de fuente: Ajusta el tamaño de fuente de las etiquetas de las pestañas.
- Espacio entre: Establece el espacio entre botones de pestañas adyacentes.
- Alineación: Elige la alineación horizontal de la barra de pestañas: izquierda, centrada o derecha.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puedes aplicar un estilo visual predefinido a tu bloque Pestañas con un solo clic. Hay siete diseños predefinidos disponibles, que van desde un estilo predeterminado minimalista hasta opciones más decorativas con bordes, fondos y tratamientos de iconos. Al seleccionar una plantilla, los colores, los bordes y el diseño del bloque se actualizan instantáneamente para adaptarse al diseño elegido.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, la sección Estilos te ofrece un control total sobre el aspecto tanto de la barra de pestañas como de los paneles de contenido:
Estilos de la barra de pestañas:
- Diseño de pestañas: Cambia entre horizontal (pestañas dispuestas en fila) y vertical (pestañas apiladas en una columna junto al panel de contenido).
- Tipografía de pestañas: Establezca la fuente, 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 las etiquetas de las pestañas.
- Color de la pestaña: Elige el color del texto para las etiquetas de las pestañas inactivas.
- Color de fondo de la pestaña: Establece el color de fondo de las pestañas inactivas.
- Color de la pestaña activa: Establece el color del texto de la pestaña seleccionada actualmente.
- Fondo de la pestaña activa: Establece el color de fondo de la pestaña seleccionada actualmente.
- Radio del borde de la pestaña: redondea las esquinas de los botones de las pestañas utilizando un control deslizante de 0 a 100.
- Estilo del borde: Elija un estilo de borde para los botones de pestaña: sólido, punteado o discontinuo.
- Ancho del borde: Establece el grosor del borde en cada lado (superior, derecho, inferior, izquierdo) de los botones de la pestaña.
- Color del borde: Elige el color del borde de los botones de las pestañas.
- Relleno de pestañas: controla el espaciado interior (superior, derecho, inferior, izquierdo) dentro de cada botón de pestaña.
Estilos del panel de contenido:
- Tipografía del contenido: Establezca la fuente, 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 texto del cuerpo del panel de pestañas.
- Fondo del contenido: Establece el color de fondo del área del panel de contenido.
- Color del texto: Establezca el color del texto dentro del panel de contenido.
- Radio del borde del contenido: redondea las esquinas del cuadro del panel de contenido utilizando un control deslizante de 0 a 100.
- Estilo del borde del contenido: elige un estilo de borde para el panel de contenido: sólido, punteado o discontinuo.
- Color del borde del contenido: elige el color del borde del panel de contenido.
- Ancho del borde del contenido: Establece el grosor del borde en cada lado (superior, derecho, inferior, izquierdo) del panel de contenido.
- Relleno del contenido: controla el espacio interior del panel de contenido.
- Sombra de texto: añade una sombra al texto del panel de contenido, con tamaños predefinidos que van desde Ninguno hasta 2X Grande.
La pestaña Avanzado también ofrece controles para el espaciado (márgenes y relleno), atributos CSS personalizados, visibilidad del dispositivo y animaciones de entrada.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Pestañas y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de pestañas a tu página! Las pestañas son una forma eficaz de presentar una gran cantidad de contenido en un formato compacto y fácil de usar, lo que mantiene el interés de los visitantes sin abrumarlos con una página larga que hay que desplazarse. Experimenta con diseños horizontales y verticales, estilos de plantilla y combinaciones de colores para crear una sección con pestañas que se adapte perfectamente a tu diseño.