Las páginas de productos son increíbles 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 Divi y sus nuevos módulos de WooCommerce, ahora puedes agregar cualquier producto a cualquier página en la que estés trabajando y darle el estilo que quieras usando las opciones integradas de Divi. Para ayudarlo a comenzar, le mostraremos cómo crear una cuadrícula de productos dinámica y vibrante con botones para agregar al carrito. ¡El diseño se ve muy bien en todos los tamaños de pantalla y también podrá descargar el archivo JSON gratis!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Descargue la sección de cuadrícula de productos dinámicos GRATIS
Para poner sus manos en la sección de cuadrícula de productos dinámica gratuita, primero deberá descargarla 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.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Empecemos a Recrear!
Agregar nueva sección
Comience agregando una nueva sección a la página en la que está trabajando.
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 permita que la fila ocupe todo el ancho de la página.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Agregar clase CSS a cada columna
Luego, abre cada una de las columnas individualmente y asígnales la misma clase CSS. Usaremos esta clase de 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
Agregue el módulo de imagen de Woo a la columna 1
Contenido dinámico
¡Es hora de agregar módulos! Comenzaremos con la columna 1. Agregue un módulo de imagen de 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
Color de fondo
Continúe cambiando el color de fondo del módulo.
- Color de fondo: #ffafce
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)
- Acolchado superior: 6vw (escritorio), 10vw (tableta), 16vw (teléfono)
- Relleno izquierdo: 9vw (escritorio), 12vw (tableta), 20vw (teléfono)
- Relleno derecho: 9vw (escritorio), 12vw (tableta), 20vw (teléfono)
Agregue el módulo de título de 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 de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Continúe agregando un color de fondo.
- Color de fondo: #ffafce
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:
- Título Nivel de encabezado: 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)
Espaciado
Juega con los valores de relleno también.
- Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado izquierdo: 9vw
- Acolchado derecho: 9vw
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 de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
- Tipo de descripción: descripción breve
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #ffafce
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: Pantalla Playfair
- Color del texto: #f7f7f7
- Tamaño del texto: 0.9vw (Escritorio), 2vw (Tableta), 3vw (Teléfono)
- Altura de la línea del título: 1,8 em
Espaciado
Agregue un poco de relleno izquierdo y derecho a continuación.
- Acolchado izquierdo: 9vw
- Acolchado derecho: 9vw
Agregue el módulo de precios de Woo a la columna 1
Contenido dinámico
Pasemos al siguiente módulo en la columna 1, que es un módulo de precio Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #ffafce
Configuración de texto de precio
Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Precio Fuente: 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 línea de precio: 2vw
Espaciado
Modifique también la configuración de espaciado.
- Acolchado superior: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado inferior: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado izquierdo: 9vw
- Acolchado derecho: 9vw
Agregue el módulo Agregar al carrito de Woo 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
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #ffafce
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
- Campos Tamaño del texto: 1vw (Escritorio), 3vw (Tableta), 4vw (Teléfono)
- Campos Esquinas redondeadas: 10vw (Todas las esquinas)
Configuración de botones
Continúe diseñando 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
- Radio del borde del botón: 50vw
- Fuente del botón: Montserrat
- Relleno superior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
- Relleno izquierdo: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
- Relleno derecho: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
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)
- Acolchado izquierdo: 9vw
- Acolchado derecho: 9vw
Agregue el módulo de imagen de Woo 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 en su lugar, desde cero. Tenga en cuenta, sin embargo, que todas las configuraciones de tabletas y dispositivos móviles coincidirán con los módulos en la columna 1. Agregue un módulo de imagen de Woo a la columna 2 y seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #ffd593
Espaciado
Modifique también los valores de espaciado.
- Acolchado superior: 2vw (escritorio), 6vw (tableta), 10vw (teléfono)
- Relleno izquierdo: 5vw (escritorio), 12vw (tableta), 20vw (teléfono)
- Relleno derecho: 5vw (escritorio), 12vw (tableta), 20vw (teléfono)
Agregue el módulo de título de Woo a la columna 2
Contenido dinámico
El siguiente módulo que necesitamos es un módulo de título de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Modifique el color de fondo a continuación.
- Color de fondo: #ffd593
Configuración del texto del título
Cambie también la configuración del texto del título.
- Título Nivel de encabezado: 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)
Espaciado
Y aplique algunos valores de relleno personalizados a la configuración de espaciado.
- Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Relleno izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)
Agregue el módulo de descripción de Woo a la columna 2
Contenido dinámico
Pasemos al siguiente módulo, que es un módulo de descripción de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
- Descripción Tipo: Breve descripción
Color de fondo
Modifique el color de fondo a continuación.
- Color de fondo: #ffd593
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Fuente del texto: Playfair Display
- Color del texto: #f7f7f7
- Tamaño del texto: 0.9vw (Escritorio), 2vw (Tableta), 3vw (Teléfono)
- Altura de la línea del título: 1,8 em
Espaciado
Agregue también un poco de relleno izquierdo y derecho en diferentes tamaños de pantalla.
- Relleno izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)
Agregue el módulo de precios de Woo a la columna 2
Contenido dinámico
El siguiente módulo que necesitamos es un módulo de precios de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #ffd593
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:
- Precio Fuente: 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 línea de precio: 2vw
Espaciado
Agregue también algunos valores de relleno personalizados.
- Relleno superior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Acolchado inferior: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Relleno izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)
Agregue el módulo Agregar al carrito de Woo a la columna 2
Contenido dinámico
Complete la visualización del producto en la columna 2 agregando un Módulo Agregar al carrito de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Modifique el color de fondo del módulo a continuación.
- Color de fondo: #ffd593
Configuración de texto de campos
Cambie también la configuración del texto de los campos.
- Alineación de texto de campos: Centro
- Campos Tamaño del texto: 1vw (Escritorio), 3vw (Tableta), 4vw (Teléfono)
- Campos Esquinas redondeadas: 10vw (Todas las esquinas)
Configuración de botones
Luego, diseñe 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
- Radio del borde del botón: 50vw
- Fuente del botón: Montserrat
- Relleno superior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
- Relleno izquierdo: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
- Relleno derecho: 4vw (escritorio), 15vw (tableta), 18vw (teléfono)
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)
- Relleno izquierdo: 2vw (escritorio), 9vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 9vw (tableta y teléfono)
Clone Woo Modules 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.
Cambiar contenido dinámico de todos los duplicados
Cambie el producto para cada módulo duplicado.
- Producto: Buscar en la lista
Cambiar el color de fondo de todos los duplicados
Junto con el color de fondo.
- Color de fondo: #aae7ed
Clone Woo Modules 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.
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
Cambiar el color de fondo de todos los duplicados
Junto con el color de fondo.
- Color de fondo: #939bff
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 de Woo y agregaremos un margen superior.
- Margen superior: 18vw (escritorio), 0vw (tableta y teléfono)
Agregue el módulo de código debajo de los módulos Woo en la columna 3
La última parte de este tutorial permite 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.
Insertar código CSS de página
E insertaremos algunas líneas de código CSS. Una vez que hayas completado este paso, ¡habrás terminado!
|
01
02
03
04
05
06
|
<style>@media only screen and (max-width: 980px) {.tablet-fullwidth {width: 100% !important;}}</style> |
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 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 pudo descargar el archivo JSON de forma gratuita! 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 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.