Cómo crear una cuadrícula de productos dinámica y vibrante para su página de destino Divi


Las páginas de productos son sorprendentes cuando se trata de resaltar un producto específico y sus detalles, pero cuando está creando una página de destino, es posible que desee incluir más productos en un solo lugar y permitir que las personas agreguen productos directamente a su carrito. Con los nuevos módulos WooCommerce de Divi, ahora puede agregar cualquier producto a cualquier página en la que esté trabajando y diseñarlo como quiera con las opciones integradas de Divi. Para ayudarlo a comenzar, le mostraremos cómo crear una cuadrícula dinámica de productos dinámicos con botones para agregar al carrito. ¡El diseño se ve muy bien en todos los tamaños de pantalla y también podrás descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

cuadrícula de producto

Descargar The Dynamic Product Grid Section GRATIS

Para poner sus manos en la sección de cuadrícula dinámica de productos gratuita, primero deberá descargarla 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.

¡Comencemos a recrearnos!

Agregar nueva sección

Comience agregando una nueva sección a la página en la que está trabajando.

cuadrícula de producto

Agregar nueva fila

Estructura de columna

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

cuadrícula de producto

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la página.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

cuadrícula de producto

Agregar clase CSS a cada columna

Luego, abra cada una de las columnas individualmente y asígneles la misma clase CSS. Usaremos esta clase CSS al final de este tutorial para asegurarnos de que todos los productos se muestren automáticamente uno debajo del otro en la tableta.

  • Clase CSS: tableta de ancho completo

cuadrícula de producto

cuadrícula de producto

Añadir Woo Image Module a la Columna 1

Contenido dinámico

¡Es hora de agregar módulos! Comenzaremos con la columna 1. Agregue un módulo de imagen Woo y seleccione un producto de su elección. Para lograr exactamente el mismo resultado que en la vista previa, asegúrese de que la imagen de su producto tenga un fondo transparente.

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Continúe cambiando el color de fondo del módulo.

  • Color de fondo: #ffafce

cuadrícula de producto

Espaciado

Luego, vaya a la configuración de espaciado y cambie los valores de la siguiente manera:

  • Margen superior: 8vw (escritorio), 0vw (tableta y teléfono)
  • Relleno superior: 6vw (escritorio), 10vw (tableta), 16vw (teléfono)
  • Acolchado izquierdo: 9vw (escritorio), 12vw (tableta), 20vw (teléfono)
  • Relleno derecho: 9vw (escritorio), 12vw (tableta), 20vw (teléfono)

cuadrícula de producto

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

Contenido dinámico

El siguiente módulo que necesitamos en la columna 1 es un Módulo de título Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Continúe agregando un color de fondo.

  • Color de fondo: #ffafce

cuadrícula de 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 en consecuencia:

  • Nivel de título del título: H3
  • Fuente del título: Montserrat
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 2vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Altura de la línea de título: 1.6vw (escritorio), 3.4vw (tableta), 5vw (teléfono)

cuadrícula de producto

Espaciado

Juega con los valores de relleno también.

  • Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno izquierdo: 9vw
  • Relleno derecho: 9vw

cuadrícula de producto

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

Contenido dinámico

El siguiente módulo que necesitamos es un Módulo de Descripción Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
  • Tipo de descripción: breve descripción

cuadrícula de producto

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: #ffafce

cuadrícula de producto

Configuraciones de texto

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

  • Fuente de texto: Playfair Display
  • Color del texto: # f7f7f7
  • Tamaño del texto: 0.9vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Altura de la línea de título: 1.8em

cuadrícula de producto

Espaciado

Agregue un poco de relleno izquierdo y derecho a continuación.

  • Relleno izquierdo: 9vw
  • Relleno derecho: 9vw

cuadrícula de producto

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

Contenido dinámico

En el siguiente módulo en la columna 1, que es un módulo de precios Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: #ffafce

cuadrícula de producto

Configuración de texto de precio

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

  • Fuente del precio: Montserrat
  • Peso de fuente de precio: negrita
  • Color del texto del precio: #ffffff
  • Tamaño del texto del precio: 3vw (escritorio), 5vw (tableta), 6vw (teléfono)
  • Altura de la línea de precios: 2vw

cuadrícula de producto

Espaciado

Modifique la configuración de espaciado también.

  • Relleno superior: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno inferior: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno izquierdo: 9vw
  • Relleno derecho: 9vw

cuadrícula de producto

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

Contenido dinámico

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

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: #ffafce

cuadrícula de producto

Configuración de texto de campos

Modifique la configuración de texto de los campos de la siguiente manera:

  • Alineación de texto de campos: centro
  • Tamaño del texto de los campos: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
  • Campos de esquinas redondeadas: 10vw (todas las esquinas)

cuadrícula de producto

Configuraciones de botones

Continúe aplicando estilo a la configuración del botón.

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

cuadrícula de producto

  • Radio del borde del botón: 50vw
  • Fuente del botón: Montserrat

cuadrícula de producto

  • Relleno superior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Acolchado izquierdo: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
  • Relleno derecho: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)

cuadrícula de producto

Espaciado

Y complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado inferior: 6vw (escritorio), 10vw (tableta), 15vw (teléfono)
  • Relleno izquierdo: 9vw
  • Relleno derecho: 9vw

cuadrícula de producto

Añadir Woo Image Module a la Columna 2

Contenido dinámico

Ahora que hemos completado todos los módulos en la columna 1, podemos pasar a la columna 2. Los valores de escritorio de los módulos en la columna 2 son completamente diferentes de los módulos en la columna 1. Es por eso que no estamos clonando los módulos sino agregando ellos desde cero en su lugar. Sin embargo, tenga en cuenta que todas las configuraciones de la tableta y el dispositivo móvil coincidirán con los módulos de la columna 1. Agregue un módulo de imagen Woo a la columna 2 y seleccione un producto de su elección.

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: # ffd593

cuadrícula de producto

Espaciado

Modifique los valores de espaciado también.

  • Relleno superior: 2vw (escritorio), 6vw (tableta), 10vw (teléfono)
  • Acolchado izquierdo: 5vw (escritorio), 12vw (tableta), 20vw (teléfono)
  • Relleno derecho: 5vw (escritorio), 12vw (tableta), 20vw (teléfono)

cuadrícula de producto

Añadir Woo Title Module a la Columna 2

Contenido dinámico

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

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Modifique el color de fondo a continuación.

  • Color de fondo: # ffd593

cuadrícula de producto

Configuración del texto del título

Cambie la configuración del texto del título también.

  • Nivel de título del título: H3
  • Fuente del título: Montserrat
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 1.2vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Altura de la línea de título: 1.6vw (escritorio), 3.4vw (tableta), 5vw (teléfono)

cuadrícula de producto

Espaciado

Y aplique algunos valores de relleno personalizados a la configuración de espaciado.

  • Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
  • Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)

cuadrícula de producto

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

Contenido dinámico

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

  • Producto: Buscar en la lista
  • Tipo de descripción: breve descripción

cuadrícula de producto

Color de fondo

Modifique el color de fondo a continuación.

  • Color de fondo: # ffd593

cuadrícula de producto

Configuraciones de texto

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

  • Fuente de texto: Playfair Display
  • Color del texto: # f7f7f7
  • Tamaño del texto: 0.9vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Altura de la línea de título: 1.8em

cuadrícula de producto

Espaciado

Agregue algo de relleno izquierdo y derecho en diferentes tamaños de pantalla también.

  • Acolchado izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
  • Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)

cuadrícula de producto

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

Contenido dinámico

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

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: # ffd593

cuadrícula de producto

Configuración de texto de precio

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

  • Fuente del precio: Montserrat
  • Peso de fuente de precio: negrita
  • Color del texto del precio: #ffffff
  • Tamaño del texto del precio: 1.5vw (escritorio), 5vw (tableta), 6vw (teléfono)
  • Altura de la línea de precios: 2vw

cuadrícula de producto

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Relleno inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
  • Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)

cuadrícula de producto

Añadir Woo Añadir al módulo de carro a la columna 2

Contenido dinámico

Complete la presentación del producto en la columna 2 agregando un módulo Woo Add To Cart. Seleccione un producto de su elección.

  • Producto: Buscar en la lista

cuadrícula de producto

Color de fondo

A continuación, modifique el color de fondo del módulo.

  • Color de fondo: # ffd593

cuadrícula de producto

Configuración de texto de campos

Cambie la configuración de texto de los campos también

  • Alineación de texto de campos: centro
  • Tamaño del texto de los campos: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
  • Campos de esquinas redondeadas: 10vw (todas las esquinas)

cuadrícula de producto

Configuraciones de botones

Luego, peina el botón.

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

cuadrícula de producto

  • Radio del borde del botón: 50vw
  • Fuente del botón: Montserrat

cuadrícula de producto

  • Relleno superior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
  • Acolchado izquierdo: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
  • Relleno derecho: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)

cuadrícula de producto

Espaciado

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

  • Acolchado inferior: 3vw (escritorio), 10vw (tableta), 15vw (teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
  • Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)

cuadrícula de producto

Clone los módulos Woo en la columna 2 y colóquelos en el orden correcto

Una vez que haya completado todos los módulos en la columna 2, puede clonar cada uno de ellos y colocar los duplicados en el mismo orden.

cuadrícula de producto

Cambiar contenido dinámico de todos los duplicados

Cambie el producto para cada módulo duplicado.

  • Producto: Buscar en la lista

cuadrícula de producto

Cambiar el color de fondo de todos los duplicados

Junto con el color de fondo.

  • Color de fondo: # aae7ed

cuadrícula de producto

Clone los módulos de Woo en la columna 2 y coloque duplicados en la columna 3

Clone todos los módulos del producto una vez más y coloque los duplicados en la columna 3.

cuadrícula de producto

Cambiar contenido dinámico de todos los duplicados

Cambie el contenido dinámico de cada módulo en la columna 3.

  • Producto: Buscar en la lista

cuadrícula de producto

Cambiar el color de fondo de todos los duplicados

Junto con el color de fondo.

  • Color de fondo: # 939bff

cuadrícula de producto

Agregar margen superior al módulo de imagen Woo

Y para crear algo de espacio en la parte superior de la columna 3, abriremos el Módulo de imagen Woo y agregaremos un margen superior.

  • Margen superior: 18vw (escritorio), 0vw (tableta y teléfono)

cuadrícula de producto

Agregue el módulo de código debajo de los módulos Woo en la columna 3

La última parte de este tutorial es permitir que los elementos se muestren debajo de cada uno (en lugar de uno al lado del otro) en la tableta. Para hacer eso, agregaremos un Módulo de Código.

cuadrícula de producto

Insertar código CSS de página

E insertaremos algunas líneas de código CSS. Una vez que haya completado este paso, ¡ya está!

cuadrícula de producto

Avance

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

cuadrícula de producto

Pensamientos finales

En esta publicación, le mostramos cómo recrear una cuadrícula de productos vibrante con botones para agregar al carrito. Esta es una excelente manera de mostrar múltiples productos en su página de destino. Este tutorial muestra cuán versátiles son los nuevos módulos WooCommerce de Divi cuando se combinan con las opciones de elementos integrados de Divi. ¡También pudiste descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, asegúrese de 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.