Adding a Countdown Timer to your promotions creates urgency and encourages visitors to act before time runs out. Whether it is a limited-time discount, a product launch, or a special event, a countdown visually communicates the remaining time, helping customers plan accordingly. With customization options, you can adjust colors, fonts, and positioning, and even add engaging graphics like animated clocks or rockets to make your timer stand out on your site or in email promotions.

General Settings #

Element Name/Title #

When using the General Settings feature, you will be presented with the default name/title of the currently selected Edit option. You can either leave the default name/title or modify it to better describe the element. Renaming the element is useful when you have multiple elements in your funnel page and need to easily identify them.

Color Options #

When working with the Color Options feature, you can modify the appearance of your timer.

• Color: To change the color of your timer, simply click on your preferred color from the color options available.
• Label Color: To modify the label color of your timer, click on the color that you prefer.

NOTE: If you cannot find the exact color you are looking for, you have the option to add custom colors by typing the color code in the designated space and then clicking on add color.

Float #

The Float feature provides you with multiple options to adjust the position of your timer according to your preferences. You can move it to the Left, Center, or Right, or choose to apply spacing options such as space-around, space-evenly, or space-between to achieve more balance and improve readability.

Typography Type #

The Typography Type feature allows you to modify the font of your text or content. You can select to use the heading or content font you set, or select a different font from the dropdown menu.

End Date and Time #

By using the End Date and Time feature, you can set a specific deadline for your countdown to reach its end. You can select your desired date and time using the available options. For example, you can set the countdown to end on July 11th at 6:00 AM.

Translate #

You can decide to set your timer language to your preferred language by simply selecting the language you want from the available options.

Time Zone #

When setting up the countdown timer, you can choose the Time Zone that you want it to operate in. This allows you to ensure that the timer functions correctly for your location and that it accurately counts down to the correct end time. You can select your preferred Time Zone using the available options, which include popular regions and countries.

Desktop and Mobile Font Size #

To adjust the font size of your countdown timer for both mobile and desktop devices, use the Mobile and Desktop Font Size feature. Simply drag the size bars to increase or decrease the font size as needed.

Desktop and Mobile Font Weight #

Use the options in the dropdown to customize the font weight for your timer’s text on desktop and mobile devices.

Desktop and Mobile Sub Text Font Size #

To customize the font size for the subtext of your countdown timer on both desktop and mobile devices, use the Desktop and Mobile Subtext Font Size feature. Adjust the font size by dragging the size bars as needed.

Desktop and Mobile Sub Text Font Weight #

This feature adjusts the weight and ensures that the subtext is readable and blends seamlessly with your countdown timer’s design.

Expire Action #

The Expire Action feature allows you to determine what happens after your countdown timer reaches its end.

• Redirected URL: Add a Redirected URL, which specifies the page that your users will be redirected to after the timer expires. You can easily add the Redirected URL to create a clickable link.
• Show & Hide Element: You can decide to hide or show your section, column, row, or element.

Spacing Options #

There are different spacing options available for adjusting the top or bottom margin of your content by toggling its bars. Depending on the Edit option you are working on, the settings will only apply to that option.

Advanced Settings #

Visibility #

The Visibility feature allows you to choose whether you want the Edit option to be visible on mobile devices, desktops, or both. You can accomplish this by clicking on the icon that corresponds to your preference.

Custom Class #

The Custom Class feature enables you to input your unique class.

CSS Selector #

The CSS Selector feature offers the ability to copy custom CSS code by clicking on the Copy icon located on the right side of the reference code.

A well-placed countdown timer adds urgency to your promotions and improves conversion rates. By customizing colors, fonts, positioning, and expiration actions, you can integrate them into your brand’s design. Whether for flash sales, webinars, or product launches, a countdown timer ensures your audience knows exactly how much time they have to act so they do not miss out.

Frequently Asked Questions #

Why use a countdown timer? #

A countdown timer creates urgency for limited-time discounts, product launches, or events, encouraging visitors to act before time runs out.

How do I set when the countdown ends? #

Use the End Date and Time feature to select your deadline, and set the Time Zone so the timer counts down accurately for your location.

What happens when the timer expires? #

Use the Expire Action option to redirect users to a URL or to show/hide a section, column, row, or element when the countdown ends.

Can I change the timer’s colors? #

Yes. Use Color Options to set the timer color and label color, and add a custom color by entering its code if needed.

Can I display the timer in another language? #

Yes. Use the Translate option to set your timer to your preferred language.

Can I show the timer only on mobile or desktop? #

Yes. Use the Visibility feature in Advanced Settings to display the timer on mobile, desktop, or both.