Countdown Timer Feature Overview

Adding a countdown timer to your landing page is a highly effective tactic for increasing engagement. This feature allows you to easily incorporate a customizable timer that can count down in days, hours, and seconds, helping you create a sense of urgency that motivates users to take action.

Main Settings

Timer Name and Description
In the general settings, you can rename the timer for clarity, especially when managing multiple elements on your page.

Customizing Timer Color
To modify the color of the timer itself, simply choose from the available options or input a specific color code if you have a particular shade in mind. This flexibility ensures that the timer fits seamlessly with your site's design.

Label Color Options
Similar to the timer color, you can customize the label color by selecting one from the palette or inputting a custom color code.

Layout and Styling

Positioning with Float
The float function lets you position the timer to the left, center, or right of the page. You can also adjust the spacing between elements for a cleaner layout by choosing between options like space-around, space-evenly, or space-between.

Typography Customization
You can fine-tune the font style and size for your countdown text using the typography settings, allowing for greater personalization of the timer’s appearance.

Time and Date Adjustments

Setting the End Date and Time
Define when you want your countdown to conclude by setting a specific date and time. For example, you can schedule it to end at 6 AM on July 11th.

Selecting a Time Zone
Ensure that your countdown timer operates correctly by selecting the appropriate time zone. Choose from a range of time zones, including the most commonly used ones.

Font Size Controls

Mobile and Desktop Font Adjustments
You can independently adjust the font size of the countdown for mobile and desktop views using the provided sliders, allowing for optimal readability across devices.

Subtext Font Size
Similarly, you can customize the font size of the subtext for both mobile and desktop views.

Expiration Options

Post-Expiration Actions
After the timer expires, you can decide whether to hide or show certain sections, rows, or elements on the page. Alternatively, you can redirect users to a different URL.

Layout and Spacing

Padding Options
Padding can be applied to the top, bottom, left, or right of the timer, allowing you to fine-tune its placement on the page. Simply input a number to adjust the padding accordingly.

Advanced Customization

Visibility Controls
Choose whether the timer is visible on mobile devices, desktops, or both by toggling the visibility options.

Custom Class
For more advanced users, there’s an option to add a custom class, allowing further customization via code.

Copying CSS Selector
If you need to replicate the CSS of the timer for other elements, you can easily copy the custom CSS by clicking the copy icon.