How can we help you today?

ShortPoint Basics: How to Insert a Design Element in Live Mode

One of the first things you will learn to do when building an intranet page with ShortPoint is how to insert a Design Element that will display your content. This article will walk you through the steps on how to do this in Live Mode.




Note: If you wish to insert a Design Element using Grid Mode or you have our Legacy Page Builder, please check out the corresponding support article 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 designing a Modern page in SharePoint. Live Mode is not yet available for Classic pages.
  • You are a ShortPoint Designer with an active license.

How to Insert a Design Element in Live Mode

Step 1: Edit the SharePoint page


Press the Edit button (pencil icon) on your page.

Edoit SharePoint Page


Step 2: Add a ShortPoint web part


There are two options that you can take:


a. Using Full-width section


Click the blue Insert icon on the left border of the page. This allows you to use the full width of the page.

click blue plus icon


Choose the Full-width section layout and insert a ShortPoint web part.

choose full width


b. Using Other layouts


When you select other layouts, press the Add a new web part button. These options divide the page into one or more columns.

Other layout options


Then select the ShortPoint app from the list. 

select ShortPoint app


Step 3: Switch to Live Mode


Press the Switch to Live Mode button in the Floating Page Settings Bar.

switch to live mode


You will be presented with default Design Elements. Delete the Info and Text elements before continuing to the next step.

delete default design elements


Step 4: Launch Insert an Element window


In spaces where a Design Element can be added, you will find a black Add Design Element button. Press this to open the Insert an Element window.


open insert an element window


Step 3: Choose Design Element


Select the Design Element that you want to use. There are over 60 Design Elements for you to choose from. You can scroll down or enter the Design Element name in the Search box to find what you need.


This will open the Settings window.

select design element of choice


Step 4: Input your content


In the Settings window, enter the content you want to display.


Depending on the Design Element you choose, content may be added within the Design,  Content, or Items tabs. 


Note: Find out more about what properties and features you can modify by checking out the dedicated support article for each Design Element.


a. Design Tab

In some Design Elements, you will need to enter content in the Design Tab fields. 


As an example, you can insert the image you want to use by entering a URL or by selecting the file from a SharePoint library in the Image Design Element.


design tab


b. Content Tab


The Content tab contains a Rich Text Editor which allows you to format text according to your design.


content tab


You will also find several Inline Design Elements that you can apply to your content. Just press the ShortPoint icon at the far right of the Rich Text Editor.


Note: Another option when editing text in Live Mode is to use the Inline Text Editing experience.


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. 

Enter item content by selecting the cog wheel icon.


enter items list


You can also duplicate, delete, drag to change position, and add a new item when you need to.


drag drop and add new items


Note: ShortPoint Connect and Visibility are not yet available in Live Mode. You can switch to Grid Mode to use these features.

Step 5. Customize settings

If you wish to customize Design Element properties such as background colors, alignment, text size, text colors, spacing sizes, and more, you can do that in the Design, Advanced, and Custom CSS tabs.


a. Design Tab


Modify the values of the fields in the Design Tab to make changes to the general design of the Design Element.

design tab settings


b. Advanced Tab


More properties can be changed in the Advanced tab. Fields may vary depending on the Design Element.


Here is an example:

advanced tab


c. Custom CSS Tab


Apply custom HTML, CSS, or Javascript codes to modify other properties and behaviors of the Design Elements in the Custom CSS tab.

custom css tab


Step 5: Apply changes and save


When you are done, hit the Checkmark to apply changes. Then press Save.

apply changes by hitting insert and save


You now know how to insert a Design Element into a SharePoint page. Explore the different Design Elements to determine which one works best for the content you want to present.


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