How to Add and Customize the Countdown Timer Element in Elementor #

The Countdown Timer Element by Master Addons is a high-impact widget used to create urgency by displaying a live, reverse-counting timer to a specific date and time. This is perfect for promoting product launches, sale deadlines, event start times, or any time-sensitive offer.

Using the Countdown Timer Element, you can:

• Set a specific Countdown Date & Time and even enable the timer to Repeat.
• Choose from multiple Style Presets (Block, Inline, Table variations) for different layouts.
• Toggle the visibility of Years, Months, Days, Hours, Minutes, and Seconds individually.
• Fully customize the typography, colors, and backgrounds of the counters, labels, and separators for Normal and Hover states.

So, let’s see how to add and customize this element.

Adding and Configuring the Countdown Timer Element #

Follow these steps to add and configure the Countdown Timer Element on any page of your website.

Step 1: Create or Edit a Page #

1. From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
2. Next, click the “Edit with Elementor” button.

Step 2: Find the Countdown Timer Element #

1. In the left-hand Elementor panel, use the search bar to find “Countdown Timer.”
2. Drag and drop the addon onto your desired section of the page.

Step 3: Customize the Countdown Timer Settings #

After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.

Content Tab #

This is where you set the target time and define the countdown display options.

Timer: #

• Countdown Date & Time: Use the field to set the specific date and time the countdown should end.
• Repeat countdown: Toggle this on to restart the timer automatically after it reaches zero.
• Repeat Settings (if enabled): Set the frequency for repetition (e.g., repeating every Year, Month, Days, Hour, Minute, or Second).

Countdown Settings: #

• Style Preset: Choose the overall layout of the numbers: Block, Inline, Block Table, or Inline Table.
• Separator: Toggle to display separators (e.g., colons) between the counter units.
• Show [Unit]? / [Unit] Label: For each unit (Years, Month, Days, Hours, Minutes, Seconds), you can toggle visibility and customize the label text that appears below the number.

Style Tab #

This is where you control the visual appearance of the timer container and the individual counter units.

Common Style: #

• Width / Height / Alignment: Set the overall dimensions and alignment of the timer widget.
• Box Shadow: Apply a shadow effect to the outer container.
• Background Type: Set the background style for the timer container: Classic (single color) or Gradient.
• Border Radius / Margin / Padding: Apply standard spacing and corner controls to the container.

Counter Style: #

• [Unit] Background: For each unit (Years, Month, Day, Hour, Minute, Second), set the Background Type (Classic or Gradient) for the individual counter box.
• Normal / Hover (Counter Text): Set the Color, Typography, and Text Shadow for the numbers in both the default and hover states.

Separator: #

• Normal / Hover: Set the Color, Typography, Text Shadow, and Margin for the separator element (e.g., the colon or slash) in both states.

Label: #

• Normal / Hover: Set the Color, Typography, Text Shadow, and Margin for the text labels (e.g., “Days,” “Hours”) in both states.

Step 4: Save and Publish Your Page #

Once you’ve customized everything to your liking:

1. Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
2. Visit your page on the frontend to preview the Countdown Timer live.