Customize SharePoint site page

In this SharePoint customization tutorial, I have explained how can we customize the SharePoint site page. Here we are talking about how we can customize the modern SharePoint site page.

If you are new to the SharePoint site page, check out an article on Create site page in SharePoint online.

We will also discuss the below topics:

  • Remove banner from SharePoint modern page
  • SharePoint modern page hide left navigation
  • Add a vertical section on the SharePoint modern page
  • Embed Video in SharePoint modern page
  • Embed Excel in SharePoint modern page
  • Embed HTML in SharePoint modern page
  • SharePoint modern page border
  • SharePoint modern page Full-width Section
  • SharePoint modern page background image
  • SharePoint modern page center align
  • SharePoint modern page accordion
  • SharePoint modern site page without header and title
  • Change font in the SharePoint modern page
  • Image sizing in SharePoint modern pages
  • SharePoint modern pages remove white space

Remove banner from SharePoint modern page

Let’s see how to remove the banner from a SharePoint modern page.

  • Open the SharePoint site page, and choose Edit Page to open the SharePoint site page.
  • Click the Edit pencil icon in the Title Area. 
  • Set the Layout to Plain, save and close the SharePoint site page.
Remove banner in SharePoint Modern page
Remove banner in SharePoint Modern page

This is how to remove the banner on the SharePoint Modern page.

Read SharePoint Site Look and File

SharePoint modern page hide left navigation

Let us see how to hide left navigation from all SharePoint site pages. There are two ways, we can hide the left navigation from the SharePoint sites.

Note: The left navigation will be hidden for all the pages (from the entire SharePoint site). If you want to hide for a particular page, you can use SPFx.

To hide left navigation in SharePoint modern pages follows the below-mentioned steps:

  •  Open the SharePoint site page In the Setting Gear Icon -> Select Site Information -> Click the View All Site Settings.
Remove banner in SharePoint Modern page example
Remove banner in SharePoint Modern page example
  • Select Navigation Elements under Look and Feel in the SharePoint site settings.
how to remove banner in SharePoint Modern page
how to remove banner in SharePoint Modern page
  • Uncheck the Enable Quick Launch option and Click Ok, it hides the left navigation on the SharePoint modern page.
how to remove banner in SharePoint Modern page example
how to remove banner in SharePoint Modern page example

This is how we can hide left navigation on the SharePoint Modern page.

There is another way, we can hide the left navigation from all the pages from the SharePoint site.

Open the SharePoint Online site, and click the Edit link in the left navigation or in the quick launch.

Then it will display all the links in the edit more. Here click the … and then select the Remove option. Do this to remove all the links from the left navigation. Then click the Save button.

SharePoint modern page hide left navigation
SharePoint modern page hide left navigation

Once you save this, the left navigation will be hidden for the entire SharePoint Online site.

Read SharePoint page templates

Add a vertical section on the SharePoint modern page

Let us see, how to add a vertical section to a SharePoint site page.

To add a vertical section on the SharePoint modern page, follow the below-mentioned steps:

  • Open the SharePoint site and choose Edit Page on the SharePoint site page.
  • Below the title area of the page and you’ll see a line with a circled + to Add a new section
  • Click + circled icon to add a new vertical section in the Section layout, select Vertical section.
how to add vertical section in SharePoint Modern page example
how to add a vertical section in SharePoint Modern page example

This is how we add a vertical section on the SharePoint modern page.

Read SharePoint Navigation – Add parent site navigation to a subsite in SharePoint

Embed Video in SharePoint modern page

Let us see, how to embed video in a SharePoint modern page.

To add an embedded video to the SharePoint modern page follow the below-mentioned steps:

We can add a video to the SharePoint modern page in three ways, they are,

  1. Directly we can add a YouTube video to our SharePoint Online Page.
  2. Use Embed Web Part to add a Video to SharePoint Online.
  3. Upload video in Microsoft Streams and Embed it in the SharePoint modern site.

Add YouTube Video in SharePoint modern page

  • Follow the below-mentioned steps to add a youtube video to a SharePoint modern page.
  • Open the SharePoint page and choose Edit Page on the SharePoint site page.
  • Click + circled icon then select  YouTube Web Part
how to embed video in SharePoint Modern page
how to embed video in SharePoint Modern page
  • You will now see an area where you can embed code on your right. It must either be a secure https:// URL or an iFrame format.
how to embed video in SharePoint Modern site page
how to embed video in SharePoint Modern site page
  • Click Republish, so that the SharePoint modern site page will save your changes.
embed video in SharePoint Modern page
embed video in SharePoint Modern page

This is how to embed video by using the YouTube web part in a modern SharePoint site.

Embed Video using embed code(iframe) in SharePoint modern page

We can also use the embed web part to embed a video into a modern SharePoint page.

  • Open the SharePoint site and add an embed video. Select Setting gear Icon and choose Edit Page on a SharePoint site page.
  • Click + circled icon then select  Embed Web Part.
embed video in SharePoint Modern page example
embed video in SharePoint Modern page example
  • You will now see an area where you can embed code on your right. It must either be a secure https:// URL or an iFrame format.
how to embed video in SharePoint Modern page example
how to embed video in SharePoint Modern page example
  • Click Republish, so that the SharePoint modern site page will execute your changes.

Embed Stream video on SharePoint modern page

We can use Stream to store videos in Office 365.

If you have a requirement to display some videos, upload the videos on the stream and display them on the SharePoint modern site pages.

Follow the below-mentioned steps, to achieve this:

embed stream video in sharepoint modern page
embed a streaming video in the SharePoint modern page
  • Once Published, click the Share button to get the Embed code for your video.
embed stream video in sharepoint modern page example
embed a streaming video in the SharePoint modern page example
  • Under the Embed option, Copy the Embed code.
how to embed stream video in sharepoint modern page
how to embed a streaming video in the SharePoint modern page
  • Now, open the SharePoint modern page to add and display the video.
  • Choose Edit Page on the SharePoint site page.
  • Click + circled icon then Insert Stream into the Web Part.
  • You will now see an area where you can paste the copied video address.
  • Click Republish, so that the SharePoint modern site page will save your changes.

These are the three ways we can embed a video on the SharePoint modern page.

Embed Excel in SharePoint modern page

Let us see how to embed an excel file in a modern SharePoint page.

To add an embedded Excel spreadsheet to the SharePoint modern page follow the below-mentioned steps:

  • Initially upload the excel spreadsheet to a SharePoint document library, and you want to add embed code to the SharePoint web part page.
embed excel in SharePoint Modern page
embed excel in SharePoint Modern page
  • Once the file is uploaded, simply click on it to open it from the browser.
  • Then select File –> Share –> Click Embed.
embed video in SharePoint Modern page
embed video in SharePoint Modern page
  • Then copy the embed code from the dialog box.
how to embed excel in SharePoint Modern page
how to embed excel in SharePoint Modern page
  • Now, Open the SharePoint site and choose Edit Page on the SharePoint site page.
  • Click + circled icon then select  Embed Web Part.
  • You will now see an embed area on your right, where you can paste the copied embed code.
  • Then Click Republish, so that the SharePoint modern site page will execute your changes.

This is how to embed an Excel spreadsheet on the SharePoint modern page.

Read Registration form design in HTML and CSS with code

Embed HTML in SharePoint modern page

Let us see, how to embed an HTML page to a SharePoint modern site page.

To add an embedded HTML to the SharePoint modern page follow the below-mentioned steps:

  • Initially upload the HTML file to a SharePoint document library to add embed code to the SharePoint web part page.
embed html in sharepoint modern page
embed HTML in Sharepoint modern page
  • Once the file is uploaded, select the uploaded file Click the ellipses, now Select Copy link option to copy the HTML file link.
embed html in the sharepoint modern page
embed HTML in the SharePoint modern page
  • Open the SharePoint site and choose Edit Page on the SharePoint site page.
  • Click + circled icon then select  Embed Web Part.
  • You will now see an embed code area on your right where you can paste the copied link within the Source,(src) and iframe tag.
<iframe src="https://tsinfotechnologies.sharepoint.com/:u:/s/CommunicationSitePage/EajfcHDNArBGkZSYrGGax3gBOINayAY7Q8Al6MD7r3KXTw?e=irC8UF" width="640" height="360"></iframe>
  • Click Republish, so that the SharePoint modern site page will save your changes.

This is how we can embed HTML on the SharePoint modern page.

Read SharePoint column formatting examples

SharePoint modern page border

On a SharePoint modern page, we cannot change the page border, it does not have any options.

SharePoint modern page Full-width Section

The full-width section is currently available only for a SharePoint Modern Communication site. You cannot add a full-width section to your SharePoint modern Team site.

To add a full-width column to your SharePoint Communication site follow the below-mentioned steps:

  • Open the SharePoint site and add a full-width column to the Web Parts.
  • Choose Edit Page on the SharePoint site page.
  • Click + circled icon then select Full-width Section.
full width section in the sharepoint modern page
the full-width section in the SharePoint modern page
  • ImageHero Web Part, and Countdown Timer are the only web parts you can add to the Full-Width section.
full width section in the sharepoint modern page example
the full-width section in the SharePoint modern page example
  • Click Republish, so that the SharePoint modern site page will save your changes.

Add Image web parts with a full-width column in SharePoint

Let us see how to Insert images, by using the image web part with a full-width column in SharePoint.

  • Select Browse images to insert images.
full width column image in sharepoint modern page example
full-width column image in SharePoint modern page example
  • You can select Stock images to insert, you can Upload an image from your PC by using the Upload option or, you can paste the image URL in the link option to insert an image in the full-width column.
  • Select the Insert option to insert an image in the full-width column on the SharePoint modern page.
full width column image in sharepoint modern page
full-width column image in SharePoint modern page

Read SharePoint jslink Examples

Add Hero web parts with a full-width column in SharePoint

Let us see how to add Hero web parts with a full-width column in a SharePoint modern site.

  • Hero web part in SharePoint allows us to add pages, images, links, and documents in various layouts.
  • This can be to a document, image, or page within your SharePoint site, or you can link to another URL (including external sites).
  • you can select the type of layout you want, you can select up to 5 tiles, or up to 5 layers.
  • Select Edit Web Part Icon and choose the Layout options as shown below:
full width column hero web part in sharepoint modern page
full-width column hero web part in SharePoint modern page
full width column hero webpart in the sharepoint modern page
full-width column hero web part in the SharePoint modern page

Add Countdown Timer with a full-width column

Let us see how to add Countdown Timer into web parts with a full-width column on a SharePoint communication site page.

  • Select Countdown Timer and add a Title and a Description.
  • Select the Edit web part option.
  • You can set the display timer option as:
    • Days
    • Days, hours, minutes
    • Days,hours,minutes,seconds
  • You can select Add button to insert the background image.
full width column Timer in the sharepoint modern page
full-width column Timer on the SharePoint modern page

The full-width section is not available on the SharePoint Team Site

You cannot add a full-width section to your SharePoint modern Team site.

  • Choose Edit Page on the SharePoint site page.
  • Click + circled icon.
  • You cannot see a full-width section in the Section layout on the SharePoint Team Site.
full width section in sharepoint team site
the full-width section on the SharePoint team site

This is how we can add a Full-width section to the Communication site on the SharePoint modern page.

SharePoint modern page background image

We cannot change the background image for a modern SharePoint site. But you can use a modern script editor web part in the modern SharePoint Online site.

SharePoint modern page center align

To make the SharePoint modern page alignment as the center follow the below-mentioned steps,

  • Open the SharePoint site page In the Setting Gear Icon ->Select Site contents.
  • Select the Site pages and then Choose Edit Page to open the page.
  • Click the Edit pencil icon in the Title Area. 
  • Select the option Center Under Alignment, save and close the SharePoint site page.
SharePoint modern page center align
SharePoint modern page center align

This is how we can make the SharePoint modern page alignment as the center.

SharePoint modern page accordion

Let us see how to display SharePoint modern page sections in an accordion view on the SharePoint modern page.

  • Open the SharePoint site and choose Edit Page on the SharePoint site page.
  • Below the title area of the page and you’ll see a line with a circled + to Add a new section.
  • Select the Layout option in the section layout.
SharePoint modern page webpart accordion
SharePoint modern page web part accordion
  • Select edit mode in the web part. Enable the Make section as a collapsible group option.
SharePoint modern page accordion example
SharePoint modern page accordion example
  • Once the section collapsible option is enabled, we can see another two options:
  1. You can display a line between two sections.
  2. We can set Collapse/Expand icon alignment to Right or Left.
how to do page accordion in SharePoint modern site
how to do page accordion in SharePoint modern site
  • Enable show divider line between sections you want to Show the divider line between for the section which you have added.
  • Whenever you set the Expand/ Collapse icon alignment to the Left, the section displays as shown below:
SharePoint modern page accordion left example
SharePoint modern page accordion left example
  • Whenever you set the Expand/Collapse icon alignment towards Right, the section displays as shown below:
SharePoint modern page accordion right example
SharePoint modern page accordion right example
  • Enable the Default display section as Expanded or Collapsed. By default, the section will be in the Expanded mode.
SharePoint modern page web part accordion example
SharePoint modern page web part accordion example
SharePoint modern page accordion
SharePoint modern page accordion

This is how we can do page accordion on the SharePoint modern page.

Read SharePoint Online calendar web part

SharePoint modern site page without header and title

If you create a new SharePoint modern page, it will have a header section that cannot be removed. To fetch a blank page with no header on the SharePoint modern page follow the below-mentioned steps:

  • Open the SharePoint site page In the Setting Gear Icon ->Select Site contents and ->Click Site pages library
  • Select the default system account Home page (homepage.aspx) and click Copy to from the command bar as shown below:
SharePoint modern pages without header
SharePoint modern pages without header
  • It opens a sidebar on the right-hand side, click the Copy here button.
SharePoint modern pages without header example
SharePoint modern pages without header example
  • This will create a Home1.aspx file.
  •  Select this site (Home1.aspx file)page, select ellipses, and Rename it with an appropriate name.
Rename SharePoint modern pages without header
Rename SharePoint modern pages without header
  • Once the site page is renamed open the site page and choose Edit Page on the SharePoint site page.
  • As per your requirements, you can remove the existing web parts and add the new web parts and contents.
  • Click Publish or Republish, so that the SharePoint modern site page will save your changes.

Your newly created page will not have any header at the top of the SharePoint Modern site pages.

Example for SharePoint modern pages without header
For example for SharePoint modern pages without header

Change the Title of Renamed site

After you rename and publish the page, you can notice that the newly created SharePoint site page still shows Home in the title of the browser tab.

To change this title, follow the below-mentioned steps:

  1. Open the Site pages library.
  2. Select the page and click the Properties from the command bar or open the details pane.
  3. Change the Title property of the page and make sure it is saved properly.
Example on the SharePoint modern pages without header
For example on the SharePoint modern pages without header

Now it will show the title of the browser tab correctly.

This is how we can create the SharePoint modern page without a header and title in SharePoint.

Read How to Change SharePoint Site Logo

Change font in the SharePoint modern page

There is no option to change a font family on the SharePoint modern page

  • On the SharePoint Modern page, we cannot change the default font family.
  • We can only change the theme for a SharePoint modern page.

Image sizing in SharePoint modern pages

Let us learn about the image sizing on the SharePoint modern page.

In the SharePoint modern page web parts, images that are used will scale differ based on the selected layout and the device’s access to the SharePoint page.

There are three factors to specify an image width or height in pixels, they are

  • Aspect ratio: Defines the connection between width and height of images in the SharePoint modern site page.
  • Column layout: Defines the number and type of columns in your SharePoint modern site page
  • Web part layout: Defines the images used within the web part in the SharePoint modern site page.

Aspect ratio

An aspect ratio defines the connection between the height and width of images. ThIn the aspect ratio width is constantly the first number.

For example, a ratio of 4:3 could be 400 pixels in width by 300 pixels in height.

Column layout

As we know that the SharePoint modern site page includes different layouts and column types, such as one-third left and one-third right columns, full-width columns, one column, three columns, and two columns.

To fill the width of the column, the image must be at shortest as wide as the column. Here is the pixel width per column layout:

LayoutPixel Width
Full-width column
1920
One column
1204
Two columns586 per column
Three columns
380 per column
One-third left column
380 for the left column; 792 for the right column
One-third right column792 for the left column; 380 for the right column
 pixel width per column layout

The heights will be cropped hanging on the image size. The automatic height cropping with all additional column layouts will rely on the aspect ratio of the device’s access to the SharePoint page.

Aspect Ratio16 x 94 x 3
LayoutWidth x Height in pixelsWidth x Height in pixels
One column1204 x 6771204 x 903
Two columns586 x 330586 x 439
Three columns380 x 214380 x 285
One-third left column380 x 446 for left column and 792 x 446 for right column380 x 594 for left column and 792 x 594 for right column
One-third right column792 x 446 for the left column and 380 x 446 for the right column792 x 594 for the left column and 380 x 594 for the right column
Width and Height in pixels

Web part layout

The images scales differ based on the layout selection. The below different web parts examples display different image scale and aspect ratio layouts with one column section layout.

Hero web part

In the Hero web part, there are two different types of layouts available in-hero web part they are tiles and layers.

  • Tiles: The hero web part is scaled by the height of aspect ratio of 8:3 and the inside images of the Hero web part are scaled by an aspect ratio of 4:3.
  • Layers: Each layer is scaled by an aspect ratio of 8:3, and the inside images for each layer are scaled by an aspect ratio of 16:9.

Here is an example of an image shown in the Layers layout at the top and the Tiles layout at the bottom.

Herowebpart in web part layout
Herowebpart in web part layout

Image web part

In the Image web part, We can resize the image using image resize handles to make your image bigger or smaller. We also have an option to change the aspect ratio of the image.

Image webpart in web part layout
Image web part in web part layout

Image Gallery web part

In the Image gallery web part, there are two options they are Image options and Layout options.

  • Image option: We can directly select the images to display or we can dynamically display images from a document library.
  • Layout option: We have three options to select the layouts, such that bricks layout, grid layout, and carousel layout.

This is how image sizing works on the SharePoint modern page.

SharePoint modern pages remove white space

There is no option to remove that space or the web parts. In SharePoint modern pages, there is always about 30-40% of the screen that is unused.

  • We cannot remove the white space directly in SharePoint modern pages.
  • We cannot inject the CSS style property in the SharePoint modern pages,

To achieve this we have to use the custom code. We can use SPFx Applications Customiser to inject the CSS style for the modern pages.

You can refer to the following link for the SPFx Applications Customiser to inject the CSS style for the SharePoint modern page: SharePoint modern pages remove white space using Application Customizer

You can also refer to this link for the SPFx script editor web part: SharePoint modern pages remove white space using Script Editor

Related SharePoint tutorials:

Conclusion

In this SharePoint tutorial, we have learned how we can customize the SharePoint site page and discussed the below topics:

  • Remove banner from SharePoint modern page
  • SharePoint modern page hide left navigation
  • Add a vertical section on the SharePoint modern page
  • Embed Video in SharePoint modern page
  • Embed Excel in SharePoint modern page
  • Embed HTML in SharePoint modern page
  • SharePoint modern page border
  • SharePoint modern page Fullwidth Section
  • SharePoint modern page background image
  • SharePoint modern page center align
  • SharePoint modern page accordion
  • SharePoint modern site page without header and title
  • Change font in SharePoint modern page
  • Image sizing in SharePoint modern pages
  • SharePoint modern pages remove white space
>