How To Create A Hello Bar Countdown Popup

Create a popup that displays a 24-Hour Sale countdown timer

You’ll learn how to create a popup that:

  1. Adds urgency
  2. Increases sales

Design The Popup And Its Content

  1. Go to Templates > Popups > Add New and give your new Popup a name
  2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we’ll design our own.

Popup > Layout Tab

  1. Width: 100vw, so it will display across 100% of the viewport width
  2. Height: Custom
  3. Custom Height: 300px
  4. Position > Vertical: Top
  5. Overlay: Slide to Off
  6. Entrance Animation: Fade In
  7. Animation Duration: 2.2 seconds

Popup > Style Tab

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

Popup > Advanced Tab

Padding: 30px for all.


Content

  1. Click + to add a new section with 4 columns.
  2. Section > Layout > Content Position: Middle
  3. Section > Style > Color: #e8e8e8
  4. Add a Heading widget, and type your title, and adjust font size and weight as desired
  5. Add a Button widget, and adjust text, color, and design elements as desired
  6. Add a Countdown widget, and stretch it out by dragging the column
  7. Countdown > Content > Type: Evergreen Timer
  8. Countdown > Content > Hours: 23
  9. Countdown > Content > Minutes: 59
  10. Countdown > Content > Actions After Expire: Choose both Hide and New Message
  11. Countdown > Content > Message: The the message you wish to display with the timer expires
  12. Countdown > Style > Boxes > Background Color: Select a color
  13. Countdown > Style > Content > Digits: Change color and typography  as desired
  14. Countdown > Style > Content > Label: Change color and typography as desired
  15. Add an Image widget, and choose a photo from your library.
  16. Image > Advanced > Margin: Set a minus margin on the bottom so the image will float slightly below the popup.
  17. Image > Advanced > Entrance Animation: Rotate In Down Left
  18. Image > Advanced > Animation Duration: Slow
  19. Image > Advanced > Animation Delay (ms): 500

Set The Publish Options

  1. Condition: Include > Entire Site
  2. Triggers > On Page Load: Yes, Within 3 seconds
  3. Advanced Rules > Hide For Logged In Users: Yes, All Users
  4. Advanced Rules > Show Up To X Times: Yes, 1 time

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

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email

Did this answer your question?

255 people find it useful

Yes

No

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

Black Friday Sale Ends Soon: Up to 25% OFF!

Sale Ends in

:
:
:

You Snooze, You Lose!

The Sale Is Almost Over

:
:
: