BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Countdown Timer Free

How to set up and style the Countdown Timer widget in Elementor.

Countdown Timer counts down to a date and time in days, hours, minutes and seconds. When it reaches zero it can show zeros, show a message or hide itself. Use it for product launches, sales that end on a set date, events and registration deadlines.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag Countdown Timer from the Bright Addons category onto the page.

  2. Set the Due Date. The note under the field shows which timezone is used.

  3. Switch Show Days, Show Hours, Show Minutes and Show Seconds on or off.

  4. Switch on Custom Labels to rename the units, and Separator ( : ) to add colons.

  5. Choose what happens under When Finished, and type the Message if a message is chosen.

  6. Set the Alignment, then open the Style tab for the boxes, digits and labels.

Content options

Countdown

Option What it does
Due Date The date and time the timer counts down to, in the site timezone. The default is one week ahead.
Show Days Shows or hides the days box.
Show Hours Shows or hides the hours box.
Show Minutes Shows or hides the minutes box.
Show Seconds Shows or hides the seconds box.
Custom Labels Opens a label field for each visible unit.
Days Label Replaces the word Days. Hours Label, Minutes Label and Seconds Label work the same way.
Separator ( : ) Prints a colon between the boxes.
When Finished Chooses Show zeros, Show a message or Hide the timer.
Message The text shown in place of the timer when it has finished.
Alignment Aligns the row of boxes left, center or right, per device.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Boxes

    min width, gap between boxes, background color, padding, border, border radius and box shadow.

  • Digits and Labels

    color and typography for the digits, the labels and the finished message, plus the separator color.

Tips

  • Due Date uses the WordPress site timezone, so every visitor counts down to the same moment.

  • If Show Days is off, the days are added to the hours. The same happens down the line when hours or minutes are hidden.

  • With Hide the timer, the finished timer stays visible at half opacity inside the Elementor editor so it can still be styled.

  • If all four units are switched off, the widget prints nothing.

Questions and answers

Which timezone does the timer use?

It uses the timezone set in the WordPress settings of the site. The Due Date field shows it in a note.

What happens when the countdown ends?

It depends on When Finished. The timer can stay at zeros, be replaced by a message or be hidden.

Can I show only hours, minutes and seconds?

Yes. Switch off Show Days. The remaining days are then counted in the hours box.

Does the timer restart for each visitor?

No. It counts to one fixed date and time. It is not a per visitor timer.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides