Use the Hero web part

The Hero web part on Communication sites: Topic and Showcase

When you create a Communication site, you can start with a Blank site or choose one of the other site templates, each of which comes with a default set of web parts. Some of these communication site templates come with the Hero web part, such as:

• Standard communication: share information such as news, events, and other content.

• Showcase: use photos or images to showcase a product, team, or event.

In these templates, 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 the Standard communication template, the default hero is a tiled layout with five tiles (which you can change from one to five):

When you select the Showcase template, the default hero is a vertical layout with three layers (which you can change from one to five layers):

You can change the layout of the Hero web part from a grid to vertical layers or carousels, using button (1) Edit properties (), and you can change the links, images, and text for each tile or layer using button (2) Edit details () for each tile or layer.

1. Edit web part button

2. Edit details button

Change the layout of the Hero web part

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

1. You can select the one of the three layouts available for Hero web part: Carousel, Tiles and Layers. You select the layout by either selecting Edit properties () on the top left of the web part and then select the layout from the layout dropdown menu:
   
   
   
   Or you can select the type of layout you want in the web part Property Pane:
   
   

2. In the web part Property Pane, choose:

   • Add a slide for Carousel layout
      

     Tips: 

     • For Carousel layout, to enable/disable the auto slides transition, you can turn on/off the toggle Autoplay.

     • ​​​​​​​

   • Add a tile for Tiles layout

   • Add a layer for Layers layout
     

• Note: you can select up to 5 tiles (like that on a Standard communication site), or up to 5 layers (like that on a Showcase site), or up to 5 images in the carousel. 

Change the image, text, and links for each tile or layer

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

1. Select Edit details () at the bottom right of the tile or layer you want to change.

2. In the Property Pane, select Change, and then choose a location from which to get your link:

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

   • Stock images Stock images are provided by Microsoft. They are high-quality and sized just right for your use. If you're a SharePoint admin, we recommend that you enable a Content Delivery Network (CDN) to improve performance of getting images.

   • 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 or SharePoint in Microsoft 365.

     Note: Links external to your site will not show an image preview in U.S. Government GCC High and DoD, and Office 365 operated by 21Vianet.

3. Select your image, page, or document and select Open.

4. In the Property Pane, under Background image, select Custom image or Color only (Color only is available just for the Tiles layout, and the color corresponds to your site theme color).

   The Auto-selected option automatically selects an image from the page or document that you are linking to, if one is available.

5. Enter Header for the image.

   • 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.
     
     ​​​​​​​

     Note: ​​​​​​​​​​​​​​The Carousel layout has 3 new styles. You can set different styles (Image overlay, Text block, Diagonal split) for each slide to vary the content presentation.

     

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 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.
   
   

Reorder carousel images, tiles or layers

You can reorder carousel images, 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. In the Property Pane, select the three dots ellipsis next to the image, tile or layer, then select Move up or Move down to reorder. For tiles and layers, you can also just select the image, then hold and drag the tile or layer where you want.

Put the Hero web part in one of two or three columns

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 do it by changing the section's layout.

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 Two columns or Three columns.

4. Your Hero web part now is in the left column of the two or three columns in the section. 

5. To move the Hero web part, select the image, then hold and drag it into the column you want it to be.

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. Find the Toolbox () on the right.

2. Select See all web parts, then select or drag-and-drop Hero from the list of web parts.

3. Select Edit properties () 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:

   • 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. 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

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.

When will the Carousel layout be available?

General Availability (Worldwide, GCC, GCC High, and DoD): Rollout begins in mid-January 2025 and will be completed by the end of the month.

What's Happening to the Existing Layouts after the Carousel layout being added?

As part of the updates to the Hero web part, the following changes have been made:

• Item Management Updates

  The way you manage items in the Hero web part has changed. Instead of setting the number of items (1-5), you can now directly add or delete items using the new intuitive Slide interface. This simplifies the process of customizing the Hero web part to meet your specific needs.​​​​​​​​​​​​​​ ​​​​​​​

• Property Pane Adjustments

  While the UI in the property pane for the Tiles and Layers layouts has been refreshed for a more modern experience, the functionality of these layouts remains unchanged.

•  No Impact on Existing Layouts

  If you’re currently using the Tiles or Layers layouts, rest assured that they will remain as they are. There will be no automatic conversion to the new Carousel layout, ensuring that your existing pages continue to look and function as expected.