SharePoint 2013: How to create a custom Page Layout

With the new Designer Manager in SharePoint 2013 it is now much easier to create a custom Page Layout. In this blog article I ‘m providing a step by step pictorial guidance on how to create a simple custom Page Layout.

My prerequisites: I have created a site collection based on the template ‘Publishing Portal’ and installed SharePoint Designer 2013.

What I need is a simple Page Layout with two columns with different widths. These columns should be created as Web Part Zones to enable editors to place Web Parts on the page.

First I open the site settings and start the new Design Manager:

Because I want to create a custom Page Layout I click on ‘Edit Page Layouts’ …

… and create a new Page Layout (based on a predefined master page and the ‘Article Page’ content type):

It should take just a few seconds until SharePoint has created the new Page Layout.

OK - now let’s switch over to SharePoint Designer 2013. To find the newly created Page Layout I click on ‘All Files’ in the left navigation. Now I open the folder _catalogs and click on master page. I have marked the files of the newly created Page Layout with a red rectangle.

The newly created Page Layout consists of two files. Don’t touch the aspx-file! To create a custom Page Layout you only need to edit the html-file. SharePoint will create and update the aspx-file based on the changes in the associated html-file.

Let’s open the html-file to see what SharePoint has created. I check out the html-file and open it in Advanced Mode:

Now this is what you should see:

For this demo I have chosen the Article Page as the template for my new Page Layout - but I don’t want to keep most of the controls. So I scroll down to the area of the html-file where the page controls are defined.

The page controls are surrounded by <div> tags - so they should be pretty easy to find. Now I locate this line of code:

<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->

and delete everything beginning from (but excluding) the line above until (excluding) this line:

<!--ME:</asp:ContentPlaceHolder>-->

In other words: I delete every line of code between these two (ContentPlaceHolder) lines (but I keep these lines).

With this deletion I have removed almost every page control and the newly created custom Page Layout file should look like this (I marked the deleted area with an empty red box):

Let’s see how this empty Page Layout looks like in SharePoint 2013. I save and check-in the html-file in SharePoint Designer 2013 and switch back to SharePoint 2013. Have look on the fifth screenshot again - here I click on the name of my newly created Page Layout and SharePoint 2013 opens this page:

Looks like a pretty empty page! To better check the changes in my custom Page Layout I create another page that uses my newly created custom Page Layout.

This is what the newly created page based on my custom Page Layout now looks like:

This page is empty in edit mode too, because I just removed all page controls. Now it’s time to add two Web Part zones..

I switch back to SharePoint Designer 2013 and open the html-file in Advanced Mode again. In the gap where I deleted the page controls before I now add a simple html table like this:

Just a simple table with one row and two columns (in other words: two parallel table cells). The first column should have a width of 80% and the second one should have a width of 20%. Both columns should be top-aligned.

The next step is: I need to add two Web Part Zones: one in each table’s column. I save the changes in SharePoint Designer 2013 and switch back to SharePoint’s Design Manager.

I open this page …

… and click on Snippets:

Now the Snippets Designer is shown and I click on Web Part Zone:

The Snippets Designer creates the HTML code for a new Web Part Zone and I can copy the HTML code snippet to the clipboard. You can customize some of the parameters of the Web Part Zone (or any other snippet) before copying the snippet to the clipboard. To edit parameters click on the greyed parameter names on the right.

Now I jump back to SharePoint Designer, open the html-file again and paste the snippet to the first table column. After that I switch back to the Snippets Designer and create another (a new - that’s important) Web Part Zone snippet with a new ID (!) and copy the snippet’s code to the second table column.

My html-file looks like this now:

Did you notice the doubled Page Title in the 10th screenshot? Doesn’t look very nice - that’s why  I remove the placeholder with the ID PlaceHolderPageTitleInTitleArea. I don’t want the page title here - for my demo the name of the aspx-file is sufficient. I save the changes in SharePoint Designer 2013 and check-in the html-file again.

Let’s see how the newly created Page Layout looks like now. I switch back to SharePoint 2013 and open the site with the newly created Demo Page … and hit F5 to refresh the page:

There are now two Web Part Zones with a different width and both are top-aligned! Just to prove that this Page Layout is working as expected I add some Web Parts to the two zones and publish the page:

That’s how I wanted the custom Page Layout to look like. If you want to create a more detailed Page Layout just have a look at the snippets. There are several useful snippets you can use in your own custom Page Layout by simply getting the HTML code of the snippet and pasting it to the custom Page Layout.

Compared to former version of SharePoint creating custom Page Layouts has been simplified very much. The new Design Manager in SharePoint 2013  (together with the Snippets) makes it easier to create custom Page Layouts. Use this blog article as a short introduction and feel free to experiment with Page Content Types, snippets and custom Page Layouts on your own.