Countdown Element

Last Update: February 14, 2023

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.
I Accept

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

HeadingDescription
Countdown Timer EndSet 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.
TimezoneChoose which timezone should be used for the countdown calculation. Default currently set to Timezone Of Site.
LayoutSelect the layout of the coundown element. Default currently set to Floated.
Show WeeksSelect "yes" to show weeks for longer countdowns. Default currently set to No.
Label PositionSelect the position of the date/time labels. Default currently set to Text Flow.
Display When InactiveChoose if the element should be shown when inactive.
Heading TextChoose a heading text for the countdown.
Subheading TextChoose a subheading text for the countdown.
Link URLAdd a url for the link. E.g: http://example.com.
Link TextChoose a link text for the countdown.
Link TargetControls how the link will open. Default currently set to Same Window/Tab.
MarginIn pixels or percentage, ex: 10px or 10%.
RadiusChoose the radius of outer box. In pixels (px), ex: 1px.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Counter Box SpacingControls the space between the counter boxes. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value of 10px.
Counter Box Background ColorChoose a background color for the counter boxes. Leave empty for default value of Dark. Reset to default.Using default value.
Counter Box Border SizeIn pixels. Default currently set to 0. Reset to default.Using default value.
Counter Box Border ColorControls the border color for the counter boxes. Leave empty for default value of Dark. Reset to default.Using default value.
Counter Box Border RadiusControls the border radius for the counter boxes. In pixels (px), ex: 1px, or "round". Leave empty for default value of 0px.
Counter Box PaddingSet the padding for the counter boxes. Enter values including any valid CSS unit, ex: 4%. Leave empty for default value of 0.6em, 1.1em, 0.6em, 1.1em.
Counter Font SizeControls the font size for the countdown timer. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value of 20px.
Counter Text ColorChoose a text color for the countdown timer. Leave empty for default value of White. Reset to default.Using default value.
Counter Label Font SizeControls the font size for the countdown label. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value of 20px.
Counter Label Text ColorChoose a text color for the countdown timer labels. Leave empty for default value of White. Reset to default.Using default value.
Heading Font SizeControls the font size for the countdown heading. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value of 18px.
Heading Text ColorChoose a text color for the countdown heading. Leave empty for default value of White. Reset to default.Using default value.
Subheading Font SizeControls the font size for the countdown subheading. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value of 13px.
Subheading Text ColorChoose a text color for the countdown subheading. Leave empty for default value of White. Reset to default.Using default value.
Link Text ColorChoose a text color for the countdown link. Leave empty for default value of White. Reset to default.Using default value.

Background

HeadingDescription
Background ColorChoose a background color for the countdown wrapping box. Leave empty for default value of Avada Green. Reset to default.Using default value.
Background ImageUpload an image to display in the background. Currently no default selected. Can be set globally from the Global Options.
Background PositionChoose the position of the background image. Leave empty for default value of Center Center.
Background RepeatChoose how the background image repeats. Leave empty for default value of No Repeat.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.