How To Convert Classic Site UI Into Modern UI In SharePoint

Problem

 

In the SharePoint Online tenant, your root site is by default a Team site (classic experience). If you want to create an intranet portal for your organization, you will need a communication site template. And, you will love if the URL is as small as possible like tenantname.sharepoint.com which is your current root site. Unfortunately, you can’t change the template of root site into communication or modern team site.

 

That’s the default template of root site; you can’t change it.

 

 

So, how to get rid of this classic page and UI?

 

 

Solution

 

There are two solutions to this problem. Choose whichever you like.

1. Do some configuration changes in Root site to make it look like a Modern Site
2. Create a separate communication site – and add a redirect script on the root site home page and let it redirect to a new communication site – so if a user types only root site URL they will be redirected to a communication site

First Solution

1. Hide left side navigation
   First, we need to hide the quick launch navigation section. If you have observed on the modern communication site, the pages are occupied with full width. To get that feeling we need to hide left side navigation.
   
   Go to Site Settings >> Click on Navigation Elements

 

Uncheck “Enable Quick Launch” >> and click on OK.

 

 

This will remove left side navigation.

• Create a new modern page and make it as home page
  
  Let’s add a new page now. Click on the Gear icon and "Add a page".

 

This is a modern page. Add your content which you want to show on the home page of your portal, add required web parts and save the page. This is how the end result of this solution will look when you set this as the home page.

 

 

Go to site content >> Site pages library >> select newly created page >> Make it a Home page as shown below.

 

 

That’s it, click on the site logo now and check how it looks. Isn’t it looking like a communication site? This should be enough for some of you. If not, then keep reading 😊.

 

There are still flaws in this option – you can’t get rid of the Title Area on the page, in communication site home page there is not a Title are. Your content is always left aligned – so if you are looking at this site on bigger screens, then the content will be left aligned and not center aligned.

 

To overcome this, there is an app available to download and install which hides the title section and make all web part zones centrally aligned. Thanks to Luis Ribeiro and Joao Ferreira for this ready-to-use app. Download it from here and install it.

 

Second Solution

 

Ok, I don’t want to all the above, I don’t have time to do all that. No problem.

 

Create a separate site with a communication site template, add your content, design your home page as per your wish.

 

Let’s add a simple script on the root site (classic experience) home page – which will redirect the user to the new communication site. Believe me, it will be so fast that the user won’t really understand.

 

Use below script, add a Script editor webpart on a classic home page of a root site,

<script>
var isPageEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (isPageEditMode == "Edit")
{}
   else
   {
      location.href = 'https://yourtenantname.sharepoint.com/sites/communicationsite';
   }
</script>

Summary

 

To summarize this article, Microsoft has not provided any easy solution to change the template from Team Classic experience to Modern templates. So, we must play some tricks to make it look like a modern site OR make the end user feel like they are accessing the root site and redirect them to a proper communication site. I hope this helps.