Cómo crear un diseño de bloque receptivo para páginas de productos Woo con Divi

Avance

Antes de comenzar, echemos un vistazo al diseño en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga GRATIS el Diseño de Bloque Responsivo

Para poner sus manos en el diseño de bloque receptivo gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Suscríbete a nuestro canal de Youtube

1. Agregar/abrir producto de WooCommerce

Detalles de producto

Abra un producto existente o cree uno nuevo. Para recrear este diseño de estilo de bloque, deberá completar la siguiente información:

• Título
• Descripción
• Precio
• Categoría
• Atributos
• Foto principal

La pestaña de atributos es de donde se extrae la información para el módulo de información adicional de Woo. Para agregar esta información, haga clic en la pestaña de atributos y cree tres atributos personalizados de la siguiente manera:

• Atributos:
  
  • Capacidad: 250ml / 2 tazas de té
  • Material: cobre puro
  • Condición: uso y desgaste normal

La imagen destacada debe tener el mismo color de fondo que el color del diseño.

Habilitar Divi Builder y modificar la configuración de la página

Cuando se completen todos los detalles del producto, continúe y habilite Divi Builder. Cambie el diseño de la página a ‘Ancho completo’.

Cambiar al constructor visual

Continúe cambiando a Visual Builder.

Eliminar sección de producto predeterminada

Dado que estamos creando una página de producto personalizada, continúe y elimine la sección de producto de Woo predeterminada.

2. Vuelva a crear el diseño de bloque receptivo

Agregar nueva sección

Fondo

El primer paso para recrear el diseño es agregar una nueva sección. Agregue un fondo degradado en diferentes tamaños de pantalla.

• Fondo: Gradiente
• Color 1: gris claro #f2f6f5
• Color 2: casi negro #313131
• Dirección:
  
  • Escritorio: 90%
  • Tableta + Teléfono: 180%
• Inicio + Final:
  
  • Escritorio: 50%
  • Tableta: 40%
  • Teléfono: 30%

Dimensionamiento

Ajuste la configuración de tamaño de la sección.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine también el relleno superior e inferior predeterminado.

• Acolchado superior e inferior: 0vw

Visibilidad

Finalmente, ajuste los desbordamientos de la sección.

• Desbordamiento vertical + horizontal: oculto

Añadir Fila #1

Estructura de la columna

Después de configurar la sección, agregue la primera fila con una columna.

Dimensionamiento

En la pestaña de diseño, ajuste el tamaño para diferentes tamaños de pantalla.

• Ancho:
  
  • Escritorio: 50%
  • Tableta + Teléfono: 100%
• Ancho máximo: 100%
• Alineación de filas: Izquierda

Visibilidad

Finalmente, configure el desbordamiento horizontal y vertical como visible.

• Desbordamiento horizontal + visible: visible

Añadir migas de pan Woo

Contenido

Agrega el primer módulo, el módulo woo breadcrumb. Seleccione ‘Este producto’.

• Producto: Este Producto

Texto

En la pestaña de diseño, estilice el texto de la siguiente manera.

• Fuente del texto: Fénix
• Color del texto: Marrón #594239
• Tamano del texto:
  
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw

Espaciado

Agregue algunos valores de espaciado para diferentes tamaños de pantalla.

• Margen superior: 3vw
• Margen izquierdo:
  
  • Escritorio: 10vw
  • Tableta + Teléfono: 20vw

Agregar imagen Woo

Agregar contenido

Ahora es el momento de agregar la imagen del producto con un módulo Woo Image. En la pestaña de contenido, seleccione ‘Este producto’.

• Producto: Este Producto

Dimensionamiento

Continúe ajustando el tamaño del módulo.

• Ancho: 100%

Visibilidad

Finalmente, oculta el desbordamiento.

• Desbordamiento horizontal + vertical: oculto

Añadir Fila #2

Estructura de la columna

Agregue una segunda fila con dos columnas.

Dimensionamiento

Primero, ajuste el tamaño.

• Ancho del canalón: 1
• Ancho:
  
  • Escritorio: 53%
  • Tableta + Teléfono: 53%
• Ancho máximo: 100%
• Alineación: Derecha

Espaciado

Luego, los valores de espaciado.

• Margen superior:
  
  • Escritorio: -47vw
  • Tableta + Teléfono: 0vw
• Margen izquierdo:
  
  • Tableta: -5vw
  • Teléfono: -8vw
• Acolchado inferior:
  
  • Escritorio + Tableta: 4.1vw
• Relleno izquierdo:
  
  • Escritorio: 0vw
  • Tableta: 16vw
  • Teléfono: 12vw
• Relleno derecho:
  
  • Escritorio: 0vw
  • Tableta: 0vw

CSS personalizado

En la pestaña Avanzado, agregue CSS personalizado.

• Elemento principal CSS:
  
  • pantalla: flexible;

Visibilidad

Finalmente, establezca los desbordamientos en visibles.

• Desbordamientos horizontales + verticales: visibles

Configuración de la columna 1

Espaciado

Antes de agregar cualquier módulo, ajuste los valores de espaciado en la columna 1.

• Acolchado izquierdo: 4vw
• Relleno derecho: 0vw

Configuración de la columna 2

Espaciado

Ajuste los valores de espaciado de la columna 2 también.

• Acolchado superior:
  
  • Escritorio: 7vw
  • tableta: 17vw
  • Teléfono: 28vw
• Relleno derecho:
  
  • Escritorio + Tableta: 15vw

Agregar módulo de texto a la columna 1

Agregar contenido

Ahora es el momento de agregar los módulos. Comience con un módulo de texto. Inserta contenido descriptivo del producto.

Texto

Luego, estiliza el texto.

• Fuente: Fénix
• Color: #f2eed0
• Tamaño:
  
  • Escritorio: 1.3vw
  • Tableta: 2.6vw
  • Teléfono: 3.8vw
• Espaciado entre letras: 1px
• Alineación: Centro

Dimensionamiento

Ajuste el tamaño del módulo para diferentes tamaños de pantalla.

• Ancho:
  
  • Escritorio: 50%
  • Tableta: 60%
  • Teléfono: 80%

Espaciado

Además, ajuste los valores de espaciado de la siguiente manera.

• Acolchado superior e inferior: 1vw
• Acolchado izquierdo + derecho: 1vw

Borde

Agregue un borde al módulo en consecuencia.

• Estilos de borde: Superior + Izquierda + Derecha
• Ancho del borde:
  
  • Arriba + Izquierda + Derecha: 2px
• Color del borde:
  
  • Arriba + Izquierda + Derecha: Crema #f2eed0

Agregue el título de Woo a la columna 1

Agregar contenido

Ahora, agregue un módulo de título Woo y elija ‘Este producto’ en la pestaña de contenido.

• Producto: Este Producto

Fondo

Para aplicar estilo al módulo, agregue un fondo naranja oscuro.

• Color de fondo
• Color: Cobre Naranja #d66b00

Texto del título

Luego, modifique la configuración del texto del encabezado.

• Título Nivel de encabezado: H1
• Fuente: Fénix
• Color: Crema #f2eed0
• Tamaño:
  
  • Escritorio: 2.9vw
  • Tableta: 7.8vw
  • Teléfono: 13.9vw
• Espaciado entre letras H1: 1px

Dimensionamiento

Además, ajuste el tamaño del módulo.

• Ancho: 100%

Espaciado

Luego, agregue algunos valores de relleno.

• Acolchado superior e inferior:
  
  • Escritorio: 2vw
  • Tableta: 3vw
  • Teléfono: 4vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 2vw
  • Tableta: 3vw
  • Teléfono: 4vw

Borde

Finalmente, agregue un borde de la siguiente manera.

• Estilos de borde: Superior + Izquierda + Derecha
• Ancho del borde:
  
  • Arriba + Izquierda + Derecha: 2px
• Color del borde:
  
  • Arriba + Izquierda + Derecha: Crema #f2eed0

Agregue el título de descripción de Woo a la columna 1

Agregar contenido

Debajo del título, agregue un módulo de descripción de woo. En la pestaña de contenido, seleccione ‘Este producto’.

• Producto: Este Producto
• Descripción Tipo: Descripción

Texto

Luego, estiliza el texto.

• Fuente: Open Sans
• Color: Crema #f2eed0
• Tamaño:
  
  • Escritorio: 08vw
  • Tableta: 2vw
  • Teléfono: 3vw

Dimensionamiento

Además, ajuste el tamaño.

• Ancho: 100%

Espaciado

Del mismo modo, ajuste el espaciado.

• Acolchado superior e inferior:
  
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw

Borde

Similar a otros módulos, agregue un borde.

• Estilos de borde: los cuatro bordes
• Ancho: 2px
• Color: Crema #f2eed0

Agregue información adicional de Woo a la columna 2

Agregar contenido

Ahora es el momento de agregar los atributos personalizados con el módulo de información adicional de woo. En la pestaña de contenido, seleccione ‘Este producto’.

• Producto: Este Producto

Texto

Cambie la configuración de texto de la siguiente manera.

• Fuente: Open Sans
• Estilo: cursiva
• Color: Crema #f2eed0
• Tamaño:
  
  • Escritorio: 0.6vw
  • Tableta: 1.6vw
  • Teléfono: 2.2vw

Texto de atributo

Luego, diseñe el texto del atributo en consecuencia:

• Fuente: Fénix
• Color: Crema #f2eed0
• Tamaño:
  
  • Escritorio: 1.1vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Espaciado: 1px

Dimensionamiento

Además, ajuste el tamaño.

• Ancho: 100%

Borde

Y finalmente, agregue un borde.

• Estilos de borde: Superior + Derecha + Inferior
• Ancho del borde:
  
  • Arriba + Derecha + Abajo: 2px
• Color del borde:
  
  • Arriba + Derecha + Abajo: Crema #f2eed0

Añadir Fila #3

Estructura de la columna

Agregue la tercera fila, con dos columnas.

Dimensionamiento

Antes de agregar módulos, ajuste el tamaño de la fila para diferentes tamaños de pantalla.

• Ancho:
  
  • Escritorio: 50%
  • Tableta: 87%
  • Teléfono: 93%
• Alineación: Derecha

Relleno

Además, ajuste el acolchado.

• Acolchado inferior: 12vw

Configuración de la columna 1

Espaciado

Continúe ajustando el relleno en la primera columna.

• Relleno izquierdo:
  
  • Escritorio: 5vw
  • Tableta + Teléfono: 12vw

Agregue Woo Price a la columna 1

Agregar contenido

Ahora, agregue el precio del producto usando el módulo de precios de woo. En la pestaña de contenido, seleccione ‘Este producto’.

• Producto: Este Producto

Texto de precio

Luego, estilice el texto en consecuencia.

• Fuente: Fénix
• Color: Crema #f2eed0
• Tamaño:
  
  • Escritorio: 1.5vw
  • Tableta: 3.5vw
  • Teléfono: 5vw

Dimensionamiento

Además, ajuste el tamaño del módulo.

• Ancho:
  
  • Escritorio: 39%
  • Tableta: 45%
  • Teléfono: 54%

Espaciado

Ajuste el espaciado también.

• Acolchado superior:
  
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3v2
• Acolchado inferior:
  
  • Escritorio: 1vw
  • Tableta + Teléfono: 2vw
• Relleno izquierdo:
  
  • Escritorio: 1vw
  • Tableta + Teléfono: 2vw
• Relleno derecho:
  
  • Tableta + Teléfono: 2vw

Borde

Finalmente, agregue el borde.

• Estilos de borde: los cuatro lados
• Ancho: 2px
• Color: Crema #f2eed0

Agregar Woo Agregar al carrito a la columna 2

Agregar contenido

El módulo final es un módulo Woo Add to Cart. En la pestaña de contenido, seleccione ‘Este producto’.

Estilos de botones

Diseñe el botón de la siguiente manera.

• Estilos personalizados: Sí
• Tamaño del texto del botón:
  
  • Escritorio: 1.3vw
  • Tableta: 3.5vw
  • Teléfono: 5vw
• Color del texto: Crema #f2eed0
• Color de fondo: naranja cobre #d66b00

Relleno de botones

Luego, agregue algunos valores de relleno al botón.

• Acolchado superior e inferior: 0.5vw
• Acolchado izquierdo + derecho: 1.5vw

Dimensionamiento

Por último, pero no menos importante, ajuste el tamaño del módulo y ¡listo!

• Ancho: 100%

Avance

Echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Es una envoltura

¡Eso es todo! Si su contenido es más largo o más corto que el de este tutorial, podría interrumpir el espaciado de los bloques. Todo lo que tiene que hacer es ajustar la configuración de las columnas para que encajen mejor en la composición. Esperamos que este tutorial lo inspire a crear diseños Divi más sorprendentes. Háganos saber en los comentarios si tiene alguna pregunta.