Sign In

 ‭(Hidden)‬ Site Redirect

Jan 29
Creating page layouts in SharePoint 2013 using SharePoint Designer 2013

​by Meredith Weaver

Creating master pages and page layouts in SharePoint 2013 can be done several different ways.  I prefer to not use the UI to create a layout, and instead use Microsoft SharePoint Designer 2013. I only recommend doing this if you are experienced with SharePoint Designer 2007 or 2010.  The following is an example of one way to create a simple page layout in Microsoft SharePoint 2013 365.

 

Open SharePoint Designer 2013 and type the URL to your SharePoint 2013 site within the Site Name box, and select open.

1meredithCCP.png
 

Once your site is opened in SharePoint Designer 2013, then you will need to navigate to the _catalogs folder.  This can be done by clicking All Files within the Left Navigation Panel and then open the _catalogs folder as shown below:

2meredithCCP.png
 

Next open the masterpage folder within the _catalogs directory.

3MCCP.png
 

Right click within content region, and a popup window with allow you to create a custom page.

4MCCP.png
 

Select New and then ASPX.

5MCCP.png
 

Change the name of the page from Untitled1.aspx to a custom page name of choice.

6MCCP.png
 

Update the title of the page to match the new page layout.

7MCCP.png
 

Next, find a page layout that you want to use as your starting point.  Open this page in SharePoint Designer 2013, and copy the markup within the page.

8MCCP.png
 

Paste the content copied from page layout into notepad or any text editor of choice.  

9MCCP.png
 

Close the original page layout that is opened with SharePoint Designer. Make sure to not modify the page or save any changes.

10MCCP.png
 

Next, find the associated content type for the page layout that was just copied.  You can find this information by clicking on the Manage all file properties in browser link within the Customization Region.

11MCCP.png
 

This will open the page layout properties within the browser.  Take note of the Associated Content Type. This is will need to be the same within the custom page layout we are creating.  The screenshot below displays the properties for the page layout we copied and has an associated content type of Multi-Area Page. This property could be different depending on the type of layout being created.

12MCCP.png
 

Go back to the custom page layout that was created, and open the page properties by clicking the page within SharePoint Designer 2013.

13MCCP.png
 

Next click the Manage all file properties in browser link within the Customization Region of your newly created page layout.  We will need to update the associated content type for this page layout before pasting in the copied markup.

14MCCP.png
 

Next click the Edit Item link within the SharePoint Ribbon.

15MCCP.png
 

Select the dropdown menu, and change the Content Type to Page Layout.

16MCCP.png
 

This will now allow us to select the associated content type that we will be using.

17MCCP.png
 

Next click the Save button to save the changes made to the custom page layout.

18MCCP.png
 

Next close your browser, and return to SharePoint Designer 2013.  Click the Edit file link within the Customization Region from the page settings window for your custom page layout. Note-- this window should still be opened within SharePoint Designer 2013.

19MCCP.png
 

Next select and delete all of the generated content within the page.

20MCCP.png
 

The page should now be blank and look like the following:

21MCCP.png
 

Next, copy the markup you pasted within notepad (or any text editor) that includes the content from the default page layout, and paste it into your new custom page layout.

22MCCP.png
 

Paste the copied markup into blank page of your new layout.

23MCCP.png
 

Quick save your new page layout.

Make changes to the source and modify content and/or web controls as needed.

Resave and publish your newly created custom page layout. *If you do not publish the new page layout, it will not show as an available layout when creating a new page through the UI.

When creating a new page within the pages library, be sure to select the same page Content Type as you just created.

The custom page type just created will be an available option for page layouts within the Create New Page form.​