This article will demonstrate how to insert and customize the Countdown Design Element in Live Mode.
TABLE OF CONTENTS
- Step-by-step Tutorial
- Countdown Features
- You have the latest ShortPoint public version installed for your environment
- You are a ShortPoint Designer with an active license
Follow the steps below to learn how to customize the Countdown Design Element:
Step 1: Insert the Countdown Design Element
Watch the video below to learn how to insert the Countdown Design Element in Live Mode:
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  Day,  Month, and  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  Icon and  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.
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:
|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.|
|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.
|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.|
|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
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.
- How to Customize the Alert Design Element
- How to Customize the Image List Design Element
- How to Customize the File List Design Element