I really enjoy the new Modern experience of SharePoint Online communication sites; however, this requires creating a new SharePoint Online site collection at /sites/new site for the path. The client requested to have the root site branded with the Modern experience. However, while I was able to get the page to appear as the modern experience, I could not match it to the new modern communication sites template 100%. Please post any comments if you have any suggestions to convert the root site to match the communication site look and feel.
SharePoint Online Admin center settings
In the SharePoint Online Admin Center, make sure these settings are all default:
|SharePoint Lists and Libraries experience||New experience (auto detect)|
SharePoint Online root site settings
Next, navigate to your root site, yourcompany.sharepoint.com.
Note how the Modern Experiences is only enabled on lists and libraries by default now days:
To create your first modern page, go to your Pages library. From here, you can create a new “Site Page” which contains all of the new modern page experiences:
Now you can add modern web parts, edit layouts, etc.:
Once finished, publish the page.
Setting modern page as homepage
Go to the pages library, then set the new modern page you published as the homepage by clicking “Make homepage”:
Removing left Quick Launch navigation, attempting to match a classic site to a modern communication site (fail)
The page is now modern, but the quick launch is showing. Modern communication sites do not have this.
This is not easy, unless you want to cheat with CSS. But my goal is to replicate the OOTB new Modern communication site experience on classic pages.
I compared the Site Features between a Classic site and a New Modern Communication Site:
The classic site has the following Site Features activated:
|Mobile Browser View||Active|
|SharePoint Server Enterprise Site features||Active|
|SharePoint Server Publishing||Active|
|SharePoint Server Standard Site features||Active|
|Team Collaboration Lists||Active|
|Wiki Page Home Page||Active|
Maybe some of these features are the culprit, but nothing stood out.
When I compared the navigation, I found that the Communication sites use Current navigation across the top.
I thought this can be set by swapping the masterpage from “Seattle” to “Oslo” on the Classic site, but it did not affect the modern page I created on the classic site. Crazy.
I also noticed there is no Full Width web part on the modern experience:
So as close as you can get it OOTB is:
Update- how to add a full width web part
If you want to add full width content, you can insert a full-width layout/section to your modern page:
Once you add the full width section, you can add a Hero or Image web part. I dont like these, so I created a custom SPFx jQuery Bootstrap carousel and found a hack to allow the custom web part to appear in this special full width region:
SPFx web part full width hack:
Then, I can add custom HTML/CSS/jQuery to the full width region.
I sometimes copy the home.aspx over and over for subpages so I don’t get the big ugly image banner like I would get OOTB on subpages.
Here is an example of something our team has worked very hard on. I have 1 SPFx web part for the carousel (full width hack) and a SPFx extension for the footer. I sanitized it a lot and excluded a lot of the other web parts due to the data:
If anyone knows how to move the left Quick Launch to under the Site title to match the Communication site template, let me know. Also post any comments about other differences you find between the Modern page on a classic site vs the new Modern communication sites (aside from the O365 group).