Al mostrar productos populares en una página de destino, no solo es importante elegir los productos correctos sino también mostrarlos de manera atractiva. Con los nuevos módulos WooCommerce de Divi, innumerables nuevas posibilidades de diseño han caído en nuestro regazo. Para ayudarlo a inspirarse, recrearemos un diseño de producto popular hermoso y elegante que puede usar para su próxima página de inicio de Divi. ¡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.

Escritorio

Estático

productos populares

Flotar

productos populares

Móvil

productos populares

¡Comencemos a recrear!

Agregar nueva sección

Espaciado

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

  • Relleno superior: 8vw
  • Relleno inferior: 8vw

productos populares

Agregar nueva fila

Estructura de columna

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

productos populares

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 85vw
  • Ancho Máx .: 100%

productos populares

Añadir Woo Image Module 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 Woo. Seleccione el producto que desea mostrar.

productos populares

Imagen

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

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

productos populares

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

productos populares

Añadir Woo Title Module a la columna

Contenido dinámico

El siguiente módulo que necesitamos es el Woo Title Module. Seleccione un producto de su elección.

productos populares

Configuración del texto del título

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

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

productos populares

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)

productos populares

Agregar módulo de descripción de Woo a la columna

Contenido dinámico

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

productos populares

Configuraciones de texto

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

  • Fuente de texto: Montserrat
  • Tamaño del texto: 0.8vw (escritorio), 1.6vw (tableta), 2vw (teléfono)
  • Altura de la línea de texto: 1.8em

productos populares

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)

productos populares

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

Contenido dinámico

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

productos populares

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

productos populares

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

productos populares

Configuración de campos de desplazamiento

Modifique el ancho del borde al pasar el ratón.

  • Ancho del borde de los campos: 1px

productos populares

Configuración de botón predeterminada

A continuación, abra la configuración del botón y déle estilo.

  • 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

productos populares

  • Fuente del botón: Prata

productos populares

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

productos populares

Configuración del botón de desplazamiento

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

  • Ancho del borde del botón: 1px

productos populares

Espaciado

Luego, vaya al espacio 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)

productos populares

Configuración de borde predeterminada

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

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

productos populares

Configuración de borde flotante

Y quite el ancho del borde al pasar el ratón.

  • Ancho del borde inferior: 0px

productos populares

Añadir módulo de precios Woo a la columna

Contenido dinámico

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

productos populares

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 de texto de precio: Montserrat
  • Precio Texto Fuente Peso: Ligero
  • 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.8em

productos populares

Espaciado

Modifique los valores de margen también.

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

productos populares

Columna de clonación dos veces

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

productos populares

Cambiar estructura de columna de fila

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

productos populares

Cambiar todo el contenido dinámico

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

productos populares

Cambiar el espaciado del módulo de la columna 2

Woo Title Module

Los módulos en la segunda columna necesitan algunos cambios de espacio adicionales. Comience con el Módulo de título de Woo.

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

productos populares

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

productos populares

Woo Añadir al carro Módulo

Pase a la configuración de espaciado del módulo Añadir al carro de Woo.

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

productos populares

Módulo de precios Woo

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

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

productos populares

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

productos populares

Frontera

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

  • Esquinas redondeadas: 20px (todas las esquinas)

productos populares

Columna 1 y 3

Sombra de caja predeterminada

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

  • Posición vertical de la sombra de la caja: 22 px
  • Box Shadow Shadow Blur Fuerza: 150 px
  • Color de sombra: rgba (0,0,0,0) (Escritorio), rgba (0,0,0,0.1) (Tableta y teléfono)

productos populares

Hover Box Shadow

Cambia el color de la sombra al pasar el cursor sobre él.

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

productos populares

Filtros predeterminados

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

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

productos populares

Filtros de desplazamiento

Eliminar el desenfoque al pasar el ratón.

  • Desenfoque: 0px

productos populares

Índice Z predeterminado

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

  • Índice Z: 9

productos populares

Pase el índice Z

Y aumente el mismo índice z al pasar el mouse por encima.

  • Índice Z: 12

productos populares

Solo columna 1

Transformar Traducir

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

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

productos populares

Solo columna 3

Transformar Traducir

A continuación, abra la configuración de transformación de la columna 3 y aplique la siguiente configuración:

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

productos populares

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 de la caja: 22 px
  • Caja Shadow Blur Fuerza: 150px
  • Color de sombra: rgba (0,0,0,0.27) (Escritorio), rgba (0,0,0,0.1) (Tableta y teléfono)

productos populares

Índice Z

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

  • Índice Z: 11

productos populares

Avance

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

Escritorio

Estático

productos populares

Flotar

productos populares

Móvil

productos populares

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

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!