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
Simply click on your countdown widget or hover and click the pencil icon to access the countdown widget options. The widget will open to the date and time settings by default.
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 the respective 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 only set a date in the future, not the past.
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.
If you decide to change the duration of your evergreen timer, you can also reset the timer for all visitors.
When it reaches zero
You can set your timer to trigger different actions when it runs out.
Select Redirect to send your visitors to another URL or landing page when the countdown reaches zero.
Select Appearance to make specific sections on your page appear or disappear when the countdown runs out.
- Remain: This section will remain in view before and after the timer expires
- Show: This section will appear when the timer expires
- Hide: This section will disappear when the timer expires
Click the timer icon to choose an action, as shown below.
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 Boxes.
Unstyled countdown timer:
Block countdown timer:
Boxes 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 Support in your Leadpages navigation menu, or submit a ticket ↗