How to add a timer to my website?
Adding a timer to your website can encourage visitors to react to call-to-action elements and increase their interest in your event, product or sale.
How to add a timer?
- When in the Website Builder editor, click on the Add elements button.
- Drag and drop the Timer element into your page content. Note that the editor will highlight the spots where you can drop it.
How to set up the countdown?
You can choose between two types of countdown in the Type section, Evergreen or Fixed date.
Evergreen
This type of timer counts down a given amount of time every time the page is visited. It works as long as you have it on the website.
You can specify the following details of the evergreen counter:
- Countdown duration
Set up days, hours, minutes and seconds. - Format
Choose between showing only days, or days, hours and minutes, or days, hours, minutes and seconds.
Fixed date
If you want to create a countdown to a specific date, use this option and set up the following details:
- When does the countdown end?
Select the date and hour by typing or using the caledar and clock widgets. - Time zone
Choose the timezome you want to sync the timer with. - Format
Choose between showing only days, or days, hours and minutes, or days, hours, minutes and seconds.
How to edit a timer’s design?
Click on the timer to open the settings toolbar.
- Counter design
You can customize font type, size, style, and color, select the background color, and set up padding, border and radius.
- Label design
Select the font type, size, style and color of the timer’s labels.
Block settings
The timer block is a framed workspace around your counter with a Timer label on the left. You can only see the frame after clicking on the object. It won’t be visible on your website.
You can customize its color, padding, border, radius, and shadow.
Absolute positioning
Enable this option to move the timer to any place on your website.
Note: we only recommend using this option if you have some unusual design the can’t be created in any other way. Using objects with absolute positioning can make your page less responsive on mobile devices.
Hide on mobile devices
Enable this option to hide your timer while your page is opened on a mobile device.
You may want to use this option to make your page simpler for mobile users, for example when you are adding the same CTA button a few times for desktop view.