Home
→
Vertex Addons For Elementor Builder Documentation, Widgets
→
Elementor Countdown Widget

Elementor Countdown Widget

Key Features of the Elementor Countdown Widget

The Elementor Countdown Widget from Vertex Addons is a powerful tool for creating animated countdowns that can drive urgency and engagement on your Elementor-built website. Perfect for promotions, product launches, and limited-time events, this widget offers full control over timing, display style, and post-expiration actions.

Key Features:

Customizable Timer Units: Display days, hours, minutes, and seconds with precision.
Due Date Setup: Easily set a target date for the countdown.
Display Flexibility: Choose between block and inline layouts for seamless integration.
Expiration Actions: Customize actions when the timer expires, such as hiding elements or displaying messages.
Responsive Layouts: Designed to look great across all devices with alignment and style options.
Translation-Friendly: Customize the unit labels (days, hours, etc.) for multilingual sites.

What’s Needed?

To use the Elementor Countdown Widget, you’ll need:

Elementor Free Version: Basic page-building functionality.
Vertex Addons for Elementor: Adds advanced widgets like the Countdown Widget.

Install and Activate the Elementor Countdown Widget

To activate the Elementor Countdown Widget, please refer to our Widget Activation Guide.

How to Configure the Elementor Countdown Widget in Elementor

To add a countdown timer to your page, first drag and drop the Countdown Widget from the Elementor panel, then configure it step-by-step in the settings panel.

Step 1: Adding the Countdown Timer

After dragging the Countdown Widget onto your page, you’ll see the Content, Style, and Advanced tabs appear on the left side of the Elementor editor. Follow these steps to configure the content, styling, and advanced settings for your countdown.

Content Tab Configuration

The Content tab contains the essential settings to set up and customize your countdown timer.

Timer:
- Due Date: Select the target date and time for the countdown to reach zero. Click the calendar icon and pick your desired date and time for the event or promotion deadline.
- Items (Day/Hour/Minute/Second): Choose which units to display on the timer. For example, you can display only days and hours for a multi-day countdown or include all units for precision down to the second.
Display:
- Block/Inline: Select Block to arrange the countdown units in a stacked, block-style format, or Inline to align them in a single line.
- Alignment: Adjust the alignment (left, center, or right) based on your layout requirements.
- Direction: Define the direction for the timer’s display, choosing either LTR (Left to Right) or RTL (Right to Left) to match your website’s language and design.
Translation:
- Customize each unit’s label for translation purposes. This includes:
  - Day: Customize the label for “Day.”
  - Hour: Set the label for “Hour.”
  - Minute: Set the label for “Minute.”
  - Second: Set the label for “Second.”
- Apostrophe ‘s: Add or remove the apostrophe as needed to match your language.
Expire Actions:
- Actions After Timer Expires: Control what happens when the countdown reaches zero. Choose one or both of these options:
  - Hide Element: Enter a CSS selector for the element(s) you want to hide once the timer ends.
  - Display Message: Input a message that will appear when the countdown expires. For example, “Offer Expired” or “Event Started.”

How to Style the Elementor Countdown Widget

The Style tab provides comprehensive options to customize the appearance of the countdown timer.

Timer Styling:

Timer Color: Set the primary color for the timer, which applies to the countdown numbers and separators.
Text Color: Choose the color for unit labels (e.g., “Day,” “Hour”) to distinguish them from the numeric countdown.
End Message Color: Customize the color of the expiration message that appears once the timer has finished.
Timer Typography: Adjust the typography for the countdown timer, including font style, weight, and size.
Text Typography: Modify the typography settings for the unit labels to ensure readability and consistency.

End Message:

This section allows you to style the message that appears when the timer ends. Customize its color, font, and size to ensure it complements the countdown design.

Box Styling:

Background Type: Choose between Classic or Gradient background styles for the countdown timer container.
Padding: Adjust padding around the timer for extra spacing.
Border Radius: Control the border radius to create rounded corners on the countdown timer box.
Box Shadow: Add or adjust box shadows for a subtle or dramatic effect around the countdown box.

Advanced Tab Configuration

The Advanced tab provides common Elementor options for spacing, positioning, and custom CSS. This includes:

Margin: Set the outer spacing of the widget to control its interaction with surrounding elements.
Padding: Add inner padding to the widget for extra spacing around the content.
Custom CSS: Apply custom CSS for additional styling needs and fine-tuning.

Final Outcome

The Elementor Countdown Widget from Vertex Addons allows you to create visually engaging countdowns, helping to drive urgency and focus for promotions, events, and time-sensitive content. With flexible options for styling, translation, and post-expiration actions, this widget is a powerful addition to any Elementor-built site.