V4 Elements Countdown Estimated reading: 5 minutes 6 views Count down to a date: a sale, an event or a launch. It shows days, hours, minutes and seconds, and a message when time is up. No code needed. WIDGET Countdown SHOWS Days, hours, minutes, seconds PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Countdown is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Countdown. Click Save Settings. The Countdown widget in the dashboard (click to zoom) STEP 2 Add the Countdown Add the widget to your page. It starts counting to a date two days from now, so it works right away. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Countdown. Drag it onto your page. The Countdown in the Elements panel (click to zoom) Tip: In the editor the numbers do not move. Open your live page to see them count. STEP 3 Set the Due Date Tell the countdown when to end. Select the Countdown and open the Timer section. Click the Due Date box. Type the date and the time like this: 2026-12-31 23:59:59. That is year, month, day, then hours, minutes and seconds. Choose the Layout: Horizontal puts the boxes in a row. Vertical stacks them. Turn Show Separator on or off. The separator is the small dots between the boxes. Click Update to save your page. Due Date (1), Layout (2) and Show Separator (3) (click to zoom) Note: Type the date exactly in this form, with the dashes and the colons. It is a text box, not a calendar. Tip: The time counts in the time zone of each visitor. A visitor in another country sees the countdown end at the same clock time on their own device. STEP 4 Write the Expire Message When the time is up, the numbers disappear and a message shows instead. Open the Expire Message section. Type a short Title, for example Offer ended. Type a Description, for example Thanks for joining the sale. See you next time!. Click Update to save your page. Title (1) and Description (2) (click to zoom) STEP 5 Change the Look Each part of the Countdown has its own Style tab. Open the Structure panel to find them. Open the Structure panel and open the Countdown. Click Days, Hours, Minutes or Seconds to style a whole box. Open a box and click Digit for the number, or Label for the word under it. Click a Separator to style the dots between the boxes. Digit and Label (1) and Separator (2) (click to zoom) Tip: The Label words, like Days and Hours, can be changed. This is useful for another language. SETTINGS Options Due Date Default: 2 days from nowWhen the countdown ends. Type it like 2026-12-31 23:59:59. Layout Default: HorizontalHorizontal shows the boxes in a row. Vertical shows them in a column. Show Separator Default: OnShows small dots between the boxes. Title Default: Countdown is finished!The big words shown when time is up. Description Default: Default descriptionThe text under the title when time is up. ID Optional CSS ID for the countdown. RESULT Final Result Countdowns on a live page. Each one counts down every second. The boxes are Days, Hours, Minutes and Seconds. Horizontal The default layout. A row of four boxes with dots between them. The default Horizontal Countdown Vertical, without separators Layout is Vertical and Show Separator is off. A Vertical Countdown without separators When time is up This one ends in a few seconds. The numbers are replaced by the expire message: Offer ended and the description. The countdown reaches zero and the message shows GOOD TO KNOW More Details Updates every second The numbers refresh once a second on your live page. Already past If the Due Date is in the past, the message shows right away. Bad date If the Due Date is not written in the right form, the message shows instead of the numbers. Visitor time The countdown uses the time of the visitor device, so it ends at the same clock time everywhere. HELP Troubleshooting I do not see the Countdown in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Countdown. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The numbers do not move in the editor This is normal. Open your live page to see the countdown tick. It shows the expire message right away Check the Due Date. It must be in the future, and written like 2026-12-31 23:59:59. The countdown ends at a different time than I expected The time counts in the visitor time zone. Pick a due date that works for your visitors. Small dots stay after the countdown ends Turn off Show Separator in the Timer section. You Did It Your page now has a live countdown. If you face any problem, please contact our support team. We are happy to help.
