How to Create a Custom Master Page Using Design Manager in SharePoint 2016 – Step by Step?

What is Design Manager in SharePoint 2013?
Design manager is a nifty tool introduced in SharePoint 2013 that uses an HTML-based approach to convert static HTML templates into SharePoint master pages and page layouts. Use Design Manager to implement Branding and customization to your SharePoint sites. The overall idea of the SharePoint design manager is: Have your web site template prototype designed by someone good at web design, and then you use that HTML file to convert it to a SharePoint Master Page. Let’s have a SharePoint design manager walk-through.

Enable design manager in SharePoint 2013:
Design manager is enabled by default in SharePoint server publishing sites. You may have to activate the publishing feature for other site templates to enable the design manager in SharePoint 2013. Design manager is available only in SharePoint Server 2013/2016 and Office 365.

SharePoint 2013 design manager permissions
Make sure you have at least “Designer” permissions to start using the Design Manager.

How to open design manager SharePoint 2013?
You can access the design manager either from the Site actions menu or from the site settings page as in the below screen! Design manager URL: /_layouts/15/DesignWelcomePage.aspx

You’ll get a design manager wizard with the below steps:

• Welcome
• Manage Device Channels
• Upload Design Files
• Edit Master Pages
• Edit Display Templates
• Edit Page Layouts
• Publish and Apply Design
• Create Design Package

Among the above steps listed, we need only three steps to create/customize master pages in SharePoint 2013. Let’s see how to use design manager SharePoint 2013 to create a custom master page.

Step 1: Upload Design files

Working with a design manager in SharePoint 2013 is quite simple. Go to Upload Design Files: This page will ask you to map out your drive so that you can use any HTML editor to access your design files in the future for editing. Here is how to map network drive setup for Master pages library:

• In Design Manager, Click on the “Upload Design Files” tab. You’ll get the URL to map to a network drive. Copy it to your clipboard.

  

• SharePoint 2013: Design manager – map network drive: Go to Start >> Right Click on “Computer” and then choose “Map to network drive”. Enter the URL you copied from SharePoint Design Manager and then click on the “Finish” button.

  

This opens your Master Pages library in Windows Explorer view: https://intranet.crescent.com/_catalogs/masterpage/. It’s a good idea to create your own folder in the Master Pages library to keep all your files in one single location. I’ve created my folder “Crescent” there!

Once you map a network drive to the Master Page Gallery folder, it gives you an easier way to save files in the correct location.

Upload Design Files
Now upload the HTML version of your Master Page and all CSS, JS, image, and any other design assets to the mapped location. The overall idea of a Design manager is: You create a visual design for your website by using any web design tool or HTML editor and then use Design Manager to import the design into SharePoint. To do this, you have to make sure that the design tool stores its files in your site’s Master Page Gallery,

Step 2: Edit Master Pages – Convert HTML template to SharePoint Master page

 A master page defines common elements across all the pages of your site. You can use the network drive you mapped earlier to edit your master pages using any HTML editor. To preview your master page, click on its file name or status. While previewing your HTML master page, use the Snippet Gallery to get code snippets for SharePoint functionality that you can copy and paste into your HTML file.

• Go to the “Edit Master Pages” tab, click on the “Convert HTML file to a SharePoint Master Page” link

  

• Browse and locate the HTML template you uploaded in the previous step.

  

Once the HTML file is converted Into a Master Page, do not edit the .master file; always edit the .html file! SharePoint takes care of updating the .master page automatically.

Wait for a while, and your HTML master page should be converted with an extension .master page. Once converted, you will see the converted Master Page in the List with the status Conversion Successful. If you encounter any warnings or errors, use this link to troubleshoot: https://msdn.microsoft.com/en-us/library/office/jj822362.aspx

Modify the master page to wrap inside content place holder:
Now, Click on the “Index” file to see the preview of the HTML master page generated. If you scroll down, You’ll find this below:

This simply tells you that this content placeholder in the HTML file should be wrapped inside the appropriate content placeholder of your HTML template file.

• Open the HTML Master page file (Index.html) in SharePoint designer 2013 and find the DIV <div data-name=”ContentPlaceHolderMain”>
• Move the above DIV completely inside to the content area of your HTML template file. Once moved, your HTML master page will look like:

  

SharePoint 2013 design manager snippets 
Once the master page is generated, the next step is to add SharePoint functionality to the master page using snippets. Snippets allow you to take SharePoint widgets and plug them into your master page. E.g., Search box, Top Navigation Menu, etc. To Access snippets, Click on your HTML master page generated, Click on the “Snippets” link at the top, Pick the required component and then copy the code to your Master page using SharePoint designer or some other editing tools.

SharePoint Design Manager vs. SharePoint Designer: Don’t confuse SharePoint Designer with Design Manager! The Design Manager is a feature of Publishing sites and can be used to Design SharePoint Branding artifacts like Master Pages, Page Layouts, etc. 

Go to the Master Pages Library from the SharePoint site, Locate and Publish the HTML Master page once.

Step 3: Apply the New Master page

Now navigate to Site Settings >> Look and Feel >> Master Page, select the master Page You created and click on OK to use it for the site collection.

You can also create a package for your design to make it deployable to other site collections. Here is how: How to Create SharePoint 2016 Design Package using Design Manager