SharePoint Online Step by Step Tutorial on how to create a new custom master page by using existing master pages in SharePoint Online

Office 365 SharePoint online master pages
InfoPath alternatives for form designing SharePoint

Here we will discuss how to create a new custom master page by using existing master pages in SharePoint Online. Here I am doing the demo in an Office 365 SharePoint Online site. If you have not tried yet about Office 365 SharePoint Online features, then you can sign up for a 30 days trial of Office 365 and start explore now.

Before doing this demo also make sure you have installed SharePoint 2013 designer in your local system or any other system which you can access to make edit. SharePoint designer is a free tool which you can download and install from MSDN site also.

Also you can read:
– SharePoint 2013 Create custom master page using Visual Studio 2013

– SharePoint 2016 Fast Site Collection Creation using PowerShell

– Steps to create master page using design manager in SharePoint 2013

Follow below steps to create a master page fro sharepoint online using designer:

Open the site in SharePoint Designer 2013 -> Go to Master Page from the left pane in designer

create master page sharepoint online
create master page sharepoint online

Select the html file of the respective master page that you are going to edit, and right click over it to open it as HTML (it might ask to check out the file, but don’t check out)

 

SharePoint online create master page using design manager
SharePoint online create master page using design manager

Copy the complete content of the opened html file into Notepad and save it in to the local drive as a html file.

 

SharePoint online create master page sharepoint designer 2013
SharePoint online create master page sharepoint designer 2013

Now open your site collection in browser and go to site collection settings page. Click on “Master pages and page layouts” link under “Web Designer Galleries”. It will open all the master page and layout

 

how to create master page sharepoint online
how to create master page sharepoint online

Now add the saved html file to this document library.

Create master page using sharepoint designer 2013 sharepoint online
Create master page using sharepoint designer 2013 sharepoint online

Select the content type as “Html Master Page” in the “Add a master page” dialog, and save it

 

How to create a master page using sharepoint designer 2013
How to create a master page using sharepoint designer 2013

Now go to designer, open the master page gallery, you can find your new master page has been created.

sharepoint branding examples

sharepoint branding examplesNow you can check out the .html file and can start editing.

Find the below example :
I wanted to hide the left navigation for all of my pages. For that I went to the CustomizedMasterPage.html and checked it out. I made the changes in the html file saved and published. Find the below screenshot.
Preview of master page “Before editing”

sharepoint online branding examples
sharepoint online branding examples

After editing the html file in designer

Office 365 SharePoint online master pages
Office 365 SharePoint online master pages

Office 365 SharePoint online master pages

Preview of the master page without the left navigation

 

Create master pages sharepoint online step by step tutorial
Create master pages sharepoint online step by step tutorial

Hope this article will be helpful.

Similar SharePoint 2013 Tutorials


Leave a Reply