In this article we will get you familiar with the basics of Visual Builder.
TABLE OF CONTENTS
- Before we begin
- What is Visual Builder?
- Enabling the Visual Builder
- The Visual Builder Basics
- Adding Design Elements and Editing Experience in Visual Builder
Before we begin
This article is for you if you have the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
What is Visual Builder?
Visual Builder 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 Visual Builder introduction article to know more about it.
Enabling the Visual Builder
Edit the page.
By default, you will see the Wireframe Builder experience. To switch to the Visual Builder click the Switch to Visual Builder button from the floating page settings bar:
This is how it looks like in action:
The Visual Builder Basics
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 Visual Builder 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 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 Visual Builder Feature: Hot Actions solution article if you would like to know more about this feature.
Floating Page Settings Bar
Use the Floating Page Settings bar to quickly edit your designs.
The Floating Page Settings bar is a semi-transparent bar that floats above the Visual and Wireframe Builder interface when editing a ShortPoint web part.
The Floating Page Settings Bar contains of ready-to-access icons that open or trigger different types of features:
Using the Floating Page Settings bar you can:
1. Switch between Visual Builder and Wireframe Builder.
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 Visual Builder Feature: Floating Page Settings Bar
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:
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 Floating Page Settings Bar:
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 Visual Builder Feature: History Window (The article is under development)
Adding Design Elements and Editing Experience in Visual Builder
Adding, Copying/Pasting Experience
Using Visual Builder 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 Visual Builder 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.
Text Adding and Editing Experience
There has been some important changes to the way you manage the text content in Visual Builder:
- All rich text contents inside the existing Design Elements are converted to the Text Design Elements after the migration.
- In Visual Builder and Wireframe Builder 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 Visual Builder you can edit the text content in two ways:
Option 1: EasyPass Active mode
Option 2: Inline edit mode
There are many editing options for customizing the text content.
Continue with our Text Editing Experience in Visual Builder and Wireframe Builder
- Introducing ShortPoint Visual Builder
- Visual Builder Feature: EasyPass
- Visual Builder Feature: Hot Actions
- Visual Builder Feature: Floating Page Settings Bar
- Adding, Copying/Pasting Experience in Visual Builder and Wireframe Builder
- Text Editing Experience in Visual Builder and Wireframe Builder
- Migrating into ShortPoint Visual Builder
- Expectations from Visual Builder Beta Release