What is a Countdown Addon

The countdown addon lets you add a timer in case you want to set the countdown of an event that will occur after the timer comes to zero. You can display your countdown with month, hour, minute, and seconds. You have to add the date and time of the countdown to stop and the rest will be done by the addon.

How to Add a Countdown Addon

You can add a Countdown addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add a Countdown addon.

Countdown Settings

When you click on the Countdown addon, the addon inline editor will open up. You can access the Countdown settings and customize the addon to fit your needs. The Countdown Settings come with two different tabs: 

• Content
• Title 

Content

The Content tab comes with two sub-options:

• Content
• Title 

Content

The Content tab lets you access the fundamental settings of your Countdown timer. Edit your timer’s most basic settings like date, time, and Finished Text using the Content tab.

• Date: You have to add the finishing date of the countdown timer. On this very day, the countdown will be stopped. You have to add the date using the following format eg. 2023/05/25.
• Time: You have to add the finishing time o the countdown timer. On a specific day, at a specific time, the countdown will be stopped. You have to add the time in the 24hr format like eg: 18:20.
• Finished Text: Use this field to add a finished text. The finished text will be displayed after the countdown timer finishes counting.

Background

Background settings let you edit the style of your countdown timer. Edit your timer’s width, height, color, etc using the Background settings.

• Width: Use this field to add the width of the counter. The width you declare will work as the space for the timer.

• Height: In this field, you have to add the height of the counter which means how much the counter blocks will take space up top.

• Border: Enable this setting to set and edit a border around your timer. The border set comes with detailed options to let you customize the border’s Width, Style, and Color.

• Border Radius: Set the border radius for your border of the counter.

Title

Use this tab to add a title to the section you just added with the addon.

Title: Add a title on top of your Countdown Items

Color: Set your preferred color of the added title. Learn more about color settings here.

Typography: Edit your title Font, Size, etc in this tab. Learn more about settings here.

Typography Settings

The Typography Settings allows you to change the text style settings for your Countdown Timer. For example, the numbers, Date text, etc styles. The settings come with two different editing tabs:

• Numbers
• Labels

Numbers

The Numbers tab lets you edit the displayed numbers in your countdown timer and includes fields to edit the Font style, Size, Line Height, Letter Space Style, and Weight. Etc. Learn more about typography settings here. 

Labels

The Labels tabs let you edit the texts used inside the countdown timer and include editing fields like Font, Size, Line Height, Letter Space, Style, Weight, and Label Margin. Learn More about typography settings here.

Color Settings

Change the background color, the color of the numbers used in the countdown timer, and the texts used inside the timer using the color settings. Learn more about the Color settings here.