How to Use the SharePoint Drag and Drop Feature to Create a Full-width ShortPoint Section

By default, when you have a Team site, you don’t have the option to add ShortPoint to full-width sections:

This results in excessive white space on the side of your page, reducing its visual appeal:

One solution is to manually edit each section and enable Force Full Screen Width. However, this can be time-consuming, especially if you have several sections on your page.

This article will demonstrate how you can achieve a full-width section, like what we have below, using the simple drag-and-drop feature of SharePoint:

NOTEThis solution can also be used for Communication sites.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • OPTION 1: Using the Toolbox
    • Step 1: Edit the SharePoint Page
    • Step 2: Create a Full-width Section
    • Step 3: Add the ShortPoint web part
    • Step 4: Edit the ShortPoint Web part
    • Step 5: Save
  • OPTION 2: Using the Move Web Part Icon
    • Step 1: Edit the SharePoint Page
    • Step 2: Create a Full-width Section
    • Step 3: Drag-and-drop the ShortPoint Web Part
    • Step 4: Delete Old Section
    • Step 5: Publish

Prerequisites

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

Interactive Tutorial

Start the interactive tutorial to learn how to create full-width ShortPoint sections:

Step-by-step Tutorial

There are two ways to create a full-width section using the drag-and-drop function. Follow the option that best suits you:

OPTION 1: Using the Toolbox

This option is best to use when you want to start from scratch.

Step 1: Edit the SharePoint Page

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

Step 2: Create a Full-width Section

• Click the green plus icon:

• Select Full-width section.

Step 3: Add the ShortPoint web part

• Click the Toolbox icon:

• Look for ShortPoint.
• Drag-and-drop ShortPoint inside the Full-width section:

Step 4: Edit the ShortPoint Web part

• Edit the ShortPoint web part as you usually do.

Step 5: Save

• Once done, click the eye icon to see your page in real-time:

• Click Save to keep your changes:

• Select the back icon:

• Close the Toolbox:

• Publish your page.

That’s it! You now have a full-width section.

OPTION 2: Using the Move Web Part Icon

This option is best to use when you already have an existing ShortPoint web part on your page.

Step 1: Edit the SharePoint Page

NOTEBefore proceeding, make sure you already have a ShortPoint web part on your SharePoint page.

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

Step 2: Create a Full-width Section

• Click the green plus icon at the top of your existing ShortPoint web part:

• Select Full-width section.

Step 3: Drag-and-drop the ShortPoint Web Part

• Select the ShortPoint tag:

• Drag the Move web part icon to the full-width section:

Step 4: Delete Old Section

• Select the old SharePoint section where you previously had the ShortPoint web part.
• Then, delete it.

Step 5: Publish

• Once done, click Publish.

That’s it! You now have a full-width ShortPoint section.

Related articles:

• How to Center Design Elements in a Column
• How to Create a SharePoint Page with a Side Navigation Menu Using the Code Design Element
• How to Set Up Tabs to Have No Default Selection on Page Load