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)
Site action-> Manage site features->sharepoint server publishing.SharePoint Server Publishing (under Manage Site Feature)
- Under look and feel you will find design manager.
- Click on edit master pages
- Insert the site collection url address. Eg:- https://example.sharepoint.com/sites/dev.
- Login with credentials.
- Open the site collection and upload the masterpage html document.
- Also upload the files under style library folder, check out, check in and publish them as a major version.
- Open sharepoint designer upload our html file under _catalogs/master pages. You will find it under All Files->_catalogs->masterpages.
- 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. Select 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.
- 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.Save 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.Select the master page and default content type.Click on the layout name and open the preview.
- 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>–>
- 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.
- Visit our Design manager under page layout section click on the page layout that we created.
- 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.
- 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.Changing 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. Or
- 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.
- Visit site settings and click on master pageSelect the master page and click save
- Edit the page it will take the applied master page and page layout.
- You can now add webparts. Go ahead, add few content editors and text inside it.
- Add some text in it, save it.
- This is how it looks finally