Cómo presentar creativamente productos populares en tu div

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

altísimo

Móvil

Descargue el aspecto de los productos populares de forma gratuita para tener en sus manos el aspecto gratuito de los productos populares, primero lo descargará usando 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.
Te has suscripto satisfactoriamente. ¡Revise 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 de 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 llenado hacia arriba e inferior en consecuencia:
Revestimiento superior: 8VW
Revestimiento inferior: 8VW
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, abrir la configuración de la fila y modificar la configuración de dimensionamiento.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 85VW
Ancho máximo: 100%
Agregue el módulo de imagen WOO al 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.

Imagen Vaya a la pestaña Diseño y modifique la configuración de la imagen.

Imagen esquinas redondeadas: 20 PX (todas las esquinas)
Poder de poco claro de la sombra de la caja: 50 px

Color de la sombra: RGBA (0.0,0,0,3)
Agregue el módulo de título WOO a la columna dinámica, el siguiente modo que necesitamos es el módulo de título WOO. Seleccione un producto de su elección.

Configuración del texto del título Cambie el texto del módulo Título de la siguiente manera:

Nivel de encabezado del título: H3
Título de la fuente: Prata
Título Tamaño del texto: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
El espacio completa 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: 2 VW (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 al interruptor de columna de contenido dinámico 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 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Montserrat

Tamaño de texto: 0.8VW (escritorio), 1.6VW (tableta), 2VW (teléfono)
La altura de la línea de texto: 1.8em
Espacio de juego con valores de margen personalizados en diferentes tamaños de pantalla.
Margen superior: 2VW (escritorio), 4VW (tableta y teléfono)

Margen inferior: 2 VW (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 a la canasta en la columna dinámica justo debajo del módulo de descripción Woo, agregaremos un módulo de CART Woo Agregar al CART. Seleccione un producto de su elección.
Configuración de campo predeterminada Vaya a la pestaña Diseño del módulo y cambie la configuración del campo de la siguiente manera:

El color del fondo del campo: #ffffff

Campos de texto en color: # 3D3D3D
Fuente de campos: Montserrat
El ancho del marco de campo: 0 PX
El color del marco de campo: # 3D3D3D

Coloque el cursor en la configuración del campo Cambie el ancho del borde al cursor.
El ancho del marco de campo: 1 PX

Configuración predeterminada para los botones y luego abra la configuración del botón y estilice el botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)
El color de texto del botón: # 3D3D3D
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
El color del nudo del botón: # 3D3D3D
Botón de fuente: Prata
Revestimiento superior: 0.5VW

Revestimiento inferior: 0.5 VW

Junta izquierda: 2VW
Junta derecha: 2VW
Configuración del botón Cambiar el ancho del botón al cursor.
El ancho del nudo del botón: 1 PX


Espacio entonces, 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)
La configuración de borde predeterminada modifica y la configuración de borde del módulo.
Ancho de borde inferior: 1 PX

Color del borde inferior: # 3D3D3D
Coloque el cursor en la configuración del borde y retire el ancho del borde de la carrera.
Ancho del borde inferior: 0 PX

Agregue el módulo de precio WOO a la columna dinámica El último módulo que necesitamos en la columna es un módulo de precio WOO. Seleccione un producto de su elección.
Configuración de texto de título Cambiar a la pestaña Diseño del módulo y modificar la configuración de texto de precio según:

Texto de texto de fuente: Montserrat

TEXTO DE PRECIO PESO DE FUERTA: FÁCIL
Color de texto de precio: # 333333
Tamaño de texto de precio: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
La altura de la línea de precio: 1.8em
Valores de Modifife Marrian de Spliing.
Margen inferior: 5VW

Margen izquierdo: 2VW (escritorio), 5VW (tableta y teléfono)
Margen derecho: 2VW (escritorio), 5VW (tableta y teléfono)
Clone la columna dos veces después de haber completado la columna y todos los módulos en ella, puede clonar toda la columna dos veces.
Cambie la estructura de la columna de fila y luego cambie la estructura de la columna de fila.

Cambie todo el contenido dinámico, continúe cambiando todo el contenido dinámico en las columnas 2 y 3 con otros productos de su elección. Cambiar los módulos de espacio de módulos Woo de columna 2 en la segunda columna requieren 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)

Modo de descripción de WOO Cambie la configuración de espaciado del módulo de Módulo de descripción de WOO.
Margen superior: 4VW (todos los dispositivos)
Margen inferior: 4VW (todos los dispositivos)

Margen izquierdo: 5VW (todos los dispositivos)
Margen derecho: 5VW (todos los dispositivos
Modo Woo Agregar a la canasta pase a la configuración de espaciado del módulo de carro agrega al módulo de carrito.
Margen izquierdo: 5VW (todos los dispositivos)
Margen derecho: 5VW (todos los dispositivos)

Modo de precio de WOO y complete los módulos de la columna 2 cambiando la configuración de espaciado del módulo de precio WOO.
Margen izquierdo: 5VW (todos los dispositivos)
Margen derecho: 5VW (todos los dispositivos)

Columna Estilos de todas las columnas de color de fondo ahora, debido a que tenemos todos los módulos en su lugar, podemos comenzar a colocar las columnas. Cada una de las columnas necesita un color de fondo blanco.
Color de fondo: #ffffff
Borde puede agregar “20px” a las esquinas de cada columna.

Esquinas redondeadas: 20 px (todas las esquinas)
Columnas 1 y 3 La sombra de cuadro predeterminada continúa agregando una sombra de cuadro predeterminado en la columna 1 y 3.

Box Shadow Posición vertical: 22 PX
Box Shadow Shadow Blur Force: 150 PX

Shadow Color: RGBA (0.0,0,0) (escritorio), RGBA (0.0,0,1) (tableta y teléfono)
Hover Box Shadow Cambia el color de la sombra con el mouse en el flotador.
Color de la sombra: RGBA (0.0,0,0.27)
Filtros predeterminados luego, acceda a la configuración del filtro y agregue una no clara a las columnas 1 y 3.Sestompare: 4 PX (escritorio), 0 PX (tableta y teléfono)

Pase el mouse sobre los filtros Retire la falta de claro en la carrera.
Desenfoque: 0 px

Índice Z Predeterminado Asignar el mismo valor predeterminado del índice de siguiente columnas.
ÍNDICE Z: 9

Coloque el índice N cursor N y aumente el mismo índice Z en el flotador.
IND ÍNDICE: 12

Solo la traducción de la transformación de la columna 1 Continúe cambiando la posición de la columna 1 usando la opción de transformación.
Derecha: 7VW (escritorio), 0VW (tableta y teléfono)

La parte inferior: 2VW (escritorio), 0VW (tableta y teléfono)
Solo en la columna 3 transforma la traducción abierta y luego la columna 3 transforma la configuración y aplique la siguiente configuración:

Derecha: 7VW (escritorio), 0VW (tableta y teléfono)
La parte inferior: -2VW (escritorio), 0VW (tableta y teléfono)
Solo interruptor de sombra de cuadro de columna 2 a la configuración de la columna 2 y aplique un tono de caja sutil.

Box Shadow Posición vertical: 22 PX
Poder de poco claro de la sombra de la caja: 150 px
Color de sombras: RGBA (0.0,0,0,27) (escritorio), RGBA (0.0,0,1) (tableta y teléfono)

El índice Z date pero no menos importante, ¡modifique el índice Z de la segunda columna y ya está!
IND ÍNDICE: 11
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio estático
altísimo

Móvil