Cómo crear una página de producto mínima con los módulos de WooCommerce de Divi (descarga gratuita)


La nueva actualización de los módulos de WooCommerce de Divi ha sido esperada por mucho tiempo y ahora que está aquí, las posibilidades de personalizar las páginas de productos se han vuelto infinitas. Hoy, le mostraremos cómo usar las opciones integradas de Divi y los nuevos módulos de WooCommerce para crear una página de productos mínima personalizada que puede reutilizar para todas sus páginas de productos. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Página de producto mínimo

Descargue el diseño de página del producto mínimo GRATIS

Para poner sus manos en el diseño de página de producto mínimo gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=GkZhOh7sjyo (/ incrustar)

Suscríbase a nuestro canal de Youtube

1. Añadir / Abrir producto WooCommerce

Detalles de producto

Abra una página de producto existente o cree una nueva. En los pasos a continuación, verá toda la información necesaria para obtener exactamente el mismo resultado que se muestra en la vista previa de esta publicación. Si usa información de producto diferente, no se preocupe. Aún podrá seguir el tutorial, pero el resultado será ligeramente diferente dependiendo de la información del producto que esté compartiendo.

Título y categoría del producto

Página de producto mínimo

Descripción corta y larga del producto

Página de producto mínimo

Imagen del producto y galería

Página de producto mínimo

Datos del producto

  • Datos del producto: Producto variable
  • Inventario
  • Envío
  • Atributos
  • Variaciones

Página de producto mínimo

Habilite Divi Builder y modifique la configuración de la página del producto

Una vez que haya agregado los detalles del producto, puede habilitar Divi Builder y cambiar el diseño de la página a "Ancho completo" en la configuración de la página Divi.

Página de producto mínimo

Página de producto mínimo

Cambiar a Visual Builder

Una vez hecho esto, cambie a Visual Builder.

Página de producto mínimo

Eliminar la sección del producto original en la página

Dentro del Visual Builder, verá la información original del producto WooCommerce, ubicada dentro de una sola sección. En los próximos pasos de esta publicación, crearemos nuestro diseño desde cero, así que no dude en eliminar toda la sección.

Página de producto mínimo

2. Crear una página de producto mínima con el generador visual de Divi

Agregar nueva sección

Color de fondo

Continúe agregando una nueva sección y cambiando el color de fondo de la sección.

  • Color de fondo: #FFFFFF

Página de producto mínimo

Espaciado

Agregue algunos valores de margen personalizados también.

  • Margen superior: 100 px
  • Margen inferior: 100 px

Página de producto mínimo

Desbordamientos

Para asegurarnos de que nada exceda el contenedor de la sección, ocultaremos los desbordamientos en la configuración de visibilidad.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Página de producto mínimo

Agregar fila # 1

Estructura de columna

Agregue la primera fila a su sección utilizando la siguiente estructura de columnas:

Página de producto mínimo

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Página de producto mínimo

Añadir Woo Breadcrumb Module a la columna

Contenido dinámico

El único módulo que necesitamos en esta fila es el Módulo Woo Breadcrumb. Asegúrese de que el módulo esté vinculado al producto en el que está trabajando.

  • Producto: Este producto

Página de producto mínimo

Configuraciones de texto

Pase a la pestaña de diseño y aplique estilo a la configuración del texto en consecuencia:

  • Fuente de texto: Raleway
  • Peso de la fuente del texto: semi negrita
  • Tamaño de texto: 12px
  • Espacio entre letras de texto: 2px
  • Altura de la línea de texto: 1.3em

Página de producto mínimo

Configuración de texto de enlace

Cambie algunas configuraciones en la configuración del texto del enlace a continuación.

  • Color del texto del enlace: # fc7b52
  • Tamaño del texto del enlace: 13 px

Página de producto mínimo

Agregar fila # 2

Estructura de columna

Continúe agregando la segunda fila utilizando la siguiente estructura de columnas:

Página de producto mínimo

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique los valores de margen y relleno en consecuencia:

  • Margen superior: 100 px
  • Relleno inferior: 0px

Página de producto mínimo

Configuración de columna 1

Color de fondo

Abra la configuración de la columna 1 a continuación y agregue un color de fondo.

  • Color de fondo: # d9e0ea

Página de producto mínimo

Frontera

También estamos agregando un radio de borde de "20 px" a las esquinas de la columna.

Página de producto mínimo

Sombra de la caja

Junto con una sutil caja de sombra.

  • Posición vertical de la sombra de la caja: 60 px
  • Caja Shadow Blur Fuerza: 100px
  • Color de sombra: rgba (0,0,0,0.1)

Página de producto mínimo

Desbordamientos

Por último, pero no menos importante, asegúrese de que los desbordamientos de la columna estén visibles.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Página de producto mínimo

Añadir Woo Image Module a la Columna 1

Contenido dinámico

¡Es hora de comenzar a agregar módulos! El primer y único módulo que necesitamos en la columna 1 es el Módulo de imagen Woo.

  • Producto: Este producto

Página de producto mínimo

Espaciado

Cree una superposición superior agregando un margen superior negativo a la configuración de espacio del módulo.

  • Margen superior: -110 px (computadora de escritorio y tableta), 0 px (teléfono)

Página de producto mínimo

Agregar módulo de texto a la columna 2

Contenido dinámico

En la segunda columna, el primer módulo que necesitamos es un módulo de texto normal. Asegúrese de conectar el cuadro de contenido a las categorías de productos.

  • Cuerpo: categorías de productos

Página de producto mínimo

Configuración de texto de enlace

Pase a la pestaña de diseño del Módulo de texto y cambie la configuración del texto del enlace en consecuencia:

  • Fuente de enlace: Raleway
  • Peso de fuente del enlace: negrita
  • Estilo de fuente de enlace: mayúscula
  • Color del texto del enlace: # fc7b52
  • Tamaño del texto del enlace: 12 px
  • Espaciado de letras de enlace: 2px
  • Altura de la línea de enlace: 1.3em

Página de producto mínimo

Añadir Woo Title Module a la Columna 2

Contenido dinámico

Agregue el Módulo de título de Woo justo debajo del Módulo de texto.

  • Producto: Este producto

Página de producto mínimo

Configuración del texto del título

Pase a la pestaña de diseño y cambie la configuración del texto del título de la siguiente manera:

  • Fuente del título: Raleway
  • Peso de la fuente del título: pesado
  • Color del texto del título: # 262f44
  • Tamaño del texto del título: 70 px (escritorio), 48 px (tableta), 32 px (teléfono)

Página de producto mínimo

Agregue el módulo de descripción de Woo a la columna 2

Contenido dinámico

Justo debajo del Módulo de título de Woo, estamos agregando el Módulo de descripción de Woo.

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

Página de producto mínimo

Configuraciones de texto

Cambie la configuración de texto del módulo en consecuencia:

  • Fuente de texto: Raleway
  • Peso de fuente de texto: medio
  • Tamaño de texto: 12px
  • Espacio entre letras de texto: 1 px
  • Altura de la línea de texto: 2.3em

Página de producto mínimo

Agregue el módulo de precios Woo a la columna 2

Contenido dinámico

En el siguiente módulo, que es el módulo de precios Woo.

  • Producto: Este producto

Página de producto mínimo

Configuración de texto de precio

Modifique la configuración del texto del precio de la siguiente manera:

  • Fuente del precio: Raleway
  • Peso de fuente de precio: negrita
  • Color del texto del precio: # 262f44
  • Tamaño del texto del precio: 30 px
  • Espaciado de letras de precio: 2px
  • Altura de la línea de precio: 1em

Página de producto mínimo

Espaciado

Y cree algo de espacio encima y debajo del módulo agregando algunos valores de margen personalizados a la configuración de espaciado.

  • Margen superior: 50 px
  • Margen inferior: 50 px

Página de producto mínimo

Añadir Woo Añadir al carrito Módulo a la columna 2

Contenido dinámico

El siguiente y último módulo que necesitamos en la columna 2 es el módulo Woo Add To Cart.

  • Producto: Este producto

Página de producto mínimo

Configuraciones de texto

Cambiar la configuración de texto del módulo.

  • Fuente de texto: Raleway
  • Peso de fuente de texto: medio
  • Color del texto: # 262f44
  • Tamaño de texto: 12px

Página de producto mínimo

Configuraciones de campos

Continúe modificando la configuración de los campos.

  • Color de fondo de los campos: rgba (38,47,68,0.08)
  • Color del texto de campo: # 262f44
  • Color de fondo del foco de campos: rgba (0,0,0,0)
  • Color del texto del foco de campos: # 262f44
  • Margen derecho: 6px
  • Relleno superior: 32px
  • Relleno inferior: 32px
  • Campos Fuente: Raleway
  • Tamaño del texto de campos: 16 px

Página de producto mínimo

  • Ancho del borde de los campos: 1px
  • Color del borde de los campos: # 0c71c3

Página de producto mínimo

Configuración de menús desplegables

Realice también algunos cambios en la configuración de los menús desplegables.

  • Color de fondo de los menús desplegables: # d9e0ea
  • Relleno superior: 90 px
  • Acolchado inferior: 90 px

Página de producto mínimo

  • Ancho de borde de menús desplegables: 10px
  • Menús desplegables Color del borde: rgba (0,0,0,0)

Página de producto mínimo

Configuraciones de botones

Y complete el diseño del módulo al diseñar el botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 13 px
  • Color del texto del botón: rgba (255,255,255,0.8)
  • Color de fondo del botón: # 262f44
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px

Página de producto mínimo

  • Espaciado entre letras de botones: 3px
  • Fuente del botón: Raleway
  • Peso de la fuente del botón: semi negrita
  • Estilo de fuente del botón: mayúscula
  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Acolchado izquierdo: 65 px
  • Relleno derecho: 65 px

Página de producto mínimo

  • Posición vertical de la sombra de la caja: 12px
  • Caja Shadow Blur Fuerza: 38px
  • Color de sombra: rgba (38,47,68,0.36)

Página de producto mínimo

Agregar fila # 3

Estructura de columna

¡A la siguiente y última fila! Elija la siguiente estructura de columna:

Página de producto mínimo

Configuración de columna 1

Espaciado

Abra la configuración de la columna 1 y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 100px
  • Relleno inferior: 100px

Página de producto mínimo

Agregar módulo de texto a la columna 1

Añadir contenido H2

Continúe agregando un módulo de texto normal a la columna 1 con algún contenido H2 de su elección.

Página de producto mínimo

Configuraciones de texto H2

Pase a la pestaña de diseño y cambie la configuración del texto H2 en consecuencia:

  • Título 2 Fuente: Raleway
  • Título 2 Peso de fuente: Ultra negrita
  • Título 2 Color del texto: # 262f44
  • Encabezado 2 Tamaño del texto: 30px
  • Encabezado 2 letras espaciadas: 1px
  • Título 2 Altura de línea: 1.4em

Página de producto mínimo

Espaciado

Agregue también un margen inferior al Módulo de texto.

  • Margen inferior: 10px

Página de producto mínimo

Agregue el módulo de descripción de Woo a la columna 1

Contenido dinámico

Agregue el Módulo de descripción de Woo justo debajo del Módulo de texto en la columna 1.

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

Página de producto mínimo

Configuraciones de texto

Modifique la configuración de texto en consecuencia:

  • Fuente de texto: Raleway
  • Peso de fuente de texto: medio
  • Tamaño de texto: 12px
  • Espacio entre letras de texto: 1 px
  • Altura de la línea de texto: 2.3em

Página de producto mínimo

Agregue el módulo de información adicional Woo a la columna 1

Elementos

También estamos agregando el módulo de información adicional Woo. Vaya a la configuración de elementos y apague el título.

  • Mostrar título: OFF

Página de producto mínimo

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración del texto.

  • Fuente de texto: Raleway
  • Estilo de fuente de texto: cursiva
  • Tamaño de texto: 12px
  • Espacio entre letras de texto: 1 px
  • Altura de la línea de texto: 1.3em

Página de producto mínimo

Configuración de texto de atributo

Modifique la configuración del texto del atributo también.

  • Fuente de atributo: Raleway
  • Peso de fuente del atributo: negrita
  • Tamaño del texto del atributo: 12 px
  • Espacio entre letras de atributo: 1px
  • Altura de línea de atributo: 2em

Página de producto mínimo

Agregar módulo de imagen a la columna 1

Cargar imagen

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de imagen normal. Sube una imagen relevante de tu elección.

Página de producto mínimo

Sombra de la caja

Luego, vaya a la pestaña de diseño y agregue una sombra de cuadro sutil.

  • Posición vertical de la sombra de la caja: 60 px
  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.1)

Página de producto mínimo

Agregar módulo de imagen a la columna 2

Deje el cuadro de imagen vacío

En la columna 2, el único módulo que necesitamos es un módulo de imagen normal. Asegúrese de dejar el cuadro de contenido vacío.

Página de producto mínimo

Agregar imagen de fondo dinámica

En su lugar, estamos vinculando la imagen de fondo a la imagen destacada del producto utilizando contenido dinámico.

  • Imagen de fondo: Imagen destacada

Página de producto mínimo

Dimensionamiento

También estamos obligando a que el Módulo de imagen sea de ancho completo en la configuración de tamaño.

  • Forzar ancho completo: sí

Página de producto mínimo

Espaciado

Aumentaremos el tamaño del módulo y crearemos una superposición superior modificando la configuración de espaciado a continuación.

  • Margen superior: -5vw
  • Relleno superior: 25vw
  • Relleno inferior: 25vw

Página de producto mínimo

Escala de transformación

Luego, aumentaremos el tamaño del módulo aún más modificando las opciones de escala de transformación.

  • Derecha: 150%
  • Inferior: 150%

Página de producto mínimo

Transformar Traducir

Para reposicionar el módulo de imagen, también aplicaremos un valor de traducción de transformación inferior.

  • Inferior: 18vw

Página de producto mínimo

Visibilidad

Y por último, pero no menos importante, queremos que este módulo se muestre solo en el escritorio. Es por eso que ocultaremos todo el módulo en la tableta y el teléfono. Una vez hecho esto, ¡el diseño está completo!

Página de producto mínimo

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Página de producto mínimo

Pensamientos finales

En esta publicación, le mostramos cómo crear una página impresionante de productos mínimos que puede reutilizar para todos sus productos. Este tutorial muestra lo fácil que es crear diseños de páginas de productos utilizando los nuevos módulos de WooCommerce de Divi. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.