List Aggregator App (SPFx)

Create custom master page using Design Manager in SharePoint Online/2013/2016

sharepoint customization

These days most of the user want to use their own master page in SharePoint 2013 Or Office 365. Here we will discuss how to create a custom master page using design manager in SharePoint Online/2013/2016

Design Manager is SharePoint 2013 is a new feature which can be very useful for SharePoint designers. With SharePoint Design Manger you can now create a custom SharePoint Master Page out of simple Html Page Template in SharePoint 2013/2016 or SharePoint Online.

SharePoint deveopment training course

Here is Master Page that I will use.

create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

The Design Manager is not activated by default in SharePoint 2013/2016 Or in Office 365.

1. Activate the feature “SharePoint Server Publishing Infrastructure” present in the site collection level in SharePoint Online site. This can be navigated as Settings -> Site settings -> Site collection features (under Site Collection Administration) -> SharePoint Server Publishing Infrastructure -> Click on Activate.



create master page sharepoint online design manager
create master page SharePoint online design manager

2. Once the site collection feature has been activated in the above step, then navigate to the subsite, and activate the Site Feature –> “SharePoint Server Publishing“. This can be navigated as – Settings -> Site settings -> Manage site features (under Site Actions) -> SharePoint Server Publishing -> Click on Activate

create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

3. Now we can see that the Design Manager is activated and is available in Site Settings page. Go to Site Setting -> Look and Feel ->Design Manager

add an html Master Page to SharePoint 2013 using Design Manager
add an html Master Page to SharePoint 2013 using Design Manager

Steps to a custom master page in SharePoint Online/2013/2016 using Design Manager

1. Upload HTML Master Page in Master Page Gallery in SharePoint Online or SharePoint 2013/2016.


create custom master page in sharepoint online
create custom master page in sharepoint online

2. Add the Required Scripts, CSS, Images and other files.

create custom master page in sharepoint 2013 step by step
create custom master page in sharepoint 2013 step by step



3. Navigate to Design Manager (Settings- >Look and Feel – > Design Manager)

sharepoint branding 2013 tutorial
sharepoint branding 2013 tutorial

4. In Design Manager select 4 option Edit Master Pages.

sharepoint branding 2013 step by step
sharepoint branding 2013 step by step

5. Next Select Convert an Html file to a SharePoint master page like below:

how to create master page in sharepoint 2013 step by step
how to create master page in sharepoint 2013 step by step
create master page in sharepoint 2013 using design manager
create master page in sharepoint 2013 using design manager

6. After following above set you can see that a Html while get convert to master page. Refer below the screen.

sharepoint 2013 custom master page branding tutorial
sharepoint 2013 custom master page branding tutorial
sharepoint 2016 custom master page branding tutorial
sharepoint 2016 custom master page branding tutorial

7. After master page got generated need to go to Site settings- > Master Page Gallery and need to Publish HTML with major version. Refer below the screen.

create custom master page in sharepoint 2013 using sharepoint design manager
create custom master page in sharepoint 2013 using sharepoint design manager

8. Finally, we need to apply the new master page (Settings- >Look and Feel – > Design Manager- >Publish and Apply Design – > Assign master page to your site based on device channel.) Refer below screens.

create custom master page in sharepoint 2016 using sharepoint design manager
create custom master page in sharepoint 2016 using sharepoint design manager

In the Site Master Page Settings page, you can change the System Master page as our new custom master page in SharePoint Online/2013/2016.

create custom master page in sharepoint online using sharepoint design manager
create custom master page in sharepoint online using sharepoint design manager

Your Final Office 365 (O365) SharePoint Online site screen will look like below:

custom master page in sharepoint online using design manager
custom master page in sharepoint online using design manager

You may like following SharePoint master page tutorials:

Hopefully, this sharepoint branding article will help you to create a master page in SharePoint online using design manager. The say way we can create custom master page using designer in SharePoint Online or SharePoint 2013/2016.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope