El bloque «Pestañas de datos del producto » muestra la descripción del producto de WooCommerce, información adicional y opiniones de los clientes en un diseño con pestañas en tus plantillas de producto único. En lugar de presentar toda la información del producto en un único bloque desplazable, la interfaz con pestañas la organiza en secciones claramente etiquetadas por las 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 la instalación de WooCommerce. 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
Siga estos pasos para añadir un bloque de pestañas de datos del producto a su 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 Pestañas de datos del producto para abrir su configuración. La pestaña Contenido se divide en dos secciones plegables, Pestañas y Panel, donde puedes diseñar los botones de las pestañas y el área de contenido que hay debajo de ellos.
Pestañas:
- Normal: Actívelo para mostrar la configuración de color de las pestañas en su estado predeterminado (sin seleccionar). Establezca el color del texto, el color de fondo y el color del borde para las pestañas inactivas.
- Activo: Actívelo para mostrar la configuración de color de la pestaña seleccionada actualmente. Establezca el color del texto, el color de fondo y el color del borde para el estado activo de la pestaña, lo que le permitirá destacar claramente de las pestañas inactivas.
- Tipografía de pestañas: Establezca la familia de fuentes, el tamaño, el grosor, 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-100 píxeles) de los botones de las pestañas. Aumenta este valor para crear pestañas con forma de pastilla o redondeadas.
Panel:
- Color del texto: Establece el color predeterminado del texto para el contenido que se muestra dentro del área del panel.
- Tipografía del panel: Establece la familia, el tamaño, el grosor y el estilo de la fuente para el texto del cuerpo dentro de cada panel.
- Color del encabezado: Establece el color de cualquier elemento de encabezado (h2, h3, etc.) que se muestre dentro del contenido del panel.
- Tipografía de encabezados: Establezca la familia, el tamaño, el grosor y el estilo de la fuente para el texto de los encabezados de los paneles.
- Relleno del panel: Establece el espacio interior alrededor del contenido dentro del área del panel.
- Sombra del panel: añade un efecto de sombra al área del panel; elige entre los tamaños de sombra preestablecidos para dar profundidad al panel y separarlo del fondo de la página.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes ajustar los bordes, el espaciado y la visibilidad del bloque Pestañas de datos del producto.
Borde del panel:
- Radio del borde del panel: Establece el redondeo de las esquinas del á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: elija un estilo de borde (sólido, punteado o discontinuo) y establezca 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 cada lado para el contenedor exterior del bloque.
- Estilo y color del borde: Elija un estilo y color de borde para el contenedor exterior del bloque.
Espaciado:
- Margen: controla el espacio exterior alrededor del 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 espacio interior dentro del bloque de pestañas de datos del producto (superior, derecho, inferior, izquierdo). Esto crea un 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. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-section|tabs).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de pestañas de datos del producto en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de pestañas de datos del producto en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque de pestañas de datos del producto en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque de pestañas de datos del producto se desplaza a la vista. Las opciones incluyen rebote, aparición gradual, acercamiento, rotación y muchas más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Pestañas de datos del producto y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente 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, la información adicional y las opiniones de los clientes de WooCommerce y las organiza en una interfaz limpia con pestañas. Utiliza la configuración de color de las pestañas para diferenciar los estados activos e inactivos, y ajusta la tipografía y los bordes del panel para crear una experiencia de página de producto coherente que mantenga el interés de los compradores.