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