Cómo presentar de forma creativa productos populares en su página de destino de Divi

Avance

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

Escritorio

Estático

Flotar

Móvil

Descargue el diseño de productos populares GRATIS

Para poner sus manos en el diseño de productos populares gratuitos, 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.

¡Empecemos a Recrear!

Agregar nueva sección

Espaciado

Comience agregando una sección regular a una página nueva o existente. Abra la configuración de la sección y ajuste los valores de relleno superior e inferior en consecuencia:

• Acolchado superior: 8vw
• Acolchado inferior: 8vw

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la fila.

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 85vw
• Ancho máximo: 100%

Agregue el módulo de imagen Woo a la columna

Contenido dinámico

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es el módulo de imagen de Woo. Seleccione el producto que desea mostrar.

Imagen

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

• Esquinas redondeadas de la imagen: 20px (todas las esquinas)

• Fuerza de desenfoque de sombra de cuadro: 50px
• Color de sombra: rgba(0,0,0,0.3)

Agregue el módulo de título de Woo a la columna

Contenido dinámico

El siguiente módulo que necesitamos es el módulo de títulos de Woo. Seleccione un producto de su elección.

Configuración del texto del título

Modifique la configuración del texto del título del módulo de la siguiente manera:

• Título Nivel de encabezado: H3
• Fuente del título: Prata
• Tamaño del texto del título: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Espaciado

Complete la configuración del módulo agregando algunos valores de margen personalizados en diferentes tamaños de pantalla.

• Margen superior: 7vw (escritorio), 14vw (tableta y teléfono)
• Margen inferior: 2vw (escritorio), 4vw (tableta y teléfono)
• Margen izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
• Margen derecho: 2vw (escritorio), 5vw (tableta y teléfono)

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

Contenido dinámico

Pasamos al siguiente módulo, que es el módulo de descripción de Woo. Seleccione un producto de su elección.

Configuración de texto

Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente del texto: Montserrat
• Tamaño del texto: 0.8vw (Escritorio), 1.6vw (Tableta), 2vw (Teléfono)
• Altura de la línea de texto: 1,8 em

Espaciado

Juegue con los valores de margen personalizados en diferentes tamaños de pantalla también.

• Margen superior: 2vw (escritorio), 4vw (tableta y teléfono)
• Margen inferior: 2vw (escritorio), 4vw (tableta y teléfono)
• Margen izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
• Margen derecho: 2vw (escritorio), 5vw (tableta y teléfono)

Agregue el módulo Agregar al carrito de Woo a la columna

Contenido dinámico

Justo debajo del módulo de descripción de Woo, agregaremos un módulo para agregar al carrito de Woo. Seleccione un producto de su elección.

Configuración de campos predeterminados

Pase a la pestaña de diseño del módulo y cambie la configuración de los campos de la siguiente manera:

• Color de fondo de los campos: #ffffff
• Color del texto de los campos: #3d3d3d
• Campos Fuente: Montserrat

• Ancho del borde de los campos: 0px
• Color del borde de los campos: #3d3d3d

Configuración de campos flotantes

Modifique el ancho del borde al pasar el mouse.

• Ancho del borde de los campos: 1px

Configuración de botón predeterminada

Abra la configuración del botón a continuación y diseñe el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Color del texto del botón: #3d3d3d
• Color de fondo del botón: #FFFFFF
• Ancho del borde del botón: 0px
• Color del borde del botón: #3d3d3d

• Fuente del botón: Prata

• Acolchado superior: 0.5vw
• Acolchado inferior: 0.5vw
• Acolchado izquierdo: 2vw
• Acolchado derecho: 2vw

Configuración del botón flotante

Cambie el ancho del borde del botón al pasar el mouse.

• Ancho del borde del botón: 1px

Espaciado

Luego, vaya al espaciado y agregue algunos valores de margen personalizados en diferentes tamaños de pantalla.

• Margen inferior: 7vw (escritorio), 14vw (tableta y teléfono)
• Margen izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
• Margen derecho: 2vw (escritorio), 5vw (tableta y teléfono)

Configuración de borde predeterminada

Modifique también la configuración del borde del módulo.

• Ancho del borde inferior: 1px
• Color del borde inferior: #3d3d3d

Configuración del borde flotante

Y elimine el ancho del borde al pasar el mouse.

• Ancho del borde inferior: 0px

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

Contenido dinámico

El último módulo que necesitamos en la columna es un módulo de precios de Woo. Seleccione un producto de su elección.

Configuración del texto del título

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

• Fuente del texto del precio: Montserrat
• Peso de la fuente del texto del precio: Light
• Color del texto del precio: #333333
• Tamaño del texto del precio: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Altura de la línea de precio: 1,8 em

Espaciado

Modifique también los valores de los márgenes.

• Margen inferior: 5vw
• Margen izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
• Margen derecho: 2vw (escritorio), 5vw (tableta y teléfono)

Clonar columna dos veces

Una vez que haya completado la columna y todos los módulos que contiene, puede clonar la columna completa dos veces.

Cambiar estructura de columna de fila

Cambie la estructura de la columna de la fila a continuación.

Cambiar todo el contenido dinámico

Continúe cambiando todo el contenido dinámico de las columnas 2 y 3 a otros productos de su elección.

Cambiar el espaciado del módulo de la columna 2

Módulo de título Woo

Los módulos de la segunda columna necesitan algunos cambios de espaciado adicionales. Comience con el módulo de títulos de Woo.

• Margen izquierdo: 5vw (Todos los dispositivos)
• Margen derecho: 5vw (Todos los dispositivos)

Módulo de descripción de Woo

Cambie la configuración de espaciado del módulo de descripción de Woo a continuación.

• Margen superior: 4vw (todos los dispositivos)
• Margen inferior: 4vw (todos los dispositivos)
• Margen izquierdo: 5vw (Todos los dispositivos)
• Margen derecho: 5vw (Todos los dispositivos

Módulo Agregar al carrito de Woo

Pase a la configuración de espaciado del módulo Agregar al carrito de Woo.

• Margen izquierdo: 5vw (Todos los dispositivos)
• Margen derecho: 5vw (Todos los dispositivos)

Módulo Precio Woo

Y complete los módulos de la columna 2 modificando también la configuración de espaciado del módulo Woo Price.

• Margen izquierdo: 5vw (Todos los dispositivos)
• Margen derecho: 5vw (Todos los dispositivos)

Estilos de columna

Todas las columnas

Color de fondo

Ahora que tenemos todos nuestros módulos en su lugar, podemos comenzar a diseñar las columnas. Cada una de las columnas necesita un color de fondo blanco.

• Color de fondo: #ffffff

Borde

También puede agregar ’20px’ en las esquinas de cada columna.

• Esquinas redondeadas: 20px (todas las esquinas)

Columna 1 y 3

Sombra de cuadro predeterminada

Continúe agregando una sombra de cuadro predeterminada a las columnas 1 y 3.

• Posición vertical de la sombra del cuadro: 22px
• Sombra de cuadro Fuerza de desenfoque de sombra: 150 px
• Color de sombra: rgba(0,0,0,0) (Escritorio), rgba(0,0,0,0.1) (Tableta y teléfono)

Sombra de caja flotante

Cambia el color de la sombra flotante al pasar el mouse.

• Color de sombra: rgba(0,0,0,0.27)

Filtros predeterminados

Luego, vaya a la configuración de filtros y agregue un poco de desenfoque a las columnas 1 y 3.

• Desenfoque: 4px (escritorio), 0px (tableta y teléfono)

Filtros de desplazamiento

Elimina el desenfoque al pasar el mouse.

• Desenfoque: 0px

Índice Z predeterminado

Asigne el mismo valor de índice z predeterminado a las siguientes columnas.

• Índice Z: 9

Pasar el índice Z

Y aumente ese mismo índice z al pasar el mouse.

• Índice Z: 12

Solo columna 1

Transformar Traducir

Continúe cambiando la posición de la columna 1 usando la opción de traducción de transformación.

• Derecha: 7vw (escritorio), 0vw (tableta y teléfono)
• Abajo: 2vw (escritorio), 0vw (tableta y teléfono)

Solo columna 3

Transformar Traducir

Abra la configuración de transformación de la columna 3 a continuación y aplique la siguiente configuración:

• Derecha: 7vw (escritorio), 0vw (tableta y teléfono)
• Abajo: -2vw (escritorio), 0vw (tableta y teléfono)

Solo columna 2

Sombra de la caja

Pase a la configuración de la columna 2 y aplique una sombra de cuadro sutil.

• Posición vertical de la sombra del cuadro: 22px
• Fuerza de desenfoque de sombra de cuadro: 150px
• Color de sombra: rgba(0,0,0,0.27) (Escritorio), rgba(0,0,0,0.1) (Tableta y teléfono)

Índice Z

Por último, pero no menos importante, cambie el índice z de la segunda columna y ¡listo!

• Índice Z: 11

Avance

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

Escritorio

Estático

Flotar

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo presentar con elegancia productos populares en su página de inicio de Divi. Le mostramos, paso a paso, cómo crear un resultado hermoso utilizando solo las opciones integradas de Divi. Este ejemplo de diseño muestra cuán versátiles son los nuevos módulos WooCommerce de Divi y cómo puede crear un diseño web de comercio electrónico impresionante en muy poco tiempo. 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.