This support article will discuss how to insert and customize the Panel Design Element in Grid Mode. Follow the steps below to get started.
TABLE OF CONTENTS
- Step-by-step Tutorial
- Panel 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 Panel Design Element:
Step 1: Insert the Panel Design Element
Watch the video below to learn how to insert the Panel 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
Choose the Style (1) and Color (2) of your panel.
Add a Panel Title.
(Optional) You can also add Panel Subtitle (1) and Icon (2).
Adjust the size of your panel using the slider.
Once done, click Preview (1) to see how your design will appear on your page. Then, click Insert (2).
Step 3: Add an Element Inside the Panel
Click the black plus icon to insert an element inside the panel.
Choose the element you prefer.
For the purpose of this guide, we will add a List.
Edit the element you added according to your preference.
Then, click Insert.
Step 4: Save
Once you are satisfied, you can click the Preview icon (1) to see how the element will look on your page. Then, click Save (2).
Then, click Republish.
There are many ways to customize the features of the Panel 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:
|Color||customize the color of your panel. By default, the Design Element follows the color settings of your page as the primary color. All ShortPoint Colors are supported.|
|Icon||choose from a list of icons to display inside the panel header. All icons are available on the ShortPoint Icons page.|
choose how your link will open including:
B. Content Tab
This tab showcases the content inside your panel. It has a Rich Text Editor that allows you to customize the color, font, and size of the text in your panel.
C. Connect Tab
The Connect tab allows you to connect the Panel 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.
D. 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.
E. Advanced Tab
This tab allows you to further customize the Panel Design Element. Below are the options available:
|Header Background Color|
|Title Text Color |
|Subtitle Size |
|Subtitle Text Color|
F. 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.
That’s it! You now know how to customize the Panel Design Element using Grid Mode. Enjoy using the Panel element on your SharePoint pages.