The countdown widget creates a timer that counts down to a specified date and time, such as the date and time of a live webinar or event.
In this article:
Using the countdown widget
Setting the date and time
Click on the calendar icon in the widget settings panel to open the date options window.
From there, you’ll be able to select the date and time when the timer will end with the Standard option selected. To change the time itself, click and type your time at the top of the panel—then you can toggle between AM and PM by clicking that label.
The date and time you configure here will match your computer’s time zone—so if someone in a different time zone views your page, the timer’s expiration will not be adjusted.
You can alternatively create a daily countdown by selecting the Daily option and choosing an “end time”. The counter will reach zero and reset at that same time each day. Keep in mind the time you choose will be locked into your computer’s time zone.
Creating an evergreen timer
To create an evergreen timer, choose Evergreen under the calendar icon in the widget’s options. Then, select the number of days, hours, and minutes before the timer reaches zero for new visitors.
When it reaches zero
You can set your timer to trigger different actions when it runs out:
- Redirect: visitors to your page will be automatically redirected to another URL (or Leadpage) when the countdown hits zero.
- Show or hide: make specific sections on your page appear or disappear when the countdown runs out.
Customization and styling details
Click the color palette icon in the widget settings panel to to customize the colors of your countdown widget. Within the color picker, you can enter a custom hex value, or use the sliders to adjust hue, saturation, lightness, and opacity.
You can adjust the background and label colors independently by switching between the NUMBER and LABEL tabs at the top of the color selection panel.
Selecting the Style option allows you to modify the way your countdown timer appears. You can choose between Unstyled, Block, or Boxed-In.
Unstyled countdown timer:
Block countdown timer:
Boxed-in countdown timer:
To resize the countdown timer on your Leadpage, drag the divider between columns to the left or right. The timer will adjust in size to fit within its column automatically.
Keep in mind that this only works in rows with more than one column. If needed, you can add additional columns through the page layout options.
Tips and frequently asked questions
How can I change the font of my countdown timer?
You can set the font for all countdown timers on your page using global type styles. Click Page Styles in the sidebar of the builder, then Type Styles and select your desired font from the drop-down menu.
Can I rotate the countdown timer so it displays vertically instead of horizontally?
Absolutely! The countdown timer widget can be forced into a vertical orientation by making its containing column too narrow to hold it horizontally.
Here’s an example of a vertical countdown timer:
To return the countdown timer back to a horizontal orientation, simply widen its containing column.
Tip: Formatting dates
You can type dates into the widget options instead of using the calendar selection. If you choose to, you must use the standard American format (MM/DD/YYYY).
Please let us know if you have additional questions!
We’re here to help. If you run into any issues or just have additional questions, please contact our support team. You can also create a ticket by clicking the ? in the top right corner of your Leadpages dashboard.