Try ShortPoint nowIn this article we will show you the new adding and copy/pasting experience in ShortPoint Page Builder Live Mode and Grid Mode.
Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.
TABLE OF CONTENTS
- This article is for you
- General
- Adding new Design Elements
- Copying/duplicating existing Design Elements
- Mapping items - connected Design Elements
- Copy & Paste from ShortPoint Live Demos
- Step-By-Step Video Tutorial
This article is for you
- You have to the ShortPoint SPFx version 8.0.x.xx or later.
- You use Office 365 (SharePoint Online) or SharePoint 2019 environment.
General
Design Elements cannot be placed outside the Section and Row
In the Grid Mode and Live Mode, the Design Elements cannot be added or pasted outside the ShortPoint Section and Row.
First Section on the page
By default, the Info Design Element will be added to the first Section on the page, when you just added the ShortPoint web part.
To add a new ShortPoint Design Element, you will need to delete it.
In Grid Mode:
This is how the first Section will look like:
You may open the Text settings by clicking the cog wheel icon to check the hint message there:
You will see the default hint message in the text area:
To remove the Info Design Element, click the recycle bin icon:
In Live Mode:
Enter the EasyPass Active mode of the Info Design Element and click the recycle bin icon to remove it:
Single Section on the page
Users cannot delete the Section from the page, if it is the only one existing. Remove button will not be available:
In Grid Mode:
In Live Mode:
Adding new Design Elements
ShortPoint Page Builder Live Mode
Use the Insert button to add a new Design Elements inside the Column:
After you clicked it, choose the Design Element you would like to insert:
ShortPoint Page Builder Grid Mode
Use the Insert button to open the Page Builder modal and add new Design Elements inside the Column:
Copying/duplicating existing Design Elements
Live Mode
There are two ways of copying/duplicating the Design Elements in the Live Mode.
Option 1: Context menu
Right-click on the Design Element to open the Context menu and choose the options from the drop-down:
Option 2: EasyPass Active mode and Other Actions
Activate the EasyPass Active mode. Click the three dots icon (1) to access the Other Actions and choose the options from the drop-down (2):
ShortPoint Page Builder Grid Mode
To duplicate the existing Design Element, either right click on it to open the Context menu or click the three dots icon to open the Other Actions and choose Duplicate option from the drop-down:
To copy the Design Element either right click on it to open the Context menu or click the three dots icon to open the Other Actions, and then choose Copy option from the drop-down:
Once the Design Element is copied, you may paste it using the Other Actions, by choosing the paste option:
There are the following paste options:
- Paste Before. Use this option if you would like to insert the copied Design Element before the current Design Element.
- Paste After. Use this option if you would like to insert the copied Design Element after the current Design Element.
- Paste Inside. Use this option if you would like to insert the copied Design Element inside the current Design Element. This option is only available for content-holder Design Elements.
Note: The content-holder Design Elements are Column, Accordions, Alert, Animate, Background, Frame, Info, List, Panel, Tabs, Templates, TOC Content, Toggles, Well. - Paste Left. Use this option if you would like to insert the copied Design Element on the left to the current Design Element. This option is only available for inline Design Elements.
Note: The inline Design Elements are Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip. - Paste Right. Use this option if you would like to insert the copied Design Element on the right to the current Design Element. This option is only available for inline Design Elements.
Note: The inline Design Elements are Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip.
The pasted code will be processed, and all plain HTML will be added as a Text Design Element.
Mapping items - connected Design Elements
If you are using dynamically connected Design Element and would like to add the item mapping, put the cursor where you want to add it and click the chain icon to choose the mapping value from the drop-down:
Important: To dynamically connect ShortPoint Design Elements with SharePoint lists, libraries, Outlook etc., please switch to Grid Mode. It is currently not possible to set up a connection in Live Mode.
This is how the connected Design Element will look like in Grid Mode after you update it:
Copy & Paste from ShortPoint Live Demos
You can use Copy & Paste feature in Live Mode and Grid Mode.
Step 1: Copy Page from the ShortPoint Demos Website
Visit ShortPoint Demos Website.
Choose the page sample you like and click the Copy button at the top of the Demo Page:
Or you can copy any part of the page:
Step 2: Paste in the SharePoint Page
Live Mode
Enter the EasyPass Active mode of the default Section, click the three dots icon to expand the Other Actions and choose Paste Page option from the drop-down:
Note: If you copied a Section, and not the whole page, you will need to choose Paste Section option:
After you pasted the page, you can delete the default Section using the remove button in the EasyPass Active mode:
Grid Mode
Click the three dots icon and choose Paste Page option from the Other Actions drop-down for the default Section:
Note: If you copied a Section, and not the whole page, you will need to choose Paste Before Section or Paste After Section option:
After you pasted the page, you can delete the default Section using the remove button:
Step-By-Step Video Tutorial
You can also watch the following video tutorials that we prepared for you.
Copying and pasting in Live Mode
In this video, we demonstrate how to copy whole page templates, parts of a page, and Design Element examples from our Demos Library and paste them into your SharePoint page in the Live Mode editing interface.
Copying and pasting in Grid Mode
Here we are showing how you can copy our templates from the Demos Library and paste them into your intranet page using Grid Mode.
That's it. Happy Live Mode and Grid Mode experience!