How can we help you today?

How to Customize the Alert Design Element in Live Mode

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

Sample Alert



Step-by-step Tutorial

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

Step 1: Insert the Alert Design Element

Start 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

Go to the Design tab and click the down icon to customize the color of your alert. The Primary color of your theme will be the default color of the alert. Choose any color you prefer from the drop-down list.

Color drop-down

(Optional) Toggle on the Close Button option if you want to allow users to dismiss the alert.

Close button toggle

(Optional) You can also toggle on Remember Dismissed Alerts, which allows you to only show the alert to users who have not yet dismissed the alert. Once a user dismisses an alert, it will not appear again for them.

Remember Dismissed Alerts toggle

Add an icon


Once you are satisfied, click the green checkmark.

Step 3: Add Content inside the Alert

Double-click the Text tag to edit the text inside the alert.

edit text

NOTE: To display multiple alerts, check out How to Connect the ShortPoint Alert Design Element to a SharePoint List.

Step 4: Save

Click Save to keep your progress.


Then, click Republish.


Alert Features

There are many ways to customize the features of the Alert 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

ColorColorcustomize the main color of your alert.
Close button toggleClose Button
allows you to close the alert.
Remember Dismissed Alerts toggleRemember Dismissed Alerts
allows you to only show the alert to people who have not closed it yet.
IconIconcustomize the icon of the alert.

B. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Alert 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.

And you’re done! Start customizing your Alert Design Element in Live Mode now.

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 32 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