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 les da a los visitantes un sentido de urgencia y puede acortar el proceso de toma de decisiones. En esta publicación, le mostraremos cómo crear un impresionante diseño de la sección de productos de la oferta del día con cuenta regresiva solo con Divi y sus opciones integradas. 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á descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la sección de productos ‘Oferta del día’ de The Countdown GRATIS
Para poner sus manos en la sección de productos de cuenta regresiva gratuita ‘oferta del día’, 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!
Suscríbete a nuestro canal de Youtube
¡Empecemos a Recrear!
Agregar nueva sección
Abra la página a la que desea agregar la sección de productos de la oferta del día y agregue una nueva sección regular.
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 pantalla en la configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
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
columna 1
Abra la configuración de la columna 1 a continuación.
Fondo degradado predeterminado
Y agregue un fondo degradado predeterminado.
- Color 1: #1c1c1c
- Color 2: #ffffff
- Dirección del gradiente: 90 grados
- Posición inicial: 66%
- Posición final: 66%
Quitar fondo degradado flotante
Elimine ese mismo fondo degradado al pasar el mouse.
columna 2
Abra la configuración de la columna 2 a continuación.
Espaciado
Y agregue un poco de relleno personalizado a la izquierda y a la derecha en diferentes tamaños de pantalla.
- Acolchado izquierdo: 5vw
- Relleno derecho: 8vw (escritorio), 5vw (tableta y teléfono)
Agregue el módulo de imagen de Woo 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 de Woo a la columna 1 y seleccione el producto de su elección.
- Producto: Buscar en la lista
Elementos
Retire la insignia de venta a continuación.
- Mostrar insignia de venta: APAGADO
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Margen superior: 6vw
- Relleno izquierdo: 3vw (tableta y teléfono)
- Acolchado derecho: 3vw
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. Introduzca algún contenido de su elección.
Color de fondo
Cambia el color de fondo del módulo.
- Color de fondo: rgba(165,255,250,0.4)
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Pantalla Playfair
- Peso de fuente de texto: Pesado
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #ffffff
- Tamaño del texto: 1.5vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
Dimensionamiento
Juega con el ancho en diferentes tamaños de pantalla también.
- Ancho: 20vw (escritorio), 40vw (tableta), 45vw (teléfono)
Espaciado
Luego, vaya a la configuración de espaciado y agregue un relleno superior e inferior personalizado.
- Acolchado superior: 3vw
- Acolchado inferior: 3vw
Sombra de la caja
Para dar algo de profundidad al diseño, también agregaremos una sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
Transformar Traducir
Complete el módulo de texto reposicionando el módulo usando los valores de traducción de transformación.
- Derecha: -38vw (escritorio), -74vw (tableta y teléfono)
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.
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: Open Sans
- Peso de fuente de texto: ligero
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #000000
- Tamaño del texto: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
Espaciado
Modifique también la configuración de espaciado.
- Margen superior: 8vw (escritorio), 12vw (tableta y teléfono)
- Acolchado inferior: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Acolchado izquierdo: 2vw
Borde
Estamos agregando un borde izquierdo a continuación.
- Ancho del borde izquierdo: 2px
- Color del borde izquierdo: rgba(0,219,193,0.4)
Agregue el módulo del temporizador de cuenta regresiva a la columna 2
Deje el cuadro de título vacío y establezca la fecha
Pasemos al 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 la fecha de su elección.
Eliminar color de fondo
Abra la configuración de fondo a continuación y deshabilite el color de fondo.
- Usar color de fondo: NO
Configuración de texto
Pase a la pestaña de diseño y cambie la alineación del texto.
- Alineación de texto: Izquierda
Configuración de texto de números
Modifique la configuración del texto de los números a continuación.
- Fuente de números: Open Sans
- Números Peso de fuente: semi negrita
- Color del texto de los números: #00dbc1
- Números Tamaño del texto: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
Configuración de texto separador
Luego, cambie el color del texto del separador.
- Color del texto del separador: #ffffff
Configuración de texto de etiqueta
Y cambie también la apariencia del texto de la etiqueta.
- Color del texto de la etiqueta: #282828
- Tamaño del texto de la etiqueta: 0.8vw (escritorio), 1.3vw (tableta), 2vw (teléfono)
Dimensionamiento
Reduzca el ancho del módulo en diferentes tamaños de pantalla.
- Ancho: 30vw (Escritorio), 45vw (Tableta), 65vw (Teléfono)
Espaciado
Y modifique los valores de relleno en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
- Acolchado izquierdo: 2vw
- Relleno derecho: 0px
Borde
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)
Agregue el módulo de título de Woo a la columna 2
Contenido dinámico
Pasemos al siguiente módulo, que es un módulo de título de Woo. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Enlace
Agregue un enlace de producto al módulo siguiente.
- Enlace del producto: Buscar en la lista
Configuración del texto del título
Continúe modificando la configuración del texto del título del módulo.
- Título Nivel de encabezado: H2
- Fuente del título: Pantalla Playfair
- Peso de la fuente del título: Pesado
- Estilo de fuente del título: Mayúsculas
- Color del texto del título: #1c1c1c
- Tamaño del texto del título: 2.9vw (escritorio), 10vw (tableta), 12vw (teléfono)
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)
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 de Woo. Seleccione el producto de su elección.
- Producto: Buscar en la lista
- Descripción Tipo: Breve descripción
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: Open Sans
- Tamaño del texto: 0,8 vw (escritorio), 1,9 vw (tableta), 2,5 vw (teléfono)
- Altura de la línea de texto: 1,8 em
- Alineación de texto: Justificar
Agregue el módulo de precios de 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
Configuración de texto de precio antiguo de venta
Pase a la pestaña de diseño y cambie la configuración del texto del precio de venta anterior de la siguiente manera:
- Oferta Precio antiguo Fuente: Open Sans
- Color de texto de precio antiguo de venta: #00dbc1
- Tamaño de texto de precio antiguo de oferta: 1vw (escritorio), 4vw (tableta), 6vw (teléfono)
- Altura de línea de precio antiguo de venta: 1,8 em
Ajustes de texto de precio nuevo de oferta
Continúe modificando también la configuración del texto del nuevo precio de venta.
- Venta Nuevo Precio Fuente: Open Sans
- Oferta Nuevo precio Color del texto: #000000
- Oferta Precio nuevo Tamaño del texto: 2vw (escritorio), 6vw (tableta), 8vw (teléfono)
- Altura de línea de precio nuevo de venta: 1,8 em
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)
Espaciado
Agregue también algunos valores de margen superior e inferior personalizados.
- Margen superior: 6vw (escritorio)
- Margen inferior: 4vw (escritorio), 10vw (tableta y teléfono)
Agregue el módulo Agregar al carrito de Woo a la columna 2
Contenido dinámico
Pasemos al siguiente y último módulo, que es el módulo Agregar al carrito de Woo. Seleccione su producto.
- Producto: Buscar en la lista
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)
Configuración de botones
Complete el diseño del módulo diseñando el 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
- Radio del borde del botón: 0px
- Fuente del botón: Open Sans
- Estilo de fuente del botón: Mayúsculas
- Relleno superior: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 3vw (tableta), 4vw (teléfono)
- Relleno izquierdo: 5vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Relleno derecho: 5vw (escritorio), 8vw (tableta), 10vw (teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear un impresionante diseño de sección de producto de oferta del día de cuenta regresiva. Hemos construido este diseño utilizando únicamente los módulos y opciones Woo integrados de Divi. Esta es una excelente manera de agregar un sentido de urgencia a su producto. ¡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.
Hay algunos complementos para los temporizadores de cuenta regresiva de ventas que se conectan con WooCommerce que también pueden ser de interés.
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.