The countdown widget – Leadpages Knowledge Base

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.

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 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.

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 Unstyled, Block, or Boxes.

Unstyled countdown timer:

Block countdown timer:

Boxes countdown timer:

NOTE: Block and Boxes style countdown timers offer the additional styling options of Corners that allows the borders to be Square, Rounded, and Circular, which change the shape of each number's container.

Resizing

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 ↗