In this article, we will walk you through how to insert and customize the Panel Design Element in Live Mode.
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
Get Started to learn how to insert the Design Element:
NOTE: Check out ShortPoint Basics: How to Insert a ShortPoint Design Element in Live 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 blue slider.
Once done, click the green check mark.
Step 3: Add an Element Inside the Panel
NOTE: There is already a default Text element inside the panel. You need to remove this to insert a different element inside the panel.
Click the Text tag and select the delete icon.
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.
Step 4: Save
Once you are satisfied, click Save.
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:
|choose from a set of pre-defined styles including Panel, Solid, Boxed, Transparent, Mini Solid Header, Solid Header, or Gradient.
|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.
|modifies the main title of the panel.
|modifies the subtitle of the panel.
|choose from a list of icons to display inside the panel header. All icons are available on the ShortPoint Icons page.
|specifies the height of the panel. Values can be in pixels (px) or percentages (%).
|the height of the panel. Values can be in pixels (px) or percentages (%).
|add the URL of the page where you will redirect.
|choose the style of the link. It can either be shown as a simple link or a button.
|choose how your link will open including:
B. Advanced Tab
This tab allows you to further customize the Panel Design Element. Below are the options available:
|Header Background Color
|allows you to choose from a list of pre-defined colors for the panel header.
|allows you to set the color of your text.
specifies the width of the panel. Values can be in pixels (px) or percentages (%).
|makes your title bold.
|adjusts the size of the panel title. Values can be in pixels (px) or percentages (%).
|Title Text Color
|allows you to specify the color of your title.
|adjust the size of the panel subtitle. Values can be in pixels (px) or percentages (%).
Subtitle Text Color
|allows you to specify the color of your subtitle.
|allows you to choose whether to show the subtitle next to the title or below it.
|modifies the size of the icon.
|specifies the color of the icon.
|choose from a list of separator styles including normal, dashed, dotted, or none.
|specifies the color of the separator.
|specifies the size of the separator.
|specifies the color of the link.
|choose whether to show the link in the panel header or at the bottom of the panel.
|choose from a list of border styles including normal, dashed, dotted, or none.
C. Custom CSS Tab
NOTE: Check out our support articles on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
NOTE: The Connect and Visibility tabs are currently not available in Live Mode.
Congratulations! You are now able to add and customize a Panel to your SharePoint page. Enjoy exploring the different ways you can use this Design Element on your pages.
- How to Customize Panel Design Element in Grid Mode
- Introduction to ShortPoint Panel Design Element
- How to Insert a Design Element in Live Mode