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 Unit styles wrap both the Number and Label for each format output of the Element, allowing you to style them as a group.
The Number styles wrap both only the Digits within each format output for the Element.
The Digit styles allow you to target each individual number within the format output for the Element.
The Label is the text that appears adjascent to the Digits within the Element. It can be styled using all of our standard text formatting controls.
The Complete control grouping allows you to optionally set a message to appear when the Countdown Element has reached its end date.
The Delimiter controls target an optional divider that can be set between the units of the Countdown Element.
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
$el as 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.
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.