Add an Html Master Page to SharePoint 2013 using Design Manager

Design Manager in SharePoint 2013 is a great new Feature which Can be very useful for SharePoint Designers.With Design Manager, you can now Create a SharePoint Master Page out of a simple Html Page Template that can reuse from an existing public site or download from Internet.
Lets look at an example of How to Convert an Html Template into a SharePoint Master Page using the new Design Manager and Snippet gallery.IF you want to edit an existing Master Page head over to How to edit an existing Master Page to Change Logo, Hide Top Suite Links etc in SharePoint 2013

Before we begin, make sure you have your HTML template ready. A good option is to download one from Internet – In our case we downloaded an HTML template from Templatebox.com , a website that provides free HTML templates along with Images.

Once you have your templates and Images upload the entire folder in your MasterPage Gallery.Easiest way to do this is to Map your Master Page gallery as a Network drive and then Copy the folder in it.

Here is the Master Page that we will use.

We Created a new Folder “New HTML Master Page” and Copied the above HTML Template and an Images folder (with Images in it) in Master Page gallery. This is how our Master Page Gallery looks like –

So now we have our Template in Master Page gallery.Lets Convert it to a SharePoint Master Page.

Steps –

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

2. In Design Manager select “4. Edit Master Pages” on the left.

3. Next Select “Convert an HTML file to a SharePoint master page”

4. Select the new Uploaded Master Page from Master Page Gallery.

5. Once uploaded verify the status as “Conversion Successful”.

6. Next Click on Master Page itself to open the Master Page Preview window.Your Preview should look like below –

Notice the “Snippet” at the Top.This will take you to the new Snippet Gallery where you can select a SharePoint Components such as Navigation, Search box,webparts etc. and Copy it’s Code Snippet to be added to your Master Page.
For now lets just publish the new Master Page and then in next post we will learn how to edit it to embed various SharePoint Controls in it.

7. Navigate back to the Edit Master Page in Design Manager and Select the call-up menu of the new Master Page. Publish it as a Major version and verify that the Status is “Approved”.

Even though we have Published this HTML Template Page and its not available as one the SharePoint Master Pages, it is not yet ready to be used as a site Master Page. You need to Open the HTMl of this Master Page in a Notepad\Visual Studio\Designer and edit it to remove some of the unwanted text and Images so that the “Place Holder Main” (name=”ContentPlaceHolderMain”) is aligned in Middle (Every Page in SharePoint has a Master Page and a Content area).

To make our Master Page look nicer, I downloaded the copy of this Master Page and edited it in the notepad.I Removed the Service Overview, development and other Images (in the middle) and verified that only

8. Once you are done modifying HTML, Set this Master Page as default for your site.Go to “Publish and Apply Design” in Design Manager and Select “Assign master pages to your site based on device channel”.Next select your new Master Page as a default Site Master Page.

Below is the final look of our HTMl Template Converted to SharePoint Master Page.

This is not the end of it, the master page needs its search, Navigation and other SharePoint Components to be ready for use.You can add these using Snippet Gallery.See more Design Manager Tutorials to know about Snippet Gallery and how to add SharePoint Components in Master and Layout Pages.
Also, iF you want to edit an existing Master Page head over to How to edit an existing Master Page to Change Logo, Hide Top Suite Links etc in SharePoint 2013