Modern SharePoint Web Parts: Introduction

Microsoft released the “Modern” page experience for team sites in SharePoint Online in the Fall of 2016, and more recently for SharePoint Server 2019. The Modern page experience includes the ability to add web parts directly within the page. As of June 2019 when this article is being written, there are 55 built-in web parts available to add to a modern SharePoint page, with more being added regularly.

You can see an overview of the Modern Web Parts on this Microsoft page, which includes links for further information on each web part. This article is the first in a weekly series to be published each Wednesday, where we’ll give you additional details about each web part and examples of their use. But first, a bit about SharePoint Modern pages…

Working with a Modern SharePoint Page

To customize a Modern page in SharePoint, first place the page into Edit mode, using the Edit link on the right side of the action menu bar. .

Customizing the Page Header

In the title area of the page, you can replace the default generic header by clicking on the Image icon and uploading your own image.

Change page header image
Change page header image

Alternatively, you can search the web for appropriate images. There’s really a fairly nice selection of generic right-sized images in different categories, or you can enter search text to get images of anything you like from the web. Note, though, that you may wish to use the Creative Commons Only filter to ensure you’re not violating image copyrights.

Image web search
Image web search

After uploading the image, an icon will appear in the center of the header which allows you to move the center of focus for your image, since the header area is fairly wide and short.

You can also modify the style of the title area – for example to show a title block in the center, and add text above the title.

Modify title area
Modify title area

These are some great ways to make a page your own! In the screenshot below, I’ve used an image from the 2019 SharePoint Conference promotional video, and selected the color block title style.

Page Title area example
Page Title area example

Modern SharePoint Page Sections

Sections on a Modern SharePoint page allow you to create areas with a variety of layouts in which to add web parts. When you first edit a page, you’ll see a + at the bottom left corner of the heading area – this allows you to add a new section in addition to the default editing area which is the width of the page. Clicking on the + opens a Section Layout dialog where you can select the number and arrangement of columns for this section.

Choose section layout
Choose section layout

You’ll find that some content fits better in one or the other layout; we’ll mention some of those considerations as we go through this series. Note that if your page is on a Communication site, you’ll see an additional layout called Full-width, which spans the entire width of the page including edges.

August 2019 update: A new section type, Vertical, is now available. This gives you a vertical column on the right side of the page. The height of the column is based on the amount of other content on the page. This might be a nice place to add a number of smaller web parts, such as your weather or clock web parts – anything you wish to stack separately from the rest of the page.

Vertical Section
Vertical Section

After selecting a layout, you’ll see new icons appear to the left of the section. These icons allow you to edit, move, or delete the section.

Section toolbar
Section toolbar

If you select to Edit the section, a Section pane appears on the right, where you can change the layout, or choose to add background shading to set it apart from the rest of the page.

Section edit pane
Section edit pane

August 2019 update: There’s now an option to duplicate a section, which literally copies the whole section, including its content, just below the current section. This allows you to easily replicate a set of web parts, and then just change the configuration of each web part to display different content.

Duplicate section
Duplicate section

Adding SharePoint Modern Web Parts to a Page

A SharePoint page would be nothing without web parts; they display content to people viewing the page. As the page designer, you can add and arrange these web parts right within the page layout to present the information you wish people to see.

After you click Edit on the page, you’ll see a small + icon near the center of the page below the page header area…

Add a web part
Add a web part

Clicking on the + opens a dialog which allows you to select a web part to add.

Dialog to add a web part
Dialog to add a web part

Each web part has its own configuration settings, which is what we’ll be covering in this blog series. But any web part will always have at least the options to edit, move, or delete it.

Web part toolbar
Web part toolbar

Generally, selecting Edit will open a pane on the right which will contain configurations specific to that web part. Selecting Move will allow you to drag the web part into another section or column on the page, or just rearrange web parts within a section. And Delete will of course prompt you to be sure that’s what you mean to do.

August 2019 update: In addition to Edit, Move, and Delete functions, you can also now Duplicate an individual web part. This copies the web part, including its configuration, just below the current web part. Of course, you can then move it wherever you like. The idea behind this would be if you want to have another of the same web part but with different content or different scope, etc. So you could just tweak the copy to be slightly different.

As you’re probably aware, things are often changing in SharePoint Online, so there may be additional features of Modern pages available when you read this, but this should give you an idea of the options available to you.

In this blog series we’ll go through each of the built-in SharePoint web parts (grouping some similar ones together), so you’ll end up with a comprehensive resource for creating useful and attractive SharePoint pages without needing to purchase anything additional or do any coding.

We look forward to bringing you along on this tour!

Articles in this SharePoint Modern Web Parts series

Bing Maps and MSN Weather web parts

Button and Call to Action web parts

Document library and File viewer web parts

Embed, Kindle, and YouTube web parts

Events, Group calendar, and Countdown timer web parts

Highlighted content web part

Image and Image gallery web parts

Hero, Link, and Quick Links web parts

List and List properties web parts

Microsoft Forms web part

News web part

Page properties web part

People web part

Planner web part

Power BI web part

PowerApps web part

Recent documents and Site activity web parts

Quick chart web part

Sites web part

Stream and Office 365 Video web parts

Text, Markdown, Code Snippet, Divider, and Spacer web parts

Twitter web part

Yammer Conversations and Highlights web parts

Web parts requiring an Office 365 connector

Lightning Tools Modern web parts

Related Posts

Leave a comment