Countdown

Please Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Adding Countdown

Option 1

The Countdown can be placed into different page sections. To add a Countdown:

  • Hover over the desired section and click Add Element:

  • Choose Countdown from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing the Countdown

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing the Countdown

To edit, duplicate or delete the element, click on it and switch between the buttons that appears in its toolbar:

Editing the Countdown

  • Click on the element and choose the Edit button that appears in its toolbar to modify Settings and Design:

  • The toolbar opens within two tabs: Settings and Design:

Settings Tab

  • Due date and time. Click to enter a date and time for the counter:

Select the preferable date and time, then click Apply.

Please Note: The Date choice for the Countdown element is limited to one year from the current date.

  • Time's up message. Specify the message that will be displayed at the end of the timer:

Please Note: The Time's Up message will only appear on the published website. It is not available in the Site Editor Preview mode.

Design Tab

The Design tab allows you to change the following:

  • Style. Choose a countdown style from the box of available styles:

  • Circle color. Click a color square to open the color picker and select the color for the circle color:

  • Time's Up message color. Click a color square to open the color picker and select the color for the Time's Up message:

Customizing Text or Heading

Select a text to display the Editing Menu:

  • For the header count:

  • For the text description:

Duplicating the Countdown

  • To duplicate the countdown, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting the Countdown

  • To delete a countdown, click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.