fbpx

Company News

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

November 2, 2017

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.

23 Responses

  1. Anthony says:

    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.

  2. Sarath says:

    Still not able to get the Full wide section for Hero Webpart

  3. Alex says:

    Hi when I try to follow your instructions the full width option on the new section – what could be the reason?
    Thanks

  4. Alex says:

    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!

  5. Irma says:

    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.

  6. Hi, Ive followed your instructions and done the control and F5 but still the information is not showing, pls advise, thanks, Sally

    • Karin Skapski says:

      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. roxana says:

    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?

    • Karin Skapski says:

      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!

  8. Aske says:

    Hi karin,

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

    • Karin says:

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

  9. sandra says:

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

    • Karin says:

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

  10. Maecy M Borras says:

    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

    • Karin says:

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

  11. John Allan Canning says:

    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!

    • Karin says:

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

  12. John Allan Canning says:

    How do you get the full width section option? I do not see this on my site.

  13. Patrick Wegge says:

    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.

Leave a Reply

Karin Skapski

Karin Skapski

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us