The Countdown element in ClickFunnels is a powerful tool designed to create urgency and encourage prompt action from your visitors. By displaying a ticking clock counting down to a specific event or deadline, you can drive conversions and enhance user engagement. In this article, we'll explore how to add, configure, and use the Countdown element effectively. 
Requirements
An active ClickFunnels account
A page created in your workspace
Adding a Countdown Element in the Page Editor
Inside the page editor, add a Section where you want to place the headline.
Add a Row within that section.
Click the orange + Plus or Add New Element button inside the row to insert a new element.
From the Countdown Timers category, select the Countdown element.
.png)
Once the Countdown element is added, you can customize its appearance to fit your page design.
Selecting a Design from Templates
The Countdown element offers pre-designed countdown styles that can be applied to your element with just a click. This allows you to quickly customize the appearance of your countdown without manually adjusting settings. Here’s how to use it:
After adding the Countdown element to your page, click on the gear
⚙️ icon to access its settings.In the settings menu, switch to the Templates tab at the top.
Browse through the available templates and select the one that best suits your needs. Once selected, the design will be automatically applied to your countdown.
After applying a template, you can refine the design further by adjusting the element’s settings, such as colors, fonts, and visibility options.
Customizing Countdown Element
When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element to open its' settings panel.
Top Margin
The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.
Timer Type
The Timer Type setting allows you to customize how the countdown functions on your funnel page. Here is a detailed explanation of each option:
Calendar Event:
This option is designed to automatically display a countdown timer synced with an event's date and time configured in a Countdown Event to the Countdown Funnels app. No manual date or time inputs are required since it pulls directly from the event data from the Countdown Event in the Countdown Funnels app. This is ideal for events such as webinars, product launches, or scheduled sales, ensuring the timer dynamically aligns with the event schedule. 
Important:
You must create a countdown event in the Countdown Funnels app and attach the event in the funnel step. Learn more about how to create a countdown calendar event and attach it to a funnel step in the articles How to Create and Manage Countdown Events and How to Add a Countdown Calendar Event in a Funnel Step.
Countdown:
This type lets you manually set a specific date and time for the countdown to expire. It is not tied to any funnel events, giving you complete control over the timer's duration. Configurations include:
End Date: Select the date for the countdown to end.
End Time: Define the specific time of day the countdown ends.
Timezone: To ensure accuracy, set the time zone (EST, CST, MST, and PST only).
Evergreen:
The evergreen timer is designed to count down to a specific time based on the visitor's interaction with the page. This timer resets according to the frequency you set (e.g., daily, weekly, monthly, or on-page load). The functionality is powered by cookies, allowing the system to track and remember the visitor's session. If the visitor returns to the page using the same browser and the cookies remain intact, the countdown will resume where it left off or reset based on the settings. Key settings include:
Time Resets: Select how often the timer resets:
Daily: Resets every day at a specified time. For example, a countdown could restart every day at 6:00 AM, showing visitors a new offer daily.
Weekly: Resets on a specific day of the week at the chosen time. For instance, if you set it to reset every Monday at 9:00 AM, visitors see the countdown restart weekly.
Monthly: Resets on a particular day of the month at the set time. For example, you could configure it to reset on the 1st of each month at 12:00 AM for monthly promotions.
On Page Load: Resets every time the page is loaded. If you set "On Page Load," you can configure the countdown duration, like 2 hours, creating precise time-sensitive offers. For example, a 2-hour countdown could restart from 2 hours each time someone revisits the page, creating urgency for repeat visitors.
Expire Action
The Expire Action setting determines what happens when the countdown reaches zero. This feature helps you define the next step for your visitors, ensuring smooth transitions and maintaining engagement. You can choose from the following options:
Show/Hide Content:
Select specific elements on your page to show or hide when the timer expires. This is useful for:
Displaying a new message or section, such as "Offer Expired" or "Stay Tuned for Upcoming Events."
Hiding a call-to-action button or form once the offer ends.
To configure:
Click on the Show or Hide dropdown menu.
Choose the sections/rows/elements you want to reveal or conceal after expiration.
Redirect to URL:
Automatically redirect visitors to a different page or website when the countdown ends. This is ideal for:
Sending users to a "Thank You" page.
Redirecting to a new offer or campaign.
To configure:
Select Redirect to URL from the Expire Action dropdown menu.
Enter the desired URL with
http://orhttps://in the Redirect URL field.
Policy
The Policy setting in the Countdown element determines how the countdown behaves in terms of expiration and resetting. Here are the available options:
Auto Reset Timer: This policy automatically resets the countdown based on the chosen reset frequency (Daily, Weekly, Monthly, or On Page Load). For example, if you’ve set the timer to reset daily at 6:00 AM, it will restart at the defined time regardless of the visitor’s actions.
Auto Expires X Days: This option allows the timer to expire automatically after a specified number of days. Once the set period elapses, the countdown will no longer reset or display for returning visitors. This is useful for time-limited campaigns where the offer ends after a specific duration.
Never Expires: With this setting, the countdown will continue indefinitely without resetting or expiring. This is ideal for campaigns where you want the countdown to consistently run and create urgency for all visitors, regardless of their interaction or time of visit.
Timer Units
The Timer Visibility settings allow you to decide which time units (years, months, weeks, days, hours, minutes, and seconds) are displayed in your countdown timer. This gives you control over how the time is represented to match your campaign needs. Here’s how it works:
Customizing Time Units: You can choose to display specific time units based on your campaign's context. For instance:
If your countdown spans several months, you might enable "Months" to show the number of months left.
For shorter campaigns, such as one that ends in a few hours, you can display only "Hours" and "Minutes."
Dynamic Calculation: The timer will dynamically adjust to display the remaining time using the selected units. For example:
If you choose to show only "Days" and "Hours," the timer will calculate the remaining time and convert it into these units, even if the campaign spans weeks or months.
If "Months" is selected, the countdown will calculate and display the number of full months left until expiration.
Time
The Time Component allows you to customize the appearance of the time units displayed in the countdown. This feature ensures that the timer aligns with your branding and design preferences. Within the Time Component, you can:
Top Margin: Adjust the top margin of the time units from the top of the element container.
Typography: Modify the font size, style, and weight of the time units to match your page's design.
Color and Opacity: Customize the color and transparency of the time units to make them stand out or blend seamlessly into your page.
Text Shadow: Enable text-shadow effects and adjust parameters such as offset, blur, and shadow color to enhance the visual appeal.
These settings give you complete control over how the time units are displayed, ensuring they grab attention while maintaining a professional and cohesive design.
Time Container
The Time Container settings provide customization options for the boxes or containers that house the time units. These settings help you style the countdown’s structure and layout to match your design requirements. Within the Time Container, you can:
Padding: Adjust the spacing inside the containers for precise placement.
Background: Set a background color to make the containers visually distinct.
Borders: Add borders with customizable styles, colors, and thickness for a framed look.
Shadow Effects: Apply shadow effects to add depth and emphasis to the containers.
Corner Radius: Round the corners of the containers for a softer appearance.
These options allow you to refine the countdown timer's overall look and feel, ensuring it captures attention while maintaining a cohesive design.
Countdown Container
The Countdown Container settings provide customization options for the boxes or containers that house the time units and the labels. This lets you style and align the units and label containers to match your page design. Within the Countdown Container, you can:
Padding: Adjust the space inside the container to create a balanced layout.
Background Color: Set a background color for the container to differentiate it from the page’s background.
Width: Define the container size to ensure it fits seamlessly within your design.
Borders: Add borders with adjustable styles and colors to outline the container.
Shadow Effects: Apply shadow effects to add depth and make the countdown stand out.
Corner Radius: Round the corners of the container for a softer or more modern look.
These settings ensure that the countdown’s outer container is visually cohesive and adaptable to various design needs.
Label
The Label Component allows you to customize the labels displayed below the time units, such as "Hours," "Minutes," and "Seconds." This component provides flexibility to ensure the labels align with your design and branding requirements. Here’s what you can do within the Label Component settings:
Visibility: You can choose to show or hide the labels by toggling the visibility using the eye icon. If hidden, the countdown will display only the numeric values.
Typography: Adjust the font style, size, and weight of the labels to match your design.
Color and Opacity: Customize the color and transparency of the labels to fit seamlessly into your design.
Background: Optionally add a background color for the label section for better visual separation.
Text Effects: Enable text shadows or add borders and corner radius to enhance the label appearance.
These settings ensure that the labels complement the countdown timer's overall look while maintaining readability and visual appeal.
Gap and Label Order
The Gap and Label Order settings provide advanced options to control the spacing and arrangement of the countdown timer elements. These settings allow you to fine-tune the layout and improve visual balance. Here’s how they work:
Gap Settings
Date/Time Gap: Adjust the spacing between the date and time segments.
Date Items Gap: Modify the distance between individual date units, such as "Days" and "Hours."
Time Items Gap: Control the spacing between time units, such as "Hours" and "Minutes."
Amount/Label Gap: Define the space between the numeric values (amount) and their labels (e.g., "Hours").
Label Order
The Label Order setting lets you choose how the time values and their labels are arranged:
Amount First: Displays the numeric value before the label (e.g., "52 Hours").
Label First: Displays the label before the numeric value (e.g., "Hours 52").
These options provide flexibility in presenting your countdown timer, ensuring that it aligns with your design preferences and enhances readability.
Padding
The Padding settings control the spacing around the content within an element. You can adjust the padding for:
Top: Add space between the top of the element container and its content.
Bottom: Add space between the bottom of the element container and its content.
Left + Right: Adjust the horizontal spacing between the element container and its content.
Background
The Background section allows you to set the element's background color. You can choose a predefined color from the Style Guide or create a custom color. When using the Custom color picker, you can select the color using the slider or input a specific HEX code..png "image(59).png")
Border
The Border settings enable you to add and style borders around an element, allowing for enhanced visual definition and separation on the page:
.png "image(78).png")
Style Presets (1, 2, 3): Choose from predefined border styles in your Style Guide. These presets provide consistent border styles across your page and can be quickly applied to elements.
Edit Style: To modify the preset border styles in the Style Guide (affecting all elements using that style), select Edit Style to adjust the design in your global settings.
Override: Use the Override option to customize the border settings specifically for this element without impacting the global Style Guide settings.
Borders: Select which sides of the element should display a border. Options include any combination of top, bottom, left, and right borders.
Border Style: To fit your design preferences, choose the border's line style, such as solid, dashed, or dotted.
Color: Use the color picker to select a border color. You can choose a color from the Style Guide or select a custom color, ensuring the border color aligns with your design scheme.
Stroke Size: You can adjust the border's thickness using the Stroke Size slider or by inputting a specific pixel value, creating anything from thin outlines to bold frames.
Shadow
The Shadow settings allow you to add depth and emphasis to elements by applying shadow effects, enhancing the visual appearance. Here’s how to customize shadow properties:
.png "image(79).png")
Style: Select one of the predefined shadow styles from your page's style guide. Click on the numbered styles (1, 2, or 3) to apply preset shadow settings defined in your style guide.
Shadow Style: Choose between Inset (shadow within the element) and Outset (shadow outside the element) to achieve the desired shadow effect.
X-direction: Adjusts the horizontal positioning of the shadow. A positive value moves the shadow to the right, while a negative value shifts it to the left.
Y-direction: Controls the vertical placement of the shadow. Positive values push the shadow downward, while negative values pull it upward.
Blur: Controls the softness of the shadow edges. Higher values create a more diffused, softer shadow, while lower values keep the shadow sharp.
Spread: Adjust the size of the shadow. Positive values expand the shadow, while negative values make it narrower.
Color: Use the color picker to choose to set the shadow color.
Corner
The Corner settings let you adjust the roundness (border-radius) of an element's corners, providing flexibility to create either rounded or sharp edges:
.png "image(77).png")
Style Presets (1, 2, 3): Choose from predefined corner styles set in your Style Guide. These presets (1, 2, or 3) offer quick styling options that align with your page’s overall design.
Edit Style: To modify a style directly in the Style Guide (affecting all elements using that style), click Edit Style to adjust the preset in your global settings.
Override: To apply custom corner settings without changing the Style Guide, click Override. This allows you to tailor the corner radius for this specific element only.
All Corners: Adjust the slider or enter a specific value in pixels or percentages to set a uniform border radius for all four corners.
Separate Edges: Enable Separate Edges to adjust each corner independently. You can set different values for the Top Left, Top Right, Bottom Left, and Bottom Right corners to achieve unique shapes.
Element Control Panel
The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:.png "image(47).png")
ALL: The element will be visible on all devices (desktop, tablet, and mobile).
Desktop Icon: The element will only be visible on the desktop view.
Mobile Icon: The element will only be visible on mobile view.
Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.
Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.
Trash Icon: Removes the element from the page editor entirely.
Advanced Settings
To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:
Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.