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.
Day
Day
add the day of your preferred countdown date.
Month
Month
add the month of your preferred countdown date.
Year
Yearadd the year of your preferred countdown date.
Count Up
Count Up
allows you to create a countdown from a date in the past.
Style
Style
customize the style of your countdown. You can choose from Default, Outline, Solid, or Transparent.
Icon
Iconcustomize the icon found on your countdown.
Language
Language
choose the language you prefer to showcase on your countdown.



BACKGROUND STYLES

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


Advanced tab


SETTINGS

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


LABEL STYLES

Text Size
Text Size
customize the size of the label text.


HIDE AND SHOW

Hide Icon
Hide icon
allows you to hide the icon.
Hide days
Hide days 
allows you to hide the days field.
Hide hours
Hide hours
allows you to hide the hours field.
Hide minutes
Hide minutes
allows you to hide the minutes field.
Hide seconds
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.

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 63 topics

TABLE OF CONTENTS

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