ShortPoint Basics: How to Insert a Design Element in Grid Mode (Modern Experience)

When building an intranet page with ShortPoint, the first thing you’ll need to learn is how to insert a Design Element. This article will walk you through how to insert a Design Element in Grid Mode.

Note: If you wish to use Live Mode or you have our Legacy Page Builder, please check out the corresponding support articles for them. 

TABLE OF CONTENTS

• Prerequisites
• How to Insert a Design Element using Grid Mode (Modern Experience)
  • Step 1: Edit the ShortPoint Page
  • Step 2: Add the ShortPoint Web Part
    • Option 1: Using the Full-width Section
    • Option 2: Using other Section Layouts
  • Step 3: Insert a Design Element
  • Step 4: Choose a Design Element
  • Step 5: Enter Content and Customize Settings
    • A. Content Tab
    • B. Design Tab
    • C. Items Tab
    • D. Spacing Tab
    • E. Connect Tab
    • F. Visibility Tab
    • G. Custom CSS tab
    • H. Advanced tab
  • Step 6: Insert and Save

Prerequisites

• You have ShortPoint SPFx version 8 and above installed on your SharePoint environment (Office 365, SharePoint 2019)
• You are a ShortPoint Designer with an active license

How to Insert a Design Element using Grid Mode (Modern Experience)

Follow the steps carefully to start adding Design Elements to your page:

Step 1: Edit the ShortPoint Page

Go to the Sharepoint Page where you want to insert a Design Element and click Edit.

Step 2: Add the ShortPoint Web Part

In the modern experience, there are two ways to add the ShortPoint web part:

Option 1: Using the Full-width Section

Note: Use this option if you want the ShortPoint web part to encompass the entire width of your page section.

Click the blue plus icon on the left border of the page.

Select Full-width section from the list of choices.

Select ShortPoint from the list of web parts you can add.

You will be taken to the Grid Mode interface. 

Option 2: Using other Section Layouts

Note: Use this option if you want the ShortPoint web part to appear only in a portion of your page's section.

Click the blue plus icon on the left border of the page.

Select any section layout except the Full-width section. 

For the purpose of this guide, we will select the One column section layout. 

Hover over the section and click the gray plus icon to insert a web part. 

Use the search bar to look for ShortPoint (1) and click ShortPoint(2). 

You will now be taken to the Grid Mode interface.

Step 3: Insert a Design Element

You will notice that there is already a default Design Element in Grid Mode. You must first remove this default element to start inserting a Design Element. To do this, hover over Info and click the trash bin icon.

Once you remove the default element, you will see a black plus icon. Click it to insert an element.

You will be taken to the Page Builder.

Step 4: Choose a Design Element

In the Page Builder, select the tile of the Design Element you want to insert.

For the purpose of this guide, we will insert the Text Design Element.

Note: Check out our list of articles about Design Elements to learn more about how to use them. 

Step 5: Enter Content and Customize Settings

There are eight main tabs in the Page Builder that you can use to add content and customize the way Design Elements will look on your page. 

Note: Not all tabs will appear for each Design Element. The tabs available will depend on the function and customization options of the Design Element selected. 

A. Content Tab

The Content tab contains a Rich Text Editor which allows you to format text according to your design. You can change its font, color, size, and even add Inline Design Elements.

B. Design Tab

The Design tab allows you to customize the style, color, and layout of your Design Element. For each Design Element, there will be different customization options.

C. Items Tab

The Items tab allows you to list content and add additional information to display with them. Each item has content fields that correspond to the Design Element.

D. Spacing Tab

The Spacing tab allows you to add paddings and margins around your selected Design Element.

E. Connect Tab

The Connect tab allows you to connect to a list from your Site Collection or other pages outside of SharePoint.

Note: Find out more about Connect in ShortPoint Connect: Basic Tutorial.

F. Visibility Tab

The Visibility tab allows you to customize how your Design Element will appear depending on the people viewing the page and the device they are using.

G. Custom CSS tab

The Custom CSS tab allows you to apply Custom HTML, CSS, or Javascript codes to customize other properties and behaviors of the Design Elements. Simply insert your code in the box provided.

Note: Checkout our list of articles about Custom CSS to learn more.

H. Advanced tab

The Advanced tab gives you more customization options for your selected Design Element. 

Step 6: Insert and Save

When you are done customizing the Design Element, click Insert.

Then, make sure to click Save.

You now know how to insert a Design Element using Grid Mode. Enjoy exploring the different functionalities of each Design Element to create your own amazing intranet site. 

Related articles:

• ShortPoint Basics: How to Insert a Design Element in Live Mode
• ShortPoint Basics: How to Insert a Design Element in Legacy Page Builder
• ShortPoint Basics: How to Edit a Design Element in Grid Mode