Introduction

Microsoft released the “Modern” page experience for team sites in SharePoint Online in the Fall of 2016. This included the ability to add web parts directly within the page user interface, but there weren’t very many Modern Web Parts available at that point. As of late September 2017 when this article is being written, there are 22 web parts available to add to a modern SharePoint page. At Microsoft’s Ignite event in late September 2017, there were some additional modern web parts announced (such as a Forms web part, a Planner web part, and an improved Yammer web part), but these are not yet generally available.

You can see an overview of the Modern Web Parts on this Microsoft page, which includes links for further information on each web part. My article will give you some additional details about these web parts, along with some examples of their use.

Adding a Modern Web Part

To add a web part to 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. In the screenshot below, I’ve just created a new Site Page in a SharePoint Online modern Team Site, named it “Sample Site Page”, and uploaded an image to replace the default generic header image.

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

Clicking on the + opens a dialog which allows you to select either a web part or a section to add. Sections are a relatively new feature, whereby you can select a three-column display or various two-column displays, rather than a single column of the whole page width. You can read more about this feature here. This article will focus only on the web parts, however, grouped by functionality and listed alphabetically.

Static Content Web Parts

These are web parts which do just that: simply display something on the page that you’ve entered for that purpose.

Bing Maps Web Part

The Bing Maps Web Part allows you to display a map of any address or point of interest you enter. By default when it’s added to a page, it displays the “road” view of your current location, but then you can type in the location you wish the map to display to users, and you can switch to Aerial (satellite) view or Streetside view (which is not available for all locations). If you select Aerial view, you can choose to turn labels (of streets and place names) on or off. You can also zoom in and out from within the web part, and add a Title if you wish. After saving, your users can switch views, but cannot change the location or title, or zoom level. The view will always default back to the one you set, though, when the page is reloaded.

If you click to edit the web part, you have the option to show a label for your pin (i.e. the location you entered), and if so, what exact text you wish to display (for example, if you want to give your users more information than just the address).

Embed Web Part

When you select the Embed Web Part, the editing panel immediately appears, allowing you to paste a website address or embed code. For example, you could embed a YouTube video on your page, allowing users to play the video directly from there. Note that this is different from the Link Web Part, which will only display a preview of a video and require the user to actually follow the link to play it.

Beginning in May 2017, Microsoft added the ability to embed a PowerApp on a SharePoint page, using the Embed Web Part. Please see this article for more information.

File Viewer Web Part

This is the new version of what had been called the Document Web Part. According to announcements at Ignite, this web part will allow previews of 270 types of files, so it’s no longer just for documents. However, as of this writing (just after Ignite), while the web part’s name has been changed, it currently still only displays an Office document (i.e. Word, Excel, PowerPoint).

For now, this is similar to the Image Web Part, this allows you to display a document on the page. You can add a description below the document, similar to a caption.

The document will be embedded on the page, and users can page through it directly from there. Options to edit the web part vary by the document type. For example, if it’s a PowerPoint presentation, you can select which slide should be displayed first. For a Word document, you can select the start page. If it’s an Excel workbook, there are additional display options:

After the page is saved, users will also have access to a menu allowing them to download or print the document, among other things:

Hero Web Part

This web part was added with the rollout of Communication sites in the summer of 2017. It’s a visually attractive web part which allows you to add visual links to pages, images, or documents in various layouts. Microsoft has quite a detailed page about this web part, as it’s a big part of a Communication site.

You would first want to select a layout, choosing anywhere from one to five tiles, or you can select Layers, which is a more vertical layout showing an image and text alternating from side to side. After choosing the layout, click on any tile or layer to add a link. This can be to a document, image, or page within your SharePoint site, or you can link to another URL (including external sites) if you’re sure your users will be able to view it.
Note that you’ll probably want to only link to items with an associated image, as this web part is really meant to give visual interest to your page. If the user clicks on the image, it will open the image link, or if you linked to a document then the document will download.
After adding a link by clicking Select Link in one of the Hero content areas, an image from the link will be displayed automatically; for example, this might be an image from a document you’ve linked to. When you hover over the tile or layer, you’ll now see a small edit icon in the lower right, which you can use to edit the link text, the image, and some other options – the sections are described below. In the lower left is a Move icon, to move the tiles/layers around within the Hero Web Part.

Link (this section is not expanded in the screenshot above): Here you can change the link you initially entered, and enter text for a Topic (in this example, I typed “Modern Lists & Libraries”) and for a Description if you wish (I copied some text from the beginning of the document).
Image: By default, an image is auto-selected (seemingly randomly) from your document. But if you wish, you can select the Custom Image option, which allows you to upload or select an image to display. If you’ve linked to something without an image which the web part can auto-generate, then you would need to add a Custom Image. You can also type some Alternate Text in this section, an accessibility option for those who cannot see the image.
Options: Here you can choose whether or not to show the Topic heading (in a Layer layout) and the Call to Action link, and if so, what text to display. In the example above, I entered a Topic, but chose not to show the Topic heading (which would say “Topic” above the headline). The Call to Action is what allows your users to click to download the document, if that’s appropriate. This option will be disabled by default if you’ve linked to an image rather than to a document, and the option is not available in the smaller tiles of a tile layout.

Image Web Part

This web part allows you to choose an image from recently uploaded images or from the current SharePoint site, from a link to OneDrive or another SharePoint site, or to upload an image from your computer.

After adding the image, you can click on Add a caption if you wish to do so, or click on the Edit icon to add Alternative Text (for accessibility purposes). It’s not currently possible to resize the image, so you’ll want to either do that before uploading it, or perhaps add it to a 2- or 3-column layout section if you don’t want the image taking up too much space on your page. In the screenshot below, I edited the current Section to be two columns (1/3 – 2/3) after adding the picture web part.

Image Gallery Web Part

This web part gives you a way to display a collection of images rather than a single image. You can add a title for the collection at the top of the web part. Editing the web part allows you to select the layout (Tiles or Carousel), and if you’re using the Tiles layout you can also select the aspect ratio (1:1 square – the default, 16:9 wide, or 4:3 standard).

To add images, you can either browse to select them from SharePoint or from your computer as you can with other web parts, or you can drag images directly onto the web part while the page is in Edit mode. After an image is uploaded, click the Edit icon to edit its properties: Title, Caption, and Alternative Text. The Title and Caption will be visible to the user when they view the full-size image by clicking on it from the Tiles layout, and the Title (only) will appear below the image when you use the Carousel layout. You can rearrange the images by dragging them within the web part when you’re in the Tiles layout.

Link Web Part

This web part allows you to enter a single link to a URL, and displays a preview of the page, video, or image. You can choose to remove the display of either the URL or the preview by clicking the x next to it. There are no options available via the Edit icon.

Office 365 Video Web Part

Here, you can select one video to display from your O365 Video portal. Note, however, that Office 365 Video is being replaced by Microsoft Stream, which has its own Modern web part

Feel free to share in the comments below innovate uses of these web parts or if we had missed some SharePoint modern web part