Try ShortPoint nowIn this article, we will get you familiar with the basics of Live Mode to help you get started in building great intranet pages using the new editing ShortPoint interface.
TABLE OF CONTENTS
- Before we begin
- What is Live Mode?
- Enabling the Live Mode
- The Live Mode Basics
- Adding Design Elements and Editing Experience in Live Mode
Before we begin
This article is for you if you have the ShortPoint SPFx version 8.0.x.xx or later.
What is Live Mode?
ShortPoint Live Mode is a SharePoint intranet site design tool optimized to provide you with a visual design experience paired with intelligent features on top of the existing ShortPoint functionality. This is another step forward to make the process of designing sites effortless.
Note: Check our Live Mode introduction article to know more about it.
Enabling the Live Mode
Edit the page.
By default, you will see the Grid Mode Builder experience. To switch to the Visual Builder, click the Switch to Live Mode button from the Action Toolbar:
This is how it looks like in action:
The Live Mode Basics
EasyPass
The EasyPass feature allows you to identify the Design Elements present on your page, take you to the Active Mode where you can select to make changes to just one Design Element and provide you with direct access to the Design Element settings and other actions.
You can enter the Active Mode by clicking on the selected Design Element. If you'd like to exit the Active Mode, click outside the Design Element:
Continue with our Live Mode Feature: EasyPass solution article if you would like to know more about this feature.
Resizing and Hot Actions
You can easily resize the design element spacing using the Hot Actions.
There will be no need to switch to Preview mode every time when you set the spacing value: simply determine the perfect spacing for the Design Element by dragging handles visually. To get the equal spacing on the left/right or top/bottom use the Hot Actions to mirror the set spacing:
What you see in edit mode is what you get when it is saved.
Continue with our Live Mode Feature: Hot Actions solution article if you would like to know more about this feature.
Action Toolbar
Use the Action Toolbar to quickly edit your designs.
The Action Toolbar is a semi-transparent bar that floats above the Live Mode and Grid Mode interface when editing a ShortPoint web part.
The Action Toolbar contains ready-to-access icons that open or trigger different types of features:
By using the Action Toolbar, you can:
1. Switch between Live Mode and Grid Mode.
2. Check the Web Part history of changes.
3. Copy the Web Part Content.
4. Get help - connect to ShortPoint Knowledge Base or Support.
5. Clear the Web Part Content.
6. Switch to the Preview mode.
7. Discard your changes.
8. Save your changes.
It is always present while you are in edit mode and can be collapsed into one button to have a better view of your page.
Use the cross button to collapse it:
Continue with our Live Mode Feature: Action Toolbar solution article if you would like to know more about this feature.
Lock and Unlock
With ShortPoint Visual Builder you can lock a group of Design Elements within a Section or just one Design Element you want to secure and prevent them from being changed as you continue working on other areas of your page.
You can access Lock/Unlock feature from the Easy Pass or by right-clicking to open the context menu:
When locked, hovering over the Easy Pass label will display a tooltip showing who locked it. This makes identifying ownership of edits effortless when working with other colleagues in your SharePoint communication or team sites.
If you'd like to unlock the Design Element(s) for further editing, simply hit the Easy Pass label of a locked design element and it will be released to allow editing and redesign:
Continue with our Live Mode Feature: Lock and Unlock solution article if you would like to know more about this feature.
History
All edits made with the ShortPoint Visual Builder are stored, making it easy to backtrack and restore from a specific change that was made. Whenever you add a ShortPoint design element, revise content, modify some settings, and customize specific features, you will find them recorded in the Design History window.
To access the history of changes, click the Web Part History button from the Action Toolbar:
Check the history of changes, choose where you'd like to revert the changes, click the restore button (1) and confirm your choice (2):
In addition to the current changes history, you now will be able to restore the unsaved changes in case the editing session is ended before you save your customizations. After you click to edit the Web Part, you will see a popup message asking whether you'd like to restore the changes or discard them. Hit Yes if you'd like to get your recent unsaved changes:
Continue with our Live Mode Feature: History Window solution article if you would like to know more about this feature.
Adding Design Elements and Editing Experience in Live Mode
Adding, Copying/Pasting Experience
Using Live Mode you will be able to add Design Elements, copy and paste them, use the Copy & Paste feature from the ShortPoint Demos website.
The editing experience in Live Mode is slightly different and has been changed to make this process easier.
There are some important changes:
- The Design Elements cannot be added or pasted outside the ShortPoint Section. Sections are the most basic and largest building blocks used in designing layouts.
- The Section cannot be deleted from the page if it is the only one existing. Remove button will not be available.
To insert new Design Elements inside the column use the plus button:
Then choose the Design Element from the grid:
For duplicating, copying and pasting Design Elements you can use two options:
Option 1: Context menu
Right-click anywhere on the page to access the context menu:
Option 2: EasyPass Active Mode
From the EasyPass Active Mode, click the three ellipsis button to open the Other Actions:
Continue to our Adding, Copying/Pasting Experience in Live Mode and Grid Mode solution article if you would like to know more.
Text Adding and Editing Experience
There have been some important changes to the way you manage the text content in Live Mode:
- All rich text contents inside the existing Design Elements are converted to the Text Design Elements after the migration.
- In Live Mode and Grid Mode the Text Design Element is now being used as a building block and it replaced the rich text content.
- Inline Design Elements are not fully supported: you cannot use them in between two text content parts.
- The text content in content-holder Design Elements can be changed after the license expiration. You can freely edit the Text Design Element: change the font, background and text colors, update the linked text etc.
When you add the content-holder Design Element inside the column, a Text Design Element with some dummy text content will be added by default:
In Live Mode, you can edit the text content in two ways:
Option 1: EasyPass Active mode
Enter the EasyPass Active mode and click the gear icon to open the Settings:
Option 2: Inline edit mode
Double-click some text content to access the inline edit mode:
There are many editing options for customizing the text content.
Continue to our Text Editing Experience in Live Mode and Grid Mode solution article if you would like to know more.
Related articles:
- Introducing ShortPoint Page Builder Live Mode
- Live Mode Feature: EasyPass
- Live Mode Feature: Hot Actions
- Live Mode Feature: Action Toolbar
- Visual Builder Feature: Lock and Unlock
- Adding, Copying/Pasting Experience in Live Mode and Grid Mode
- Text Editing Experience in Live Mode and Grid Mode
- Migrating into ShortPoint Page Builder Live Mode
- Expectations from ShortPoint Page Builder Live Mode Beta Release