Countdown Element

Last Update: March 7, 2024

The Countdown Element is the perfect element to actively show your visitors a countdown to a special event, sale, or anniversary etc. This Element allows you to enter an end date and it automatically calculates the time remaining to the specific date. And you can even pull Event and Sales dates dynamically from WooCommerce and The Event Calendar. It also comes with several customization options to control all colors, backgrounds, borders, text, and more.

Read on to find out more about this super useful Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Countdown Element

The Countdown Element allows you to add a customizable countdown box to your content. Just add the Element to your desired column.

There are four tabs in the options for this element; the General Tab, the Background Tab, the Design Tab, and the Extras Tab. Starting with the General Tab, the first, and most important option, is the date and time you are counting down to. You can type the date and time directly into the field (just remember to use SQL time format – YYYY-MM-DD HH:MM:SS) or alternatively, you can use the included date and time picker at the right of the field. A related option immediately below this allows you to choose the Timezone the entered date and time relates to.

With Avada 6.2 and up, there is a layout option to show the Countdown as Stacked or Floated. You can choose to show weeks or not, and there are options for Border Radius, Headings, Subheadings, and a few for Links, if you want to link the Countdown box to another page, for example, an event page. There are also further customization options for Element Visibility, and CSS Class and CSS ID.

The Background Tab allows you to style the background of your Countdown Box. You can have a solid color background, one with opacity, one with an image, or a combination of the last two. there are also two options for positioning your image.

The Design Tab styles the content of your Countdown Box. There are various options for color styling the actual Countdown, the Countdown Text, Heading, Subheading, and Link.

Read below for a detailed description of all element options.

How To Use The WooCommerce / The Event Calendar Dynamic Options

The Countdown Element also allows you to pull your Countdown date from WooCommerce Sale start or end dates, or The Event Calendar Event start or end dates. This gives you enormous flexibility as to how you use this Element. Combined with the Display When Inactive option, you could even use this Element in a Layout for easy display of Sales and Events.

For full details on the dynamic options available in thie Element, please see the How To Use The Dynamic Options In The Countdown Element doc, linked here.

Element Options

Note: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Countdown section. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Countdown Timer End		Set the end date and time for the countdown time. Click the calendar icon to use the date picker. Use SQL time format: YYYY-MM-DD HH:MM:SS. E.g: 2016-05-10 12:30:00.
Timezone		Choose which timezone should be used for the countdown calculation.
Layout		Select the layout of the coundown element.
Show Weeks		Select "yes" to show weeks for longer countdowns.
Label Position		Select the position of the date/time labels.
Display When Inactive		Choose if the element should be shown when inactive.
Heading Text		Choose a heading text for the countdown.
Subheading Text		Choose a subheading text for the countdown.
Link URL		Add a url for the link. E.g: http://example.com.
Link Text		Choose a link text for the countdown.
Link Target		Controls how the link will open.
Margin		In pixels or percentage, ex: 10px or 10%.
Radius		Choose the radius of outer box. In pixels (px), ex: 1px.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Counter Box Spacing		Controls the space between the counter boxes. Enter value including any valid CSS unit, ex: 20px.
Counter Box Background Color		Choose a background color for the counter boxes.
Counter Box Border Size		In pixels.
Counter Box Border Color		Controls the border color for the counter boxes.
Counter Box Border Radius		Controls the border radius for the counter boxes. In pixels (px), ex: 1px, or "round".
Counter Box Padding		Set the padding for the counter boxes. Enter values including any valid CSS unit, ex: 4%.
Counter Font Size		Controls the font size for the countdown timer. Enter value including any valid CSS unit, ex: 20px.
Counter Text Color		Choose a text color for the countdown timer.
Counter Label Font Size		Controls the font size for the countdown label. Enter value including any valid CSS unit, ex: 20px.
Counter Label Text Color		Choose a text color for the countdown timer labels.
Heading Font Size		Controls the font size for the countdown heading. Enter value including any valid CSS unit, ex: 20px.
Heading Text Color		Choose a text color for the countdown heading.
Subheading Font Size		Controls the font size for the countdown subheading. Enter value including any valid CSS unit, ex: 20px.
Subheading Text Color		Choose a text color for the countdown subheading.
Link Text Color		Choose a text color for the countdown link.

Background

Heading		Description
Background Color		Choose a background color for the countdown wrapping box.
Background Image		Upload an image to display in the background.
Background Position		Choose the position of the background image.
Background Repeat		Choose how the background image repeats.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Countdown Element
How To Use The WooCommerce / The Event Calendar Dynamic Options
Element Options