Add sections and columns on a page

Applies to: SharePoint Online, Office for business, SharePoint Server 2019.

Design stunning, structured layouts by adding sections with columns on SharePoint modern pages. To display content side-by-side, you can append up to a maximum of three columns to each section. If you are working on a page that is part of a Communication site, you can produce a column that extends to the entire page (including its edges), by creating a full-width column. You can also stack multiple sections with changing numbers of columns. You can also insert a vertical section to the right side which is good for presenting elements like quick links, contacts, the weather, countdown timers, and more.

The following example has three one-column sections on the left, and a vertical section on the right:

Page with sections including a vertical section

Note: Some functionality is introduced gradually to organisations that have opted in to the Targeted Release programme. This means that you may not yet see this feature or it may look different than what is described in the help articles.

Add a section with columns to a page

  1. Locate the page where you want to add columns.
  1. If you’re not in edit mode already, press Edit at the top right of the page.
  1. Hover your mouse under the title area of the page to the far left, or above or below an existing web part to the far left of the page, and you’ll notice a line with a circled +, similar to this with a tool tip that says Add a new section.

Hover under a web part to see the add new section button

  1. Click Select the + add section button to add a new section .
  1. Under Section layout, confirm your personalised number of columns, or, if you are on a page that is part of a Communication site, you can pick a full-width column to span the entire page (including its edges).
Vertical section in Section layout pane

Note: Full-width column is not available on pages that are part of Team sites. It is available only on pages that are part of Communication sites.

Add a vertical section

  1. Find the page where you want to create a vertical section.
  1. If you’re not in edit mode already, press Edit at the top right of the page.
  1. Hover your mouse beneath the title area of the page to the far left, or atop or under an existing web part to the far left of the page, and you’ll notice a line with a circled +, like so, with a tool tip that states Add a new section:

Hover under a web part to see the add new section button

  1. Press Select the + add section button to add a new section .
  1. Under Section layout, click Vertical section.
Vertical section in Section layout pane

Notes: 

  • Vertical sections are currently available only on the right side of the page.
  • Length of vertical sections is adjusted based on the content on the page, growing or shrinking with the length of content in non-vertical sections.

  • You cannot have a full-width column and a vertical section on the same page.
  • In a narrow browser window, a vertical section is moved to the bottom of the page. The vertical section will return to the right side of the page when you make the window wider. This can also happen if your screen width is less than 1024 px. Try adjusting your display settings under Scale and layout. For example, in the drop-down under Change the size of text, apps, and other items, select a value of 125% or lower.

Change an existing section

Note: When you have content in two or more columns, and then reduce the number of columns, the content in the right most column will move to the next column on the left. If you reduce to one column, content in the second or third columns will move to the bottom of the first column.

  1. Find your sought page to edit a section.
  1. If you’re not in edit mode already, click Edit at the top right of the page.
  1. Each section of a page is marked with a dotted line. Pick your preferred section to create columns to, then select Edit section on the left side of the page.
Click the Edit section button to begin editing a section
  1. In the Section toolbox on the right side, select your preferred number and type of columns, and if decide a section background colour to amplify the page’s appearance. The available colours are based on your site theme.
Section layout pane

Note: The section background colour shows through most web parts, as in the text web part shown below (on the left). Other web parts maintain the background of the page rather than the section. For accessibility purposes, the List, Document library, and Quick chart web parts will always maintain the page background (an example is the Quick chart web part below). Web parts that will eventually allow section background to show through, but do not today, are: Site activity, Yammer conversations, Yammer highlights, List properties, Page properties, Group calendar, Bing news, and Microsoft Power Apps. For best results, we recommend not using a section background color for sections that contain these web parts.

Example of Text web part and Quick chart web part in a section background

Add content to a column

  1. If you’re not in edit mode already, press Edit at the top right of the page.
  1. Locate your specific column in which you want to insert content.
  1. Hover your mouse over the column and select Circled plus sign used to add a modern web part to a page .
  1. Choose your desired web part to add to the column, and then insert your content to the web part. Learn about using web parts.

Leave a Reply

%d bloggers like this: