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.
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 landing page) 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
Use the color picker to choose from your brand colors, recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color with new opacity for your countdown as seen below.
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 paint brush icon allows you to style 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 page, 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).
Need more help?
You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗