1. Home
  2. Docs
  3. Creative Elements
  4. Count Down

Count Down SA Element

The Count Down Element allows you to actively show your visitors a countdown to a special event, sale, anniversary, exposition, etc. This element will allow you to set a countdown clock to a specific date and time on your Elementor page. Once the timer has expired according to your settings, you may redirect to a specific page or change the content that is displayed on the current page.  Here in this tutorial, you’re going to explore all about the Count Down and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Count Down Element

 

»Content

 

Timer Settings

⇒Countdown Due Date: This is the end date & time when your timer will be finishing. You have the possibility to set the end date for your countdown timer starting with your current time. You can choose the date by clicking on the calendar icon and then, selecting the specific day you wish your countdown to end. And then, you can set the specific time, as in, the hour and the minutes exactly when your countdown should end.

: Set the label position either inline or block. If you select inline, then customize the left spacing for labels.

 

Content Settings

⇒Count Down Style: Set the count down effect style from the list.

⇒Display Days: If you want to display the days then turn it on by selecting Yes.

⇒Custom Label for Days: Add a custom label for days. Leave it blank to hide the text.

⇒Display Hours: If you want to display the hours then turn it on by selecting Yes.

⇒Custom Label for Hours: Add a custom label for hours. Leave it blank to hide the text.

⇒Display Minutes: If you want to display the minutes then turn it on by selecting Yes.

⇒Custom Label for Minutes: Add a custom label for minutes. Leave it blank to hide the text.

⇒Display Seconds: If you want to display the seconds then turn it on by selecting Yes.

⇒Custom Label for Hours: Add a custom label for seconds. Leave it blank to hide the text.

⇒Countdown Separator: If you want to display the countdown separator then turn it on by selecting Yes. Then customize the Separator Color and Typography.

 

Expire Action

⇒Expire Type: Choose whether if you want to set a message or a redirect link after expiring the countdown timer.

 


»Style

 

Countdown Style

⇒Box Background Color: Set a custom background color for the countdown box.

⇒Space Between Boxes: Generate some spaces between the countdown boxes for different dimensions.

⇒Space Below Container: Customize the space below the countdown container for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the countdown for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the countdown boxes for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the countdown box border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the countdown boxes for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Color & Typography

⇒Countdown Digits

→Digits Color: Add a custom color to the countdown digits.

→Typography: Set the typography options for the countdown digits.

⇒Countdown Labels

→Label Color: Add a custom color to the countdown labels.

→Typography: Set the typography options for the countdown labels.

 

Individual Box Styling

⇒Days

→Background Color: Add a custom background color to the countdown days box.

→Digit Color: Add a custom color to the digits of the countdown days.

→Label Color: Add a custom color to the label of the countdown days.

→Border Color: Customize the border color for the countdown day’s box.

 

⇒Hours

→Background Color: Add a custom background color to the countdown hours box.

→Digit Color: Add a custom color to the digits of the countdown hours.

→Label Color: Add a custom color to the label of the countdown hours.

→Border Color: Customize the border color for the countdown hour’s box.

 

⇒Minutes

→Background Color: Add a custom background color to the countdown minutes box.

→Digit Color: Add a custom color to the digits of the countdown minutes.

→Label Color: Add a custom color to the label of the countdown minutes.

→Border Color: Customize the border color for the countdown minute’s box.

 

⇒Seconds

→Background Color: Add a custom background color to the countdown seconds box.

→Digit Color: Add a custom color to the digits of the countdown seconds.

→Label Color: Add a custom color to the label of the countdown seconds.

→Border Color: Customize the border color for the countdown second’s box.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Count Down Element.


Was this article helpful to you? Yes No 1

How can we help?