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?

  1. When in the Website Builder editor, click on the Add elements button.
  1. 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.