How can we help you today?

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.


Sample countdown


TABLE OF CONTENTS


Prerequisites



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.


Date field


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


Day, Month,Year


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


Style


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


Icon and Language


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


Color


Step 3: Insert and Save


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


Green checkmark


Then, click Save to keep your progress.


Save



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:


Design tab


SETTINGS


Date
Date
allows you to add your preferred countdown date. The ideal format is MM/DD/YYYY.
DayDay
add the day of your preferred countdown date.
MonthMonth
add the month of your preferred countdown date.
YearYearadd the year of your preferred countdown date.
Count UpCount Up
allows you to create a countdown from a date in the past.
StyleStyle
customize the style of your countdown. You can choose from Default, Outline, Solid, or Transparent.
IconIconcustomize the icon found on your countdown.
LanguageLanguage
choose the language you prefer to showcase on your countdown.



BACKGROUND STYLES

ColorColor
customize the primary color of your countdown.
Color TransparencyColor 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.


Advanced tab


SETTINGS

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


LABEL STYLES

Text SizeText Size
customize the size of the label text.


HIDE AND SHOW

Hide IconHide icon
allows you to hide the icon.
Hide days Hide days 
allows you to hide the days field.
Hide hoursHide hours
allows you to hide the hours field.
Hide minutesHide minutes
allows you to hide the minutes field.
Hide secondsHide 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.

Custom CSS tab


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:

















Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more