Cómo crear una ventana emergente de cuenta regresiva de Hello Bar

Cree una ventana emergente que muestre un temporizador de cuenta regresiva de venta de 24 horas

Aprenderá a crear una ventana emergente que:

1. Agrega urgencia
2. Aumenta las ventas

Diseñe la ventana emergente y su contenido

1. Ir Plantillas> Popups> Agregar nuevo y dale un nombre a tu nueva ventana emergente
2. Elija una plantilla emergente prediseñada o cierre la superposición de la biblioteca y diseñe su ventana emergente desde cero. Para este ejemplo, diseñaremos el nuestro.

Ventana emergente> Ficha Diseño

1. Anchura: 100vw, por lo que se mostrará en el 100% del ancho de la ventana gráfica
2. Altura: Personalizado
3. Altura personalizada: 300 px
4. Posición> Vertical: Parte superior
5. Cubrir: Deslizar a Desactivado
6. Animación de entrada: Fundirse
7. Duración de la animación: 2,2 segundos

Ventana emergente> pestaña Estilo

1. Ventana emergente> Color: Deslizar a transparente
2. Ventana emergente> Sombra de cuadro: Haga clic en la flecha de reinicio para desactivar la sombra del cuadro.
3. Botón Cerrar> Posición vertical: 20
4. Botón Cerrar> Posición horizontal: 4
5. Talla: 30

Ventana emergente> Pestaña avanzada

Relleno: 30px para todos.

Contenido

1. Hacer clic + para agregar una nueva sección con 4 columnas.
2. Sección> Diseño> Posición del contenido: Medio
3. Sección> Estilo> Color: # e8e8e8
4. Agrega un Bóveda widget, escriba su título y ajuste el tamaño y el peso de la fuente como desee
5. Agrega un Botón widget y ajuste el texto, el color y los elementos de diseño como desee
6. Agrega un cuenta regresiva widget y estírelo arrastrando la columna
7. Cuenta atrás> Contenido> Tipo: Temporizador Evergreen
8. Cuenta atrás> Contenido> Horas: 23
9. Cuenta atrás> Contenido> Minutos: 59
10. Cuenta atrás> Contenido> Acciones después de expirar: Elija Ocultar y Nuevo mensaje
11. Cuenta atrás> Contenido> Mensaje: El mensaje que desea mostrar con el temporizador expira
12. Cuenta atrás> Estilo> Cajas> Color de fondo: Seleccione un color
13. Cuenta atrás> Estilo> Contenido> Dígitos: Cambia el color y la tipografía como desees
14. Cuenta atrás> Estilo> Contenido> Etiqueta: Cambia el color y la tipografía como desees
15. Agregar un Imagen widget y elija una foto de su biblioteca.
16. Imagen> Avanzado> Margen: Establezca un margen negativo en la parte inferior para que la imagen flote ligeramente debajo de la ventana emergente.
17. Imagen> Avanzado> Animación de entrada: Girar hacia abajo a la izquierda
18. Imagen> Avanzado> Duración de la animación: Lento
19. Imagen> Avanzado> Retraso de animación (ms): 500

Establecer las opciones de publicación

1. Condición: Incluir> Todo el sitio
2. Desencadenadores> Carga en la página: Sí, en 3 segundos
3. Reglas avanzadas> Ocultar para usuarios conectados: Sí, todos los usuarios
4. Reglas avanzadas> Mostrar hasta X veces: Si, 1 vez

Todo listo. Visite su página y, después de 3 segundos, aparecerá la ventana emergente Countdown, creando una sensación de urgencia y un incentivo para comprar un producto.