How to Customize the Countdown Design Element in Live Mode

This article will demonstrate how to insert and customize the Countdown Design Element in Live Mode.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Insert the Countdown Design Element
  • Step 2: Customize the Alert
  • Step 3: Insert and Save
• Countdown Features
  • A. Design Tab
  • B. Advanced Tab
  • C. Custom CSS Tab

Prerequisites

• You have the latest ShortPoint public version installed for your environment
• You are a ShortPoint Designer with an active license

Step-by-step Tutorial

Follow the steps below to learn how to customize the Countdown Design Element:

Step 1: Insert the Countdown Design Element

Go through the interactive tutorial to learn how to insert a Design Element:

NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live Mode for more details.

Step 2: Customize the Alert

In the Design tab, type the date you prefer inside the Date field. The preferred date format is MM/DD/YYYY.

Alternatively, you can also use the [1] Day, [2] Month, and [3] Year fields to add your preferred countdown date.

Then, scroll down to select the Style of your Countdown Design Element. For this guide, we will choose Outline. 

(Optional) Customize the [1] Icon and [2] Language. 

(Optional) Change the Color of your countdown using the dropdown, the color picker, or by manually typing the hex code.

Step 3: Insert and Save

Once you are satisfied with your edits, click the green checkmark.

Then, click Save to keep your progress.

Countdown Features

There are many ways to customize the features of the Countdown Design Element. In the settings window, you will find the following tabs:

A. Design Tab

You can modify the default design of the element in the Design Tab. Below are the settings you can configure:

SETTINGS

	Date	allows you to add your preferred countdown date. The ideal format is MM/DD/YYYY.
	Day	add the day of your preferred countdown date.
	Month	add the month of your preferred countdown date.
	Year	add the year of your preferred countdown date.
	Count Up	allows you to create a countdown from a date in the past.
	Style	customize the style of your countdown. You can choose from Default, Outline, Solid, or Transparent.
	Icon	customize the icon found on your countdown.
	Language	choose the language you prefer to showcase on your countdown.

BACKGROUND STYLES

	Color	customize the primary color of your countdown.
	Color Transparency	adjust the transparency of the color you chose.

B. Advanced Tab

This tab allows you to further customize how the Countdown Design Element will appear on your page.

SETTINGS

	Text Size	customize the size of the text inside the countdown.
	Text Color	customize the color of the text.
	Icon Color	customize the color of the countdown.

LABEL STYLES

Text Size

customize the size of the label text.

HIDE AND SHOW

	Hide icon	allows you to hide the icon.
	Hide days	allows you to hide the days field.
	Hide hours	allows you to hide the hours field.
	Hide minutes	allows you to hide the minutes field.
	Hide seconds	allows you to hide the seconds field.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Countdown Design Element. 

NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Element (Basic Tutorial) to know more about Custom CSS.

NOTE: The Connect and Visibility tabs are currently not available in Live Mode.

Congratulations! You now know how to customize your Countdown Design Element. Enjoy making your own countdowns on your SharePoint pages. 

Related articles:

• How to Customize the Alert Design Element
• How to Customize the Image List Design Element
• How to Customize the File List Design Element