Countdown Element

24/09/2019

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 for an overview of this useful Element.

Event Subhead
Event Title
0
0
0
0
Days
0
0
Hrs
0
0
Min
0
0
Sec
View more Examples!

How To Use The Countdown Element

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

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Countdown Element into. Click on Add new Element, at the bottom of the content in the Column.

Step 3. Choose Countdown from the Elements List, or search for it by immediately starting to type its name.

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 perhaps 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. You can choose to show weeks or not, and there are options for Border Radius, Heading, Subheading, 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, click Save. You will be returned to the edit page. You can preview the page to view your Countdown, and you can always edit the element again to make 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: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Countdown Element 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.

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

  • Border Radius – Choose the radius of outer box and also the countdown. 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: http://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

  • Countdown Text Color – Choose a text color for the countdown timer. Leave empty for default value.

  • Heading Text Color – Choose a text color for the countdown heading.

  • 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 > Theme Options > Fusion Builder Elements > Countdown Element

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 Show Weeks – Turn on to display the number of weeks in the countdown.

  • 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 Color – Controls the background color for the counter boxes.

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

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

  • 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

Separator Element Parameters

Copy to Clipboard
    • countdown_end – Accepts a SQL time format (YYYY-MM-DD HH:MM:SS) value. For example, 2016-05-10 12:30:00. Sets the end date and time of the countdown.
    • timezone – Choose from default, site_time, or user_time. Set which timezone to use for the countdown calculation.
    • show_weeks – Choose from default, yes, or no. Show or hide weeks.
    • border_radius – Accepts a pixel value. For example, 1px. Sets the border’s radius.
    • heading_text – The heading text you’d like to display.
    • subheading_text – The subheading text you’d like to display.
    • link_url – The URL the link text directs to. For example, http://www.sample.com.
    • link_text – The link text to display. For example, ‘More Info’.
    • link_target – Can be one of these values: _blank or _self .
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • background_color – Accepts a hexcode ( #000000 ). Sets the countdown wrapping box’s background color.
    • background_image – The URL of the background image you’d like to display. For example, http://www.sample.com/image.jpg.
    • background_position – Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background image’s position.
    • background_repeat – Choose from default, no-repeat, repeat, repeat-y, or repeat-x. Sets how the background image repeats.
    • counter_box_color – Accepts a hexcode ( #000000 ). Sets the background color.
    • counter_text_color – Accepts a hexcode ( #000000 ). Sets the timer’s font color.
    • heading_text_color – Accepts a hexcode ( #000000 ). Sets the heading’s font color.
    • subheading_text_color – Accepts a hexcode ( #000000 ). Sets the subheading color.
    • link_text_color – Accepts a hexcode ( #000000 ). Sets the link color.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.