How To: Create a Full Width Hero Web Part in a SharePoint Online Communication Site - Karin Skapski (2024)

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

   1. Ha, you’re right. Good catch. I’ve updated my post to remove that part. Thanks Patrick. 🙂

   2. Thank you both! Spent an hour online and this was the answer.

   3. Do we have same option available in SP online subsite as well.
      When I try to create a full width webpart its not happening. Please help me on this if you have any ideas….

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

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

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

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

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

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

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

   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.

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

10. 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!

    1. Hi Alex, at the moment I don’t know that it is possible out of the box. Sorry!

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

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

    1. Please go back and walk through the instructions again – if you follow each step, you will be able to. 🙂

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

    1. Great observation Anthony. I wonder if the people experiencing difficulty here are having trouble because they’re trying to get a full-width Hero in a Team Site.

       Here’s the Microsoft User Voice link to vote for the feature.

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

15. Yeeees thank you! I’ve been looking all over for this!

16. Wow, thank you so much for this tutorial!! Saved me a lot of time finding it!!

17. Thanks, saved me. Stupid thing to get stuck on.

    1. Not stupid if this many people have gotten stuck on it 😉

18. WOW!!!! Thanks Karen. You have no idea how much you made my day.

    I had updated my old tenant site to a modern page using SharePoint PowerShell but at one point, somehow screwed up and removed the default hero wp. At the time I didnt even know what a hero wp was LOL.

    I ended up learning how but then couldn’t get the full width. You save the day.

    Thanks you so much for posting this!!!!!!!!!

    1. Carl, thank you so much for your generous response! I’m so glad to hear this fix helped you get your Hero web part back – and that you know what one is now, haha!

19. Thanks for saving me from pulling my hair out.

    1. LOL, happy to help! 🙂

20. Pingback: web part – How to make a webpart in SP online Modern Experience full width – 100% Best Unlimited Private Proxies: Fast, Cheap and Secure

21. Pingback: web part – How to make a webpart in SP online Modern Experience full width – Proxies-free.com: 100% Free Daily Proxy Lists Every Day!

Comments are closed.