Cómo crear una sección de producto de cuenta regresiva "Oferta del día" con Divi


Cuando busque formas de aumentar las tasas de conversión en línea, notará que muchos sitios web tienen una sección de productos de "oferta del día" en sus páginas de destino. Esto brinda a los visitantes una sensación de urgencia y puede acortar el proceso de toma de decisiones. En esta publicación, le mostraremos cómo crear una impresionante cuenta regresiva del diseño de la sección de productos del día con las opciones integradas de Divi únicamente. El estilo de diseño que estamos usando es elegante y limpio e incluye un toque de color para enfatizar diferentes elementos en el diseño. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

oferta del día

Móvil

oferta del día

Descargue la sección de productos La cuenta regresiva "Oferta del día" GRATIS

Para poner sus manos en la sección de productos de la cuenta atrás gratuita "oferta del día", 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.

(incrustar) https://www.youtube.com/watch?v=K9foi-wD02w (/ incrustar)

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

Agregar nueva sección

Abra la página a la que desea agregar la oferta del día de la sección del producto y agregue una nueva sección regular.

oferta del día

Agregar nueva fila

Estructura de columna

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

oferta del día

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 pantalla en la configuración de tamaño.

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

oferta del día

Espaciado

Continúe eliminando el relleno superior e inferior predeterminado de la fila en la configuración de espaciado.

  • Relleno superior: 0px
  • Relleno inferior: 0px

oferta del día

Columna 1

Abra la configuración de la columna 1 a continuación.

oferta del día

Fondo degradado predeterminado

Y agregue un fondo degradado predeterminado.

  • Color 1: # 1c1c1c
  • Color 2: #ffffff
  • Dirección de degradado: 90 grados
  • Posición de inicio: 66%
  • Posición final: 66%

oferta del día

Eliminar fondo de degradado flotante

Elimine ese mismo fondo degradado al pasar el mouse por encima.

oferta del día

Columna 2

Abra la configuración de la columna 2 a continuación.

oferta del día

Espaciado

Y agregue algunos rellenos personalizados izquierdo y derecho en diferentes tamaños de pantalla.

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

oferta del día

Añadir Woo Image Module a la Columna 1

Contenido dinámico

Ahora que hemos completado la configuración de filas y columnas, podemos comenzar a agregar módulos. Agregue un módulo de imagen Woo a la columna 1 y seleccione su producto de elección.

  • Producto: Buscar en la lista

oferta del día

Elementos

Retire la insignia de venta a continuación.

  • Mostrar insignia de venta: OFF

oferta del día

Espaciado

Agregue algunos valores de espaciado personalizados también.

  • Margen superior: 6vw
  • Acolchado izquierdo: 3vw (tableta y teléfono)
  • Relleno derecho: 3vw

oferta del día

Agregar módulo de texto a la columna 1

Agregar contenido

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de texto. Ingrese algún contenido de su elección.

oferta del día

Color de fondo

Cambiar el color de fondo del módulo.

  • Color de fondo: rgba (165,255,250,0.4)

oferta del día

Configuraciones de texto

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

  • Fuente de texto: Playfair Display
  • Peso de fuente de texto: pesado
  • Estilo de fuente de texto: mayúscula
  • Color del texto: #ffffff
  • Tamaño del texto: 1.5vw (escritorio), 3vw (tableta), 3.5vw (teléfono)

oferta del día

Dimensionamiento

Juega con el ancho en diferentes tamaños de pantalla también.

  • Ancho: 20vw (escritorio), 40vw (tableta), 45vw (teléfono)

oferta del día

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 3vw
  • Acolchado inferior: 3vw

oferta del día

Sombra de la caja

Para darle algo de profundidad al diseño, también agregaremos una sombra de cuadro.

  • Fuerza de desenfoque de sombra de caja: 80 px
  • Color de sombra: rgba (0,0,0,0.3)

oferta del día

Transformar Traducir

Complete el módulo de texto reposicionando el módulo utilizando los valores de traducción de transformación.

  • Derecha: -38vw (escritorio), -74vw (tableta y teléfono)

oferta del día

Agregar módulo de texto a la columna 2

Agregar contenido

¡A la siguiente columna! Allí, el primer módulo que necesitamos es un módulo de texto normal. Inserte algún contenido de su elección.

oferta del día

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: Open Sans
  • Peso de fuente de texto: ligero
  • Estilo de fuente de texto: mayúscula
  • Color del texto: # 000000
  • Tamaño del texto: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)

oferta del día

Espaciado

Modifique la configuración de espaciado también.

  • Margen superior: 8vw (escritorio), 12vw (tableta y teléfono)
  • Acolchado inferior: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Relleno izquierdo: 2vw

oferta del día

Frontera

A continuación, agregaremos un borde izquierdo.

  • Ancho del borde izquierdo: 2px
  • Color del borde izquierdo: rgba (0,219,193,0.4)

oferta del día

Agregar módulo de temporizador de cuenta regresiva a la columna 2

Deje el cuadro de título vacío y establezca la fecha

En el siguiente módulo, que es un módulo de temporizador de cuenta regresiva. Asegúrese de dejar el cuadro de título vacío y seleccione su fecha de elección.

oferta del día

Eliminar color de fondo

A continuación, abra la configuración de fondo y desactive el color de fondo.

  • Usar color de fondo: NO

oferta del día

Configuraciones de texto

Pase a la pestaña de diseño y cambie la alineación del texto.

  • Alineación de texto: izquierda

oferta del día

Configuración de texto de números

Modifique la configuración de texto de números a continuación.

  • Fuente de números: Open Sans
  • Números Fuente Peso: Semi Negrita
  • Números Color del texto: # 00dbc1
  • Números Tamaño del texto: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

oferta del día

Configuración de texto separador

Luego, cambie el color del texto del separador.

  • Color del texto del separador: #ffffff

oferta del día

Configuración de texto de etiqueta

Y cambie la apariencia del texto de la etiqueta también.

  • Color del texto de la etiqueta: # 282828
  • Tamaño del texto de la etiqueta: 0.8vw (escritorio), 1.3vw (tableta), 2vw (teléfono)

oferta del día

Dimensionamiento

Reduce el ancho del módulo en diferentes tamaños de pantalla.

  • Ancho: 30vw (escritorio), 45vw (tableta), 65vw (teléfono)

oferta del día

Espaciado

Y modifique los valores de relleno en la configuración de espaciado.

  • Relleno superior: 0px
  • Relleno inferior: 0px
  • Relleno izquierdo: 2vw
  • Relleno derecho: 0px

oferta del día

Frontera

Complete la configuración del módulo agregando un borde izquierdo.

  • Ancho del borde izquierdo: 2px
  • Color del borde izquierdo: rgba (0,219,193,0.4)

oferta del día

Añadir Woo Title Module a la Columna 2

Contenido dinámico

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

  • Producto: Buscar en la lista

oferta del día

Enlace

Agregue un enlace de producto al módulo siguiente.

  • Enlace del producto: Buscar en la lista

oferta del día

Configuración del texto del título

Continúe modificando la configuración del texto del título del módulo.

  • Nivel de título del título: H2
  • Fuente del título: Playfair Display
  • Peso de la fuente del título: pesado
  • Estilo de fuente del título: mayúscula
  • Color del texto del título: # 1c1c1c
  • Tamaño del texto del título: 2.9vw (escritorio), 10vw (tableta), 12vw (teléfono)

oferta del día

Espaciado

Pase a la configuración de espaciado y juegue con los valores de margen.

  • Margen superior: 4vw (escritorio), 10vw (tableta y teléfono)
  • Margen inferior: 3vw (escritorio), 6vw (tableta y teléfono)

oferta del día

Agregue el módulo de descripción de 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 que prefiera.

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

oferta del día

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: Open Sans
  • Tamaño del texto: 0.8vw (escritorio), 1.9vw (tableta), 2.5vw (teléfono)
  • Altura de la línea de texto: 1.8em
  • Alineación de texto: justificar

oferta del día

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

Contenido dinámico

Agregue un Módulo de precios de Woo justo debajo del Módulo de descripción de Woo y seleccione su producto.

  • Producto: Buscar en la lista

oferta del día

Configuración de texto de precio antiguo de venta

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

  • Sale Old Price Fuente: Open Sans
  • Color del texto del precio de venta anterior: # 00dbc1
  • Precio de venta antiguo Tamaño del texto: 1vw (escritorio), 4vw (tableta), 6vw (teléfono)
  • Altura de línea de precio antiguo de venta: 1.8em

oferta del día

Configuración de texto de nuevo precio de venta

Continúe modificando también la configuración del texto del nuevo precio de venta.

  • Venta Nuevo Precio Fuente: Open Sans
  • Precio de venta nuevo Color de texto: # 000000
  • Nuevo precio de venta Tamaño del texto: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
  • Altura de línea de precio nuevo de venta: 1.8em

oferta del día

Dimensionamiento

Luego, vaya a la configuración de tamaño y modifique el ancho en diferentes tamaños de pantalla.

  • Ancho: 10vw (escritorio), 35vw (tableta y teléfono)

oferta del día

Espaciado

Agregue algunos valores de margen superior e inferior personalizados también.

  • Margen superior: 6vw (escritorio)
  • Margen inferior: 4vw (escritorio), 10vw (tableta y teléfono)

oferta del día

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

Contenido dinámico

En el siguiente y último módulo, que es el módulo Añadir al carro de Woo. Selecciona tu producto.

  • Producto: Buscar en la lista

oferta del día

Configuración de texto de campos

Cambie el color de fondo de los campos a continuación.

  • Color de fondo de los campos: rgba (0,219,193,0.4)

oferta del día

Configuraciones de botones

¡Complete el diseño del módulo con el estilo del botón y listo!

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

oferta del día

  • Radio del borde del botón: 0px
  • Fuente del botón: Abrir sin
  • Estilo de fuente del botón: mayúscula

oferta del día

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

oferta del día

Avance

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

Escritorio

oferta del día

Móvil

oferta del día

Pensamientos finales

En esta publicación, le mostramos cómo crear una impresionante cuenta regresiva del diseño de la sección de productos del día. Hemos creado este diseño utilizando solo los módulos y opciones integrados de Divi. Esta es una excelente manera de agregar un sentido de urgencia a su producto. ¡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.