The Countdown Widget allows you to add, style, and manage a countdown timer anywhere on your Elementor-powered page. It’s perfect for creating urgency for promotions, events, or product launches by displaying a dynamic countdown to a specific date and time, with customizable styling options and responsive settings.
Whether you’re designing a sales page, event announcement, or limited-time offer section, the Countdown Widget makes it easy to engage visitors with a visually appealing timer.
Key Features:
Display a countdown timer with days, hours, minutes, and seconds
Set a custom end date and time for the countdown
Customize timer styles, sizes, and colors
Align and arrange timer elements flexibly
Fully responsive and optimized
🚀 How to Enable the Countdown Widget
To start using the Countdown Widget, follow these steps:
Navigate to your WordPress dashboard.
Go to Topper Pack → Widgets.
Locate the Countdown Widget from the list.
Toggle the switch to “On” to enable it.
The widget is now available in the Elementor editor.
🧩 How to Use the Countdown Widget in Elementor
Step 1: Add the Widget to Your Page
Open your desired page in the Elementor Editor.
Search for “Countdown” in the Elementor widget panel.
Drag and drop the Countdown Widget TP widget onto your page canvas.
🔄 Tip: It includes the TP badge, indicating it’s from the Topper Pack.
🖼️ Choose Style
Select from multiple ready-made designs with unique layouts.
Step 2: Configure Countdown Settings
Under the Content → Countdown section:
Set Date to the target end date and time (e.g., June 27, 2025, 12:00 PM).
Toggle Show Days, Show Hours, Show Minutes, and Show Seconds to control which units are displayed.
Step 3: Style the Content Box
Under the Style → Content Box section:
Adjust Height and Width to set the overall size of the countdown container.
Set Background Type (e.g., Classic) and customize Background Color.
Adjust Border Type, Border Radius, and Box Shadow for the container.
Set Margin and Padding to control spacing around the countdown (e.g., top, right, bottom, left).
Step 4: Style the Timer Elements
Under the Style → Countdown Styles section:
Select a Style (e.g., circular or rectangular design) from the available options.
Customize Text Color and Background Color for the timer units (days, hours, etc.).
Adjust Typography to set font size, weight, and style for the timer text.
Set Spacing between timer units for better alignment.
✅ Final Preview and Save
Once your Countdown Widget settings and style options are applied:
Countdown
The Countdown Widget allows you to add, style, and manage a countdown timer anywhere on your Elementor-powered page. It’s perfect for creating urgency for promotions, events, or product launches by displaying a dynamic countdown to a specific date and time, with customizable styling options and responsive settings.
Whether you’re designing a sales page, event announcement, or limited-time offer section, the Countdown Widget makes it easy to engage visitors with a visually appealing timer.
Key Features:
🚀 How to Enable the Countdown Widget
To start using the Countdown Widget, follow these steps:
🧩 How to Use the Countdown Widget in Elementor
Step 1: Add the Widget to Your Page
🖼️ Choose Style
Step 2: Configure Countdown Settings
Step 3: Style the Content Box
Step 4: Style the Timer Elements
✅ Final Preview and Save
Once your Countdown Widget settings and style options are applied: