SharePoint recently launched a new section, called Flexible Section. This article explains what it is, how to use it, and what functionalities it offers.
TABLE OF CONTENTS
- What is a Flexible Section?
- Using Flexible Sections
- Adding and Editing ShortPoint Web Parts in Flexible Sections
- Anatomy of a Flexible Section
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.
Within the flexible section, you will see a grid that allows you to drag and drop, resize, group, and overlap web parts with ease.
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:
- Close the Toolbox:
Step 2: Add the Flexible Section
- Click the green plus icon:
- Select Flexible.
Step 3: Edit the Flexible Section
- Click the 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:
- Select 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:
- Drag the resize handle to adjust the size of the web part:
- 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:
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:
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:
Anatomy of a Flexible Section
This is how a blank Flexible Section looks. Below are the properties you can modify:
![]() | Move Section icon | allows you to adjust the location of the whole Flexible Section. |
![]() | Edit Properties | opens a window that contains additional section features you can customize. See all of them in the Edit Properties Window table. |
![]() | Duplicate Section | allows you to duplicate the section. |
![]() | Delete Section | allows you to remove the section. |
![]() | Section resize handle | allows you to adjust the height of the section. |
![]() | Green plus icon | allows you to add a Section above or below the Flexible Section. |
Edit Properties Window
![]() | Background | choose from ready-made backgrounds or upload your own. |
![]() | Make this section collapsible | when enabled, the Flexible Section will be collapsible. Additional settings will appear once this is applied:
|
![]() | Mobile and email reflow | choose 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:
![]() | Bring to front | brings a web part all the way to the front layer. |
![]() | Bring to back | brings a web part all the way to the back layer. |
![]() | Bring forward | brings a web part one layer forward. |
![]() | Send backward | brings a web part one layer to the back. |
![]() | Group | groups two or more web parts. |
![]() | Ungroup | ungroups web parts. |
Now that you have all this information at hand, you can now use Flexible Sections to their full extent.
Related articles: