Creating a Custom Page Layout in SharePoint 2013

In my last article, I documented how to create a Master Page in SharePoint 2013.  Master Pages define the global chrome elements of your web site.  This article explains how to create custom page layouts in SharePoint 2013.  For more information on the SharePoint 2013 page model, see this Microsoft article.

Planning Out Your Page Layout

For this example, we’re going to recreate a chunk of a page on our web site (www.navantis.com):

In our previous article, we created Master Page that defined the header, footer and global style sheets for this page.  Now we’re going to create a page layout that follows this basic format.  The content will be dynamic so that you could create as many pages as you like based on this layout. 
In our page layout, we’re going to define the following areas as “field controls”.  We’re going to create them all in a single content container and lay them out explicitly in order to reflect our design:
 
The breadcrumb on the top left we can use SharePoint’s breadcrumb trail and we will embed the newsletter subscription into the page layout because we don’t want this to be explicitly defined into the layout.

Defining Your Content Type

So before we do the HTML work, let’s create a content type (a definition for content fields) that defines each of these fields for our page.  Based on the above plan, we need the following fields:

• LargeHeadline
• RightHandBlurb
• LeftLinkList
• LeftColumnTitle
• LeftColumnText
• RightColumnText

In each case, these will be HTML controls.  SharePoint 2013 allows you to define other types of content for these fields such as images.  Images in SharePoint 2013 can be rendered in specific dimensions and SharePoint 2013 will dynamic render any image to that specified to ensure they fit nicely into your defined layout.
To create a content type, go to Site Settings –> Site Content Types (under Web Designer Galleries).  If you look at Page Layout Content Types you will see existing ones for Article, Catalog, Welcome Page, etc.  We’re going to create a content type for our layout.  Click on Create and type in a name for your new content type:
Under Parent Content Type, you can select the parent your content type will inherit from.  If you look at the existing page layout content types, they inherit from the content type Page.  Page is in the group Publishing Content Types.  You can also specify the group you want to place your new content type – you could add it to the existing Page Layout Content Types group or create your own custom group.


When you have created your new content type, SharePoint 2013 will display the columns that were inherited automatically from the Page content type.  Lets add some new ones to represent our custom fields.  Click on the Add from new site column and let’s add each field:

For each column, we can specify the type.  For those fields we want to explicitly style, we can use the Single Line of Text option to have the content author put in plain text that will be formatted by the template.  For those fields that we want to provide more control to the content author, we can specify the field as Full HTML content and then content author will be able to put in any HTML using the rich text editor.    For our fields, let’s use this approach:

• LargeHeadline – Single line of text
• RightHandBlurb – Multiple lines of text
• LeftLinkList – Full HTML
• LeftColumnTitle – Single line of text
• LeftColumnText – Full HTML
• RightColumnText – Full HTML

For each field, create a site column.
Now we have fields to store the content, let’s now create a Page Layout.

Creating a Page Layout

To create a page layout, go to the Design Manager and Click on 6. Edit Page Layouts.  Click on Create a Page Layout.  Give your page layout a name, pick your master page and your content type you just created.

If you preview your page layout, you will see it doesn’t look like much – we need to update the HTML around the field controls to properly format the layout.

Publishing Your Page Layout

Before you can use your page layout, it has to be published.  To publish your page layout, go to Site Settings –> Master pages and page layouts.  You will see two files – one is HTML and one is ASPX.  in SharePoint 2013, the HTML is now the master and you can edit it using an HTML editor.  SharePoint 2013 then generates the ASPX file automatically.  To publish your layout, click on the HTML file and then Publish:

This will publish both the HTML and ASPX files, now making them available to create a page based on your layout.

Creating a Page

To create a page based on our new layout, go to New Page. 

If you then go to Page –> Page Layouts you will find our new Page Layout in the list of available Page Layouts.  When you switch the page layout, you should now see all the fields that we created earlier in our content type.
You can fill in your content either by typing it in or copying and pasting it from either your existing web site or from office documents such as Word.  The copy and paste has improved dramatically over previous versions!
Here is my content now filled out:

Now we can publish our page…

Our content is there, but the layout doesn’t reflect what we want…so now edit the HTML to update our layout.

Customizing Page Layouts

Page layouts in SharePoint 2013 are just HTML files with a lot of additional markup to specify where the controls are going to be injected.  We can now customize the HTML file through the design manager.  You can simply grab a copy of the HTML file, make your changes and re-upload your file and SharePoint 2013 will do the rest.  There are two ways to grab the file:

• Go to Design Manager –> 3. Upload Design Files and map a network drive to your master page directory.
• Go to Site Settings –> Master pages and page layouts and you can download your file.

After iterating a few times with the page layout and moving the snippets provided by SharePoint 2013 into the appropriate spots, we now have a nicely formatted page:

All the content within the main page area is fully managed by SharePoint can be easily changed by a content author.