How can we help you today?

ShortPoint Page Builder Live Mode Feature: Hot Actions

ShortPoint Page Builder Live Mode brings you the capability to adjust spacing values of Design Elements in the view mode, making it easy to achieve the best size that complements your page design. We call this the Hot Actions feature, and we are introducing it in detail in this article.


NoteShortPoint Page Builder Live Mode was formerly known as Visual Builder.



Hot actions spacing


TABLE OF CONTENTS


Prerequisites

  • You upgraded to the ShortPoint SPFx version 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 Hot Actions?


Hot Actions is a Live Mode feature that allows you to resize margins and paddings through a simple click and drag action, modifying your content in real-time on your SharePoint page. You no longer need to guess spacing values to fit your design. You also do not need to toggle between your settings window and page preview to see the result. The action happens right where you can see it.


How does Hot Actions work?


When in the Live Mode interface, the Hot Actions feature becomes available when you are on Easy Pass Active Mode.


Step 1: Enter EasyPass Active Mode


Hover over the Design Element you want to modify and click its EasyPass label. In our example, we decided to adjust the size of the content of the Image Design Element.


click easypass tag


Step 2: Click and drag to resize


Move your cursor to the end of the margins or paddings you want to resize until it changes into a double-headed arrow and a shaded area appears. Click and drag until it reaches your desired size or value. This can be applied to all sides of your Design Element.


Hot Actions also allows you to pin both sides of the margin or padding so that it will have the same value. This makes applying symmetry to your content very easy. Just press the pin icon beside the pixel value on one side, and it will automatically apply to the other side.


In our example, we have chosen to increase the left margin of the image, which reduced its size to fit better into the column. Notice that we pressed the pin icon to add a similar-sized right margin.


click and drag to add spacing


Step 3: Exit Active Mode


When you are satisfied with your adjustments, you can click outside the Design Element you are working on and exit Active Mode.


Hot Actions provides you more control over the placement, size, and alignment of your content. It is now easy to deal with content sizes with ShortPoint Page Builder Live Mode.


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