Las pestañas de producto de Divi Woo se integran perfectamente con WooCommerce, permitiéndote mostrar información del producto en un diseño con pestañas.

Este módulo permite mostrar de forma concisa información adicional del producto, como dimensiones, descripciones, reseñas, etc.

Específicamente, este módulo puede mostrar la descripción completa del producto, los atributos, el envío y las secciones de reseñas.

Instalar el complemento WooCommerce

Ve al Escritorio de WordPress → Complementos → Añadir nuevo complemento.

Usa el campo de búsqueda (esquina superior derecha) y busca "WooCommerce".

Haz clic en el botón Instalar ahora.

Haz clic en el botón Activar.

Agregar el módulo de pestañas de producto Divi Woo

Haz clic en el ícono gris de + dentro de la Fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.

Haz clic en Módulos Woo para ver todos los módulos Divi Woo.

Haz clic en el módulo de Pestañas de producto Woo para agregarlo a tu página.

Todas las opciones del módulo de pestañas de producto Divi Woo explicadas

Estas configuraciones están organizadas en tres grupos mediante las pestañas en la parte superior del módulo:

• Contenido

• Diseño

• Avanzado

Pestaña de Contenido

Dentro de esta pestaña, encontrarás las opciones de contenido disponibles para este módulo.

Contenido
El primer grupo de configuraciones también se llama Contenido, donde puedes controlar el tipo de contenido que se muestra y cómo.

• Producto – Esto determina los detalles de qué producto se muestran. Como estamos usando este módulo en una plantilla de página, lo configuraremos en "Este producto", para que sin importar qué página de producto se esté viendo, se muestren los detalles específicos de ese producto.

• Pestañas incluidas – Elige qué información del producto quieres mostrar en pestañas: Descripción, Información adicional y Reseñas. Marca o desmarca cuáles deseas mostrar u ocultar.

Enlace
Si deseas aplicar un enlace clicable a todo el módulo, puedes hacerlo aquí.

• URL del enlace del módulo – Pega la URL del enlace que quieres aplicar a este módulo aquí. Esto hace que todo el módulo sea clicable, y al hacer clic, dirigirá a los visitantes a la URL pegada.

• Destino del enlace del módulo – Definir un destino del enlace determina si el enlace, al hacer clic, se abre en una nueva pestaña o en la misma ventana.

  • En la misma ventana – si quieres que el enlace se abra en la misma ventana

  • En una nueva pestaña – si quieres que el enlace se abra en una nueva pestaña.

Fondo
En el grupo de opciones de Fondo, se pueden configurar las siguientes opciones:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo
  

• Cómo agregar un color de fondo
  

1. Haz clic en la primera pestaña, el ícono del balde de pintura.
   
2. Haz clic en Agregar color de fondo y elige desde la paleta de colores de tu sitio, o usa el ícono de cuentagotas para seleccionar un nuevo color.

Cómo agregar un degradado de fondo

1. Haz clic en la segunda pestaña, el ícono de degradado.
   
2. Haz clic en Agregar degradado de fondo.
   Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color desde la paleta del sitio o usa el cuentagotas. Los puntos de degradado permiten agregar más colores al degradado. Haz clic en cualquier lugar del control deslizante para añadir un nuevo punto.

Opciones de degradado de fondo

• Tipo de degradado – Puedes cambiar el tipo de degradado desde el menú desplegable.

• Dirección del degradado – Cambia la dirección arrastrando el control deslizante o introduciendo un valor numérico.

• Repetir degradado – Activa esta opción si deseas que el degradado se repita.

• Unidad del degradado – Cambia cómo se calculan los puntos del degradado.

• Colocar el degradado sobre la imagen de fondo – Si hay una imagen de fondo aplicada, puedes colocar el degradado encima activando esta opción.

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña, el ícono de imagen.
   
2. Haz clic en el ícono gris de + para abrir la Biblioteca de Medios, donde puedes seleccionar una imagen ya cargada o subir una nueva.

Opciones de imagen de fondo

• Usar efecto de parallax – Para aplicar un efecto parallax (la imagen se desplaza más rápido que el contenido), activa esta opción. Por defecto está desactivado.

• Tamaño de imagen de fondo

• Posición de imagen de fondo

• Repetir imagen de fondo

• Fusión de imagen de fondo – Selecciona cómo se mezcla la imagen con otras capas.

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña, el ícono de video.
   
2. Haz clic en el ícono gris de + para abrir la biblioteca de medios y subir o seleccionar un video.

Opciones de video de fondo

• Mp4 vs Webm – Se recomienda subir ambas versiones para asegurar compatibilidad.

• Ancho del video de fondo

• Altura del video de fondo

• Pausar video cuando otro esté reproduciéndose – Activa esta opción si deseas pausar el video cuando otro se reproduzca.

Cómo agregar un patrón de fondo

1. Haz clic en la quinta pestaña, el ícono de patrón.
   
2. Haz clic en Agregar patrón de fondo y selecciona el tipo de patrón desde el menú.
   
3. Opciones de patrón de fondo
   

• Color del patrón

• Transformación del patrón – Horizontal, vertical, rotación o invertir.

• Tamaño del patrón – Real, cubrir, ajustar, estirar o tamaño personalizado.

• Origen de repetición del patrón

• Desplazamiento horizontal y vertical del patrón

• Repetición del patrón

• Modo de fusión del patrón

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña, el ícono de máscara.
   
2. Haz clic en Agregar máscara de fondo y selecciona el tipo desde el menú.

Opciones de máscara de fondo

• Color de la máscara

• Transformación de la máscara

• Relación de aspecto de la máscara

• Tamaño de la máscara – Real, cubrir, ajustar, estirar o tamaño personalizado.

• Modo de fusión de la máscara

Etiqueta de administración

La Etiqueta de administración es donde puedes dar un nombre interno al módulo para mantener todo organizado en el panel de control. Por defecto, será el nombre del módulo. Puedes cambiarlo a lo que prefieras.

Pestaña de Diseño

En esta pestaña, encontrarás todos los estilos de diseño y configuraciones para este módulo.

Texto del cuerpo
Aquí puedes aplicar estilos al texto del cuerpo del módulo. También puedes aplicar estilos únicos a enlaces, listas y citas.

• Fuente del cuerpo – Elige la fuente para el texto del cuerpo. Puedes seleccionar una diferente o subir una personalizada.

• Grosor de fuente del cuerpo

• Estilo de fuente del cuerpo:

  • Cursiva

  • Mayúsculas

  • Versalitas

• Subrayado

• Tachado

• Alineación del texto del cuerpo: Izquierda, centro, derecha o justificado

• Color del texto del cuerpo

• Tamaño del texto del cuerpo

• Espaciado entre letras

• Altura de línea

• Sombra del texto del cuerpo

Texto de pestañas
Aquí puedes aplicar estilos al texto de las pestañas.

• Color de fondo de pestaña activa

• Color de fondo de pestaña inactiva

• Color del texto de pestaña activa

• Color del texto de pestaña

• Fuente de las pestañas

• Grosor de fuente de pestañas

• Estilo de fuente de pestañas:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto de pestañas

• Tamaño del texto de pestañas

• Espaciado entre letras en pestañas

• Altura de línea de pestañas

• Sombra del texto de pestañas

Tamaño

Ancho – Define el ancho del módulo. Para más información, consulta la documentación oficial.

Ancho máximo – Define el ancho máximo del módulo. Para más información, consulta la documentación oficial.

Alineación del módulo – Si se establece un valor de Ancho o Ancho máximo, se puede configurar la alineación del módulo usando tres opciones:

• Alineado a la izquierda

• Alineado al centro

• Alineado a la derecha

Altura mínima – Define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

Altura – Define la altura del módulo. Para más información, consulta la documentación oficial.

Altura máxima – Define el valor máximo de altura que puede tener el módulo. Para más información, consulta la documentación oficial.

Espaciado

Puedes agregar márgenes o espaciado a este módulo escribiendo valores numéricos.

• El margen añade espacio fuera del módulo.

• El relleno añade espacio dentro del módulo.

• Para mantener proporciones y valores iguales, haz clic en el ícono de cadena entre los valores que deseas que siempre sean idénticos (por ejemplo, arriba y abajo).

Los valores predeterminados de margen para el módulo son 0.

Los valores predeterminados de relleno para el módulo son 0.

Borde

Agrega un borde al módulo. Puedes añadir un borde completo o a solo uno de los lados del módulo. Ajusta el ancho con el control deslizante y selecciona un color. Elige un estilo de borde en el menú desplegable.

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de esquina están vinculados por defecto (lo indica la cadena azul); si deseas establecer valores distintos, haz clic para desvincularlos.

• Estilos de borde – Agrega un borde a todos los lados del módulo o a lados individuales (superior, derecho, inferior, izquierdo).

• Ancho del borde – Define el ancho del borde. Para un borde más grueso, aumenta el valor. Debe tener al menos 1 píxel para que sea visible.

• Color del borde – Elige el color desde la paleta del sitio o selecciona uno nuevo con el cuentagotas.

• Estilo del borde – Elige entre: sólido, punteado, con guiones, doble, en relieve, hundido, interno, externo o ninguno.

Sombra del contenedor

Agrega una sombra al contorno completo del módulo. Una vez seleccionada una sombra, puedes personalizar las siguientes opciones:

• Posición horizontal de la sombra

• Posición vertical de la sombra

• Intensidad del desenfoque – Cuanto mayor el valor, mayor el desenfoque y más suave la sombra.

• Intensidad de expansión – Aumenta la densidad de la sombra.

• Color de la sombra

• Posición de la sombra – Puede ser interna o externa al módulo.

Filtros

Ajusta los filtros del módulo:

• Matiz – Ángulo del color.

• Saturación – Intensidad del color.

• Brillo – Nivel de claridad de los colores.

• Contraste – Diferenciación entre zonas claras y oscuras.

• Invertir – Invierte matiz, saturación y brillo.

• Sepia – Da una apariencia cálida en tonos amarillos/marrones.

• Opacidad – Nivel de transparencia.

• Desenfoque – Aplica desenfoque gaussiano al módulo.

Modo de fusión – Define cómo se mezcla el módulo con las capas debajo. Por defecto, es normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega por cada opción y configura valores numéricos o ajusta cajas y círculos.

Puedes vincular valores para que siempre sean iguales haciendo clic en el ícono de cadena en la parte inferior derecha.

Animación

Aquí puedes aplicar una animación al módulo. Una vez seleccionado el estilo, puedes ajustar:

• Duración de animación – Cuánto tiempo tarda en completarse un ciclo.

• Retardo de animación – Tiempo de espera antes de iniciar la animación.

• Opacidad inicial – Nivel de opacidad al comenzar.

• Curva de velocidad de animación – Método de aceleración.

• Repetición de animación – Por defecto, la animación solo se ejecuta una vez. Puedes activar la opción de bucle continuo.

Pestaña Avanzado

Dentro de la pestaña avanzada, encontrarás opciones útiles para diseñadores web con más experiencia, como:

• CSS personalizado

• Clases e identificadores únicos (ID)

Puedes aplicar estilos personalizados utilizando las clases o el ID desde tu hoja de estilos del tema hijo.

ID y Clases CSS

Asigna un ID o Clase CSS específico al módulo. Esto es útil para aplicar estilos personalizados usando la hoja de estilos de tu tema hijo.

CSS Personalizado

• CSS libre – Escribe CSS personalizado con el selector “selector”. Ejemplo: selector h1 {color: red;}

• Elementos del módulo – Puedes añadir propiedades CSS específicas en secciones individuales al hacer clic en la pestaña de Elementos del Módulo.

Condiciones

Las condiciones de visualización permiten elegir cuándo mostrar el módulo según ciertas reglas, como:

• Cuando un usuario visita la página

• Si ya ha comprado antes

• Qué navegador o sistema operativo usa, etc.

Puedes añadir una o múltiples condiciones.

Visibilidad

• Desactivar en – Define cuándo se mostrará el módulo. Puedes ocultarlo en Teléfonos, Tabletas o Escritorios activando la casilla correspondiente.

Desbordamiento horizontal – Define qué se muestra cuando el contenido sobrepasa los bordes izquierdo o derecho:

• Visible – El contenido se muestra completamente.

• Desplazar – Se muestra una barra de desplazamiento.

• Oculto – El contenido que excede no se muestra.

• Automático – El navegador decide.

Desbordamiento vertical – Para contenido que sobrepasa arriba o abajo:

• Visible

• Desplazar

• Oculto

• Automático

Transiciones

Controla la duración, retardo y curva de velocidad de la animación al pasar el cursor.

• Duración de transición

• Retardo de transición

• Curva de velocidad de transición

Posición

Define la posición del módulo:

• Relativa (valor por defecto) – Posición normal según el flujo del documento. Los valores de desplazamiento afectan solo a este módulo.

• Absoluta – Se elimina del flujo normal y se posiciona según el contenedor más cercano.

• Fija – Se posiciona respecto a la ventana del navegador. Ideal para módulos “pegajosos”.

• Desplazamiento vertical – Posición desde arriba o abajo.

• Desplazamiento horizontal – Posición desde izquierda o derecha.

• Índice Z – Orden del módulo en la pila de elementos. Uno más alto sobrepone a los más bajos.

Efectos de desplazamiento

Define el comportamiento del módulo al hacer scroll. Puedes hacerlo fijo en la parte superior, inferior o ambas.

También puedes:

• Activar movimiento vertical para ajustar la velocidad de desplazamiento del módulo.

• Elegir cuándo se activa el efecto: cuando se ve la parte superior, media o inferior del módulo.

Guardar y salir

Una vez que termines de diseñar y configurar el módulo, haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar los cambios. Si cierras sin guardar, se perderá el trabajo.

Guardar diseño de página

• En Mac: presiona CMD + S

• En PC: presiona CTRL + S

O haz clic en el ícono púrpura con tres puntos en la parte inferior para expandir la barra de herramientas de Divi y luego haz clic en el botón verde Guardar.

Salir del editor visual

Una vez guardados los cambios, haz clic en Salir del editor visual en la barra superior del administrador.

Recursos adicionales

• Cómo crear una plantilla global de página de producto con el generador de temas de Divi

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización para tiendas en línea con WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos y buenas prácticas

• Guía simple sobre las páginas predeterminadas de WooCommerce

• Cómo actualizar WooCommerce: buenas prácticas para seguir siempre

Sigue aprendiendo

Mantente al día con los últimos tutoriales sobre el módulo de pestañas de producto Divi Woo visitando nuestra página de pestañas de producto Woo.