Customize Modern SharePoint Online Site

In this Modern SharePoint Online tutorial, we will discuss how we can design a SharePoint Online modern site. Here we will create a travel page where we can display a banner, some travel news, adventure travel trip overview videos, upcoming travel events, travel adventure teams, etc.

We will also discuss what is SharePoint Online Modern Site Pages, How we can create Modern Site Page in SharePoint Online.

And also, We will discuss how we can Add/Edit web part, Disable comment section, Remove left navigation, etc in the modern SharePoint site.

We will also discuss various web parts available in SharePoint Online modern sites.

What is SharePoint Online Modern Site Pages?

SharePoint Online Modern Site Pages are responsive by nature, very easy to use. You can easily create attractive pages without any developer knowledge.

The Site Page looks great and so attractive on any device, in any Browser, etc.

Create Modern Site Page in SharePoint Online

To create Modern Site Page in SharePoint Online, Open any Modern SharePoint Online Team Site. Click on Pages from the left navigation. Click on +New option from the command bar and then Site Page as shown below.

Once you will click on Site Page, then your Site page will appear like the below screenshot.

Provide a name for your Modern Site Page and then publish the page. After publishing the page, the page name will show you like below.

Design a SharePoint Online Modern Site (Travel Site Home Page)

Here I will discuss some features of Modern Site Page. So that your page will become attractive.

There are three icons present on the site page which helps to edit the web part, Change the image and Reset to the default image. All these about three icons I have explained below.

Edit web part

If you want to edit the web part, then click on the below icon.

Once you will click on the edit icon, then the below settings page will appear on the existing page. There are four types of Layout as:

• Image and title: If you will choose this layout, then the Modern Site Page will appear with the image and title.
• Plain: If you do not want to show the image background, Only you want to show Page title, then you can choose this layout.
• Color block: If you want to highlight the color block on the page, then you can go for this layout.
• Overlap: If you want to overlap the page title on the image, then you can choose this layout.

Similarly, you can select the title alignment whether you want to show the title in Left or Center. You can enable the alignment as per your requirement as like below screenshot.

In the same way, If you want to provide some text above the Title, then enter the text in the Text above title field.

As per my requirement, I have chosen the Plain Layout with Center Alignment. Also, I have provided the Text above the Title which is reflecting in the page.

Hence I have provided all these things, So my Modern Site Page looks like the below screenshot.

Change Image

If you want to provide some image or if you want to change the image of the Site Page, then by using the Change image icon, you can change.

Once you will click on the Change image icon, it will ask you to choose an image from the various options as like:

• Recent: Any recently uploaded images you can show by this option.
• Web search: To search for any image from any website, this option you can choose.
• Site: To choose any image from any Site, You can select this option.
• Upload: If you want to upload an image from your PC, then you can select this option.
• From a link: To choose an image from any particular link, You can select this option.

Hence I have selected one image from the Web search, So the image is appearing like below screenshot.

Disable Comments on Modern Site Home Page

If you do not want to view this comment section (present in the footer) on your Site page, then you can disable this comment option. So that it will not appear in the footer section anymore.

To disable the Comments, Just toggle off the Comment switch.

Make a Sub link in the left navigation of Modern SharePoint Site Page

You can make a Sub link in the left navigation on the page. Click on Edit.

Select one navigation that you want to make a sub-link. Here in the below screenshot, I want to make a sub link as Pages. So I have clicked on … symbol and Make sub link.

Now you can see that the Pages became a sub-link of Notebook s like below screenshot.

Again if you want to remove the sub-link, then go to that Pages -> Click on … symbol -> click on the Promote sub link as shown below.

Remove the Left navigation from SharePoint Modern SharePoint Site Page

You can remove the Left navigation from the SharePoint Site Page So that the whole page you can utilize for your site design. By removing left navigation, the page will look so attractive.

To remove the Left navigation from the page, click on Edit. Click on … the symbol that you want to remove and click on Remove.

Once you will remove all the left navigation, just click on Save as shown below.

Modern SharePoint Site Page Command Bar

Here we will discuss some command bar options of Modern SharePoint Online Site page. When you will edit the Site page, In the command bar, you will see there will be three options as:

• Save as draft: This Save as draft option helps to save the modern site page that you have designed and also it makes as a draft if it is not completed.
• Discard changes: This Discard changes option helps to remove all the changes that you had made earlier on the modern site page.
• Page details: If you want to view the details of the modern site pages, then click on Page details from the command bar. Once you will click on this option, then the below screenshot will appear where you can see the modern Site Page details.

Section Layout in Modern SharePoint Online Site Page

In the Modern SharePoint Online Site Page, You can divide the page with different section layouts. To create different Page section layout, Click on the + icon which will be present at the left edge corner of the page.

Once you will click on + icon, it will show you all types of Section layout as:

• One column
• Two columns
• Three columns
• One-third left column
• One-third right column

One column Section Layout

If you will select One column from the Section Layout, then the page will appear like the below screenshot.

Two columns Section Layout

If you will select Two columns from the Section Layout, then the page will divide with the two different sections which you can see as shown below.

Note:

In the same way, You can create rest all section layout as Three columns, One-third left column and One-third right column. When you will choose any one of the layout, then the page will divide as per their functionality.

Section Layout Features in SharePoint Online Site Page Design

There are some features present in the SharePoint Online Site Page Section Layout. By using these features, you can provide an attractive design to your Site Page as per your requirement.

These Section Layout features are:

• Edit section
• Move section
• Delete section

Edit section

When you will click on the Edit icon, then it will appear like the below screenshot. In the section properties, You can choose any Layout options and as well as any Section background as per your requirement.

Move section

The Move icon helps to move a section from one place to another inside the Site Page. If you want to move any particular section from up to down or down to up, then simply you can drag and drop this move icon.

Delete section

If you want to delete any unwanted section from the Site page, then you can use this Delete icon option.

Once you will click on this delete icon, it will ask you to sure that you want to delete your specific section. If you want, then click on Yes otherwise No as like below screenshot.

Modern Web Parts in SharePoint Online Site Page

Modern SharePoint Web Parts are the built-in apps that help to process various types of content.

Web parts are such type of things where you can store the document in the Document Library Web part, Update some events using Calendar Web part, Upload some images using Image Web part, Update the weather information using Weather Web part, etc.

Add a Web part in SharePoint Online Site Page

To create a Web part in SharePoint Online, First of all, Edit the Site page. Select the place where you want to add the web part and click on + icon.

When you will click on + icon, then you can see some web parts available in the minimized position. To view all the SharePoint Online Modern Web Parts, Click on maximize arrow icon as like below screenshot.

Once you will maximize the Modern Web parts, then it will display as shown below. To see other web parts, Click on See all option on the right side corner.

Here I will show you how we can add a Modern Web Part to SharePoint Online Site Page by taking an example.

Add News Web Part to SharePoint Online Modern SharePoint Site

To add News Web Part to SharePoint Online Site Page, Edit the Site page and Click on + icon. Search the News Web part in the search box. Once you will find the News web part, just click on it.

Now you can see the News Web part is added to the Modern SharePoint Online Site Page. You can Provide a Title to the News Web part.

To view all the Properties of News Web part, Click on Edit icon and then the below property page will appear.

In the News property Web Part, Select any type of news source whether the news is for that existing Site, any selected sites or Is it recommended for the current users.

Choose any one Layout to view the News in the SharePoint Online Site page. Hence I have chosen the Layout as Top story, So the News Web part is appearing like the below screenshot.

As per my requirement, I have chosen the layout as Side-by-side. That’s why the News Web part is looking like below screenshot. Now you can add any updated news once the Site page is published.

Below screenshot represents the whole Modern SharePoint Online Site page which I have designed by using some of the modern Web parts. What web parts I have used to make this page, I will explain below:

• News: In the first section, I have used the News Web Part which I have explained in the above example.
• YouTube: In the second section, I have used the YouTube Web part. In this Web part, you have to just add the Youtube link.
• Event: In the third section, I have used the Event Web part. To know more about the Event Web part, Follow the below article:

Add Calendar List in the Modern SharePoint Online Site Pages

• People: In the end section or footer part, I have used the People Web part. To know more about the People Web part, Follow the below article:

You may like following SharePoint Online modern tutorials:

• Create Modern Team Site and Subsite using pnp csom programmatically in SharePoint Online
• Save list as template missing in SharePoint Online modern team site
• Difference between classic search experience and modern search experience in SharePoint Online Office 365
• SharePoint Online Modern List: Explore 11 New Features
• SharePoint Online Group Calendar Web Part Tutorial
• Quick Chart Web Part in Modern SharePoint Online Site
• Add Document Library and List web part to Modern Pages in SharePoint Online/2019
• Convert classic SharePoint site to modern communication site using PowerShell

Hence in this Modern SharePoint Online tutorial, We discussed what is SharePoint Online Modern Site Pages, How we can create Modern Site Page in SharePoint Online.

And also, We discussed how we can Edit web part, Disable comment section, Remove left navigation, etc in modern SharePoint Online site.

After all, we saw how we can create and use the Modern Web Part and what are the Modern Web parts are present in SharePoint Online.

We saw how we can design a modern SharePoint site in SharePoint Online Office 365.