El bloque de Pestañas de Datos del Producto muestra la descripción del producto de WooCommerce, información adicional y reseñas de clientes en un diseño de pestañas en tus Plantillas de Producto Único. En lugar de presentar toda la información del producto en un solo bloque desplazable, la interfaz de pestañas la organiza en secciones claramente etiquetadas que los compradores pueden navegar con un solo clic.
Este bloque está diseñado exclusivamente para su uso en Plantillas de Producto Único y requiere que WooCommerce esté instalado. Puedes personalizar completamente la apariencia tanto de las pestañas como de sus paneles de contenido —incluyendo colores, tipografía, bordes, espaciado y sombras— para que coincidan con el diseño de tu tienda.
Añadir el Bloque de Pestañas de Datos del Producto a tus Páginas
Sigue estos pasos para añadir un bloque de Pestañas de Datos del Producto a tu Plantilla de Producto Único de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > Etiquetas de Plantilla de WooCommerce, arrastra y suelta el bloque Pestañas de Datos del Producto en la sección deseada de tu Plantilla de Producto Único.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Pestañas de Datos del Producto para abrir su configuración. La pestaña Contenido se divide en dos secciones colapsables — Pestañas y Panel — donde puedes estilizar los botones de las pestañas y el área de contenido debajo de ellos.
Pestañas:
- Normal: Activa para mostrar la configuración de color de las pestañas en su estado predeterminado (no seleccionado). Establece el Color del Texto, el Color de Fondo y el Color del Borde para las pestañas inactivas.
- Activa: Activa para mostrar la configuración de color de la pestaña seleccionada actualmente. Establece el Color del Texto, el Color de Fondo y el Color del Borde para el estado de la pestaña activa, permitiendo que destaque claramente de las pestañas inactivas.
- Tipografía de Pestaña: Establece la familia de fuentes, el tamaño, el peso, la altura de línea y el espaciado entre letras para el texto de la etiqueta de la pestaña.
- Radio del Borde: Establece el redondeo de las esquinas (0–100px) para los botones de las pestañas. Aumenta este valor para crear pestañas redondeadas o en forma de píldora.
Panel:
- Color del Texto: Establece el color de texto predeterminado para el contenido mostrado dentro del área del panel.
- Tipografía del Panel: Establece la familia de fuentes, el tamaño, el peso y el estilo para el texto del cuerpo dentro de cada panel.
- Color del Encabezado: Establece el color para cualquier elemento de encabezado (h2, h3, etc.) mostrado dentro del contenido del panel.
- Tipografía del Encabezado: Establece la familia de fuentes, el tamaño, el peso y el estilo para el texto del encabezado del panel.
- Relleno del Panel: Establece el espaciado interior alrededor del contenido dentro del área del panel.
- Sombra del Panel: Añade un efecto de sombra al área del panel — elige entre tamaños de sombra preestablecidos para dar al panel profundidad y separación del fondo de la página.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes refinar los bordes, el espaciado y la visibilidad de tu bloque de Pestañas de Datos del Producto.
Borde del panel:
- Radio del borde del panel: Establece el redondeo de las esquinas para el área de contenido del panel.
- Ancho del borde del panel: Establece el grosor del borde para cada lado del panel (Superior, Derecho, Inferior, Izquierdo).
- Estilo y color del borde del panel: Elige un estilo de borde (Sólido, Punteado o Discontinuo) y establece un color de borde para el área del panel.
Borde del bloque:
- Radio del borde: Establece el redondeo general de las esquinas para todo el bloque de Pestañas de Datos del Producto.
- Ancho del borde: Establece el grosor del borde por lado para el contenedor exterior del bloque.
- Estilo y color del borde: Elige un estilo y color de borde para el contenedor exterior del bloque.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Pestañas de Datos del Producto (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre las pestañas y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Pestañas de Datos del Producto (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido de las pestañas y los bordes del bloque.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de Pestañas de Datos del Producto. Esta ID es creada automáticamente por SeedProd para personalización o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-section|tabs).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Pestañas de Datos del Producto en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Pestañas de Datos del Producto en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Pestañas de Datos del Producto en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Pestañas de Datos del Producto entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Pestañas de Datos del Producto y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Pestañas de Datos del Producto a tu Plantilla de Producto Único! El bloque extrae automáticamente la descripción del producto, información adicional y reseñas de clientes de WooCommerce y las organiza en una interfaz limpia con pestañas. Utiliza los ajustes de color de las pestañas para diferenciar los estados activo e inactivo, y ajusta la tipografía y los bordes del panel para crear una experiencia de página de producto coherente que mantenga a los compradores interesados.