Creating master pages and page layouts with design manager in sharepoint 2013/Office365

The following blog post follows steps to be followed to get started with Creating master pages and page layouts with design manager in sharepoint 2013/Office365.

I have created master pages and page layouts in Office365 using design manager. It follows a step by step details and by the end of the blog you will have your own demo blog site template ready which uses master page and page layout.

I have replicate the Bootstrap blog template that is available over here.

  • activate features to enable design manager
    Site collection administration-> Site collection features->sharepoint server publishing infrastructureSharePoint Server Publishing Infrastructure (under Site collection features)
    img 1.1Site action-> Manage site features->sharepoint server publishing.SharePoint Server Publishing (under Manage Site Feature)img 1.2
  • Under look and feel you will find design manager.img 2.1
  • Click on edit master pagesimg 3.1
  • Insert the site collection url address. Eg:-
    1. Login with credentials.
    2. Open the site collection and upload the masterpage html document.
    3. Also upload the files under style library folder, check out, check in and publish them as a major version.
    4. Open sharepoint designer upload our html file under _catalogs/master pages. You will find it under All Files->_catalogs->masterpages.
    5. Create required folder structure and upload the remaining files. Follow the same checkout, check-in and publish process for rest of the files. Usually the resources go under Style Library but in this demo we create it under Masterpage library itself.
  • Go to design manager, click on convert file to master page. Browse and select our html document.img 5.1 img 5.2Select blog.html. After that click on insert.
  • It will automatically create another file with same name and extension as .master. The changes made in html file are synced to the master page automatically. You can now go to SP Designer refresh the site and see the changes.img 6.1
  • Open the master page in SP designer, edit it and make the necessary changes.
    Remove the markup of page layout from html page with a div attribute data-name=ContentPlaceHolderMain. You will see code something like below that is selected by user. Place this code inside container div.img 7.1Save it checkout, check-in and publish as a major version.
  • Next step to create a page layout. Select edit page layout option in left nav then the create a page layout.img 8.1Select the master page and default content type.img 8.2Click on the layout name and open the preview.img 8.3
  • Open layout in sharepoint designer. You will see two pages with same page layout name. Edit the html page.
  • Inside the tags of ContentPlaceHolderID with ID as PlaceHolderMain you will find html markup with some sharepoint code.
    <!–MS:<asp:ContentPlaceHolder ID=”PlaceHolderMain” runat=”server”>–><!–ME:</asp:ContentPlaceHolder>–>

    img 10.1These are preadded webparts by default in the page layout, we will delete them and add our own html markup for our page layout.

  • Take out the not required text and snippets and keep only the structure we want to keep for our page layout in which we will copy paste the web part zone.img 11.1
  • Visit our Design manager under page layout section click on the page layout that we created.img 12.1
  • On the top right we will see snippets option link. Next open the snippets link which opens a new page, there we will get the web part zones that we will copy to insert in our page layout later.img 13.1img 13.2
  • Copy paste the web part zones from the below copy to clipboard button. Rename the ids after pasting it in the html markup. Web Partzones must have unique id.img 14.1Changing the html markup of the page layout keep sync with the page layout “.aspx” page. Check out, check in the page and publish it as a major version.
  • Next up create a new page. You can hover on site settings menu, click on add page, it adds below the pages path. You can also select the page layout at this page.img 15.1 img 15.2Orimg 15.3
  • Click on created page and then edit that page. Select page tab and next page layout to select that page layout. Check in the page.img 16.1
  • Visit site settings and click on master pageimg 17.1Select the master page and click saveimg 17.2
  • Edit the page it will take the applied master page and page layout.img 18.1
  • You can now add webparts. Go ahead, add few content editors and text inside it.img 19.1
  • Add some text in it, save it.img 20.1
  • This is how it looks finallyimg 21.1
Note: In case you encounter any errors or issues check if both the publishing features are active or disable and reactivate it.

Displaying text/banners (page specific)

We often come up with a requirement that the specific page require banner images,  for example the default landing home pages. The most common requirement is that of carousel on the home page.

The general approach is to create page layouts for different design patterns. Below I am mentioning another approach to implement it.

  • Add an empty contentplaceholder in the master page.

In master page we set an ID in the contentplaceholder tag. This ID will be mentioned in the page layout where we insert content tag. This will insert an empty div into the html page that will be generated.

If you wish to add banner images or carousel we will add the following code in page layout, eliminating the need for another page layout specifically only for banner images or carousel images.

  • Add content tag in the page layout with the html markup.

Next when we visit the page with above mentioned code present in master pages and page layout respectively. The page will display “Sample text”.

Steps to deploy website onto Sharepoint

  • Get the pure html Mark up, css/images/js files ready.
  • Login to the sharepoint designer 2013. Use the url .
  • Copy the UI styling files(css/images and js) in -> all files/style library folder.
  • Go to -> all files/_catalogs/masterpages. Two steps to create master pages one via Design Manager and second directly via Sharepoint Designer
  • Method 1 – Design Manager: convert html to master page
  1. Copy the html page in all files/_catalogs/masterpages folder
  2. Go to the sharepoint website -> settings -> Design Manager
  3. Select the option edit master pages -> convert html to sharepoint masterpage.
  4. It automatically converts the html and an additional master page with the same name and the extension .master is created in master page gallery. The html and .master files are associated with each other. Changes to html file override the .master file changes.
  5. To edit the html markup page you have to edit the html page and the changes will be synced to the master page automatically.
  • Method 2 – Sharepoint Designer: convert html to master page
  1. In Sharepoint Designer in the navigation select file -> New Master Page. This creates an empty master page eg: example1.master.
  2. Next you edit the example1.master and seattle.master. seattle is a bydefault master page that come with sharepoint. Copy paste the contents into example1.master.
  3. Refer Randy Drisgill sharepoint 2013 Starter Master Pages. And create a master page referring to the example provided on the site.
  • Now you can edit the master page and keep the common elements such as header and footer in the page and strip out rest of the mark up and paste it into Page layouts. Add the necessary css and js files in the head tag of the master page with their relevant URL pointing to style library folder.
  • To set the master page visit Site Settings -> Look and Feel -> Master Page -> . Here we can specify the site master page and system master page that you want to set.
  • Next you create different page layouts (similar to different html markup structures for different pages) and apply these page layouts to different pages.
  • First you need to create a page layout visit sharepoint website -> settings -> Design Manager -> Edit Page Layouts -> Create new page Layout.
  • These can be found in the master page gallery under all files/_catalogs/masterpages folder. Edit the page layout.
  • Copy the sliced mark up from html master page in to the page layout. Create different page layouts.

Click on settings add a page. It create a .aspx page with the provided name. Edit the page, in the second level top navigation click on Page Layout to select the intended page layout that you want to assign for the page.