The Countdown element adds a countdown on the page. To add the Countdown Element, simply search for "Countdown" and drag "Countdown" to the canvas.
In addition to the general appearance settings of the Element, this is also the section where the Countdown End time is set as well as the format of the countdown output.
The Setup section consists of the basic settings you'll want to add when setting up a Countdown. The Countdown End sets the end time for the countdown. Always ensure that the date is in the future. In addition to that function the other parameters are purely related to styling. Once you've set the countdown date you can see the visual changes in the preview and tweak everything to your needs.
The Format section is important when it comes to how the countdown is appearing on your page. By selecting and de-selecting the Units Displays you can narrow done if seconds, minutes, hours or days are displayed.
Other options are:
- Hide on End - Hides the counter when it ends.
- Hide Empty - Hides when the input is empty.
- Leading Zero - Enable or disable the leading zero in the countdown.
- Labels - Show the day, hour, minute, second label in conjuction of the number or not.
Margin & Padding
The Margin & Padding section allows you to style the counter by adding margin or padding to the element.
The Border function gives you plently of options to add a border around the countdown to make it visually pop.
The Box Shadow control grouping allows you to add a box shadow to the counter to make it stand out.
- ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
- Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
- Element CSS - Use this option to have better control over the element to access the inner tags of the element using
$elas the CSS selection. Click here for more detailed information.
- Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
- Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as
data-info=123. You can use the option to inject custom information into the element to use on your customization code.
To sum up, we've discussed the Countdown Element. We've discussed that a Countdown Element is an easy tool for adding countdowns on a page and we've learned how to change it's content and design and delved into details of the Countdown Element settings.
See something inaccurate? Let us know