How to create a Hello Bar countdown popup

Create a popup window showing a 24 hour sale countdown timer

You will learn how to create a pop-up window that:

1. Add urgency
2. Increase sales

Diseñe la ventana emergente y su contentsEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, plus

1. Go Templates> Popups> Add new and give your new popup window a name
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. For this example, we will design our own.

Popup Window> Design Tab

1. Width: 100vw, so it will show in the viewport width 100%
2. Height: Personalized
3. Custom height: 300 px
4. Position> Vertical: Upper part
5. Cover: Slide to Off
6. Entrance animation: Merge
7. Animation duration: 2.2 seconds

Pop-up window> Style tab

1. Popup> Color: Slide to transparent
2. Popup> Box Shadow: Click the reset arrow to turn off the box shadow.
3. Close button> Vertical position: 20
4. Close button> Horizontal position: 4
5. Size: 30

Popup> Advanced tab

Filling: 30px for everyone.

Content

1. Click + to add a new section with 4 columns.
2. Section> Design> Content position: Means, medium
3. Section> Style> Colour: # e8e8e8
4. Add a Vault widget, write your title and adjust font size and weight as you like
5. Add a Button widget and adjust text, color and design elements as you like
6. Add a Countdown widget and stretch it by dragging the column
7. Countdown> Content> Type: Temporizador Evergreen¿Que es evergreen?Contenido atemporal que puede perdurar en el tiempo sin permanecer obsoleto, dado que no responde a eventos de actualidad. Su importancia radica en que puede generar visitas de forma continuada en el tiempo, no solo en un momento concreto, con lo que aumentan tanto el tráfico como el posicionamiento de la web. plus
8. Countdown> Content> Hours: 23
9. Countdown> Content> Minutes: 59
10. Countdown> Content> Actions after expiration: Choose Hide and New message
11. Countdown> Content> Message: The message you want to display with the timer expires
12. Countdown> Style> Boxes> Background color: Select a color
13. Countdown> Style> Content> Digits: Change the color and font as you wish
14. Countdown> Style> Content> Label: Change the color and font as you wish
15. Add a Image widget and choose a photo from your library.
16. Image> Advanced> Margin: Set a negative margin at the bottom so that the image floats slightly below the pop-up window.
17. Image> Advanced> Entrance animation: Rotate down left
18. Image> Advanced> Animation duration: Slow
19. Image> Advanced> Animation delay (ms): 500

Set publishing options

1. Condition: Include> Entire Site
2. Triggers> Load on Page: Yes, in 3 seconds
3. Advanced rules> Hide from logged in users: Yes, all users
4. Advanced rules> Show up to X times: Yes, 1 time

All ready. Visit your page and after 3 seconds the Countdown popup will appear, creating a sense of urgency and an incentive to purchase a product.