Animated Countdown

Overview

The animated countdown is an interactive way to let users know about a new product launch, upcoming promotions or any event in future. The countdown element is designed to be catchy and can be set to any time in the future, it starts counting down each second, minute and hour. Once the set time is reached the counter will stop. In case you try to set a time that is already past it will simply not work because the countdown is already completed.

The element comes with several predefined styles that you can choose from such as a default style or the transparent light or dark styles that work well when used above images or solid colors.

0Hours0Minutes0Seconds

Apply predefined styles and set a different font size to the Countdown element from the element options > color tab. Check out more countdown timer examples.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

Shortcode

[av_countdown date='12 / 31 / 2019' hour='1' minute='1' min='1' max='3' align='av-align-left' size='80' style='av-colored-style' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-7ibyio' custom_class='my-custom-countdown' admin_preview_bg='']

Customization

Using custom code we can customize the Countdown element and change the default style by adding a custom background, border and change position of the number and text.

NOTE: Before we get started, please enable custom CSS class name support from Enfold theme options > Layout Builder and apply the required custom class name “my-custom-countdown” to the countdown element for the code to work well.

Countdown Number

Font style

By default, the “Font for your body text” set in Enfold > General Styling is applied to the countdown element. To custom style the number fonts please use the below CSS.

 

/* Countdown number  */

#top .av-countdown-timer.my-custom-countdown .av-countdown-time {
   font-family: 'Gochi Hand', cursive;
   font-weight: bolder;
   font-size: 20px;
   color:gold;
   text-transform: none;
   letter-spacing: .05em;
}

Countdown Text

Font style

By default, the “Font for your body text” set in Enfold > General Styling is applied to the countdown element. To custom style the countdown text please use the below CSS.

 

/* Countdown Text */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   
   font-weight: bolder;
   font-size: 22px;
   color:gold;
   text-transform: capital;
   letter-spacing: .05em;
}



Custom countdown text

We have received requests to change the countdown element text from Seconds to Sec, Minutes to Min and so on. There are two ways to do this and each one has it’s own advantage and disadvantage. Let’s discuss both the methods.

Method 1: Using a function in your child theme is probably the easiest way to make the changes so you do not have to worry about losing the changes when the theme is updated. However, the jQuery is executed after the page loads. The default text is then replaced when the jQuery script runs usually within a second. This creates a flash of text. By using the below function in your child theme functions.php file, you can add your custom text to the countdown element.

Method 2: By editing the required PHP files we can change the countdown text. This method loads your custom text instantly unlike the previous one but you have to keep an eye on the changelog when the theme update is released and manually update the PHP file every time there is an update released.

Before getting started, the Enfold child theme should be installed and activated.

Step 1:  First, create a folder named “shortcodes” in your child theme directory wp-content\themes\enfold-child.
Step 2: Go to wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\countdown and copy the countdown.php file to the child-theme\shortcodes folder.
Step 3: Open the countdown.php file and look for the below code. Here you will notice the different countdown text after “label_multi” go ahead and change the text from Seconds to Sec and so on.

 
$this->full_time_array = array(
				
					1 => array("interval" => 1000		 , 'class'=>'seconds', 	'label' => __('Second', 'avia_framework' ),	'label_multi' => __('Seconds',  'avia_framework')),
					2 => array("interval" => 60000		 , 'class'=>'minutes', 	'label' => __('Minute', 'avia_framework' ),	'label_multi' => __('Minutes',  'avia_framework')),
					3 => array("interval" => 3600000	 , 'class'=>'hours', 	'label' => __('Hour',  	'avia_framework'),	'label_multi' => __('Hours',  	'avia_framework')),
					4 => array("interval" => 86400000	 , 'class'=>'days', 	'label' => __('Day',  	'avia_framework' ), 'label_multi' => __('Days',  	'avia_framework')),
					5 => array("interval" => 604800000	 , 'class'=>'weeks', 	'label' => __('Week',  	'avia_framework' ),	'label_multi' => __('Weeks',  	'avia_framework')),
					6 => array("interval" => 2678400000	 , 'class'=>'months', 	'label' => __('Month',  'avia_framework' ),	'label_multi' => __('Months',  	'avia_framework')),
					7 => array("interval" => 31536000000 , 'class'=>'years', 	'label' => __('Year',  	'avia_framework' ),	'label_multi' => __('Years',  	'avia_framework'))
				
				);

Step 4: Finally, open the functions.php file in your child theme and add the code provided in this link to add the new countdown element from child theme to ALB.

Countdown Border

Number

To add a border around the countdown number, add the below CSS to your website.

 

/* Countdown number border */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time {
	 border: 2px solid red;
}



Text

To add a border around the countdown text, add the below CSS to your website:

 

/* Countdown Text */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   
	 border: 2px solid green;
}

Each Unit

You can change the default border style around each unit with the below CSS snippet:

 

/* Each unit */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
     border: 2px solid blue;
}


Countdown Element

add the below code to your site to display a border around all the units of the countdown element:

 

/* Countdown element */
#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
    border: 2px solid cyan;	
}

Remove default border

The below CSS snippet will remove the default border around the countdown element

 

/* Each unit */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	border: none;
}

Countdown Background

Number

The below CSS code will add a background color to the numbers in the countdown element.

 

/* Countdown number  */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time {
	 background: red;
	}



Text

The below code will help you display a custom background color for the countdown text:

 

/* Countdown Text */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   
	 background: green;
}

Each Unit

Add background color to each unit using the below CSS

 

/* Each unit */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	background: blue;
}



Different background color for each unit

Using the nth-child rule we can add a different background color to each unit of the countdown element =. Please copy the below code to your website to display multiple background colors.

 


#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(1) .av-countdown-cell-inner {
	background: #e1306c;
}

#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(2) .av-countdown-cell-inner {
	background: #ff0000;
}

#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(3) .av-countdown-cell-inner {
	background: #fbb034;
}

#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(4) .av-countdown-cell-inner {
	background: #ffdd00;
}

#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(5) .av-countdown-cell-inner {
	background: #c1d82f;
}

#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(6) .av-countdown-cell-inner {
	background: #00a4e4;
}




Countdown Element

Add a background color or image to the whole countdown element using the below CSS

 

/* Countdown element */
#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
    background: cyan;	
}

Countdown Shape

Circular numbers

 

/* Align number and text in each unit */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Circle background */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time {
	background: gold;
  width: 90px;
  max-width: 90px;
  height: 90px;
  border-radius: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}



Square units

To give each unit a perfect square shape and center align the units please use the below CSS:

 

/* Align units */
#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
	display: flex;
	justify-content: center;
}


/* Unit size */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell {
	width: 100px;
	height: 100px;
}



Circle units

To change the shape of the units to circle please use the below CSS


/* Align units */
#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
	display: flex;
	justify-content: center;
}


/* Unit size */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell {
	width: 100px;
	height: 100px;
}

/* Circle units */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	border-radius: 100px;
	background: gold;
}

Countdown Alignment

Number left, text right

The below code will align the countdown number to the left and text to the right horizontally.

 

/* Countdown alignment number left, text right */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
}



Number right, text left

The below code will align the text to the left and numbers to the right.

 

/* Countdown alignment */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
}

/* Countdown Text */
#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {  
	margin-right: 15px;
}



Countdown text on top

The below code will move the countdown text on top of the numbers



/* Countdown alignment */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column-reverse;
}


Countdown Custom Size

Width and Height

To set a custom width or height of the countdown units please use the below code:

 

/* Center align units */
#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
 display: flex;
 justify-content: center;
}

/* Countdown unit size*/
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
    width: 100px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}




Responsive mode

Wrap to a new column on mobile

The countdown units takes the equal width of its parent container, sometimes depending on the number of countdown units, the width of each unit may be very small especially on a mobile device. This situation can be solved by simply moving each unit to the next line as the screen size get’s smaller. And the below code will just do that for you 🙂

 

#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

/* Timer width */
#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



Enable Month and Year

We recommend installing the Enfold child theme before we get started with the steps to add the Month and Year to the countdown units.

Shall we start?

Step 1

First, Go to your child theme directory wp-content\themes\enfold-child and create a folder named “shortcodes“.

Step 2

Go to wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\countdown and copy the countdown.php file to the child-theme\shortcodes folder.

Step 3

Open the countdown.php file and look for the below code. Here you will notice that the month and year units are commented. All you have to do is to remove the comments and save the file in your child-theme\shortcodes folder.

 
				$this->time_array = array(
								__('Second',  	'avia_framework' ) 	=>'1',
								__('Minute',  	'avia_framework' ) 	=>'2',	
								__('Hour',  	'avia_framework' ) 	=>'3',
								__('Day',  		'avia_framework' ) 	=>'4',
								__('Week',  	'avia_framework' ) 	=>'5',
								/*
								__('Month',  	'avia_framework' ) 	=>'6',
								__('Year',  	'avia_framework' ) 	=>'7'
								*/
							);

Step 4

Finally, open the functions.php file in your child theme and add the code provided in this link to add the new countdown element from child theme to ALB.

Resource

Contributed video:

Animated countdown tutorial