4.3. 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.
Click on Widgets in the sidebar of the editor.
Select Countdown from the Business section.
Choose the Countdown element and drag it onto your landing page.
To access the Content Editor, click on the Countdown widget you wish to modify on the screen and select Content from the quick settings bar.
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:
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.
To access the Design Editor, click on the Countdown widget you wish to modify on the screen and select Design from the quick settings bar.
Align: Allows you to align the widget within its container. See details here.
Size: Adjust the size of the widget, including width, height, and the margin from the widget to the section's edges. See details here.
Display on: Select the devices where the widget will be displayed (Desktop, Mobile).
Styles: Allows you to add background and shadow to the widget. See details here.
Border: Add and customize borders around the widget, including adjusting the border radius. See details here.
Items: Allows you to set up the formatting for the group of label and number elements.
Label: Allows you to customize the formatting for the time label.
Number: Allows you to set up the formatting for the displayed numbers.
Timeout:
Countdown style: Allows you to configure the formatting for the countdown interface style.
To access the Advanced Editor, click on the Countdown widget you wish to modify on the screen and select Advanced from the quick settings bar.
Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details here.
Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile. See details here.
Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details here.
Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details here.