Sign in with Microsoft
Sign in or create an account.
Hello,
Select a different account.
You have multiple accounts
Choose the account you want to sign in with.

Bring focus and visual interest to your page and video with the Hero web part. You can display up to five items in the Hero web part and use compelling images, text, and links to draw attention to each. The Hero web part is included by default on Communication sites, but you can also add the Hero web part to other pages.

If the videos are set up in Hero webpart they will play inline while you can stay and browse through the same page instead of being taken to a new window. 

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

Notes: 

  • You must have Edit permissions to create pages. If you are an owner but you are unable to add a page, your administrator may have turned off the ability to do so.

Contents

The Hero web part on Communication sites: Topic and Showcase

When you create a Communication site, the Hero web part is included on your page by default. It is pre-populated with default images, text and links that you change to showcase your own images, text, pages, links, or documents.

When you select Topic for the type of communication site you want, the default hero is a tiled layout with five tiles (which you can change from one to five):

Hero web part on Communication site

When you select Showcase for the type of communication site you want, the default hero is a vertical layout with three layers (which you can change from one to five layers):

Showcase Hero

You can change the layout of the Hero web part from a grid to vertical layers using the Edit web part button Web part edit button, and you can change the links, images, and text for each tile or layer using the Edit details button Edit details for each tile or layer.

Hero Edit buttons

1. Edit web part button

2. Edit details button

Change the layout of the Hero web part

Watch this video to see how it's done, or follow the steps below the video.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.
  1. If you are not already in edit mode on your page, select Edit on the top right of the page.

  2. Select the web part Edit web part button Web part edit button on the left and select the type of layout you want - you can select up to 5 tiles (like that on a Topic site), or up to 5 layers (like that on a Showcase site).

    Hero Layout Options Hero Layout options

Change the focal point of an image

In SharePoint in Microsoft 365, you can change the focal point on a selected image within the Hero web part to get the most important part of your picture in the frame.

  1. If you are not already in edit mode on your page, select Edit on the top right of the page.

  2. Select Set focal point Set focal point button in the toolbar on the bottom of the Hero image you want to change.

  3. Drag the focal point where you want it in the image.

    Focal point

Reorder tiles or layers

You can reorder tiles or layers by moving them where you want.

  1. If you are not already in edit mode on your page, select Edit on the top right of the page.

  2. Select and hold the Move item button, and then drag the tile or layer where you want.

    Hero Move item

Put the Hero web part in one column

The Hero web part is designed to take up the full width of the page. If you would rather the Hero web part didn't take up the full width, you can add move it into a column that is not full width.

Watch this video to see how it's done, or follow the steps below the video.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.
  1. If you're not in edit mode already, select Edit at the top right of the page.

  2. Hover your mouse just above the Hero web part, and select the circled + on the left of the web part

  3. Under Section layout, select one column.

    One column
  4. On the left side of the web part, use the Move web part button to drag the Hero web part into the column you just added.

    Move web part button

    Moving Hero

Add an empty Hero web part to a page

You can add a Hero web part to a page in a Team site or a Communication site. To do this:

  1. If you are not already in edit mode on your page, select Edit on the top right of the page.

  2. On your page, hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:

    Plus sign for adding web parts to a page

    Select +, and then choose the Hero web part.

    Hero web part in an empty state
  3. Select the web part Edit button Web part edit button and select the type of layout you want - a grid from 1 to 5 tiles may be used, or 1 to 5 vertical layers.

  4. Select Select link for each tile you want to change.

  5. For each tile, in the toolbox, select Select, and then choose a location from which to get your link:

    In the toolbox, select Change, and then choose a location from which to get your link:

    Image of file picker options.
    • Recent: If you have recently opened images, pages, or documents you'll find them listed here.

    • Web search: You can find images from Bing that utilize the Creative Common license. You are responsible for reviewing licensing for an image before you insert it on your page. SharePoint in Microsoft 365 only.

    • Your organization: If your organization has specified a set of approved assets, you'll be able to choose from that set here.  If you're a SharePoint Admin and want to learn how to create an asset library for Your organization, see Create an organization assets library.

    • OneDrive: You can get a link for a document or image you have stored on OneDrive. SharePoint in Microsoft 365 only.

    • Site: You can get a link for a document, image, or page from a Site you specify.

    • Upload: You can upload a document or image from a personal device.

    • From a link: Enter a link for your page, document, or image from OneDrive for SharePoint in Microsoft 365.

  6. Select your image, page, or document and click Open.

  7. In the toolbox, under Image, select Custom image or Color only. The Auto-selected option automatically selects an image from the page or document that you are linking to, if one is available. Color only is available just for the Tiles layout, and the color corresponds to your site theme color.

  8. Enter Alternative text for the image.

  9. Under Options (SharePoint in Microsoft 365 only):

    • You can show a Call to action link by switching the toggle to Yes. Then add your Call to action text (for example, "Learn more"). The Call to action link is available for each layer in a layered layout, but only for the largest tile in a tiled layout.

    • For a layered layout, you can also show a Topic heading for each layer by switching the toggle for Topic heading to Yes. Then add your Topic heading text.

Image scaling in the Hero web part

To choose fitting sized images for the Hero web part, consider the following:

  • The web part is designed to fit the width of the screen in a full-bleed a layout.

  • In the Tiles layout, the height of the web part is scaled to follow an aspect ratio of 8:3, and images inside the web part scale to an aspect ratio of 4:3.

  • In the Layers layout, an individual layer scales to an aspect ratio of 8:3, and images inside each layer scale to an aspect ratio near 9:16.

Note: You can add a link to a video or upload a video to the Hero web part. Videos are now supported in Hero web part with the integration of Stream. 

Need more help?

Want more options?

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Was this information helpful?

What affected your experience?
By pressing submit, your feedback will be used to improve Microsoft products and services. Your IT admin will be able to collect this data. Privacy Statement.

Thank you for your feedback!

×