Content Controls
Timer
The controls in this section allow you to set up and customize a countdown timer, choosing its type, setting the exact time and date it should count down to, and configuring the appearance of time units.
- Timer Type – Choose the type of your countdown timer: a specific date or an evergreen timer.
- Timezone – Select the timezone for your timer’s end date and time. This option is not available for evergreen timers.
- Year – Set the year your countdown reaches zero, not available if the timer is evergreen.
- Month – Set the month your countdown reaches zero, not available if the timer is evergreen.
- Days – Determine the number of days for the timer to run if it’s evergreen, or the day of the month for a specific date.
- Hours – Specify the hours left in your countdown.
- Minutes – Set the minutes left in your countdown.
- Seconds – Indicate the seconds left in your countdown.
- Time Units – Customize how different time units are displayed, including whether to show or hide each one, and the text for singular and plural forms.
- Days – Adjust the days unit display settings.
- Hide – Choose to show or hide the days unit.
- Singular – Customize the label for a singular day.
- Plural – Customize the label for multiple days.
- Hours – Adjust the hours unit display settings.
- Hide – Choose to show or hide the hours unit.
- Singular – Customize the label for a singular hour.
- Plural – Customize the label for multiple hours.
- Minutes – Adjust the minutes unit display settings.
- Hide – Choose to show or hide the minutes unit.
- Singular – Customize the label for a singular minute.
- Plural – Customize the label for multiple minutes.
- Seconds – Adjust the seconds unit display settings.
- Hide – Choose to show or hide the seconds unit.
- Singular – Customize the label for a singular second.
- Plural – Customize the label for multiple seconds.
Expire
These controls manage what happens when your countdown timer expires, including hiding the timer, displaying a message, or redirecting users to a different URL.
- Expire Type – Select what happens when your timer expires: show a message or redirect to a URL.
- Hide timer when expired – Decide if the timer should disappear when it hits zero. This is only available if “Expire Type” is set to “message”.
- Message – Write a message to display when the countdown ends. This is only available if “Expire Type” is set to “message”.
- Redirect – Set a URL to automatically send users to when the timer expires. This is only available if “Expire Type” is set to “redirect”.
- Show Message Preview – Toggle the visibility of a preview for your expiry message. This is only available if “Expire Type” is set to “message”.
Design Controls
Timer
These controls allow you to customize the visual layout of your timer, including its alignment, label positions, and the style and presence of dividers between units.
- Align – Choose the alignment of your timer on the page: left, center, or right.
- Labels – Customize the appearance and position of labels for time units.
- Label Position – Decide where labels appear relative to digits: above, below, or hidden. Not available when the animation is “flip”.
- Above Label – Adjust the space above the label text.
- Divider – Modify the dividers between time units, including their type, color, and size.
- Type – Choose the style of dividers: none, line, or colon.
- Color – Pick a color for the divider. This is only available if the divider type is not “none”.
- Width – Define the thickness of a line divider. This is only available if the divider type is “line”.
- Size – Set the size of a colon divider. This is only available if the divider type is “colon”.
- Height – Set the height of a line divider. This is only available if the divider type is “line”.
Digits
This section includes controls for adjusting the space between digit units, the style of digits, and specific settings for different styles like background color, border shape, and shadow effects.
- Space Between – Adjust the amount of space between digits in your timer.
- Style – Select a style for the digits in your timer: default, donut, or flip.
- Default – Customize the default digit style settings, such as background color, border, and shadow.
- Background – Choose a background color for your timer digits.
- Border – Customize the border of your timer digits, including its color, width, and radius.
- Padding – Change the padding around the timer digits.
- Donut – Customize the donut style digit settings, including the color and width of the donut ring.
- Size – Adjust the size of the timer donuts.
- Background – Change the background color of the timer donuts.
- Line – Change the color of the lines in the timer donuts.
- Line Width – Change the width of the lines in the timer donuts.
- Line Cap – Change the shape of the end of the lines in the timer donuts.
- Flip – Customize the flip style digit settings.
- Size – Adjust the size of the flip timers.
- Background – Change the background color of the flip timers.
- Shadow – Add one or more box shadows to the flip timers.
Typography
This section lets you fine-tune the visual aspects of your timer’s text elements, ensuring a coherent and appealing display.
- Digits – Personalize the typography of the numbers in your countdown.
- Labels – Modify the typography of the text that identifies the timer components (like “days,” “hours,” “minutes,” “seconds”).
- Expired Message – Sstyle the typography of the notification that pops up when the countdown is over. This message is crucial as it informs your audience about the conclusion of the time period.
Spacing
The Spacing section offers control over the layout and dimensions surrounding your timer, influencing its prominence and readability on the page.
- Container – The “Container” options allow you to manipulate the overall spacing of the timer’s outer shell.
- Expired Message – Under “Expired Message,” you’ll find options for customizing the padding around the message that appears post-countdown.
