Countdown

Countdown timers are a great way to make your page visitors aware of an event and create a sense of urgency around joining. Learn to add and customize a countdown timer to your page.

In this article:


Add and Remove a Countdown block

To add a Countdown block:

  • In the sidebar, select Add Content.
  • From the list, select Countdown.
  • Your newly created Countdown block will generate at the bottom of the section.
  • In the sidebar editor, select an event from the Select Your Event dropdown menu to display the Countdown Timer.
  • Click Save to keep your changes:

addCountdown

To remove a Countdown:

  • In your Page, hover over the existing Countdown and click Edit.
  • In the sidebar, scroll to the bottom and click Delete This Block.
  • Click Save to keep your changes:

Customize your Countdown block:

In a Countdown block, you can configure the Width, select your Event, enable or disable a countdown action, set an action to complete after the countdown ends, and choose to remove the section entirely after the Event Countdown timer expires.

Width

  • In your Page, select the section containing the Countdown block.
  • Then, click the Countdown block to edit.
  • In the sidebar, configure the Width by selecting the number of columns in the slide:

selectEventCD

Select and Edit Your Event

  • In your Page, hover over the existing Countdown block you want to edit and click Edit.
  • In the sidebar, open the dropdown menu under the Select Your Event header and click on the Event you want the Countdown Timer to be set to.
  • Click Save to keep your changes:

customizeCoundown

Tip:
To select an Event from the dropdown, you must first create an Event in your Marketing tab. Click "Edit your events" under the "Select Your Event" header to edit and create an Event.

Countdown Action

The Countdown Action is triggered at the end of the countdown to lead the visitor to a page or download a file.

To enable a Countdown Action:

  • In your Page, hover over the existing Countdown Timer content you want to edit and click Edit.
  • In the sidebar, check Enable countdown action.
  • Once enabled, use the dropdown menu under the After Event header to select the Action that will occur at the end of the countdown.
  • Click Save to keep your changes:

countdownAction

Remove Section on Complete

Check this setting to remove the entire Section containing the Countdown block at the conclusion of your Countdown Timer.

Note:
Checking this setting will remove visibility of all Blocks contained in the Section after the Countdown timer expires.

Block Settings

To adjust the look and feel of each Countdown Timer, configure your Block Settings by customizing the Typography, Language, Background, Desktop and Mobile Layout, Animations, and Time Reveal.

To Configure your Block Settings:

  • Hover over the Countdown Timer you want to customize and click Edit.
  • Configure your Block Settings in the sidebar.
  • Click Save to keep your changes:

Typography

Configure the size and color of the Numbers and Labels (i.e., Days, Hours, Minutes, Seconds) of your Countdown Timer.

  • Default Number Size: 72px
  • Default Label Size: 21px

Language

Configure the Language settings to customize the labels (i.e., Days, Hours, Minutes, Seconds) for your Countdown Timer.

Background

Select a background color, adjust the Border radius to create a rounded or squared border, and select the Box Shadow size.

Desktop Layout

Configure the layout of the Block displayed on a Desktop device. Hide the block, adjust the Text Alignment, customize the padding inside and outside the Block, remove the padding altogether, and adjust the placement of the Block.

Mobile Layout

Configure the layout of the Block displayed on a Mobile device by choosing to hide or display the Block, and customize the padding inside and outside the Block.

Animations

Create visual effects by configuring the animations settings for the Block. Select the type, direction, delay, and duration of your animation.

Time Reveal

The Time Reveal setting allows you to offset the time before the content in a block is revealed after a visitor enters the page.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article

Call to Action

Next Article

Custom Code

Need Help? Chat With Us Now!