3.1. Countdown
Last updated
Last updated
The Countdown widget allows you to easily create a countdown timer on your landing page. This timer can count down the time remaining for events, promotions, or important deadlines, helping users feel a sense of urgency and increasing motivation to take action.
In the sidebar, click on Widgets, then select Countdown.
Click and drag the Countdown widget onto your landing page.
Click on the Countdown widget and select Content in the quick settings bar to open the Countdown content editor.
Style: Choose the display style for the countdown timer.
+ Default: This is the default display style of the countdown timer, usually a basic design with countdown elements displayed in a simple manner.
+ Circle: Displays the countdown timer in a circular format, with elements (days, hours, minutes, seconds) surrounded by a circle. This is an eye-catching and modern option.
+ Inline: Displays the countdown timer as a horizontal or vertical strip, with countdown elements arranged in rows or columns.
Type: Choose the type of countdown timer you want to use, such as:
+ Minute: counts down a specific number of minutes from the current time.
+ Daily: counts down to a specific time of day.
+ Duration: counts down for a specific duration.
Duration: Enter the specific time that the timer will count down to. This can be in minutes, hours, or days, depending on the countdown type you choose
Loop: Decide whether the countdown timer should restart after it ends. When this option is enabled, the countdown timer will start over from the beginning after it concludes.
Auto hide when timeout: Enable this feature to automatically hide the countdown timer when the countdown ends. This can help keep your website’s interface tidy and clean after the timer finishes.
Toggle countdown elements and edit label names.
Click on the Countdown widget and select Design in the quick settings bar to open the Countdown design editor.
Align: helps you align the Countdown within its container. For more information, see Align.
Sizes: in the design editor, allows you to adjust the size and position of elements on the landing page. For more information, see Sizes.
Display on: lets you control the visibility of the Countdown on different devices, including Desktop and Mobile.
Styles: allows you to change the background color and shadow effects of the selected Countdown. For more information, see Styles.
Border: allows you to add and customize the border around the Countdown, and you can also adjust the border radius. For more information, see Border.
Items: customize how the countdown items are displayed, such as adjusting the spacing between elements related to the countdown items and the spacing between labels and values.
+ Space between items: This option allows you to adjust the spacing between the components (elements such as days, hours, minutes, seconds) in the Countdown widget. You can increase or decrease the spacing to create a reasonable gap between the items.
+ Space between label and value: This option helps you adjust the spacing between the label and the corresponding value. For example, if your label is "Days" and the value is "10", you can adjust the spacing between these two components to make them look tidier.
+ Border: Adjust the border around each countdown item.
+ Radius: This option allows you to adjust the corners of each item in the countdown timer.
+ Fill: Customize the background color of the countdown items.
+ Box shadow: Create a shadow effect for the countdown items.
Label: Customize the descriptive labels next to the countdown items, such as “Hours,” “Minutes,” “Seconds.”
+ Width: Customize the width of the labels. This allows you to adjust the horizontal size of the descriptive labels, helping them fit into the layout of the Countdown on the landing page.
+ Height: Customize the height of the labels. Similar to Width, this option allows you to adjust the vertical size of the labels to fit the overall design.
+ Border: Set a border for the labels. You can customize the thickness, border style (solid, dashed, dotted, double, etc.), and color of the border to create a distinctive appearance for the labels. This helps the labels stand out or harmonize with the overall style.
+ Radius: Customize the curvature of the label corners. You can adjust the level of roundness to make the labels appear softer or keep the corners sharp. This option helps the labels align with the overall design style of the Countdown, whether it's a minimalist, angular design or a smooth, modern look.
+ Fill: Customize the background color for the labels. You can choose a background color to highlight the labels or keep them subtle by selecting lighter colors.
+ Box shadow: Add a shadow effect to the labels. You can customize the color, opacity, and position of the shadow to create the impression that the labels are elevated or have depth..
+ Font family: Choose the font for the text of the labels. You can select from the list of available fonts or enter a custom font name to match the design of the entire landing page.
+ Text align: Customize the alignment of the text within the labels. You can choose Start, Center, End, or Justify depending on your design.
+ Text decoration: Set the style of decoration for the text in the labels. Options include: default, underline, overline, line through
+ Color: Choose the color for the text in the labels. This helps you synchronize the label text color with the overall theme of the website or make it stand out.
+ Font weight: Adjust the thickness of the text, from very thin (thin) to very bold (bold). This helps make the labels clearer and easier to read.
+ Font style: Choose the font style for the text, with options such as: normal, italic, oblique
+ Text transform: Customize the capitalization of the text in the labels, with options: default, capitalize, uppercase, lowercase
+ Font size: Customize the font size of the text in the labels. You can adjust the size in pixels or percentages to fit the overall design.
+ Letter spacing: Adjust the spacing between characters in the label text. You can choose auto, narrow, wide, custom
+ Line height: Adjust the line height of the text in the labels, making the text more readable and aesthetically pleasing.
+ Text shadow: Add a shadow effect to the text in the labels. You can customize the color, opacity, and position of the shadow along the X and Y axes and the blur level to create a standout effect for the text.
Number: The Number option allows you to customize how the numbers in the countdown timer are displayed.
+ Width: Adjust the width of the numbers in the countdown timer.
+ Height: Adjust the height of the numbers in the countdown timer.
+ Border: Change the style and color of the border around the numbers.
+ Fill: Set the background color for the numbers in the countdown timer.
+ Box shadow: Add a shadow effect to the numbers in the countdown timer.
+ Radius: Adjust the curvature of the corners in the frame surrounding the numbers on the timer.
+ Font family: Choose the font style for the numbers in the countdown timer.
+ Text align: Align the position of the numbers within the containing element.
+ Text decoration: Change the text decoration properties such as underline or strikethrough.
+ Color: Change the color of the numbers in the countdown timer.
+ Font weight: Change the thickness of the text to make the numbers bolder or thinner.
+ Font style: Change the text style, such as bold or italic.
+ Text transform: Change how the text is displayed, such as making all letters uppercase, lowercase, or capitalizing the first letter of each word.
+ Font size: Change the size of the numbers in the countdown timer.
+ Letter spacing: Adjust the spacing between the characters in the numbers.
+ Line height: Adjust the spacing between lines of text in the numbers.
+ Text shadow: Add a text shadow effect to create depth for the numbers.
Timeout: This is the section for displaying text or notifications when the countdown timer ends. It could be a simple message like "Time's Up," "Countdown Complete," or any custom notification you want to show when the countdown finishes.
+ Border: Set the border for the Timeout section. You can customize the thickness, border style (solid, dashed, dotted, double, etc.), and color of the border to highlight the end notification.
+ Radius: Set the border radius for the corners of the Timeout section.
+ Fill: Customize the background color for the Timeout section. The background color can be used to emphasize the end notification, drawing the viewer's attention.
+ Box shadow: Add a shadow effect to the Timeout section. You can customize the color, opacity, and position of the shadow to create depth or highlight the end notification.
+ Font family: Choose the font for the text in the Timeout section. You can select from the available fonts or enter a custom font name to synchronize with the overall design of the landing page.
+ Text align: Customize the text alignment in the Timeout section. You can choose left align (Start), center align (Center), right align (End), or justify to display the text as you wish.
+ Text decoration: Set the text decoration style for the text in the Timeout section with the following options: default, underline, overline, line through
+ Color: Choose the color for the text in the Timeout section. The color can be used to make the end notification stand out or match the overall theme of the website.
+ Font weight: Adjust the thickness of the text, from very thin (thin) to very bold (bold). This helps the text in the Timeout section to be clearer and easier to read.
+ Font style: Choose the font style for the text, with options such as: normal, italic, oblique
+ Text transform: Customize the capitalization of the text in the Timeout section, with options such as: default, capitalize, uppercase, lowercase
+ Font size: Customize the font size of the text in the Timeout section. You can adjust the size to fit the end notification or make the notification stand out more.
+ Letter spacing: Adjust the spacing between characters in the text of the Timeout section. You can choose auto, narrow, wide, custom
+ Line height: Adjust the line height of the text in the Timeout section to improve readability and aesthetics.
+ Text shadow: Add a shadow effect to the text in the Timeout section. You can customize the color, opacity, and position of the shadow along the X, Y axes, and the blur to create a standout effect for the text.
Countdown Style: Allows you to adjust the thickness and color of the countdown section.
Divider
+ Divider style: Use the pipe character to separate time units or use a colon to separate.
+ Color: To highlight the countdown timer, you can customize the color of the separator line.
+ Width: The width of the separator line can be adjusted to create a more appealing design.
+ Height: The height of the separator line can also be customized to fit the overall design of the landing page.
Circle
+ Width: Adjusts the thickness of the countdown components, such as borders or the bars displaying time.
+ Default: Sets the default color for the countdown section when no interactions or actions occur.
+ Active: Customizes the color for the countdown section when it is in an active state, such as during an event or when the user interacts.
