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.
Before we begin
This article is for you if
- You have the ShortPoint SPFx version 8.1.x.xx or later installed on your SharePoint environment
- You are a ShortPoint Designer with an active license
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.
Starting ShortPoint SPFx version 8.1.x.xx and above, Live Mode is the editing interface you will have when you insert a ShortPoint web part. However, Grid Mode is still accessible to use via the Action Toolbar.
Note: Check our Live Mode introduction article to know more about it.
The Live Mode Basics
Here is a rundown of the exciting new features that you will experience in Live Mode.
Isolate Mode
To reduce confusion between the SharePoint and ShortPoint editing interfaces, we introduced the Isolate Mode. Once you start editing a ShortPoint web part, portions of your SharePoint page will be blurred effectively providing you with a clean and focused workspace.
You can exit the Isolate Mode by clicking the Close button at any time. However, this will also discard any edits you have recently made.
To view the whole page without discarding your edits, you can activate the Preview Mode which is accessible in the Action toolbar. This way, you can toggle between editing and viewing the whole page any time you wish.
Insert Options
ShortPoint Live Mode comes with UX enhancements that are intuitive and bring the design experience to another level. The most significant of these is the initial options you get when starting your design journey with ShortPoint.
Upon adding a new ShortPoint web part or Section, you will be offered two options that will determine the path you will take in designing your page.
Templates
ShortPoint has a vast number of SharePoint Templates available in our Demos Library. To make these templates easier to access and faster to implement on your page, we have integrated a Templates library into the product.
If you want to start by using a template, simply select the Templates option, choose a whole page or Section that meets your requirements, and insert it on your page. All you need to do then is edit the default content and make your customizations, add a few more Design Elements here and there, and you are ready to publish your page.
Choose Layout
If you have a design in mind and want to start from scratch, select the Choose Layout option. Here, you can decide how many columns you want to add and how they are divided across the Row. Then, you can proceed to add Design Elements by clicking the plus buttons.
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:
- Switch between Live Mode and Grid Mode.
- Check the Web Part history of changes.
- Copy the Web Part Content.
- Access the Help menu.
- Clear the Web Part Content.
- Switch to the Preview mode.
- Discard your changes.
- 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 want to know more about this feature.
EasyPass
The EasyPass feature allows you to identify the Design Elements present on your page. When in Active Mode, it shows the action buttons for each Design Element and provides you with direct access to its settings and other essential commands.
You can enter the Active Mode by hovering over or clicking a Design Element’s EasyPass tag. If you want to exit the Active Mode, simply move your mouse or click outside the Design Element.
Continue with our Live Mode Feature: EasyPass solution article if you want to know more about this feature.
Add and Edit Design Element Update
There are significant changes in the overall experience of adding and editing Design Elements in ShortPoint Live Mode.
Add Design Element
Inserting a new Design Element has become more intuitive. All you need to do is look for the Add Design Element or Plus buttons in spaces where you can insert a new element.
Edit Design Element
To edit a Design Element, select its tag to enter Active Mode and click the cogwheel icon. A Design Element settings window will appear which you can reposition to any part of the page.
You will find similar tabs and settings options available as the Grid Mode interface. However, in Live Mode, any changes you make within the settings window will automatically apply to your page. You will be able to see your edits in real-time which saves time in previewing and checking how your design is shaping up.
Note: Connect and Visibility settings are currently only available in Grid Mode.
Some settings will also have a different user experience. For example, you can expand a category to access settings you need to modify, content in the Items tab will have individual action items that you can edit, and more.
Copy, Paste, and Duplicate Design Element
There are now two options you can use to copy, paste, or duplicate a Design Element.
- EasyPass Active Mode
Select the tag of the Design Element and click the ellipsis icon to show the other action options. Here, you will find the copy and duplicate options. You will also find options to paste before, after, or within (for content-holders) the selected Design Element.
- Context Menu
These options are also accessible by right-clicking on a Design Element.
Continue to our Adding, Copying/Pasting Experience in Live Mode and Grid Mode solution article if you want to know more.
Text Editing Experience
You will be able to edit text directly on the page in Live Mode. You no longer have to enter the Text or any content-holder Design Element settings window in order to edit text content.
Just double-click on the text to activate the Inline Edit Mode and you can start editing text using the Rich Text Editor. You will also find Inline Design Elements that you can readily apply when you need them.
Continue to our Text Editing Experience in Live Mode and Grid Mode solution article if you want to know more.
Hot Actions
You can easily resize the design element spacing using the Hot Actions feature.
With this feature, there is no need to switch to Preview mode to estimate the spacing value you need for your design. You can apply the perfect spacing for the Design Element by dragging its handles visually. You can also get equal margins and paddings on the left/right or top/bottom of the Design Element by using 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 want to know more about this feature.
Lock and Unlock
With ShortPoint Live Mode 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 want to know more about this feature.
History Window
All edits made with the ShortPoint Live Mode 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 would like to revert the changes, click the restore button, and confirm your choice.
In addition to the current changes history, you now will be able to restore the unsaved changes in case the editing session ends 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 to get your recent unsaved changes and No, discard them to continue from the last saved version.
Continue with our Live Mode Feature: History Window solution article if you want to know more about this feature.
ShortPoint Assistant
Lastly, ShortPoint Live Mode comes with a built-in guide to walk you through the different phases of building an intranet page. It automatically pops up when a new ShortPoint web part is added.
Each item in the checklist contains a video tutorial that will show you how to complete the task. Once you complete all tasks, you are guaranteed to be up to speed with what is new in Live Mode.
You can also dismiss the ShortPoint Assistant if you do not want to go through it. It will be easy to find in the Help menu in the Action toolbar if you happen to need it in the future.
This is a quick rundown of all the things that are new in ShortPoint Live Mode. Knowing these features will definitely help you get started in getting familiar with the brand-new editing interface.
If you need a thorough walkthrough of all the features currently available in ShortPoint Live Mode, visit ShortPoint Academy. We hope to see you there.
IMPORTANT: If you want to dismiss ShortPoint Assistant, you have to finish the first step of the QuickStart Checklist: Add ShortPoint web part to a page After adding the Web Part, you should see the dismiss button at the bottom of the pop up:
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
