How can we help you today?

How to Customize the Button Design Element in Live Mode

In this article, we will walk you through how to insert and customize the Button Design Element in Live Mode.

Sample button template



Step-by-step Tutorial

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

Step 1: Insert the Button Design Element

Start the interactive tutorial below to learn how to insert the Button Design Element using Live Mode:

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

Step 2: Customize your Button

Add a Title


(Optional) Add a Sub Title.

Sub Title

Add the Link (the actual link address with http:// or https://) where you want to redirect your viewers. 


(Optional) Customize the other features of your Button Design Element including the Linking option, Color, Text Color, Icon, and Size

NOTE: Get more details about these features in the Button Features section.

Other Design options

Step 3: Insert and Save

Once done, click the green check mark.

Green checkmark

Click Save.

Save button

Then, click Republish.

Republish button

Button Features

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

modifies the name of the button.
Sub titleSub title
modifies the text that will appear below the main title.
specifies the link address you want the button to redirect to.
Linking OptionLinking Option
allows you to choose how to open your link including:
  • Default (will open the link on the same window), 
  • LightBox (will open the link on a lightbox), 
  • New Window (will open the link on a new window), and 
  • Dialog (will open the link on a dialog window).
allows you to choose the color of your button.
Text ColorText Color
allows you to choose the color of the text inside the button.

specifies the icon beside the title. Check out the ShortPoint Icons page to see all available icons.
modifies the size of the button. You can choose one of the following sizes: xsmall, small, or large.
the button width will fit the whole area width.
allows you to disable the button.

B. Custom CSS Tab

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

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

Custom CSS tab

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

Now you know how to customize the Button Design Element! Start making the most out of this feature 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 56 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