Customize SharePoint Site Home Page [using Out of Box Web Parts]

In a recent engagement, I worked with a customer whose internal IT Support team needed a dedicated collaboration space. So, we created a SharePoint team site and, rather than relying on the default home page, designed a custom home page aligned with their internal processes and branding standards.

In the custom home page, we added a few out-of-the-box SharePoint Online web parts to give a rich look and feel.

In this tutorial, I will explain how to customize a SharePoint site page using out of box web parts. You will learn how to make professional home pages for SharePoint sites.

Note: If you have created a custom site page, you need to set it as the home page for the SharePoint site.

Customize SharePoint Site Home Page

Often, you might need to customize the default home page of a SharePoint site. You can follow the same steps that I explained below. But for this example, I created a blank SharePoint site page and did all the customization there. Finally, I set this custom page as the home page of the SharePoint site.

Set Up the Navigation in SharePoint Online

By default, we get left navigation in a SharePoint team site. But the client wanted to have the navigation at the top of the page. Here are the steps to set up navigation at the top of a team site.

1. Open the SharePoint site, click the Gear icon, then click Change the look. Click on Navigation, then under the layout section, select Horizontal. Choose the Menu style as per your choice. Here, by default, we have Cascading. Click on Save.

2. Once you click Save, you can see the navigation has moved to the top, as shown in the screenshot below.

Create a Blank SharePoint site Page

Our next step is to create a blank SharePoint Online Site page. But you can even modify the default team site home page.

For that, please follow the instructions below.

• Open the SharePoint site, click +New, then click Page. Choose Create blank, and it will navigate to a blank page. Click on the Page at the top of the page, enter the page title, and click on Save and Close.

Now that the SharePoint blank page has been created, we will add some web parts to it.

Customize the Top Hero Section of a SharePoint Site Page

Once the page is created, I have added a hero section at the top to make the page look more attractive.

But before that, when you create a blank site page, by default, it will add a banner web part to the top section of the page. Let me show you how to remove it.

1. Edit the SharePoint site blank page, and then the page will look as shown in the screenshot below. Here we can see the banner web part at the top of the page, and we can remove it. To do that, click the delete symbol, and then the banner is removed.

2. Once the banner is removed, click on the + icon to choose the section. Here, I decided to use the Flexible layout.

3. Then click the Toolbox on the right side of the page and select the SharePoint Hero web part. Here, I chose Tile Layout and added three tiles. You can see the setting in the screenshot below:

3. After adding the three tiles, you can see the hero section as shown in the screenshot.

4. Besides the hero section, I have added the out of box SharePoint Text web part, here I added a heading and a few lines of description.
5. Below the Text web part, I have added a SharePoint quick links web part to display three useful links. Here, I choose the button layout and fill color (Here, the color is based on the theme we choose). You can see what the right section looks like in the screenshot below.

6. Here is how the hero section of the SharePoint home page looks. We have the Hero, text, and quick links web parts added, as shown in the screenshot below.

Add Call to Action to the SharePoint Online Site Page

Then I have added a Call to Action web part under the Hero section. If team members need help and want to raise a ticket, this Call to Action web part helps them submit their ticket.

Here, we have added this Call to Action web part with a Button labeled “Raise a Support Ticket” and pasted the Button link, so that when they click the button, they will navigate to the page where they can submit their issue.

Now you can see the Call to Action web part is displayed as shown in the screenshot below.

Display Training Resources and FAQs in SharePoint Online Page

The client wanted their team members to access the Training Resources and FAQs by simply clicking a link.

For that, we have added the Quick Links web part with Grid Layout and given the title as Training Resources. So that whenever team members want to access resources, they can click the quick link and access them.

Here, I have added six quick links so the training resources are displayed on the SharePoint Online page, as shown below.

Besides, the training resources I have again added the Quick Link web part with the Button layout, no outline, and entered a title “Frequently asked questions“.

This is how the Frequently Asked Questions are displayed in the SharePoint Online page.

Finally, both Training Resources and Frequently Asked Questions are displayed as shown in the screenshot below.

Display Events in SharePoint Online Page

My organizations like to display events on its home page. Here also, we used an events web part to display the upcoming events from the SharePoint site.

I have also displayed all upcoming events from that site, including all categories. For that, we have added the events web part to the SharePoint Online site page. Then, I have chosen the source as Events list on this site and Date Range as All upcoming events.

After adding the Events web part, it displays all upcoming events, as shown in the screenshot.

Display Team Members in SharePoint Online Page

The client wants to display all their IT team members on the SharePoint Online site page. So we have added the People web part below the events web part. Here, we chose Small Layout and entered the title “Meet Our IT Team“.

Here, you can see that the People web part is displayed on the SharePoint Online page, as shown below.

Set the Customized page as the SharePoint Site Home Page

After all these customizations, we need to set this page as the home page of the SharePoint team site. For that, please follow the steps.

• Open the SharePoint Online site, click the Gear icon, then click on Site Contents and click on Site Pages document library. Select the page you have customized, click on three dots, then click on Make Homepage.

• Once you click Make homepage, the customized page is displayed in the SharePoint site home page as shown below.

Conclusion

In this tutorial, I explained how to customize a SharePoint Online site home page. In particular, we discussed how to add various web parts, such as the Hero web part, the quick links web part, the events web part, and the people web part, to create a professional page.

Do let me know in the comments below if you need any help customizing your intranet portals.

You may also like the following tutorials:

• Convert SharePoint Site to Microsoft Teams
• Create a Hub Site in SharePoint Online
• Create Page Templates in SharePoint Online
• Convert SharePoint Site to Microsoft Teams

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.