The Countdown Timer component adds a timer to your website that counts down to a specific date and time of your choosing. Once it reaches that, it displays a custom message. To get started, click Add Content within the website editor, then drag the component to a page of your site. Next, click on the component to open the options panel.
Target Date
The Target Date is a date and time in the future. To choose one, click on the date or time within the field and set the appropriate option.
Complete Text
The Complete Text field contains the text shown once the countdown completes. By default this is set to “Time’s up!”.
Align
With the Align option, you can align the countdown timer to the left, right, or center of the component.
Gap Between Items
With the Gap Between Items option, you can control the spacing between each part of the date and time. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
Design
We provide a number of design options for the countdown timer to give you fine-grained control of text styling.
- Number Font Size - The font size of numbers within the component.
- Number Color - The color of numbers in the component.
- Number Font - The font used by numbers in the component.
- Label Font Size - The text size of labels for each number.
- Label Color - The color of the text used for labels.
- Label Font - The font used by text labels.
- Complete Text Font Size - The size of the text shown in your complete message.
- Complete Text Color - The color of text shown in the complete message.
- Complete Text Font - The font used by text in your complete message.
Labels
Each number within the component has a corresponding text label. We provide options for each number to edit what the label text itself is for both singular and plural labels. This is helpful if you want to translate your labels into other languages. The following options are available:
- Days Label (Plural)
- Days Label (Singular)
- Hours Label (Plural)
- Hours Label (Singular)
- Minutes Label (Plural)
- Minutes Label (Singular)
- Seconds Label (Plural)
- Seconds Label (Singular)
Spacing
The Margin option controls the space around the counter within the component. You can set this individually for each side or all together, and can also set this separately for different screen sizes by clicking the desktop/mobile icon.