Using Layers in the Hero web part in SharePoint pages

If you’ve created SharePoint pages, you’ve probably used the Hero web part to display up to five windows of content. But Sandra showed me a variation of the Hero web part that I’ve never noticed before… layers! Layers gives you a different layout and the opportunity to have more context in each of the areas. Here’s how that works and looks…

To add the Hero web part, search for Hero in the web part dialog panel and select it:

The default layout is a tile format, with five tiles being displayed. But you can change the number of tiles, as well as switching from Tiles to Layers:

I’ve edited the web part by clicking on the Pencil icon, and updated the Layout options to use Layers instead of Tiles:

Here’s an updated version of the first window of the Hero web part, using Layers. You’ll notice that the window takes up the entire column, and (looking at the picture above) the following windows alternate between the picture area being on the left and right side. By clicking on the Pencil icon to edit this specific window, you’ll see how you can add images and the content on the right side:

The Link content is what will be displayed in the image area. The Title is the bold content in text area. The Description is up to 500 characters of text beneath the Title area:

Continuing down the panel, you have the opportunity to change the background image, show a topic heading (and configure the words), and show a call to action link with a configurable URL:

So would you want to use layers instead of tiles in all instances? Probably not. On a home page of a site, the tiles layout shows content without any scrolling, and that’s probably the best approach. But on other pages where you possibly want to show a step-by-step progression (or provide more context on each grouping), using layers is definitely the way to go.