Countdown Element

21/09/2020

The Countdown Element is the perfect element to actively show your visitors a countdown to a special event, sale, anniversary, exposition, etc. This element allows you to enter a date and it automatically calculates the time it will take to countdown to the specific date. It comes with several customization options to control all colors, backgrounds, borders, text and more. Read on to find out more about this useful Element, and watch the video for a visual overview.

View Element Demo Page!

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.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Countdown from the Elements List.

Step 4. There are three tabs in the options for this element; the General Tab, the Background Tab, and the Design 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 5. 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 6. 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 7. Once you have completed choosing your options, Save your changes.

Read below for a detailed description of all element options.

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.

  • Layout – Select the layout of the Countdown element. You can choose from 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.

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

  • 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

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