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:

• 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:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Countdown Widget from the list.
4. Toggle the switch to “On” to enable it.
5. 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:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.