Cómo crear una sección de productos “Deal del día” con div Div

Cuando busque formas de aumentar las tasas de conversión en línea, notará que muchos sitios web tienen una página de producto “negocio” en sus páginas de destino. Esto brinda a los visitantes un sentido de emergencia y puede acortar el proceso de toma de decisiones. En esta publicación, le mostraremos cómo crear una oferta increíble para diseñar el producto del día con el Div Integrado. El estilo de diseño que utilizamos es elegante y limpio e incluye un toque de color para enfatizar diferentes elementos de diseño. ¡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

Móvil

Descargue la sección de productos “Deal of the Day” de forma gratuita para poner su mano en la sección “Deal of the Day” con recuento inverso gratuito, primero debe descargarlo 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!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Agregue una nueva sección Abra la página a la que desea agregar la sección del producto de ese día y agregue una nueva sección normal.
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 pantalla en la configuración del tamaño.

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%
El espacio continúa eliminando el llenado predeterminado e inferior de la fila en la configuración de espaciado.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 1 luego abra la configuración de la columna 1.

Fondo de gradiente predeterminado y agregue un fondo de gradiente predeterminado.

Color 1: # 1C1C1C
Color 2: #ffffff
Dirección de gradiente: 90 grados
Posición inicial: 66%
Posición final: 66%
Elimine el fondo de gradiente de desplazamiento Elimine el mismo fondo de gradiente al cursor.

Columna 2 luego abra la configuración de la columna.

ENLIZACIÓN IZQUIERDA: 5VW

Revestimiento derecho: 8VW (escritorio), 5VW (tableta y teléfono)
Agregue el módulo de imagen WOO al contenido dinámico de la columna 1 ahora que hemos completado la configuración promedio y columna, podemos comenzar a agregar módulos. Agregue un módulo de imagen WOO a la columna 1 y seleccione el producto deseado.
Producto: Encuentra en la lista

Elementos elimina la insignia a la venta a continuación.
Insignia de venta de espectáculos: APAGADO

Sparto agregue algunos valores de espaciado personalizados.
Margen superior: 6VW

ENLIZACIÓN IZQUIERDA: 3VW (tableta y teléfono)
Junta derecha: 3VW
Agregue un módulo de texto a la columna 1 Agregue el siguiente contenido y el último módulo que necesitamos en la columna 1 es un módulo de texto. Ingrese un contenido de su elección.
El color de fondo cambia el color de fondo del módulo.

Color de fondo: RGBA (165.255.250.0.4)

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

Texto de la fuente de peso: duro
Text -Text estilo: mayúscula
Color de texto: #ffffff
Tamaño de texto: 1.5VW (escritorio), 3VW (tableta), 3.5VW (teléfono)
La dimensión también se reproduce con ancho en diferentes tamaños de pantalla.
Ancho: 20VW (escritorio), 40VW (tableta), 45VW (teléfono)

Extienda luego, acceda a la configuración de espaciado y agregue algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 3VW

Revestimiento inferior: 3VW
Box Shadow Para proporcionar una cierta profundidad al diseño, también agregaremos un tono de caja.
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: RGBA (0.0,0,0,3)
Transformar la traducción Completa el módulo de texto reposicionando el módulo utilizando los valores de traducción de transformación.
Agregue un módulo de texto a la columna 2 ¡Agregue contenido a la siguiente columna! Allí, el primer módulo que necesitamos es un módulo de texto normal. Ingrese un contenido de su elección.

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: Abrir sans

El peso de la fuente de texto: luz

Text -Text estilo: mayúscula
Color de texto: # 000000
Tamaño de texto: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)
La espartación modifica y se establece la espacios.
Margen superior: 8VW (escritorio), 12VW (tableta y teléfono)
Bajo forro: 2VW (escritorio), 5VW (tableta), 7VW (teléfono)


Junta izquierda: 2VW
Borde más, agregue un borde izquierdo.
Ancho del borde izquierdo: 2 PX
Color del borde izquierdo: RGBA (0.219,193,0,4)

Agregue un módulo de sincronización inversa en la columna 2, deje el cuadro de título vacío y establezca la fecha, vaya al siguiente módulo, que es un módulo de temporizador inverso. Asegúrese de dejar vacío el cuadro de título y seleccione la fecha deseada.
Retire el color de fondo, luego abra la configuración de fondo y apague el color de fondo.
Use el color de fondo: no

Configuración de texto Vaya a la pestaña Diseño y cambie la alineación del texto.

Alineación de texto: izquierda
Configuración de texto numérico luego cambie la configuración de texto de texto.

Números de fuente: abre sans
Números Peso de fuente: semi

Color de texto número: # 00DBC1
Números de tamaño de texto: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
Configuración Texto separado Entonces, cambie el color del texto del separador.
Etiqueta de configuración de texto y cambie el aspecto del texto de la etiqueta.
Color de texto de etiqueta: # 282828

Tamaño del tamaño del texto Tamaño de etiqueta: 0.8VW (escritorio), 1.3VW (tableta), 2VW (teléfono)
La dimensión reduce el ancho del módulo en diferentes tamaños de pantalla.

Ancho: 30VW (escritorio), 45VW (tableta), 65VW (teléfono)
Espacio y modifica los valores de llenado en la configuración de espaciado.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Junta izquierda: 2VW

Revestimiento derecho: 0 PX
Llena el borde de la configuración del módulo agregando un borde izquierdo.
Ancho del borde izquierdo: 2 PX
Color del borde izquierdo: RGBA (0.219,193,0,4)
Agregue el módulo de título WOO al contenido dinámico de la columna 2 al siguiente módulo, que es un módulo de título WOO. Seleccione un producto de su elección.

Producto: Encuentra en la lista
Enlace Agregue un enlace de producto al siguiente módulo.
Enlace del producto: encontrar en la lista

Configuración de texto de título Continúe cambiando la configuración de texto del módulo.
Nivel de encabezado de título: H2

Título de la fuente: Playfair Display
Fuente de peso del título: duro

Estilo de fuente de título: mayúscula
Color de texto del título: # 1C1C1C
Título Tamaño del texto: 2.9VW (escritorio), 10VW (tableta), 12VW (teléfono)
El espaciado cambia a la configuración de espaciado y juega con valores de margen.
Margen superior: 4VW (escritorio), 10 VW (tableta y teléfono)
Margen inferior: 3VW (escritorio), 6VW (tableta y teléfono)
Agregue el módulo de descripción Woo a la columna 2 Contenido dinámico El siguiente módulo que necesitamos es un módulo de descripción Woo. Seleccione el producto en su elección.

Producto: Encuentra en la lista
Tipo de descripción: descripción corta
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto de la siguiente manera: Fuente Texto: Abrir sans

Tamaño de texto: 0.8VW (escritorio), 1.9VW (tableta), 2.5VW (teléfono)
La altura de la línea de texto: 1.8em
Alineación de texto: justificar

Agregue el módulo de precio WOO al contenido dinámico de la columna 2 Agregue un módulo de precio WOO justo en el módulo de descripción de Woo y seleccione el producto.
Producto: Encuentra en la lista
Configuración de texto de venta antigua Cambie a la pestaña de diseño y modifique la configuración de conjuntos del precio de venta de la siguiente manera:
Old Font Price Sale: Open Sans
Venta Color de texto de precio antiguo: # 00DBC1

Venta Tamaño de texto de precio antiguo: 1 VW (escritorio), 4VW (tableta), 6VW (teléfono)
Venta Altura de línea de precio antigua: 1.8em

Configuración de texto con nuevo precio de venta Continúe cambiando la configuración de texto para el precio de venta.
Venta NUEVO PRECIO DE FUERTA: Open Sans
Precio de venta Texto de color nuevo: # 000000
Venta Nuevo precio Tamaño de texto: 2VW (escritorio), 6VW (tableta), 8VW (teléfono)
Venta nueva línea de precio: 1.8em

Dimensión Luego, acceda a la configuración del tamaño y cambie el ancho en diferentes tamaños de pantalla.
Ancho: 10VW (escritorio), 35VW (tableta y teléfono)
El espacio agregue algunos valores personalizados de los bordes superiores e inferiores.
Margen superior: 6VW (escritorio)
Margen inferior: 4VW (escritorio), 10 VW (tableta y teléfono)

Agregue el módulo Agregar a la canasta al contenido dinámico de la columna 2 al siguiente y último módulo, que es el módulo Woo Agregar al CART. Seleccione el producto.
Producto: Encuentra en la lista

Configuración Los campos de texto luego cambian el color de fondo de los campos.
Color de fondo de campo: RGBA (0.219,193,0,4)
Botón de configuración Complete el diseño del módulo Estilizando el botón y termine! Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
El color del texto del botón: #ffffff

El color de fondo del botón: # 1C1C1C
El rasgo de botón de botón: 0 px

Botón de fuente: Abrir sans
El estilo de la fuente del botón: mayúscula
Revelaje superior: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)
Bajo forro: 1VW (escritorio), 3VW (tableta), 4VW (teléfono)
ENLIZACIÓN IZQUIERDA: 5VW (escritorio), 8VW (tableta), 10VW (teléfono)

Revestimiento derecho: 5VW (escritorio), 8VW (tableta), 10VW (teléfono)
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo crear una oferta increíble con el recuento inverso de la sección de productos del día. Hemos construido este diseño utilizando solo los módulos y opciones incorporadas. Esta es una excelente manera de agregar una sensación de emergencia a su producto. ¡Puede 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 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.