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, please check out the linked support article for it.
TABLE OF CONTENTS
- Interactive Video
- Step-by-step Tutorial
- Step 1: Edit the page
- Step 2: Add a ShortPoint web part
- Step 3: Choose a layout
- Step 4: Launch Insert an Element window
- Step 5: Choose Design Element
- Step 6: Input your content
- Step 7. Customize settings
- Step 8: Apply changes and save
- You have the latest ShortPoint SPFx version installed on your SharePoint environment (Office 365, SharePoint 2019)
- You are designing a Modern page in SharePoint. Live Mode is not available for Classic pages.
- You are a ShortPoint Designer with an active license.
Here are the detailed steps on how to insert a Design Element:
Step 1: Edit the page
Press the Edit button on the SharePoint page.
Step 2: Add a ShortPoint web part
Hover over the top portion of the default SharePoint section and press the gray plus button. In the selection window, search for ShortPoint and click it.
Step 3: Choose a layout
Click the Choose layout button and select your desired Row layout. In our example, we selected the 2-column equal-width option.
Step 4: Launch Insert an Element window
You will find a black Add Design Element button within each column. Press it to open the Insert an Element window.
Step 5: 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 Design Element Settings window.
Step 6: 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.
b. Content Tab
The Content tab contains a Rich Text Editor which allows you to format text according to your design.
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. You can also duplicate, delete, drag to change position, and add a new item when you need to.
Note: ShortPoint Connect and Visibility are not yet available in Live Mode. You can switch to Grid Mode to use these features.
Step 7. 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.
b. Advanced Tab
More properties can be changed in the Advanced tab. Fields may vary depending on the Design Element.
Here is an example:
c. Custom CSS Tab
Step 8: Apply changes and save
When you are done, hit the Checkmark to apply changes. Then press 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.
- ShortPoint Basics: How to Insert a ShortPoint Design Element in Grid Mode
- ShortPoint Basics: How to Insert a ShortPoint Design Element in Legacy Page Builder
- ShortPoint Basics: How to Edit a Design Element in Live Mode