Countdown

Introduction

The Countdown widget in Elementor adds a dynamic timer for events, launches, or promotions, customizable to create urgency and engage visitors.

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 a Countdown widget ?

To activate the Countdown widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Countdown widget  in the list.
3. Toggle it on to enable the widget.

This will activate the Event Slider widget for you 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.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Countdown Widget across various tabs. 

Configuring Countdown Widget : A Step-by-Step Guide

Once the Countdown widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Layout

• I selected Layout Style One and turned off the Separator button.

Timer

• Let’s configure the timer. I set a due date and adjusted labels for days, hours, minutes, and seconds, along with direction and label gap. 

• I made a few tweaks, but you can customize it to fit your design and observe the changes.

Time Expire

• Shared a title and the default description as well.

Style Settings

As we can see, there are several customization options in the style section for layout, days, hours, minutes and seconds. Let’s style our content and make it more visually appealing.

Layout

• Adjusted the item gap to best fit my design.

Days

• I made a small adjustment to the day’s customization, working only on padding and border type. That’s all.

Hour,Minute and Second

• Similarly, I made adjustments for hours, minutes, and seconds.

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!