Cómo crear una red de productos dinámicos y vibrantes para su página de destino de Divin

Las páginas de productos son sorprendentes cuando se trata de resaltar un producto en particular y sus detalles, pero al crear una página de destino, le recomendamos que caiga en múltiples productos en un solo lugar y permita a las personas agregar productos directamente en su canasta. Con los nuevos módulos de WooCommerce del DIV, ahora puede agregar cualquier producto a cualquier página que trabaje y estilice de todos modos, de todos modos, de todos modos, use las opciones inotradas del DIV. Para ayudarlo a comenzar, le mostraremos cómo crear una cuadrícula dinámica de productos dinámicos con botones Agregar. ¡El diseño se ve muy bien en todos los tamaños de pantalla y podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.

Descargue la sección Dynamic Product GID de forma gratuita para poner su mano en la sección gratuita de la rejilla dinámica de productos, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección Comience agregando una nueva sección a la página en la que está trabajando.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la página.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Agregue la clase CSS a cada columna, luego abra cada una de las columnas individualmente y asigne la misma clase CSS. Utilizaremos esta clase CSS al final de este tutorial para garantizar que todos los productos aparezcan automáticamente uno debajo del otro en la tableta.

Clase CSS: tableta completa
¡Agregue el módulo de imagen WOO a la columna 1, el contenido dinámico es el momento 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 obtener exactamente el mismo resultado que en la vista previa, asegúrese de que la imagen de su producto tenga un fondo transparente.


Producto: Encuentre en la lista de fondo Continuar cambiando el color de fondo del módulo.
Color de fondo: #ffafce

Espacio entonces, acceda a la configuración de espaciado y cambie los valores de la siguiente manera:
Margen superior: 8VW (escritorio), 0VW (tableta y teléfono)

Revelaje superior: 6VW (escritorio), 10VW (tableta), 16VW (teléfono)
ENLIZACIÓN IZQUIERDA: 9VW (escritorio), 12VW (tableta), 20VW (teléfono)
Revestimiento derecho: 9VW (escritorio), 12VW (tableta), 20VW (teléfono)
Agregue el módulo de título WOO al contenido dinámico de la columna 1 La siguiente manera que necesitamos en la columna 1 es un módulo de título WOO. Seleccione un producto de su elección.
Producto: Encuentra en la lista

El color del sótano continúa agregando un color de fondo.
Color de fondo: #ffafce

Configuración de texto de título Cambiar a la pestaña Diseño y modificar la configuración de texto de título según:
Nivel de encabezado del título: H3

Título de la fuente: Montserrat
Color de texto del título: #ffffff
Título Tamaño del texto: 2VW (escritorio), 3VW (tableta), 5VW (teléfono)
Altura de la línea de título: 1.6VW (escritorio), 3.4VW (tableta), 5VW (teléfono)
Sparting Play con los valores de llenado.
Revelaje superior: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)

Bajo forro: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
Junta izquierda: 9VW
Junta derecha: 9VW
Agregue el módulo de descripción de WOO al contenido dinámico de la columna 1 El siguiente módulo que necesitamos es un módulo de descripción Woo. Seleccione un producto de su elección.
Producto: Encuentra en la lista

Tipo de descripción: descripción corta
El color de fondo agrega un color de fondo.
Color de fondo: #ffafce

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto de la siguiente manera:
Texto de fuente: PlayFair Display

Color de texto: # F7F7F7Dimension Texto: 0.9VW (escritorio), 2VW (tableta), 3VW (teléfono)
Altura de la línea de título: 1.8em
Espacio agregue algunos rellenos a la izquierda y a la derecha.
Junta izquierda: 9VW
Junta derecha: 9VW

Agregue el módulo de precio WOO al contenido dinámico de la columna 1, pase al siguiente módulo en la columna 1, que es un módulo de precio WOO. Seleccione un producto de su elección.
Producto: Encuentra en la lista
El color de fondo agrega un color de fondo.

Color de fondo: #ffafce
Configuración de texto de precio Vaya a la pestaña Diseño y cambie la configuración de texto de la siguiente manera:

Precio de fuente: Montserrat
El precio del peso de la fuente: en negrita

Color de texto de precio: #ffffff
Tamaño de texto de precio: 3VW (escritorio), 5VW (tableta), 6VW (teléfono)
La altura de la línea de precio: 2VW
La espartación modifica y se establece la espacios.
Revelaje superior: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)
Bajo forro: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)

Junta izquierda: 9VW
Junta derecha: 9VW
Agregue el módulo Agregar a la canasta a la columna 1 Contenido dinámico El último módulo que necesitamos en la columna 1 es un módulo de CART Woo Agregar al CART. Seleccione un producto de su elección.
Producto: Encuentra en la lista
El color de fondo agrega un color de fondo.

Color de fondo: #ffafce
Configuración Campos de texto Modifique la configuración de texto de los campos de la siguiente manera:

Leyes de texto: Centro
Campos de tamaño de texto: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)

Campos de esquina redondeados: 10 VW (todas las esquinas)
Configuración Continúe con la acomodación de la configuración del botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1.1VW (escritorio), 2VW (tableta), 3VW (teléfono)

El color de texto del botón: # 000000color del fondo del botón: #fffff
El ancho del nudo del botón: 0 PX
Butter Rasse: 50VW
Botón de fuente: Montserrat
Revelaje superior: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)
Bajo forro: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)

ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 15VW (tableta), 18VW (teléfono)
Revestimiento derecho: 4VW (escritorio), 15VW (tableta), 18VW (teléfono)

Espacio y complete la configuración del módulo agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Bajo forro: 6VW (escritorio), 10VW (tableta), 15VW (teléfono)
Junta izquierda: 9VW
Junta derecha: 9VW


Agregue el módulo de imagen WOO al contenido dinámico de la columna 2 ahora que hemos completado todos los módulos en la columna 1, podemos ir a la columna 2. Los valores de escritorio de la columna 2 son completamente diferentes de los módulos en la columna 1. Por lo tanto, lo hacemos No clone los módulos, sino agregue al intercambio, desde cero. Sin embargo, recuerde que todas las configuraciones de tableta y móvil se adaptarán a los módulos en la columna 1. Agregue un módulo de imagen WOO en la columna 2 y seleccione un producto de su elección.
Producto: Encuentra en la lista
El color de fondo agrega un color de fondo.
Color de fondo: # FFD593

Difundir el cambio y los valores de espaciado.
Revelaje superior: 2VW (escritorio), 6VW (tableta), 10VW (teléfono)

ENLIZACIÓN IZQUIERDA: 5VW (escritorio), 12VW (tableta), 20VW (teléfono)
Revestimiento derecho: 5VW (escritorio), 12VW (tableta), 20VW (teléfono)

Agregue el módulo de título WOO al contenido dinámico de la columna 2 El siguiente módulo que necesitamos es un módulo de título WOO. Seleccione un producto de su elección.
Producto: Encuentra en la lista
El color del papel tapiz cambia el color de fondo.
Color de fondo: # FFD593

Configuración de texto de título Modificar y configuración para el texto del título.
Nivel de encabezado del título: H3

Título de la fuente: Montserrat
Color de texto del título: #ffffff

Título Tamaño del texto: 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)
Espacio y aplique algunos valores de llenado personalizados a la configuración de espaciado.
Revelaje superior: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
Bajo forro: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 9VW (tableta y teléfono)

Revestimiento derecho: 2VW (escritorio), 9VW (tableta y teléfono)
Agregue el módulo de descripción de WOO al contenido dinámico de la columna 2 al siguiente módulo, que es un módulo de descripción Woo. Seleccione un producto de su elección.
Producto: Encuentra en la lista
Tipo de descripción: descripción corta
El color del papel tapiz cambia el color de fondo.

Color de fondo: # FFD593
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto de la siguiente manera:
Texto de fuente: PlayFair Display

Color de texto: # F7F7F7
Tamaño de texto: 0.9VW (escritorio), 2VW (tableta), 3VW (teléfono)

Altura de la línea de título: 1.8em
Espacio agregue algunos rellenos a la izquierda y a la derecha en diferentes tamaños de pantalla.
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 9VW (tableta y teléfono)
Revestimiento derecho: 2VW (escritorio), 9VW (tableta y teléfono)
Agregue el módulo de precio WOO al contenido dinámico de la columna 2 La siguiente forma en que necesitamos es un módulo de precio WOO. Seleccione un producto de su elección.

Producto: Encuentra en la lista
El color de fondo agrega un color de fondo.
Color de fondo: # FFD593

Configuración de texto de precio Vaya a la pestaña Diseño y cambie la configuración del texto del precio según: Fuente Precio: Montserrat
El precio del peso de la fuente: en negrita

Color de texto de precio: #ffffff
Tamaño de texto de precio: 1.5VW (escritorio), 5VW (tableta), 6VW (teléfono)

La altura de la línea de precio: 2VW
Sparto Agregue algunos valores de llenado personalizados.
Revelaje superior: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
Bajo forro: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 9VW (tableta y teléfono)
Revestimiento derecho: 2VW (escritorio), 9VW (tableta y teléfono)

Agregue el módulo Agregar a la canasta a la columna 2 Contenido dinámico Complete la pantalla del producto en la columna 2 agregando un módulo de CART agrega al CART. Seleccione un producto de su elección.
Producto: Encuentra en la lista
El color del papel tapiz cambia el color de fondo del módulo a continuación.
Color de fondo: # FFD593
Configuración de texto Campos modificados y configuración de texto.

Leyes de texto: Centro
Campos de tamaño de texto: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)

Campos de esquina redondeados: 10 VW (todas las esquinas)
Establece el botón y luego estiliza el botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1.1VW (escritorio), 2VW (tableta), 3VW (teléfono)
El color del texto del botón: # 000000
El color del fondo del botón: #ffffff

El ancho del nudo del botón: 0 PX
Butter Rasse: 50VW
Botón de fuente: Montserrat
Revelaje superior: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)
Bajo forro: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)
ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 15VW (tableta), 18VW (teléfono)

Revestimiento derecho: 4VW (escritorio), 15VW (tableta), 18VW (teléfono)
Espacio Complete la configuración del módulo agregando algunos valores de llenado personalizados en diferentes tamaños de pantalla. Pederos inferiores: 3VW (escritorio), 10 VW (tableta), 15 VW (teléfono)

ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 9VW (tableta y teléfono)
Revestimiento derecho: 2VW (escritorio), 9VW (tableta y teléfono)
Clone los módulos WOO en la columna 2 y colóquelos en el orden correcto después de completar todos los módulos en la columna 2, puede clonar cada uno de ellos y colocar los duplicados en el mismo orden.
Cambie el contenido dinámico de todos los duplicados Cambie el producto para cada módulo duplicado.

Producto: Encuentra en la lista
Cambie el color de fondo de todos los duplicados junto con el color de fondo.
Color de fondo: # AAE7ed
Clone los módulos WOO en la columna 2 y coloque los duplicados en la columna 3 nuevamente Clon todos los módulos de productos y coloque los duplicados en la columna 3.

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

Producto: Encuentra en la lista
Cambie el color de fondo de todos los duplicados junto con el color de fondo.

Color de fondo: # 939BFF
Agregue el margen superior al módulo de imagen WOO y cree un espacio en el top 3, abriremos el módulo de imagen WOO y agregaremos un margen superior.

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

Agregue un módulo de código debajo de los módulos WOO en la columna 3, la última parte de este tutorial permite que los artículos aparezcan debajo de cada uno (en lugar de ser uno al lado del otro) en la tableta. Para esto, agregaremos un módulo de código.
Ingrese el código CSS de la página e insertaremos algunas líneas de código CSS. Después de haber recorrido este paso, ¡ha terminado!

@Media Only Screen y (Max-Width: 980px) {.tablet-FlexWidth {
Ancho: 100%! Importante;

}
}

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales En esta publicación, le mostré cómo crear una cuadrícula de productos vibrante con botones Agregar. Esta es una excelente manera de presentar más productos en su página de destino. Este tutorial muestra cuán versátiles son los nuevos módulos de WooCommerce de DIV cuando se combinan con las opciones de elementos incrustados del DIV. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.