ShortPoint Page Builder Live Mode Feature: Hot Actions

ShortPoint Page Builder Live Mode lets you adjust the spacing between Design Elements to perfectly complement your page design. This feature, called Hot Actions, will be explained in detail throughout this article.

TABLE OF CONTENTS

• Prerequisites
• What is Hot Actions?
• Interactive Tutorial
• Step-by-step Tutorial
  • OPTION 1: Drag and Drop
    • Step 1: Enter EasyPass Active Mode
    • Step 2: Resize
    • Step 3: Exit Active Mode
  • OPTION 2: Typing the Value
    • Step 1: Enter EasyPass Active Mode
    • Step 2: Resize
    • Step 3: Exit Active Mode

Prerequisites

• You have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You are a ShortPoint Designer with an active license.

What is Hot Actions?

Hot Actions is a Live Mode feature that allows you to resize [1] margins (spaces outside the border of the Design Element):

And [2] paddings (spaces within the border of the Design Element) through a simple click-and-drag action:

Hot Actions eliminates the need to guess spacing values or switch between settings and preview windows. You can see the changes you make right on your page!

Interactive Tutorial

Start the interactive tutorial below to learn how to use Hot Actions:

NOTEOption B of the interactive tutorial is still in development and will be released soon.

TIPIf you choose the Standard, Full Height, or Full-Width spacing style for your Section/Row, you’ll also be able to directly customize your spacing selection using Hot Actions. Simply select the rectangle icon inside the highlighted area and select the spacing style you want to use:

Step-by-step Tutorial

There are two ways to use Hot Actions: Follow the option that best suits your needs:

OPTION 1: Drag and Drop

This option demonstrates how to use Hot Actions using drag-and-drop:

Step 1: Enter EasyPass Active Mode

• Hover over the Design Element you want to modify.

Step 2: Resize

• Move your cursor to the end of the margins or paddings you want to resize until you see a color highlight and drag until it reaches your desired size or value:

• (Optional) To have equal value or size on both sides, click the link icon:

Step 3: Exit Active Mode

• When you are satisfied with your adjustments, click anywhere outside the Design Element you are working on to exit Active Mode.

That's it! You now know how to use Hot Actions using the drag-and-drop method.

OPTION 2: Typing the Value

NOTEOption B is still in development and will be released soon.

This option demonstrates how to use Hot Actions by typing the value:

Step 1: Enter EasyPass Active Mode

• Hover over the Design Element you want to modify.

Step 2: Resize

• Click the number inside the color highlight and type your desired value:

• (Optional) To have equal value or size on both sides, click the link icon:

Step 3: Exit Active Mode

• When you are satisfied with your adjustments, click anywhere outside the Design Element you are working on to exit Active Mode.

That's it! You now know how to use Hot Actions by typing your desired value.

Related Articles:

• Introducing ShortPoint Page Builder Live Mode
• ShortPoint Page Builder Live Mode Feature: EasyPass