Use the Countdown element to create a sense of urgency

This article will learn about the Countdown Timer element and how to place one on your page to create highly converting pages.

About the Countdown Timer element 

The Countdown Timer can be defined as a virtual clock that counts down from a specific date or number to indicate the end or beginning of an offer or event. It is used to create a sense of urgency and persuade customers to take immediate action. 


You can quickly find the element on the left sidebar of the editor page, under the “Booster” section. GemPages provides an efficient tool for managing and designing your Countdown Timer, including the Settings and Design tabs.

Settings Tab

1. Countdown settings

There are three types of countdown timers available for you as below. 

  • Standard: The standard timer lets you select a specific date when you want the countdown to end. To use this option, you need to specify the date we should be counting down to and the appropriate time zone.



  • Daily: The daily timer allows you to pick a specific time to end the countdown every day. By selecting this option, the timer is restarted daily. 


  • Evergreen: The Evergreen timer counts down the time from the moment your visitor enters the page. To use it, you’ll need to set the amount of time we should display and count from.



Besides, you can decide what’s going to happen after the countdown ends.

  • Reset Countdown: You can manually restart the countdown from the beginning.
  • Loop: By turning on this option, after the countdown completes, it will run all over again.
  • Auto Hide when timeout: The countdown automatically hides after it finishes counting instead of showing as 0.



2. Text number

The feature allows you to select the color, font, and font size for the numbers.

3. Text label

The feature allows you to select the color, font, and font size for the numbers. 

4. Spacing

Move the slider to adjust the space between columns (the horizontal gap) and between numbers and labels (the vertical gap). 

5. Label

Use the toggle to decide which text label to display. 

6. Alignment

This parameter allows you to determine how the timer is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned. 

7. Redirect Url

If you prefer that your page is only valid during a specific time, enter the redirect link here. The visitors will be direct to that page after the time expires. 

8. Extra Class

If you wish to customize the variant's content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.


Design Tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.


That’s it! The Countdown Timer is ready to gain more conversions for your page. If you'd like to know how it performs, please consider setting up an A/B Testing campaign (available for Pro and Advanced users.)

If you're interested in learning more about powerful, user-friendly GemPages, feel free to explore the Help Center or get in touch with our delicate customer support via email or live chat.

Was this helpful?