Countdown
The Countdown module displays a visual timer that counts down to zero for a date and time that you specify.
Last updated
Was this helpful?
The Countdown module displays a visual timer that counts down to zero for a date and time that you specify.
Last updated
Was this helpful?
You can specify the target date and time, including choosing the timezone that should be used.
This tab has a top section of settings, followed by several sections that vary depending on the type of layout you select.
The choices are:
Numbers This setting includes numbers plus the text under the numbers for each unit of measurement (days, hours, minutes, seconds).
Numbers + Circles Adds a circle around the numbers that visually shows the time remaining: number of seconds left in a minute, minutes left in an hour, hours left in a day, days, left in a year.
This is the standard horizontal alignment toggle, which can be set to different alignments on large, medium, and small devices.
Number color
Number typography The standard Typography section for the numbers displayed.
Text color
Text typography The standard Typography section for the text displayed under the numbers.
Horizontal padding (Numbers layout only) Padding
Vertical padding (Numbers layout only)
Number spacing Used in both types of layout to increase or decrease the left and right margins for individual numbers.
With the Numbers + Circles layout, only the Number spacing setting is available, so you can set only the left and right margins between numbers
TIPS
If the Circle size and Circle Stroke size are too large, they can overlap, as you can see in the screenshot. Check vertical spacing in responsive mode, as well as horizontal spacing in all modes – or make use of the overlap for effect!
To control the space between the numbers and the circle, use the Circle size setting in the Circle styles section described below.
This section appears for the Numbers layout only.
Number background color Inserts a square of color behind the color/unit pair.
Number border radius Rounds the corners of the background color squares.
Show time separators Choose Yes to show a separator between each time unit.
Separator Type You can choose a colon or a pipe symbol as a separator.
Separator color Select the separator color.
Circle foreground color Displays the amount of time remaining in each time unit.
Circle background color Displays the portion of the circle not taken up by the foreground color.
Circle size Use this setting to control the distance between the text and circle.
Circle stroke size Use this setting to increase the "fatness" of the circle.
There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.
