Countdown Element

13/04/2021

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 with Avada 7.3, 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.

View Element Demo Page!

Overview

How To Use The Countdown Element

The Countdown Element allows you to add a customizable countdown box to your content.

Step 1. Ensure Avada Builder, or Avada Live is active. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 2. Choose Countdown from the Elements List.

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

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

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

Step 6. Once you have completed choosing your options, Save your changes.

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.

Avada Website Builder

699,071 Businesses Trust Avada

Get Avada
Avada Website Builder

699,071 Businesses Trust Avada

Get Avada
Avada Website Builder

699,071 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Countdown section.

General Tab

  • 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. Default currently set to Timezone Of Site. Choose between Timezone of Site and Timezone of User. Use the Dynamic Content option to set the date dynamically.

  • Layout – Select the layout of the Countdown element. You can choose from Default, Floated, or Stacked.

  • Show Weeks – Select “yes” to show weeks for longer countdowns.

  • Label Position – Select the position of the date/time labels. Choose from Text Flow, Top, or Bottom.

  • Display Before Started / When Ended Display the Element before it has begun, and when it has ended. Choose from Show, or Hide.

  • Element Border Radius – Choose the border radius of outer box. In pixels (px), ex: 1px.

  • 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: https://example.com.

  • Margin – Control the margins around the Element. In pixels or percentage, ex: 10px or 10%.

  • Radius Choose the radius of outer box. In pixels (px), ex: 1px.

  • Link Text – Choose a link text for the countdown.

  • Link Target – Choose whether to open the link in the same tab (_self) or a new tab (_blank).

  • Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the Separator.

  • CSS ID – Allows you to add an ID for the Separator.

View The Options Screen

Background Tab

  • 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. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Bottom and Center Center.

  • Background Repeat – Choose how the background image repeats. Choose from No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, and Repeat Vertically.

View The Options Screen

Design Tab

  • 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%. Leave empty for default values.

  • 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. Leave empty for default value.

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

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Countdown.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Countdown Timezone – Controls the timezone that is used for the countdown calculation.

  • Countdown Layout – Select the default layout of the countdown element.

  • Countdown Show Weeks – Turn on to display the number of weeks in the countdown.

  • Countdown Label Position – Select the default position of the date/time labels.

  • Countdown Background Color – Controls the background color for the countdown box.

  • Countdown Background Image – Select an image for the countdown box background.

  • Countdown Background Repeat – Controls how the background image repeats. Choose from Repeat All, Repeat Horizontal, or Repeat Vertical.

  • Countdown Background Position – Controls how the background image is positioned.

  • Countdown Counter Box Spacing – Controls the spacing between the counter boxes.

  • Countdown Counter Box Background Color – Controls the background color for the counter boxes.

  • Countdown Counter Box Padding – Set the padding for the counter boxes.

  • Countdown Counter Border Size – Controls the border size of the counter boxes.

  • Countdown Counter Border Color – Controls the border color of the counter boxes.

  • Countdown Counter Border Radius – Controls the border radius of the counter boxes.

  • Countdown Counter Font Size – Controls the font size for the countdown timer.

  • Countdown Counter Text Color – Controls the color for the countdown timer text.

  • Countdown Counter Label Font Size – Controls the font size for the countdown label.

  • Countdown Counter Label Text Color – Controls the color for the countdown timer labels.

  • Countdown Heading Font Size – Controls the font size for the countdown headings.

  • Countdown Heading Text Color – Controls the color for the countdown headings.

  • Countdown Subheading Font Size – Controls the font size for the countdown subheadings.

  • Countdown Subheading Text Color – Controls the color for the countdown subheadings.

  • Countdown Link Text Color – Controls the color for the countdown link text.

  • Countdown Link Target – Controls how the link will open.

View The Options Screen
Avada Website Builder

699,071 Businesses Trust Avada

Get Avada
Avada Website Builder

699,071 Businesses Trust Avada

Get Avada
Avada Website Builder

699,071 Businesses Trust Avada

Get Avada