How To Use The Countdown Widget By Atomic Addons

The Countdown widget by Atomic Addons counts down to a date and time in boxes for the days, hours, minutes and seconds. Use it for a sale that ends, a launch or an event. It can also run an evergreen timer that starts again for each visitor, and when the time is up it can show a message, send visitors to another page, reveal a coupon code or click a button. This guide covers adding the widget, setting the time and choosing what happens at the end.

Enable the Countdown Widget

Countdown is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Countdown. You can also open the Marketing category.

4. 4

   Turn the Countdown widget on.

5. 5

   Click Save Settings.

Add the Countdown Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Countdown. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Layout

Content → Layout sets when the countdown ends:

1. 1

   Due Date: The date and time to count down to, one month from today by default. It is read in your site's timezone (Settings → General → Timezone), which the panel shows under the field.

2. 2

   Loop Time: Turns the widget into an evergreen timer: instead of a fixed date, each visitor gets their own countdown that starts again when it runs out. Due Date and the End Action section are hidden while it is on.

3. 3

   Input Loop Time (Hours): With Loop Time: the length of one cycle in hours, 3 by default.

A looping timer remembers each visitor's end time in a cookie, so it keeps counting down when they reload the page or come back during the same cycle. To make the timer look less mechanical, each cycle ends a random 6 to 14 minutes before the full loop time. While you are logged in to WordPress, the timer starts afresh on every page load, so test it in a private browser window.

Count Layout

Content → Count Layout arranges the boxes:

1. 1

   Columns: How many boxes sit in a row, 1 to 4: 4 by default, 2 on tablets and phones. Use the device icon to change the tablet and phone numbers.

2. 2

   Gap: The space between boxes, 20px by default.

3. 3

   Number & Label Gap: Shown while labels are on: the space between a number and its label, 10px by default.

4. 4

   Text Alignment: Left, center (the default) or right alignment of the numbers and labels in each box.

5. 5

   Container Width: Narrows the whole countdown to a width in % or px. It stays centered unless you set Content Align.

6. 6

   Content Align: With a narrower container: pushes it to the left or the right.

Additional Options

Content → Additional Options chooses the units and labels:

1. 1

   View: Block, the default, puts each label under its number. Inline sets it beside the number.

2. 2

   Days / Hours / Minutes / Seconds: Which units to show. All are on by default. A unit you hide rolls into the next larger one: with Days off, 2 days read as 48 hours.

3. 3

   Show Label: The words under (or beside) the numbers. On by default.

4. 4

   Custom Label: Lets you replace the words Days, Hours, Minutes and Seconds, for example to translate them or shorten them to “Hrs”.

5. 5

   Show Separator: A symbol between the boxes. A box at the end of a row gets none, so the symbol never points at nothing on narrow screens.

6. 6

   Symbol: The separator, “:” by default.

End Action

Content → End Action chooses what happens when the countdown reaches zero. It is there while Loop Time is off, and it also runs for visitors who arrive after the end date. Pick a Type:

1. 1

   None: The default: the boxes stop at zero.

2. 2

   Message: Replaces the countdown with the End Message, a text editor that reads “Countdown End!” by default. You can format it and add links.

3. 3

   Redirection Link: Sends visitors to the Redirection Link (a full address starting with http:// or https://) after the Redirection Delay (s), 0 to 10 seconds; with no delay set, it waits 1 second. A link to the page the countdown is on is ignored, so the page can't reload in a loop.

4. 4

   Reveal Coupon Code: Keeps another element hidden until the end, then shows it. Give that element a CSS ID (Advanced → CSS ID), such as coupon, and enter the same ID in ID for Coupon Code. In the editor the element stays visible so you can work on it.

5. 5

   Click an Element: Clicks a button or link on the page when time runs out, for example one that opens a popup. Give it a CSS ID and enter it in Trigger ID. The click comes 1.5 seconds after the end.

Style the Countdown

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Items Style — the boxes: background, an optional Glassmorphism blur with Blur Level, border, radius, padding and shadow. Individual Style adds a section for each unit.
• Number and Label — color, background, border, radius, padding, shadow and typography.
• Days Style, Hours Style, Minutes Style and Seconds Style — with Individual Style on: a box, number and label style for that unit alone, to give each box its own color.
• Separator — the symbol's color and size, with an Offset to move it horizontally or vertically and a Rotate setting.
• End Message — with the Message action: color, background, border, radius, padding, shadow, typography and Alignment.