Countdown

Before setting up the Countdown Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Countdown Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Countdown widget adds a customizable timer to create urgency for events or promotions.

Key Use Cases for the Countdown Widget in Elementor:

• Use the Countdown widget to display timers for upcoming events, product launches, or promotions. 
• Customize the design and countdown settings to create urgency and engage visitors effectively.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Countdown Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Countdown Widget in the list
• Toggle it on to enable the widget.
  Now, the Countdown Widget is ready to use!

How to Add Countdown Widget in Elementor

1. Open the page where you want to add the Countdown.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Countdown.“
4. Drag the Event Slider widget to your desired section.
5. The Event Slider widget will now be available for customization.

How to Configure the Countdown Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

• In the Elementor panel, search for the “Countdown Widget.”
• Drag and drop the widget into the desired section.
• Customize the countdown settings using the available options in the Elementor panel.

Your Countdown Widget is now ready to use! Configure the settings to create an engaging and time-sensitive experience.

Configuring Countdown Widget in Animation Addons: A Step-by-Step Guide

The Countdown Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to personalize the timer and optimize the layout for a time-sensitive, engaging user experience.

Content Settings

In the Content section of the Countdown Widget, you will find three main options:

Layout

1. Style – Choose the overall visual style of the countdown timer (boxed, inline).
2. Show Separator – Enable or disable separators (like colons or symbols) between time units for better readability and design consistency.

Timer

In the Timer section of the Countdown Widget, you will find the following options:

• Due Date – Set the exact date and time when the countdown will end.
• Labels – Enable or disable labels for each time unit (Days, Hours, Minutes, Seconds).
• Days / Hours / Minutes / Seconds – Customize the visibility and styling for each unit individually.
• Direction – Set the alignment direction of the timer (e.g., row or column layout).
• Label Gap – Adjust the spacing between the numbers and their respective labels for a cleaner look.

These options allow you to tailor the countdown timer’s functionality and appearance to match your site’s design.

Time Expire

In the Time Expire section of the Countdown Widget, you can define what will be displayed once the countdown reaches zero. This allows you to maintain engagement with your audience even after the countdown ends.

🔹 Title

Specify a custom title that appears when the countdown timer expires. This can be used to highlight a message like “Time’s Up!”, “Offer Ended”, or any other relevant notification.

🔹 Description

Add a supporting description below the title to provide additional information. For example, you might include details like “Please stay tuned for upcoming events.” or “This deal is no longer available.”

Style Settings

As we can see, there are several customization options in the style section for layout, days, hours, minutes, seconds and separator. The Style section allows you to customize the visual appearance of your Countdown Timer, helping you create an attractive, brand-aligned design. The options are divided into several key areas:

Layout

• Item Gap: Adjust the spacing between each time unit (Days, Hours, Minutes, Seconds) to ensure balanced alignment and visual clarity.

Days / Hours / Minutes / Seconds (Under “General”)

Each of these sections provides the same set of customization options:

• Digit & Label Gap: Control the space between the numeric value and its corresponding label (e.g., “Days”, “Hours”).
• Padding: Add internal spacing inside the time unit box for a more spacious look.
• Background Type: Choose a background color or gradient to enhance visibility and match your design theme.
• Border Type: Apply solid, dashed, dotted, or double borders around each time unit.
• Border Radius: Soften the corners of each box by adjusting the radius value.
• Box Shadow: Add a shadow effect for depth and emphasis.
• Digits Typography and Color: Customize the font style, weight, size, and color of the digits.
• Labels Typography and Color: Modify the label’s text appearance to maintain consistency with your site’s aesthetic.

Separator

• Size: Set the thickness or font size of the separator between time units.
• Offset: Adjust the vertical positioning of the separator to align it perfectly with the design layout.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully configured the Countdown widget in Elementor to create an engaging countdown timer for your website. For any further assistance or inquiries, feel free to contact our support team!