Create a page layout with custom content areas

Page layouts are essential on SharePoint publishing sites, they enable the creation of content with specific editable fields.

There are predefined content areas that can be reused however sometimes they are not enough to build the perfect layout.

In this article I’ll explain you how to create a basic custom page layout with multiple Page Content areas also known as Rich HTML Field.

Page Layout Content Types

By default, SharePoint only provides one Rich HTML Field to be used by the page layout but my goal is to use two of this areas side by side.

Create a new content area

  1. On your Publishing site go to Site Settings
  2. Under Web Designer Galleries click on Site Content Types
  3. Scroll down to the Page Layout Content Types
    Page Layout Content Types
  4. Click on Article Page
  5. Scroll down and click on Add from new site column
  6. Provide the Column name (e.g. Page Content #2)
  7. Select Full HTML content with formatting and constraints for publishing
  8. In the group section select Existing Group and then Page Layout Columns
    Add new site column
  9. Click OK

Create the page layout

  1. Open your publishing site with SharePoint designer
  2. In the Navigation select Page Layouts
  3. Click New Page Layout and fill the form as shown in the image below
  4. New Page Layout

    • For the Content Type Group select Page Layout Content Types
    • For the Content Type Name select Article Page
    • Provide a custom URL Name and Title

    Once the page layout is created it will open in edit mode

  5. From the toolbox scroll down Content Fields
  6. Inside the page content paste the HTML bellow to build the two columns side by side
    <div id="DeltaPlaceHolderMain">
    	<div id="leftColumn" style="width:50%; float:left;">
    		
    	</div>
    	<div id="rightColumn" style="width:50%; float:right">
    		
    	</div>
    </div>
    
  7. Select and drag the Page Content inside the leftColumn
    Content Fields
  8. Select and drag the Page Content inside the rightColumn
  9. Save the Page Layout, check it in and publish the major version
  10. Go back to the page where you want to apply the page layout and edit it
  11. From the Edit tab click on Page Layout
    Page Layout
  12. Select your custom page layout and add your HTML
    Page Layout Final Result

Designed by Freepik


No comments yet

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.