El bloque de 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 instantáneamente entre secciones, manteniendo tus páginas limpias, enfocadas 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 colores de pestañas, tipografía, bordes y relleno. Las plantillas prediseñadas te permiten aplicar un aspecto pulido con un solo clic, mientras que la pestaña Avanzado te brinda un control granular 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 de 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 de Pestañas para abrir su configuración. En la pestaña Contenido, la sección Pestañas te permite crear y administrar todos tus paneles de pestañas:
- Nombre de la pestaña: Introduce la etiqueta que aparece en cada botón de pestaña. Haz clic en cualquier elemento de pestaña existente para expandirlo y editar su nombre, icono y contenido.
- Icono: Asigna opcionalmente un icono a cada pestaña usando el selector de iconos. El icono aparece junto a la etiqueta de la pestaña en la barra de pestañas.
- Contenido: Introduce el contenido del cuerpo para cada panel de pestaña. Cada pestaña tiene su propia área de contenido independiente.
- Añadir nuevo elemento: Haz clic en este botón para añadir paneles de pestañas adicionales al bloque.
- Eliminar / Duplicar: Cada elemento de pestaña incluye opciones para eliminarlo o crear una copia con la misma configuración y contenido.
- Ocultar icono de pestaña: Activa esta opción para mostrar u ocultar iconos en todas las pestañas a la vez.
- Color del icono: Establece un color para todos los iconos de las pestañas usando el selector de color.
- Tamaño de fuente: Ajusta el tamaño de fuente de las etiquetas de las pestañas.
- Espacio entre: Establece la separación entre los botones de pestaña adyacentes.
- Alineación: Elige la alineación horizontal de la barra de pestañas: Izquierda, Centro o Derecha.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes aplicar un estilo visual prediseñado a tu bloque de Pestañas con un solo clic. Hay siete diseños preestablecidos disponibles, que van desde un estilo predeterminado minimalista hasta opciones más decorativas con bordes, fondos y tratamientos de iconos. La selección de una plantilla actualiza instantáneamente los colores, bordes y diseño del bloque para que coincidan con el diseño elegido.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, la sección Estilos te da control total sobre la apariencia 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 columna junto al panel de contenido).
- Tipografía de pestañas: Establece la fuente, tamaño, grosor, estilo, altura de línea, espaciado entre letras y mayúsculas/minúsculas para las etiquetas de las pestañas.
- Color de pestaña: Elija el color del texto para las etiquetas de pestaña inactivas.
- Color de fondo de pestaña: Establezca el color de fondo para las pestañas inactivas.
- Color de pestaña activa: Establezca el color del texto para la pestaña seleccionada actualmente.
- Fondo de pestaña activa: Establezca el color de fondo para la pestaña seleccionada actualmente.
- Radio de borde de pestaña: Redondee las esquinas de los botones de pestaña con un control deslizante de 0 a 100.
- Estilo de borde: Elija un estilo de borde para los botones de pestaña: Sólido, Punteado o Discontinuo.
- Ancho del borde: Establezca el grosor del borde en cada lado (Superior, Derecho, Inferior, Izquierdo) de los botones de pestaña.
- Color del borde: Elija el color del borde para los botones de pestaña.
- Relleno de pestaña: Controle 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 peso, el estilo, la altura de línea, el espaciado entre letras y la capitalización del texto del cuerpo del panel de pestañas.
- Fondo del contenido: Establezca el color de fondo del área del panel de contenido.
- Color del texto: Establezca el color del texto dentro del panel de contenido.
- Radio de borde del contenido: Redondee las esquinas del cuadro del panel de contenido con un control deslizante de 0 a 100.
- Estilo de borde del contenido: Elija un estilo de borde para el panel de contenido: Sólido, Punteado o Discontinuo.
- Color del borde del contenido: Elija el color del borde del panel de contenido.
- Ancho del borde del contenido: Establezca el grosor del borde en cada lado (Superior, Derecho, Inferior, Izquierdo) del panel de contenido.
- Relleno del contenido: Controle el espaciado interior dentro del panel de contenido.
- Sombra del texto: Agregue una sombra al texto del panel de contenido, con ajustes preestablecidos de tamaño que van desde Ninguno hasta 2X Grande.
La pestaña Avanzado también proporciona controles para el espaciado (margen y relleno), atributos CSS personalizados, visibilidad por dispositivo y animaciones de entrada.
Paso 4: Guarde sus Cambios
Una vez que haya terminado de configurar el bloque de Pestañas y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Ha agregado con éxito un bloque de Pestañas a su página! Las pestañas son una forma potente de presentar una gran cantidad de contenido en un formato compacto y fácil de usar, manteniendo a los visitantes interesados sin abrumarlos con una página de desplazamiento larga. Experimente con diseños horizontales y verticales, estilos de plantilla y combinaciones de colores para crear una sección de pestañas que encaje perfectamente en su diseño.