Ahora que puedes usar módulos woo en Divi, el único límite es tu imaginación. Cada módulo dinámico de woo es personalizable como todos los demás módulos dentro del generador. En esta publicación, le mostraremos cómo recrear un diseño de bloque creativo para sus páginas de productos. Los módulos dinámicos se agrupan en un conjunto creativo que se destaca del fondo oscuro. ¡También puedes descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

Móvil

1. Agregar / Abrir producto 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 donde se extrae la información para el módulo de información adicional 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: 250 ml / 2 tazas de té
    • Material: cobre puro
    • Condición: uso y desgaste normal

La imagen presentada 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 página a ‘Ancho completo’.

Cambiar al generador visual

Continúe cambiando a Visual Builder.

Eliminar sección de producto predeterminada

Como estamos creando una página de producto personalizada, continúe y elimine la sección predeterminada del producto woo.

2. Recrea el diseño de bloque receptivo

Agregar nueva sección

Antecedentes

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 + Finalizar:
    • Escritorio: 50%
    • Tableta: 40%
    • Teléfono: 30%

Dimensionamiento

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

  • Ancho: 100%
  • Ancho Máx .: 100%

Espaciado

Elimine también el relleno superior e inferior predeterminado.

  • Relleno superior + inferior: 0vw

Visibilidad

Finalmente, ajuste los desbordamientos de la sección.

  • Desbordamiento vertical + horizontal: oculto

Agregar fila # 1

Estructura de 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.

  • Anchura:
    • Escritorio: 50%
    • Tableta + teléfono: 100%
  • Ancho Máx .: 100%
  • Alineación de fila: izquierda

Visibilidad

Finalmente, establezca el desbordamiento horizontal y vertical en visible.

  • Desbordamiento horizontal + visible: visible

Añadir migas de pan Woo

Contenido

Agregue el primer módulo, el módulo de migas de pan. Seleccione ‘Este producto’.

  • Producto: Este producto

Texto

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

  • Fuente de 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

Añadir 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, elija ‘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

Agregar fila # 2

Estructura de columna

Agregue una segunda fila con dos columnas.

Dimensionamiento

Primero, ajuste el tamaño.

  • Ancho de canal: 1
  • Anchura:
    • Escritorio: 53%
    • Tableta + teléfono: 53%
  • Ancho Máx .: 100%
  • Alineamiento: derecho

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
  • Acolchado Izquierdo:
    • Escritorio: 0vw
    • Tableta: 16vw
    • Teléfono: 12vw
  • Relleno derecho:
    • Escritorio: 0vw
    • Tableta: 0vw

CSS personalizado

En la pestaña Avanzado, agregue algunos CSS personalizados.

  • Elemento principal CSS:
    • pantalla: flex;
01
display: flex;

Visibilidad

Finalmente, establezca los desbordamientos en visible.

  • Desbordamientos horizontales + verticales: visible

Configuración de columna 1

Espaciado

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

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

Configuración de columna 2

Espaciado

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

  • Relleno 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. Insertar contenido descriptivo para el producto.

Texto

Luego, dale estilo al texto.

  • Fuente: Fénix
  • Color: # f2eed0
  • Talla:
    • Escritorio: 1.3vw
    • Tableta: 2.6vw
    • Teléfono: 3.8vw
  • Espaciado de letras: 1px
  • Alineamiento: centro

Dimensionamiento

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

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

Espaciado

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

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

Frontera

Agregue un borde al módulo en consecuencia.

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

Agregar 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

Antecedentes

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.

  • Nivel de título del título: H1
  • Fuente: Fénix
  • Color: Crema # f2eed0
  • Talla:
    • Escritorio: 2.9vw
    • Tableta: 7.8vw
    • Teléfono: 13.9vw
  • Espaciado de letras H1: 1px

Dimensionamiento

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

  • Ancho: 100%

Espaciado

Luego, agregue algunos valores de relleno.

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

Frontera

Finalmente, agregue un borde de la siguiente manera.

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

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

Agregar contenido

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

  • Producto: Este producto
  • Tipo de descripción: Descripción

Texto

Luego, dale estilo al texto.

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

Dimensionamiento

Además, ajuste el tamaño.

  • Ancho: 100%

Espaciado

Del mismo modo, ajuste el espacio.

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

Frontera

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 woo. En la pestaña de contenido, elija ‘Este producto’.

  • Producto: Este producto

Texto

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

  • Fuente: Open Sans
  • Estilo: cursiva
  • Color: Crema # f2eed0
  • Talla:
    • 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
  • Talla:
    • Escritorio: 1.1vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Espaciado: 1px

Dimensionamiento

Además, ajuste el tamaño.

  • Ancho: 100%

Frontera

Y finalmente, agregue un borde.

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

Agregar fila # 3

Estructura de 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.

  • Anchura:
    • Escritorio: 50%
    • Tableta: 87%
    • Teléfono: 93%
  • Alineamiento: derecho

Relleno

Además, ajuste el relleno.

  • Acolchado inferior: 12vw

Configuración de columna 1

Espaciado

Continúe ajustando el relleno en la primera columna.

  • Acolchado Izquierdo:
    • Escritorio: 5vw
    • Tableta + teléfono: 12vw

Añadir Woo Price a la columna 1

Agregar contenido

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

  • Producto: Este producto

Texto de precio

Luego, dale estilo al texto en consecuencia.

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

Dimensionamiento

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

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

Espaciado

Ajuste el espacio también.

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

Frontera

Finalmente, agrega el borde.

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

Añadir Woo Añadir al carrito a la columna 2

Agregar contenido

El módulo final es un módulo para agregar al carrito. En la pestaña de contenido, elija ‘Este producto’.

Estilos de botones

Estilo del 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: cobre naranja # d66b00

Relleno de botones

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

  • Acolchado superior + 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%

 

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!