SharePoint Hero Web Part: Build an Intranet Home Page Hero Step by Step

Five links, one banner, no scrolling: that was the brief for the new SPGuides intranet home page. Our communications lead wanted news, policies, the help desk app, training and events up top, and the SharePoint Hero web part handles exactly that without a line of code.

In this tutorial, we’ll build that banner from an empty page. You’ll set up the SharePoint hero web part in a full-width section, link five tiles, size the images the way Microsoft recommends, add a call to action, set focal points and test it on a phone.

Along the way we’ll compare Tiles, Layers and Carousel, and cover what to do when five tiles aren’t enough. Here’s what we’re building:

Before You Start

What is the Hero web part in SharePoint?

The Hero web part is the big visual banner at the top of most modern SharePoint home pages. It shows up to five items, each with an image, a header and a link. It ships on every new communication site, and you can add it to team site and communication site pages alike.

New communication sites come with it already configured. The Standard (Topic) template uses Tiles with five tiles, while Showcase uses Layers with three layers. Both are pre-filled with sample images and links, which is why so many intranets look the same until someone edits them.

What you need

• Edit permissions on the site (members or owners can edit pages by default).
• A communication site if you want an edge-to-edge banner. Full-width sections exist only on communication site pages; on a team site the Hero sits inside a normal column.
• Five landscape images, one per tile, with no text baked into them. We picked ours from SharePoint’s Stock images.
• The five link targets already published, so the picker can find them.

Here’s the plan we sketched before touching the page (all pages live on /sites/SPGuidesNews). Writing it down first saves a lot of back-and-forth in the editor:

Tile	Header	Links to	Image	Call to action
1 (large)	Company News	SitePages/Company-News.aspx	Stock: team meeting (kept from the template)	Read the news
2	HR Policies	SitePages/HR-Policies.aspx	Stock: office meeting room	Not available
3	Service Desk	Service Desk Demo app (apps.powerapps.com play link)	Stock: brick office	Not available
4	Training	SitePages/Training.aspx	Stock: classroom	Not available
5	Events	SitePages/Events-Calendar.aspx	Stock: conference audience	Not available

SharePoint Hero image size: what Microsoft recommends

Microsoft’s image-sizing guidance gives aspect ratios rather than one fixed pixel size, because the Hero scales with the screen. These are the numbers to plan around:

Layout or view	Web part shape	Image inside	Good source size
Tiles	8:3 (height scales to width)	4:3	1920 px wide or more
Layers	8:3 per layer	near 16:9	1920 x 1080 px or larger
Mobile (any layout)	Shown as a carousel	16:9	Covered by the 16:9 crop

Images should be at least as wide as the column they sit in. A full-width section is 1920 px wide, a one-column section 1204 px, two columns 586 px each and three columns 380 px each. Uploading images at least that wide keeps tiles sharp on large monitors without bloating the page.

Because the same image gets cropped to 4:3 on a desktop and 16:9 on a phone, keep the subject in the middle third. That’s also where the focal point in Step 5 comes in.

Step 1: Add a Full-Width Section and the Hero Web Part

We start with a fresh home page on /sites/SPGuidesNews so nothing from the template gets in the way. If your page already has a Hero, skip to Step 2 and just edit it.

1. Open the page and select Edit at the top right.
2. Hover over the top of the canvas, select the circled + and choose Full-width section under the section layouts.
3. Inside the new section, select + again, search for Hero in the toolbox and select it.

Want it narrower, next to a news feed? Use Two columns or Three columns instead; the Hero starts in the left column and you can drag it across. Our guide to custom HTML and CSS on modern pages explains why you can’t simply restyle the section with code.

Checkpoint: an empty Hero with placeholder tiles and a Select link prompt on each one.

Step 2: Choose the Tiles Layout and Five Items

The layout decides how the five links look, so set it before adding content.

1. Select the Hero, then Edit properties (the pencil at the top left of the web part).
2. Under Layout, pick Tiles.
3. Add or remove items in the list until you have five. Once you reach five, the Add a tile button is grayed out.

Tiles gives one large tile on the left and four smaller ones on the right, which matches our plan. If you’re still shaping the site itself, read creating a custom site template in SharePoint Online so new department sites start with the same Hero.

Checkpoint: one large tile plus four small tiles, and Add a tile grayed out because five is the limit.

Step 3: Link Each Tile and Set Its Image

Every tile needs a link, an image and alternative text. We’ll do the Company News tile first, then repeat for the rest.

1. Select Edit details at the bottom right of the tile.
2. Under Link to an image, page, document, or video, select Change. The Pick an item picker opens with Home, My files, My organization, From a link, Site, Stock images and On this device on the left.
3. For the news page we chose From a link, pasted the Company-News.aspx URL and selected Select.
4. Under the background image, choose Custom image and select Change. In Pick a file, open Stock images, search (we used classroom for Training) and select Select.
5. Set Open link in a new tab the way you want it; it was on by default for our tiles.
6. Under Accessibility, fill in Alternative text, or turn on Mark as decorative for purely decorative images.
7. Type the header (Company News) directly on the tile. It uses the text toolbar’s heading styles, Heading 2 by default.

Two other background options are worth knowing. Color block fills the tile with your site theme color instead of a picture. Auto-selected image pulls an image from the linked page or document if it has one, which is handy for news pages with a banner.

For the Service Desk tile we linked the Power Apps app’s web link. If you’d rather show the app itself on the page, see how to embed Power Apps in a SharePoint modern page.

Videos work too: link to one and it plays inline so readers stay on the page. If you clear a header’s heading style it drops to Normal text, so reapply Heading 2 to keep the tiles consistent.

Checkpoint: each tile shows its own image and header, and hovering a tile on the published page shows the link target in the browser’s status bar.

Step 4: Add a Call to Action Button

A button gives the main tile a clear next step. In the Tiles layout only the largest tile can have one; in Layers every layer can.

1. Open Edit details on the large Company News tile.
2. Turn on Show call to action link.
3. Enter the Call to action text (40 characters max). We used Read the news.
4. Replace the Call to action link. It defaults to a go.microsoft.com address, so paste your own page URL; we used Company-News.aspx.

Keep the button text to two or three words, and always check the link field; a forgotten default sends readers to Microsoft instead of your page. If you need several buttons side by side, a SharePoint editorial card web part or the standalone Call to action web part fits better.

Checkpoint: a Read the news button on the large tile only.

Step 5: Set the Focal Point on Each Image

Since the Hero crops images differently on each screen, the focal point tells SharePoint which part must stay visible.

1. Select the image inside a tile to show the image toolbar.
2. Select Set focal point.
3. Drag the point onto the important part of the picture, such as a face or a product, then click outside the image.

Focal points are a SharePoint in Microsoft 365 feature, so you won’t see the button in on-premises SharePoint Server. They pair nicely with a custom SharePoint theme, because brand colors on the page make cropped photos look intentional.

Checkpoint: when you narrow the browser window, the faces in the Training and Events tiles stay in frame.

Step 6: Reorder the Tiles and Republish

Our first draft had Events in the second slot. The team wanted policies there, so we moved it.

1. In Edit properties, find the item you want to move.
2. Select the ellipsis (More options) next to it and choose Move up or Move down. The same menu has Delete; the last item only offers Move up and Delete.
3. Or drag a tile straight to its new spot on the canvas, which works for Tiles and Layers.
4. Select Republish at the top right.

If people other than page editors keep moving tiles around, lock the page down; here’s how to set SharePoint pages to read-only for members.

Test the Hero Web Part on Desktop and Mobile

We tested the published page as a reader, not an editor, because edit mode hides some behavior.

• Desktop: every tile opened the right page, the Read the news button appeared on the large tile only, and the banner stretched edge to edge.
• Narrow window: the tiles shrank but kept the 8:3 shape, and the focal points held the subjects in view.
• Phone: Microsoft documents that the Hero becomes a 16:9 carousel on mobile, which is why the 16:9 crop matters even for Tiles.

Check the page with someone outside the site’s owners group too. Tiles linking to restricted content still show, but the reader gets an access request instead of the page. Our hub site vs subsite comparison helps plan where policies and training should live so permissions line up.

Tiles vs Layers vs Carousel: Which Layout Fits?

All three layouts hold the same five items. What changes is how much each item gets to say.

Layout	Looks like	Call to action	Best for
Tiles	One large tile plus up to four smaller ones	Large tile only	Home pages with five equal destinations
Layers	Full-width rows, image and text alternating sides	Every layer	Storytelling pages, campaigns, onboarding
Carousel	One slide at a time, optional Autoplay	Per slide	Rotating announcements

Layers also has a Topic toggle and text box (40 characters max), shown as the small label above each layer’s title, such as POLICY UPDATE or NEW HIRES. It helps readers scan long pages, so keep it to one or two words.

The Carousel layout adds an Autoplay toggle and Add a slide. Each slide has its own Style (Image overlay, Text block or a diagonal split), Overlay color, Overlay opacity, Left/Center/Right alignment, a Topic and a call to action. Existing Hero web parts aren’t converted for you, so you switch layouts yourself.

How does the Hero carousel compare with other carousels? The Image gallery carousel only shows pictures, and the Highlighted content web part builds its carousel from a query, so it updates itself. Pick the Hero when you hand-pick five items and want headers and buttons on them.

Need More Than 5 Tiles in the Hero?

You can’t. Five tiles, five layers or five carousel slides is the hard limit, and there’s no setting to raise it. These are the workarounds we’ve used on real intranets:

• Add a second Hero in the next section with another one to five tiles. It looks like one bigger grid if both use Tiles.
• Move the extra links to Quick links under the Hero. The SharePoint Quick links web part has no five-link cap and its tile layouts sit well below a banner.
• Rotate content: point one tile at a news page that you update weekly instead of adding a sixth tile.
• Use Highlighted content when the items come from a list or library and change often.

Quick links also solves a second gap. The Hero has no audience targeting, while Quick links, News, Events and Highlighted content do. If finance and HR need different shortcuts, put those in a targeted Quick links web part.

Make It Production-Ready

• Alternative text on every image; the Hero won’t warn you if it’s missing.
• No text inside images: it gets cropped on phones and screen readers can’t read it. Use the header and Topic instead.
• Link to pages, not files, when you can. A page URL survives a document being renamed or moved.
• Plan navigation alongside it: the Hero covers top tasks, and a SharePoint dropdown navigation menu covers everything else.
• Review the tiles monthly; stale banners are the fastest way to teach people to ignore the home page.

Troubleshooting

• No Full-width section option: you’re on a team site page. Use a one-column section, or move the home page to a communication site.
• Faces cut off on phones: set the focal point (Step 5) and use images where the subject sits in the middle third.
• No call to action on a small tile: expected in Tiles; only the large tile gets one. Switch to Layers if every item needs a button.
• Button goes to a Microsoft page: the Call to action link still has its go.microsoft.com default; replace it with your URL.
• Blurry images: the source is narrower than the column; re-export at 1920 px wide for full-width sections.

Where to Take It Next

Once the Hero is live, add a calendar under it so the Events tile has a twin on the page; see how to add a calendar to a modern SharePoint page. For more page and web part walkthroughs, browse our SharePoint tutorials hub.

If you’d like guided practice building intranet pages, our SharePoint training course walks through communication site pages step by step.

A few more SharePoint page and web part guides you might find useful:

• SharePoint Page Viewer Web Part [SharePoint Online & Classic]
• SharePoint Site Left Navigation or Quick Launch
• How to Use SharePoint Group Calendar Web Part?
• SPFx Web Part Audience Targeting: Show Content to the Right People

Frequently Asked Questions