This support article will discuss how to insert and customize the Button Design Element in Grid Mode. Follow the steps below to get started.
TABLE OF CONTENTS
- Step-by-step Tutorial
- Button 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 Button Design Element:
Step 1: Insert the Button Design Element
Watch the video below to learn how to insert the Button Design Element using Grid Mode.
NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Grid Mode for more details.
Step 2: Customize your Panel
Add a Title.
(Optional) Add a Subtitle.
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.
Step 3: Insert and Save
Once done, click Preview (1) to see how your button will look on your page. Then, click Insert (2).
Click the Preview icon (1) to see how your element will look on your page. Then, click Save (2).
Then, click Republish.
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:
|Title||modifies the name of the button.|
|Subtitle||modifies the text that will appear below the main title.|
|Link||specifies the link address you want the button to redirect to.|
|Linking options||allows you to choose how to open your link including:|
|Color||allows you to choose the color of your button.|
|Text Color||allows you to choose the color of the text inside the button.|
|Icon||specifies the icon beside the title. Check out the ShortPoint Icons page to see all available icons.|
|Size||modifies the size of the button. You can choose one of the following sizes: xsmall, small, or large.|
|Wide||the button width will fit the whole area width.|
|Disabled||allows you to disable the button.|
B. Connect Tab
The Connect tab allows you to connect the Button Design Element to another list in your site collection or to other pages outside of SharePoint.
NOTE: Check out our articles about the Connect feature to learn more.
C. Visibility Tab
The Visibility Tab allows you to configure who can view the Design Element and what types of devices can be used to access it.
NOTE: Check out Managing Visibility of ShortPoint Design Elements to learn more about the Visibility feature.
D. 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.
Congratulations! You can now customize your Button Design Element. Enjoy exploring different design combinations as you create your SharePoint Pages.
- How to Customize the Button Design Element in Live Mode
- Introduction to the ShortPoint Button Design Element
- How to Insert a Design Element in Grid Mode