Hero Web Part in SharePoint Online Modern Site

In this SharePoint tutorial, we will discuss what is Hero Web Part in SharePoint Online modern site? How to add the hero web part in SharePoint online modern site and how SharePoint Online modern site hero web part works?

Hero Web Part in SharePoint Online Modern Site

Hero Web Part is a Web part which is used to showcase your own images, texts, links, documents etc.

If you are new to SharePoint Online, check out below SharePoint Online tutorials:

• SharePoint Online Modern List: Explore 11 New Features
• How to use People web part in SharePoint Online
• How to set modern home page in classic SharePoint site in SharePoint Online Office 365?

Add a Hero Web Part in Modern SharePoint Online Site Page

We can add a Hero Web Part into a modern SharePoint online home page by using these below steps-

Step-1:-

First of all, go to your Site. In that site, click on the “+” option to add the Web Part. After clicking the option, a search box will appear on that site. In that box, Search “Hero” Web Part as like the below screenshot.

Step-2:-

After adding the “Hero” Web Part, it will display like below. Then go to the “Edit” mode of the “Hero” Web Part. Here a “Layout” option will come to choose the Hero layout.

There are two Layout options are present like “Tiles” and “Layers”. First, select “Tiles” and here you can choose any tiles whatever you want whereas Here I have chosen Fice tiles. so that in the Site, the tiles will appear like a given screenshot.

Step-3:-

Here if you will select the “Layers” option and select two layers then it will display in layer option in that site.

Step-4:-

As I have chosen the “Tiles” option, here it is displayed below. Go to the “Select link” of the Hero Web Part.

Step-5:-

After clicking on “Select link”, an upload item page will come for image uploading purposes. you can upload the image by various options like “Recent”, “Web search”, “OneDrive”, “Site”, “Upload” and as well as “From a link”.

Here I was selecting the “Upload” option to upload the image from my system. Then click on to “Add item”.

Step-6:-

Here in this screenshot, go to the “Edit” mode of the first section of “Hero” Web Part. Then after a settings page will appear in that site. There is present a “Link” option.

If you want to show a specific website from the internet then here you can change the URL. Just click on “Change”.

Step-7:-

As I need the URL address from a link, so I clicked on “From a link” option, copy that website from the internet and paste that link into the box. click on “Open”. Then the URL changed in the “Hero Settings”.

Step-8:-

Here you can give “Title” also whereas I gave “SharePoint” like below.

Step-9:-

In “Image” option, select “Custom image” and here if you want to change the image option then click on to “Change” option and change the image of “hero”. You can give the “Alternative text” also which can’t see the people.

Step-10:-

Like the first section of Hero Web Part, in the same way, you can fill the rest sections. After completing all the total sections of Hero Web Part, we can see the whole structure of the Hero Web Part as like below.

Conclusion

In this SharePoint tutorial, we learned SharePoint Online modern hero web part, how to add and configure hero web part in SharePoint Online modern site page.