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

Avance

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

Descargue el diseño de página de 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 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 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 está utilizando información de producto diferente, no se preocupe. Aún podrá seguir el tutorial, pero el resultado será ligeramente diferente según la información del producto que esté compartiendo.

Título y categoría del producto

Descripción breve y larga del producto

Imagen del producto y galería

Datos del producto

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

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.

Cambiar a Visual Builder

Una vez hecho esto, cambie a Visual Builder.

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

Dentro de 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 siéntase libre de eliminar toda la sección.

2. Cree una página de producto mínima utilizando Visual Builder 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

Espaciado

Agregue también algunos valores de margen personalizados.

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

desbordamientos

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

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Añadir Fila #1

Estructura de la columna

Agrega la primera fila a tu sección usando la siguiente estructura de columnas:

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y elimine todo el relleno superior e inferior predeterminado.

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

Agregue el módulo Woo Breadcrumb 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

Configuración de texto

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

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

Ajustes 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: 13px

Añadir Fila #2

Estructura de la columna

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

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: 100px
• Relleno inferior: 0px

Configuración de la 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

Borde

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

Sombra de la caja

Junto con una sombra de caja sutil.

• Posición vertical de la sombra del cuadro: 60px
• Fuerza de desenfoque de sombra de cuadro: 100px
• Color de sombra: rgba(0,0,0,0.1)

desbordamientos

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

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Agregue el módulo de imagen de Woo 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 Woo Image Module.

• Producto: Este Producto

Espaciado

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

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

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 regular. Asegúrese de conectar el cuadro de contenido a las categorías de productos.

• Cuerpo: Categorías de productos

Ajustes 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 del enlace: Raleway
• Peso de la fuente del enlace: Negrita
• Estilo de fuente del enlace: Mayúsculas
• Color del texto del enlace: #fc7b52
• Tamaño del texto del enlace: 12px
• Espaciado entre letras de enlace: 2px
• Altura de la línea de enlace: 1,3 em

Agregue el módulo de título de Woo 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

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)

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
• Descripción Tipo: Breve descripción

Configuración de texto

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

• Fuente del texto: Raleway
• Peso de fuente de texto: Medio
• Tamaño del texto: 12px
• Espaciado entre letras de texto: 1px
• Altura de la línea de texto: 2,3 em

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

Contenido dinámico

Pasemos al siguiente módulo, que es el módulo Woo Price.

• Producto: Este Producto

Configuración de texto de precio

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

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

Espaciado

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

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

Agregar Woo Agregar al módulo del carrito a la columna 2

Contenido dinámico

El siguiente y último módulo que necesitamos en la columna 2 es el módulo Agregar al carrito de Woo.

• Producto: Este Producto

Configuración de texto

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

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

Configuración 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 del campo: #262f44
• Color de fondo del foco de los campos: rgba(0,0,0,0)
• Color de texto de enfoque de campos: #262f44
• Margen derecho: 6px
• Relleno superior: 32px
• Relleno inferior: 32px
• Fuente de los campos: Raleway
• Tamaño del texto de los campos: 16px

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

Configuración de los menús desplegables

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

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

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

Configuración de botones

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

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 13px
• 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

• 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úsculas
• Relleno superior: 20px
• Relleno inferior: 20px
• Relleno izquierdo: 65px
• Relleno derecho: 65px

• Posición vertical de la sombra del cuadro: 12px
• Fuerza de desenfoque de sombra de cuadro: 38px
• Color de sombra: rgba (38,47,68,0.36)

Añadir Fila #3

Estructura de la columna

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

Configuración de la columna 1

Espaciado

Abra la configuración de la columna 1 y agregue un relleno superior e inferior personalizado.

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

Agregar módulo de texto a la columna 1

Agregar contenido H2

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

Configuración de texto H2

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

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

Espaciado

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

• Margen inferior: 10px

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
• Descripción Tipo: Descripción

Configuración de texto

Modifique la configuración de texto en consecuencia:

• Fuente del texto: Raleway
• Peso de fuente de texto: Medio
• Tamaño del texto: 12px
• Espaciado entre letras de texto: 1px
• Altura de la línea de texto: 2,3 em

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

Elementos

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

• Mostrar título: APAGADO

Configuración de texto

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

• Fuente del texto: Raleway
• Estilo de fuente de texto: cursiva
• Tamaño del texto: 12px
• Espaciado entre letras de texto: 1px
• Altura de línea de texto: 1,3 em

Configuración de texto de atributo

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

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

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. Cargue una imagen relevante de su elección.

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 del cuadro: 60px
• Fuerza de desenfoque de sombra de cuadro: 50px
• Color de sombra: rgba(0,0,0,0.1)

Agregar módulo de imagen a la columna 2

Dejar 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.

Agregar imagen de fondo dinámica

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

• Imagen de fondo: Imagen destacada

Dimensionamiento

También estamos obligando al módulo de imagen a tener el ancho completo en la configuración de tamaño.

• Forzar ancho completo: Sí

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
• Acolchado superior: 25vw
• Acolchado inferior: 25vw

Escala de transformación

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

• Derecha: 150%
• Fondo: 150%

Transformar Traducir

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

• Abajo: 18vw

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!

Avance

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

Pensamientos finales

En esta publicación, le mostramos cómo crear una impresionante página de producto minimalista 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 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 de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.