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 DateSets 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.
ViewChoose to display the element as Block or Inline.
DaysEnable or disable days view in the countdown.
HourEnable or disable hours view in the countdown.
MinuteEnable or disable minute view in the countdown.
SecondEnable or disable the second view in the countdown.

Style

SettingDescription
WidthSets the width of the Countdown element.
Background TypeSets a classic or gradient background color for the Countdown element.
Space BetweenSets the space between hour, minute and seconds.
PaddingSets a padding for each unit.
AlignmentAligns the Countdown element on a page.
Border TypeSets a type of border for the Countdown element.
Border RadiusSets a custom radius for the border.
Box ShadowSets the shadow around the element.

Number Style

SettingDescription
ColorLets you change of the numbers shown inside the Countdown element.
TypographyLets you change and style everything related to numbers in the Countdown element.

Title Style

SettingDescription
ColorLets you change of the labels like days hours etc shown inside the Countdown element.
TypographyLets you change and style everything related to labels in the Countdown element.
SpaceSets 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