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.

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.

• Select Navigation Elements under Look and Feel in the SharePoint site settings.

• Uncheck the Enable Quick Launch option and Click Ok, it hides the left navigation on the SharePoint modern page.

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.

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.

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

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

• Click Republish, so that the SharePoint modern site page will save your changes.

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.

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

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

• Login into the Microsoft Steam at https://web.microsoftstream.com/ and upload the video and publish it.

• Once Published, click the Share button to get the Embed code for your video.

• Under the Embed option, Copy the Embed code.

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

• Once the file is uploaded, simply click on it to open it from the browser.
• Then select File –> Share –> Click Embed.

• Then copy the embed code from the dialog box.

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

• Once the file is uploaded, select the uploaded file Click the ellipses, now Select Copy link option to copy the HTML file link.

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

• Image, Hero Web Part, and Countdown Timer are the only web parts you can add to the Full-Width section.

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

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

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:

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.

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.

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.

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.

• Select edit mode in the web part. Enable the Make section as a collapsible group option.

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

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

• Whenever you set the Expand/Collapse icon alignment towards Right, the section displays as shown below:

• Enable the Default display section as Expanded or Collapsed. By default, the section will be in the Expanded mode.

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:

• It opens a sidebar on the right-hand side, click the Copy here button.

• This will create a Home1.aspx file.
•  Select this site (Home1.aspx file)page, select ellipses, and Rename it with an appropriate name.

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

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.

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:

Layout	Pixel Width
Full-width column	1920
One column	1204
Two columns	586 per column
Three columns	380 per column
One-third left column	380 for the left column; 792 for the right column
One-third right column	792 for the left column; 380 for the right column

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 Ratio	16 x 9	4 x 3
Layout	Width x Height in pixels	Width x Height in pixels
One column	1204 x 677	1204 x 903
Two columns	586 x 330	586 x 439
Three columns	380 x 214	380 x 285
One-third left column	380 x 446 for left column and 792 x 446 for right column	380 x 594 for left column and 792 x 594 for right column
One-third right column	792 x 446 for the left column and 380 x 446 for the right column	792 x 594 for the left column and 380 x 594 for the right column

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.

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

• Display modal pop up in SharePoint Online
• Save site as template in SharePoint
• How to Change Favicon in SharePoint Online
• SharePoint Online Image Slider
• How to add links to the top link bar in SharePoint
• How to Create a Tiles View using SharePoint Online modern list view customization

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