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. With Avada 6.2, there is a new 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, 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.