How can we help you today?

Getting Started: The Basics of Visual Builder

In this article, we will get you familiar with the basics of Visual Builder to help you get started in building great intranet pages using the new editing ShortPoint interface.


TABLE OF CONTENTS


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:


switch to visual builder


This is how it looks like in action:


clicking the button to switch to visual builder


The Visual Builder 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:


EasyPass feature


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 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:


hot actions click and drag action


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. 


floating page settings bar


The Floating Page Settings Bar contains of ready-to-access icons that open or trigger different types of features:


parts of the floating page settings bar


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:


collapse button


Continue with our Visual Builder Feature: Floating Page Settings Bar 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: 


other actions button


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.


checking who locked the design element


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:


unlock design element


Continue with our Visual Builder 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 Floating Page Settings Bar:


edit history button


Check the history of changes, choose where you'd like to revert the changes, click the restore button (1) and confirm your choice (2):


history window


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:


unsaved changes warning


Continue with our Visual Builder Feature: History Window solution article if you would like to know more about this feature.


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.


To insert new Design Elements inside the column use the plus button:


insert button


Then choose the Design Element from the grid:


insert an element


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:


context menu options


  • Option 2: EasyPass Active Mode

From the EasyPass Active Mode, click the three ellipsis button to open the Other Actions:


easypass other actions


Continue to our Adding, Copying/Pasting Experience in Visual Builder and Wireframe Builder 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 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:


default content


In Visual Builder, 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:


settings icon


  • Option 2: Inline edit mode


Double-click some text content to access the inline edit mode:


inline text editing


There are many editing options for customizing the text content.

Continue to our Text Editing Experience in Visual Builder and Wireframe Builder solution article if you would like to know more.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 17 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more