Steps to add html Master Page to SharePoint 2013 or SharePoint online using Design Manager

sharepoint customization

Scenario:
These day most of the user want to use they own master page in SharePoint 2013 Or Office 365. In this article we learn how to create our own master page using Html in SharePoint Online.

Design Manager is SharePoint 2013 is new feature which can be very useful for SharePoint designers. With Design Manger you can now create a SharePoint Master Page out of simple Html Page Template.
Here is the Master Page that I will use.

Read some SharePoint branding articles below:

sharepoint customization
sharepoint customization

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




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

sharepoint 2013 custom master page branding.png

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

sharepoint 2013 branding master page.png

3. New we can see that Design Manager is activated.
Setting- >Look and Fell – >Design Manager

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

Steps:
1. Upload HTML Master Page in Master Page Gallery in SharePoint.


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

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

sharepoint branding
sharepoint branding

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

sharepoint branding 2013 step by step.png
sharepoint branding 2013 step by step.png

5. Next Select Convert AN Html File to a SharePoint Master Page .

sharepoint 2013 branding and user interface design
sharepoint 2013 branding and user interface design
sharepoint 2013 branding and user interface design tutorial
sharepoint 2013 branding and user interface design tutorial

6. After following above set you can see that a Html while get convert to master page Refer below 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 setting- > Master Page Gallery and need Publish html with major version. Refer below 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
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) screen will look like below:

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

Hopefully this sharepoint branding article will help you to create a master page in SharePoint online using design manager.


You May Also like the Following SharePoint Online Tutorials:

Leave a Reply