With Visual Builder, you are able to make customizations to your design layout and elements visually on the page. The EasyPass feature allows you to identify the design elements present on your page, take you to an active mode where you can select to make changes to just one design element, and provide you direct access to the Design Element settings and other actions.


Let us explore the EasyPass feature in this article and learn how to navigate it.

 


TABLE OF CONTENTS


Prerequisites:

  • You upgraded to the ShortPoint Visual Builder version SPFX 8.0.x.xx or later on Office 365 (SharePoint Online) or SharePoint 2019 environment;
  • You are a ShortPoint user with an active license.

What is EasyPass?


When you are using the Visual Builder interface, you will find that each element on the page is highlighted with a label indicating the design element name. These are activated upon hovering over the spaces occupied by a design element. This is the EasyPass feature which allows you to visually select and modify design elements as you work to build a beautiful intranet page.



EasyPass Structure


We have design elements that act as containers on a page. The most common is a Section that contains a Row with one or more design elements. This nested structure is displayed in EasyPass as a stack of labels beginning with the design element you are hovering over.


In this example, we hovered over the Slideshows content. As you can see, you will be able to view the main label - Slideshows - contained within the first Column of a Row found within a Section



EasyPass Active Mode


When you need to modify a design element in Visual Builder, all you have to do is go into the EasyPass Active Mode. It allows you to select a specific design element on the page and work on it without being distracted by the other elements on the page.


  • Entering Active Mode

    Selecting an EasyPass label brings you to Active Mode. In Active Mode, the design element you selected is highlighted, so you clearly see what you are working on.


Also, you will see that new icons have appeared beside the label:

  1. A cogwheel to open the design element settings window;
  2. A trash bin icon to delete the highlighted element; and,
  3. An other actions ellipsis to open the dropdown menu with duplicate, lock, copy, and cut actions.


  • Exiting Active Mode

    When you are done with your changes, simply place your cursor and click outside the design element to deactivate Active Mode. Your changes will be saved and you can proceed with designing the rest of the page.



While in Active Mode, you can perform adjustments with the Visual Builder Hot Actions feature, edit design elements settings, and other actions.


Related Articles: