Try ShortPoint nowTL;DR: Live Mode is an editing experience in ShortPoint Page Builder where you can see each change on your SharePoint page as you make it. To open it, edit your SharePoint page, close the Toolbox, and click Edit Properties on the ShortPoint web part. You can then drag elements to new spots, adjust spacing right on the page, and undo changes from History. Your visitors won’t see any changes until you save and publish the page.
Starting with ShortPoint SPFx 9.5.0.0 and later, Live Mode becomes the main editing experience in ShortPoint Page Builder. With Live Mode, every edit shows up on your page the moment you make it.
This article covers the biggest perks of designing in Live Mode, with a closer look at two features that make layout work faster than ever: Drag and Drop and the new spacing experience.
NOTEFor a full overview of all the features in Page Builder, go to Introducing ShortPoint Page Builder.
TABLE OF CONTENTS
- Prerequisites
- Why Design in Live Mode?
- Drag and Drop
- Upgraded Spacing Experience
- More Perks Worth Knowing
- Entering Live Mode
- Frequently Asked Questions
Prerequisites
- You must have the latest version of ShortPoint SPFx installed.
- You are a ShortPoint Designer with an active license.
Why Design in Live Mode?
Live Mode is the real-time editing experience inside ShortPoint Page Builder. Here's what that means for your day-to-day work.
Perk | What it means for you |
|---|---|
What you see is what you publish | Your page already looks the way your audience will see it. You don't need to save or preview just to check your work. |
One editor for everything | Grid Mode has been retired, so every design and editing task now happens in one place. You won't need to switch views. |
Fewer clicks | Move elements by dragging them and change spacing by pulling handles on the page, without digging through menus. |
Instant feedback | Colors, fonts, data connections, and Visibility rules update on the page as you set them, so you can catch mistakes early. |
A safety net | The History window lets you undo recent changes, so you can try ideas without worrying about breaking your page. |
Drag and Drop
Rearranging a page used to mean cutting an element and pasting it somewhere else. With Drag and Drop, you simply pick up an element and move it where you want it.
Why You'll Love It
- See where it lands before you let go. The layout updates while you drag, so you always know the result.
- Long pages are no problem. Drag near the top or bottom of the screen, and the page scrolls for you.
- Precise placement inside containers. Scrollable containers such as Panels also scroll when you drag near their edges.
- Quick reordering. Swap the order of Design Elements in seconds instead of rebuilding them.
TIPChanged your mind? Click the Clock icon on the Action Toolbar to open the History window and restore an earlier layout.
Learn more in Introducing Drag and Drop for ShortPoint Live Mode.
Upgraded Spacing Experience
Good spacing makes a page easier to read. The new spacing experience gives you more flexibility to add room between Design Elements. It comes with upgraded Hot Actions for quick visual changes and precise spacing controls for when you need an exact value.
Learn more in Introducing the New Spacing Experience.
More Perks Worth Knowing
- Wireframe Mode: Show labels on every Section, Row, Column, and Design Element without leaving your live design. It's handy for checking all the elements on your page. See What is Wireframe Mode.
- Inline text editing: Double-click any text to edit it right where it sits. See Text Editing Experience.
- AI Designer: Describe the page you need and watch it appear on your page. See Getting Started: What Is the ShortPoint AI Designer.
- Lock and Unlock: Lock elements so they stay put while you drag and space things nearby. See Live Mode Feature: Lock and Unlock.
Entering Live Mode
Starting with ShortPoint SPFx version 9.5.0.0, you go straight into Live Mode whenever you edit a ShortPoint web part. Here's how to get there.
NOTEYour page must already have a ShortPoint web part before you start. Need to add one? See How to Add ShortPoint Web Part to learn how to add it.
Step 1: Edit Your SharePoint Page
Go to the SharePoint page you want to design and click Edit in the top-right corner.
Step 2: Close the Toolbox
SharePoint opens the Toolbox panel on the right. Click the X icon to close it and give yourself more room to work.
Step 3: Edit the ShortPoint Web Part
Click the ShortPoint web part to show its toolbar, then select the Edit Properties icon.
Step 4: Start Designing in Live Mode
That's it! You'll see the message You've entered ShortPoint Page Builder at the top of the page and the Action Toolbar at the bottom. Every change you make now shows up on the page right away.
NOTEFor a full overview of all the features in Page Builder, go to Introducing ShortPoint Page Builder.
Frequently Asked Questions
Can I still switch to Grid Mode?
No. Grid Mode has been retired starting with ShortPoint SPFx version 9.5.0.0, and all designing and editing now happens in Live Mode. If you liked seeing your page's structure in Grid Mode, turn on Wireframe Mode from the Action Toolbar to show labels on every Section, Row, Column, and Design Element.
Why don't I see Live Mode when I edit my web part?
Check that your page already has a ShortPoint web part and that you're using the latest version of ShortPoint SPFx. You also need an active ShortPoint Designer license. If the Edit button is missing from your SharePoint page, ask your site owner or admin for edit access.
Can I use Drag and Drop on classic SharePoint pages?
No. Drag and Drop works only on modern SharePoint pages. If you're still using classic pages, we recommend moving to modern ones. For more information, go to How to Convert Classic SharePoint Pages to Modern.
What can I move with Drag and Drop?
You can move Sections, Rows, Columns, containers such as Panels and Backgrounds, and individual Design Elements.
Do my changes go live as soon as I make them?
No. Live Mode shows your edits on the page while you design, but your audience won't see them until you click Save and then Publish the SharePoint page.
Related articles:
- Introducing ShortPoint Page Builder
- What Happens When You First Enter Page Builder
- ShortPoint Page Builder: Action Toolbar
- ShortPoint Page Builder Live Mode Feature: EasyPass
- ShortPoint Page Builder Live Mode Feature: Hot Actions
- ShortPoint Page Builder Live Mode Feature: History Window
- What is Wireframe Mode?
- What Is Isolate Mode?
