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
- Prerequisites
- Overview of Changes
- Add ShortPoint Web Part Provides Two Options
- Add Design Elements by pressing the plus button
- Design Elements cannot be placed outside the Section and Row
- Deleting the last Section on the ShortPoint web part brings you back to where you started
- Access Copy, Paste, and Duplicate options in two ways
- Select from different paste options
- Mapping Connected Text Content
Prerequisites
- You have ShortPoint SPFx version 8.1.x.xx or later installed on your SharePoint environment
- You are a ShortPoint Designer with an active license
Overview of Changes
Here are a few key points to remember when adding a new Design Element, copying, and pasting in Live Mode and Grid Mode:
Add ShortPoint Web Part Provides Two Options
When you add a ShortPoint web part to the page, you will be greeted by a Section with the following options:
- Choose Layout - prompts you to select a Row layout which will then be added to your page
- Templates - opens the Templates Library where you can select a Page or Section Template and insert it to your page
These options will also appear every time you add a new Section to your web part.
Add Design Elements by pressing the plus button
Look for the plus button within Rows and Columns to add a new Design Element to your page. This will open the selection of Design Elements you can insert into your page.
Check out our article on ShortPoint Basics: How to Insert a Design Element in Live Mode to know more.
Design Elements cannot be placed outside the Section and Row
In both ShortPoint editing interfaces, the Design Elements can no longer be added or pasted outside the ShortPoint Section and Row. All Design Elements must be nested within a Section and Row to be fully displayed on your page.
Deleting the last Section on the ShortPoint web part brings you back to where you started
When you delete the last Section within the ShortPoint web part, you will be brought back to the initial Section where you had two options - Choose Layout and Templates.
If you wish to remove the ShortPoint web part from the page, you can hit the Close or Discard button and delete it.
Access Copy, Paste, and Duplicate options in two ways
You can find copy-and-paste options by doing either of the following:
Option 1: Access Design Element Action Buttons
- In Live Mode, you can hover over or click the label of any Design Element and you will enter EasyPass Active Mode. Press the ellipsis icon and you will find the copy, paste, and duplicate options.
- In Grid Mode, hover over the Design Element, and select the Other actions ellipsis. This will show a dropdown with the copy, paste, and duplicate options.
Option 2: Right Click to open the Context Menu
In both Live Mode and Grid Mode, you can right-click on a Design Element to show the other actions dropdown. This includes the copy, paste, and duplicate actions.
Check out the following articles for more information about these actions in Live Mode
Select from different paste options
Depending on the Design Element or content you select to access the paste options, you will be presented with several paste options.
There are the following paste options you may find:
- 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 or Into. 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 Connected Text Content
If you are using a dynamically connected Design Element and would like to add the item mapping in the Content tab, click the chain icon to choose the mapping value from the drop-down. This is currently available only in Grid Mode.
That's it. You are now updated with the different changes in the adding, copying, and pasting experience in Live Mode and Grid Mode.
