Create custom page layout in SharePoint Online

This post will explain about creating new page layout for SharePoint Online, same logic is  applicable for SharePoint 2013 and 2016.

Custom page layout can be used in SharePoint publishing site or Publishing feature enabled sites. Custom page layout can be used in SharePoint default master page or our custom master page,

SharePoint page layout sections

check my previous post about how to create custom master page for SharePoint
Navigate to SharePoint design manager and click Edit Page Layout link then click Create a page layout, in the popup enter new layout name and select master page and select existing SharePoint default content type or create new content type based on your requirement, you can find the create new content type link on the same popup.

SharePoint new page layout popup
Once the page layout is  created, open SharePoint Designer 2013 and open site on that. On the left side of SharePoint Designer select layout and you can find newly created layout files, there will be two files in same name one is HTML and another one is ASPX extension.
Check out the newly created page layout (HTML extension) and right click and select Edit File in Advanced Mode option.

SharePoint designer layouts

Once page layout opened then find out ContentPlaceHolder ID of “PlaceHolderMain”, clear all div elements inside the place holder and paste your page layout HTML or prepare your HTML inside.
If you created custom master page using HTML template conversion logic, then you have to cut center content(layout content) from master page and paste in this page layout.
Navigate to site home page and edit the page and select page tab, in that tab open page layout drop down and select our new layout.

And now your new page layout is ready..!!

Please feel free to let me know if you have any queries in the comment section, I’m happy to help you!!

Happy coding!!

7 thoughts on “Create custom page layout in SharePoint Online

  1. Hello, many thanks for your information! However I am facing one problem after creating a custom page layout the way you did – I cannot find pages created using the custom layouts in the search results. I tried changing the searchability of the “Page” library as a whole (from searchable to not searchable, then back to searchable). but it happened to me that still, only those pages created using the default layouts can be found in the search results. Did you encounter the same problem? If yes then did you solve it?

    Thanks a lot and looking forward to your reply!

    Like

  2. Hello Ravi,
    Thanks for your post, I created a page layout and I wanted to link my existing html page (not looking for Iframe solution because its not working in IE and multiple scrolling issue) from the page I have created using page layout.

    I am trying to reuse my code as many as I can. Is there anyway I can link to my existing html page ?

    I am not sure this is the correct way of doing it or now. I need some kind of help , please let me know the best way to reach out to you.

    My code in content editor :

    /Shared%20Documents/pramod/index.html​​​

    Like

  3. My code is in content editor:

    Iframe width=”100%” height=”1800″ id=”iframe” src=”/Shared%20Documents/pramod/index.html” scrolling=”no” frameborder=”0″ style=”border: 0px; overflow: hidden;” end of Iframe

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s