How to Add a Countdown Timer to Your Website

一个 countdown timer is a great way to create urgency for an event, sale, or launch. You can use it for coming soon pages, product launches, promotions, or live events。

1. Adding the Countdown Element

1. Open the Elements Panel on the left.
2. Find 倒计时 under "Basic Elements."
3. Click, hold, and drag it to your desired position on the page.

2. Configuring the Countdown Timer

Choosing a Countdown Style

Once you've placed the countdown element, click on it to open the settings.

• Default – Numbers stacked with labels underneath.
• Labels on the Right – Numbers with labels on the side.
• No Labels – Only numbers (best for minimalist designs).

Setting the Countdown Date

1. Click on the date field。
2. Set the day, month, and year。
3. Set the exact time (hour & minutes).
4. Choose the time zone to match your event location.

3. Advanced Customization

Hiding Specific Time Units

If you don't need seconds, minutes, or even hours, go to Advanced Settings and disable them.

Styling & Colors

• Change typography for numbers & labels separately.
• Customize background, text, and border colors。
• 添加 shadows or hover effects for a sleek look.

4. What Happens When the Timer Ends?

By default, the timer stays at zero, which doesn't look good on a live website. Choose an action under "Link Options"：

1. None – The timer stays on the page at "00:00:00".
2. Hide Timer – The countdown disappears when it reaches zero.
3. Show Message – Display a custom message like "The event has started!"。
4. Redirect to Another Page – Send users to a different page (e.g., a sale page after a promotion ends).

5. Optimizing for Mobile & Tablet

• Check how the countdown looks on tablet and mobile views。
• Adjust the size and alignment for smaller screens.
• Ensure text and numbers are clearly readable。

Why Use a Countdown Timer?

Creates urgency & FOMO (fear of missing out)。

Keeps visitors excited & engaged。

Helps with event reminders & product launches。

Fully customizable to match your website design。

A well-placed countdown timer can boost conversions and drive more user action on your site.