How To: Create a Full Width Hero Web Part in a SharePoint Online Communication Site

Are you having trouble when you try to create a full width Hero Web Part in a SharePoint Communication Site? Don’t worry, you don’t have to create a brand new Communication Site to get it back.

 

This might be the scenario:

Gee, those new Communication Sites in SharePoint look swell… check out that full width Hero Web Part!

SharePoint Communication Site

 

Let’s create one from scratch by clicking on the plus sign symbol, then selecting the Hero Web Part.

SharePoint Communication Site - Hero Web Part

 

Hmm, that’s not full width…

SharePoint Communication Site - Hero Web Part

 

Ok, not a problem, I’ll just change the settings/Layout options. Wait, there’s no option to make this Hero Web Part full width. Where could it be?

SharePoint Communication Site - Hero Web Part Layout

 

That’s right, of course it’s not the Web Part itself but its container that dictates the column width. I’ll just edit the column, then…

SharePoint Communication Site - Column Settings

 

Where’s the option to make my Hero Web Part full width? Shouldn’t it be here? What do I do now?

SharePoint Communication Site - Container Layout Options

Yep, not so user friendly…

 

How to Create a Full Width Hero Web Part in a SharePoint Online Communication Site

Here’s the secret. If you want to add your own full width Hero Web Part, you’ll have to specify that you want a full-width section before you put the web part in it.

Hover on the dotted line after your section, then click on the plus sign on the left to add a new section.

Then, choose Full-width column.

 

Next, you should see the option to choose between an Image or a Hero Web Part. Click on the Hero.

 

Ta-daaaaa!

Disclaimer: SharePoint Online is constantly changing. This may change, too. At the time I write this, it’s correct. If you’re reading this and that’s no longer the case, please let me know so I can update my post.

 

Enjoyed this post? Leave a comment for me below, or find me on Twitter.

26 responses to “How To: Create a Full Width Hero Web Part in a SharePoint Online Communication Site

  1. If you already have a Hero webpart you don’t have to delete it. Now you can move it to the new full wide section.

  2. How do you get the full width option for the section? Mine only shows 5 different column layouts like yours but is missing full width. Thanks!

    1. Hi John, it looks like SharePoint has made some changes… the option is still there, but it’s moved somewhere different. I’ve updated my post to reflect these changes.

      Please refresh this page using Ctrl + F5 (ie. a “hard refresh”), and scroll to the bottom of the post where the fix is, under the header “How to Create a Full Width Hero Web Part in a SharePoint Online Communication Site”. You’ll see the new instructions there.

      Let me know how this works for you, hope it goes well. 🙂

  3. I believe this will work only for the main site but not the subpages that you created. Still, the “full width” option is not available

    1. Hi Maecy, the reason you were unable to use this tip on subpages is because my instructions were out of date. The settings to add a full-width section were moved since I originally made this post, but I’ve updated the post with my new directions, which I’ve tested on modern pages as well.

      Please refresh this page using Ctrl + F5 (ie. a “hard refresh”), and scroll to the bottom of the post where the fix is, under the header “How to Create a Full Width Hero Web Part in a SharePoint Online Communication Site”. You’ll see the new instructions there.

      Let me know if this works for you. 🙂

  4. Looks like it’s been removed, I’ve just tried to follow your instructions and full-width column is not there.

    1. Hey Sandra, you’re right, it’s not there anymore… SharePoint moved it! Thank you for leaving a comment to let me know. I have updated this post to reflect the change.

      Please refresh this page using Ctrl + F5 (ie. a “hard refresh”), and scroll to the bottom of the post where the fix is, under the header “How to Create a Full Width Hero Web Part in a SharePoint Online Communication Site”. You’ll see the new instructions there.

      Hope it works for you! Keep me posted. ?

  5. Hi karin,

    Thanks of lot for your help! I still can’t see the updated guide – do you have it on another page?

    1. Hi Aske, it is on the same page and probably easy to miss as the screenshots look almost identical to what I had before. There is just a very slight change.
      Do a Ctrl+F for “Here’s the secret.” and read from there. 🙂

  6. Hi Karin,
    Thanks for the fix guidance. I am actually facing the other way around problem. Our team’s communication SharePoint allows us by default to create full width Hero web parts. I need to have the zoom out version, as we have a lot of content and full width would just make our SharePoint extremely busy. Do you know how to revert this process?

    1. Hey Roxana, if you create a new section and choose “One Column” instead of “Full Width Column” you should be able to add the same Hero web part but in a boxed layout. Let me know how this works!

    1. Hi Sally, do you mean on my blog post? Search for “Here’s the secret.” and the new information should be there on how to create a full width web part.

  7. Hi,

    Can you please advise if this ‘hero’ work to embed list from different sharepoint site? I tried to embed the link into the ‘hero’ webpart, it only shows a blank part.

    Thanks.

  8. Hi Karen,
    I was wondering if it’s possible to have the hero web part run down along the right side of the column, without having to have the tiles in one box – like a slideshow.
    My goal is to have all five tiles laid down, in a column, with a calendar on the left.

    Thanks!

  9. This functionality is NOT available for Sharepoint Team Sites, only for Sharepoint Communication sites.

    If you’re here and wondering why the ‘Full-Width Column’ option is not available when creating a new section, it’s because you’re editing a Team Site. Talk to your sharepoint admin about this. Also, please complain to Microsoft until they allow this on Team sites.

  10. Is it possible to display dynamic content on the hero webpart? That is always read the top 5 rows containing title, description and image from a particular list

Leave a Reply

Your email address will not be published. Required fields are marked *