Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

The countdown widget

Last Updated

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.

TIP: An evergreen timer can pair well with a redirect—so when the timer runs out, visitors will be directed to a new page.

If you decide to change the duration of your evergreen timer, you can also reset it (which will start the timer over for all your 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.

Click the timer icon to choose an action, as shown below. 

NOTE: If you set a daily timer and a redirect, the page will redirect at zero, but the visitor would be able to access the original page a moment later—so the best practice is to redirect visitors for standard or evergreen countdown timers only.

Customization and styling details

Color options

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.

Number styling

Selecting the paint brush icon allows you to style the way your countdown timer appears. You can choose between UnstyledBlock, or Boxed-In.

Unstyled countdown timer:

Block countdown timer:

Boxed-in countdown timer:

NOTE: Block and Boxed-in style countdown timers offer the additional styling options of SquareRounded, and Circular, which change the shape of each number's container.


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 ↗

Was this article helpful?
Powered by Zendesk