Elementor Countdown Timer
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor countdown timer counts down to a date and time in days, hours, minutes and seconds. Use it for launches, sales, events and webinars.
- Widget name MoxKit Countdown
- Panel category MoxKit Addons
- Settings 19+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor countdown timer?
When the time is up, the timer is replaced by your message, such as "This offer has ended."
Like every MoxKit widget, the Countdown has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Due date and time.
- Show or hide labels.
- Message when finished.
- Digit and label typography and colors, unit gap and box background.
- Finished message styling.
How to add the Elementor countdown timer
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Countdown" or scroll to the MoxKit Addons category.
- Drag the Countdown widget into a Container.
- Pick the Due date.
- Type the message shown when the countdown ends.
- Style digits and boxes in the Style tab.
- Click Update (or Publish) to save the page.
Designs and examples
These screenshots were taken from a live WordPress site running MoxKit 1.4.4 and Elementor. They show the Countdown with the settings described in each caption.
Elementor countdown timer settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 3 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Countdown
| Setting | Type | Options and notes |
|---|---|---|
| Due date | Date & time | Uses the site timezone. |
| Show labels | Toggle | On / Off (default: On) |
| Message when finished | Text |
Elementor countdown timer settings: Style tab
The Style tab controls the look of every part of the widget: 3 sections, about 16 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Digits
| Setting | Type | Options and notes |
|---|---|---|
| Digit color | Color | |
| Digit size per device | Slider | |
| Typography | Group | All the usual Elementor typography settings. |
| Typography | Group | All the usual Elementor typography settings. |
| Digit to label spacing per device | Slider | |
| Box background | Color | |
| Label color | Color | |
| Spacing per device | Slider |
Box
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Finished message
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Tips and best practices
- Pair the countdown with a call to action button right below it.
- The date uses your WordPress timezone (Settings > General).
Countdown FAQ
What happens when the timer reaches zero?
The digits are replaced by your Message when finished.
Which timezone is used?
The timezone set in WordPress Settings > General.
Summary
The Elementor countdown timer in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Days, hours, minutes and seconds to any date, labels, styled boxes and a message when it ends. Install MoxKit Addons for Elementor from WordPress.org, drag the Countdown widget onto a page and start with the settings above.