How can we help you today?

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


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

Edit button modern experience




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.

blue plus icon modern experience


Select Full-width section from the list of choices.

Full Width Section


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

ShortPoint webpart


You will be taken to the Grid Mode interface. 

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.

blue plus icon modern experience


Select any section layout except the Full-width section. 


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

One column section layout


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

Gray plus icon


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

ShortPoint webpart


You will now be taken to the Grid Mode interface.
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.

Trash icon


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

Black plus icon


You will be taken to the Page Builder.

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.

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.

Content tab


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.

Design tab


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.

Items tab


D. Spacing Tab


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

Spacing tab


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.

Connect tab


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.

Visibility tab


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.


Custom CSS tab


H. Advanced tab


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

Advanced tab



Step 6: Insert and Save


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

Insert button


Then, make sure to click Save.

Save button modern experience


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:




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