How can we help you today?

How to Use the SharePoint Flexible Section

SharePoint recently launched a new section, called Flexible Section. This article explains what it is, how to use it, and what functionalities it offers.


flexible section


TABLE OF CONTENTS


What is a Flexible Section?

Flexible Section is the newest addition to SharePoint’s section offerings. It allows you to build a page without the rigid column structure.


flexible section


Within the flexible section, you will see a grid that allows you to drag and drop, resize, group, and overlap web parts with ease.

drag and drop


Using Flexible Sections

Now that you know what a Flexible Section is, let’s learn how to use it. Start the interactive tutorial to learn how:

NOTEGo to Anatomy of a Flexible Section to learn more about the properties you can customize.

Step 1: Edit the ShortPoint Page

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


Edit


  • Close the Toolbox:


close icon


Step 2: Add the Flexible Section

  • Click the green plus icon:


green plus icon

  • Select Flexible.

Step 3: Edit the Flexible Section

  • Click the Edit Properties icon:


Edit properties icon

  • Customize the Flexible Section according to your preferences.


NOTEGo to Anatomy of a Flexible Section to learn more about the properties you can customize.

Step 4: Add web parts

  • Click the Toolbox icon:


Toolbox icon

  • Select See all webparts:


See all webparts


  • Use the search bar to look for the web part you want to use and select it.
  • Customize the web part according to your preferences.
  • Click the Toolbox icon again to close it.

Step 5: Drag and Resize Web Parts

  • Use the Move web part icon to move the web part to where you want it to be:


move web part


  • Drag the resize handle to adjust the size of the web part:


resize handle


  • Repeat steps 4 and 5 if you want to add more web parts inside the Flexible Section.

Step 6: Resize the Flexible Section

  • Drag the Section resize handle to adjust the height of the Flexible Section:


Section resize handle


Bonus tip: If you have web parts from regular sections, you can add them to flexible sections too. To do that,  simply click the move web part icon and drag it into the flexible section: 

drag and drop



Adding and Editing ShortPoint Web Parts in Flexible Sections

What if you want to add ShortPoint Design Elements inside the Flexible Section? No worries! The same steps apply to the ShortPoint web part. Start the interactive tutorial to see it in action:

NOTEIf you want to edit ShortPoint web parts inside Flexible sections, make sure to enable Show Faded Content for the best editing experience:

Show Faded content



Anatomy of a Flexible Section

This is how a blank Flexible Section looks. Below are the properties you can modify:


blank flexible section


Move section iconMove Section iconallows you to adjust the location of the whole Flexible Section.
Edit properties iconEdit Propertiesopens a window that contains additional section features you can customize. See all of them in the Edit Properties Window table.
duplicate iconDuplicate Sectionallows you to duplicate the section.
delete iconDelete Sectionallows you to remove the section.
Section resize handle Section resize handleallows you to adjust the height of the section.
green plus iconGreen plus iconallows you to add a Section above or below the Flexible Section.


Edit Properties Window

BackgroundBackgroundchoose from ready-made backgrounds or upload your own.
Make this section collapsibleMake this section collapsible

when enabled, the Flexible Section will be collapsible. Additional settings will appear once this is applied:

  • Show title - when enabled, a title will be shown.
  • Choose title heading level - allows you to assign a heading level to the title.
  • Show divider line between sections - when enabled, divider lines will appear between Sections.
  • Expand/collapse icon alignment - choose the alignment of the Section title.
  • Default display - when enabled, the default display will be expanded.
Mobile and email reflowMobile and email reflowchoose how the content will flow in mobile devices and email.


Once you have web parts inside the Flexible Section, you will see the Arrange items icon. Below are the options you can use under this function:


arrange items icon


Bring to frontbrings a web part all the way to the front layer.
Bring to backbrings a web part all the way to the back layer.
Bring forwardbrings a web part one layer forward.
Send backwardbrings a web part one layer to the back.
Groupgroups two or more web parts.
Ungroupungroups web parts.


Now that you have all this information at hand, you can now use Flexible Sections to their full extent.


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