Countdown

Table of Contents

• Adding Countdown
• Option 1
• Option 2
• Moving and Resizing the Countdown
• Customizing the Countdown
• Editing the Countdown
• Settings Tab
• Design Tab
• Customizing Text or Heading
• Duplicating Countdown
• Layering Countdown
• Deleting Countdown

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 (Drag and Drop Grid) article to learn more about moving and duplicating elements.

Customizing the Countdown

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

Settings Tab

• End date and time. Click to enter a date and time for the counter. Select the preferred date and time, then click Apply.

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

Style Tab

The Style 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. Enter the desired color opacity as a percentage.
• Number Color. Click a color square to open the color picker and select the color for the numbers. Enter the desired color opacity as a percentage.
• Caption Color. Click a color square to open the color picker and select the color for the captions. Enter the desired color opacity as a percentage.
• Time's Up message color. Click a color square to open the color picker and select the color for the Time's Up message. Enter the desired color opacity as a percentage.

Customizing Text or Heading

Select a text to display the Editing Menu:

• For the header count:

• For the text description:

Deleting the Countdown

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

• The element will be removed immediately.

More Menu

• Click the More icon in the editing menu to access the available options:

• Cut. Click Cut or Ctrl+X to cut your element.
• Copy. Click Copy or Ctrl+C to copy your element.
• Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
• Delete. Click Delete to remove the element. The element will be deleted immediately.
• Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
• Move Forward. Click Move Forward or Ctrl+⇑ to move your element.