UPDATE 9/27/2019- Microsoft this month is releasing a way to “Swap” sites. So create a new modern site collection, then swap it with the root. Invoke-SPOSiteSwap https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/invoke-spositeswap?view=sharepoint-ps#description

If the target is the root site at https://tenant-name.sharepoint.com, then the following preparation activities should be performed prior to performing the swap:

1. Any Featured links defined in SharePoint Start Page at https://tenant-name.sharepoint.com/_layouts/15/sharepoint.aspx will not be displayed after performing the swap. If required, the Featured links should be documented so they can be manually recreated after the swap.
2. Functionality such as external sharing and application interfaces are dependent on the policies and permissions defined at the root site. Review the source site to ensure that it has the required policies and permissions as per the existing root site. This includes external sharing settings as well as site permissions.

UPDATE 1/30/2019- Still waiting for the below MS Ignite command. While we wait we can try Jeff Jone’s approach of forcing creation of a modern communication site using the classic site wizard with a client side developer trick: https://www.spjeff.com/2018/12/31/video-create-modern-communication-for-root-site-in-tenant/

UPDATE 9/27/2018- At #MsIgnite, Microsoft just announced a way to convert the root site into a modern communication site using PowerShell!
https://twitter.com/jeffteper/status/1045159986291200000?s=20

Enable-CommSite -url https://yourtenant.sharepoint.com $username [email protected] $password puppies123

Note: this might be the tenant admin url? https://yourtenant-admin.sharepoint.com

This new PS command is not yet publicly available. We just demo’ed it at this session in Ignite. (link: https://myignite.techcommunity.microsoft.com/sessions/65744) myignite.techcommunity.microsoft.com/sessions/65744. We hope to start rolling this out to customers by the end of 2018. Thank you for the enthusiasm and interest.

My old post-

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 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:

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:
https://blog.velingeorgiev.com/how-add-spfx-webpart-full-width-column

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:

Closing thoughts

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