How can we help you today?

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.


Panel template


TABLE OF CONTENTS


Prerequisites


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.


Style and color settings


Add a Panel Title.


Panel Title


(Optional) You can also add  Panel Subtitle (1) and Icon (2). 


Panel Subtitle and Icon


Adjust the size of your panel using the slider.


Height slider


Once done, click Preview (1) to see how your design will appear on your page. Then, click Insert (2).


Preview and Insert button



Step 3: Add an Element Inside the Panel


Click the black plus icon to insert an element inside the panel. 


black plus icon


Choose the element you prefer. 


For the purpose of this guide, we will add a List.


List design element


Edit the element you added according to your preference.


edit your element


Then, click Insert.


Insert button



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).


Preview and save button


Then, click Republish.


Republish button


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:


Design tab


  • SETTINGS
Style
Style
choose from a set of pre-defined styles including Panel, Solid, Boxed, Transparent, Mini Solid Header, Solid Header, or Gradient.
ColorColorcustomize 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 TitlePanel Titlemodifies the main title of the panel.
Panel SubtitlePanel Subtitlemodifies the subtitle of the panel.
IconIconchoose from a list of icons to display inside the panel header. All icons are available on the ShortPoint Icons page.


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


  • LINK
Link TextLink Textthe height of the panel. Values can be in pixels (px) or percentages (%).
LinkLinkadd the URL of the page where you will redirect.
Link Type
Link Type

choose the style of the link. It can either be shown as a simple link or a button.
Linking OptionsLinking 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.


Content tab


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. 


Connect tab


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. 


Visibility tab


E. Advanced Tab


This tab allows you to further customize the Panel Design Element. Below are the options available:


Advanced tab


  • MISCELLANEOUS
Header Background ColorHeader Background Colorallows you to choose from a list of pre-defined colors for the panel header.
Background ColorBackground Color
allows you to choose from a list of pre-defined colors for the panel background.
Color TransparencyColor Transparency
adjust the transparency of the background. By default, the background color will not be transparent.
EffectEffect
gives you the option to show a light shadow effect behind the panel.
Content ColorContent Color
allows you to set the color of your text.

Custom Width
Custom Width

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


  • TITLE
Title BoldTitle Bold
makes your title bold.
Title SizeTitle Sizeadjusts the size of the panel title. Values can be in pixels (px) or percentages (%).
Title Text ColorTitle Text Color 
allows you to specify the color of your title.


  • SUBTITLE

Subtitle Size
Subtitle Size 
adjust the size of the panel subtitle. Values can be in pixels (px) or percentages (%).
Subtitle Text ColorSubtitle Text Color allows you to specify the color of your subtitle.
Subtitle LocationSubtitle Location
allows you to choose whether to show the subtitle next to the title or below it.


  • ICON

Icon Size
Icon Sizemodifies the size of the icon.

Icon Color
Icon Colorspecifies the color of the icon.


  • SEPARATOR

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


  • LINK
Link ColorLink Colorspecifies the color of the link.

Link Position
Link Positionchoose whether to show the link in the panel header or at the bottom of the panel.


  • BORDER
Border StyleBorder Stylechoose from a list of border styles including normal, dashed, dotted, or none.
Border SizeBorder Sizemodifies the size of the panel border.
Border ColorBorder 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.


Custom CSS tab


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:


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 63 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