Countdown Element

Last Updated on

The Countdown element allows you to display a countdown tool that you can use for events such as an opening, marriage etc. This element basically counts down from a given date and time to the current time.

Common Uses:

  • Opening Countdowns
  • Coming Soon Page
  • Marriage Countdowns
  • Any Event Countdown Timer
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. Also, Elementor Pro (Paid version), has another Countdown element, but in order to see the default Elementor Countdown, you need to look for it in the Elementor knowledgebase

In this article


Displaying the Countdown Element

To add a Countdown element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Countdown”.

4
Drag and drop the Countdown element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Due Date Sets the countdown due time. The entered date must be in year/month/day hour:minute:second format. The result will be displayed in DaysHoursMinutesSeconds format.
View Choose to display the element as Block or Inline.
Days Enable or disable days view in the countdown.
Hour Enable or disable hours view in the countdown.
Minute Enable or disable minute view in the countdown.
Second Enable or disable the second view in the countdown.

Style

SettingDescription
Width Sets the width of the Countdown element.
Background Type Sets a classic or gradient background color for the Countdown element.
Space Between Sets the space between hour, minute and seconds.
Padding Sets a padding for each unit.
Alignment Aligns the Countdown element on a page.
Border Type Sets a type of border for the Countdown element.
Border Radius Sets a custom radius for the border.
Box Shadow Sets the shadow around the element.

Number Style

SettingDescription
Color Lets you change of the numbers shown inside the Countdown element.
Typography Lets you change and style everything related to numbers in the Countdown element.

Title Style

SettingDescription
Color Lets you change of the labels like days hours etc shown inside the Countdown element.
Typography Lets you change and style everything related to labels in the Countdown element.
Space Sets the space between numbers and labels in the Countdown element.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Countdown element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket