How to Customize the Panel Design Element in Grid Mode

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

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Insert the Panel Design Element
  • Step 2: Customize your Panel
  • Step 3: Add an Element Inside the Panel
  • Step 4: Save 
• Panel Features
  • A. Design Tab
  • B. Content Tab
  • C. Connect Tab
  • D. Visibility Tab
  • E. Advanced Tab
  • F. Custom CSS Tab

Prerequisites

• You have the latest ShortPoint public version installed for your environment 
• You are a ShortPoint Designer with an active license

Step-by-step Tutorial

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.

Panel Features

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:

• SETTINGS

	Style	choose from a set of pre-defined styles including Panel, Solid, Boxed, Transparent, Mini Solid Header, Solid Header, or Gradient.
	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.
	Panel Title	modifies the main title of the panel.
	Panel Subtitle	modifies the subtitle of the panel.
	Icon	choose from a list of icons to display inside the panel header. All icons are available on the ShortPoint Icons page.

• SIZE

Height

specifies the height of the panel. Values can be in pixels (px) or percentages (%).

• LINK

	Link Text	the height of the panel. Values can be in pixels (px) or percentages (%).
	Link	add the URL of the page where you will redirect.
	Link Type	choose the style of the link. It can either be shown as a simple link or a button.
	Linking options	choose how your link will open including: Default (opens in the same window), LightBox (opens in a lightbox), New Window (opens in a new tab), or Dialog (opens in a dialog window).

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:

• MISCELLANEOUS

	Header Background Color	allows you to choose from a list of pre-defined colors for the panel header.
	Background Color	allows you to choose from a list of pre-defined colors for the panel background.
	Color Transparency	adjust the transparency of the background. By default, the background color will not be transparent.
	Effect	gives you the option to show a light shadow effect behind the panel.
	Content Color	allows you to set the color of your text.
	Custom Width	specifies the width of the panel. Values can be in pixels (px) or percentages (%).

• TITLE

	Title Bold	makes your title bold.
	Title Size	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.

• SUBTITLE

	Subtitle Size	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.
	Subtitle Location	allows you to choose whether to show the subtitle next to the title or below it.

• ICON

	Icon Size	modifies the size of the icon.
	Icon Color	specifies the color of the icon.

• SEPARATOR

	Separator Style	choose from a list of separator styles including normal, dashed, dotted, or none.
	Separator Color	specifies the color of the separator.
	Separator Size	specifies the size of the separator.

• LINK

	Link Color	specifies the color of the link.
	Link Position	choose whether to show the link in the panel header or at the bottom of the panel.

• BORDER

	Border Style	choose from a list of border styles including normal, dashed, dotted, or none.
	Border Size	modifies the size of the panel border.
	Border Color	modifies the color of the panel border.

F. Custom CSS Tab

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

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. 

Related articles:

• How to Customize the Panel Design Element in Live Mode
• Introduction to ShortPoint Panel Design Element
• How to Insert Design Elements in Grid Mode