How to use flexible sections in SharePoint pages: A Simple Guide

Introduction

SharePoint introduced flexible layout section, within the flexible section we can move the webpart anywhere on the two-dimensional grid, resizing, over lapping and grouping the webparts, this guide covers how to use flexible sections in SharePoint, from adding web parts to customizing layouts for mobile views.

How to add flexible section in SharePoint Page

Just like adding other sections, click the Section button. This will open the Section toolbox. In the toolbox, you will see the Flexible Section listed first. Click on Flexible to add a Flexible Section to your page.

How to add web parts inflexible sections

• After adding a Flexible Section to your page, web parts cannot be added directly. Instead, you need to drag them from one of the Column Layouts into the Flexible Section, duplicate an existing web part, or use the Toolbox pane. The Toolbox pane, located on the right side, allows you to easily add web parts by clicking or using the drag-and-drop feature into the Flexible Section.

• The Flexible Section contains a 12-cell,two-dimensional grid. We can move web parts anywhere within this grid. When dragging and dropping a web part, grid lines will appear to help with alignment. The web part's top-left corner will automatically align with the nearest border.

How to Resize Web Parts

• We can easily resize web parts using the resize handles, which are located at the center of the left and right borders of the web part. Simply drag the handles to increase or decrease the size of the web part within the Flexible Section. Additionally, web parts can be overlapped within Flexible Sections for a more customized layout.

• Web part resizing options vary depending on the type of web part. Web parts such as Text and Image can be resized to any widths. Other web parts, like Quick Links and People, have a default minimum width of four grid columns and a maximum width of eight grid columns. Similarly, custom web parts added within the Flexible Section follow the same default resizing limits, with a minimum width of four grid columns and a maximum of eight. Resize hints will appear while adjusting the web part size.

How to Resize Flexible Sections

To adjust the height of the Flexible Section, Click on the section to see the section resize handles located at the bottom. If you need more space to add web parts within the Flexible Section, simply drag the resize handles to adjust the section's height as needed.

How to Arrange and Group Web Parts

• If web parts overlap within the Flexible Section, we can easily arrange them. In the web part toolbar, click on the Arrange Item icon from the dropdown to reposition the web parts, adjusting which one appears in front and which one appears in the back.

• We can also group web parts within the Flexible Section. To do this, click on the first web part you want to group, then hold down the Ctrl key (Windows) or Option key (Mac) and select the other web parts you want to include. Once all the desired web parts are selected, click on the Arrange Items icon, then choose Group from the dropdown to group them together. Now, you can move the entire group by dragging it anywhere within the Flexible Section.

• To ungroup a web part, select Ungroup from the dropdown to separate the web parts.

How to Reorder on mobile

• Reordering is only available in the Flexible Section layout. This feature allows you to arrange web parts specifically for mobile devices, ensuring a better user experience on smaller screens. In the Section Properties pane, you can choose to prioritize web parts from top to bottom or from left to right, depending on the desired layout.

• The Flexible Section layout allows for customizable positioning of web parts. The image below is an example of how it appears when viewed on a desktop.

• When viewing this page in mobile view, the layout will adjust and be displayed as shown in the image below.

• Overlapped web parts do not work on mobile devices. Since mobile layouts follow a single-column structure, overlapping elements are automatically stacked vertically to ensure proper readability and responsiveness.
• If overlapping is needed on mobile devices, consider using custom styling or adjusting the mobile layout separately to achieve a similar visual effect.

Simple Design Example

Here is a sample design. Using the Flexible Section, we can customize and create your own design.

Conclusion

The Flexible Section layout in SharePoint provides a customizable way to design pages. With features like resizing web parts, overlapping elements, arranging and grouping web parts. It enables users to create dynamic and flexible designs, allowing them to showcase their creativity and achieve the desired layout. This flexibility enhances content organization and improves the overall user experience. Additionally, the Reorder on Mobile option ensures an optimized display on smaller screens. By leveraging these features, users can customize their SharePoint pages to meet specific design and functionality needs.