SharePoint Custom Page Layout – Free Download

christineSharePoint, Templates & DownloadsLeave a Comment

Custom Page Layout Preview

The default publishing page layouts in SharePoint are not pretty… namely they lack spacing between zones and page margins. I created a custom page layout based on Gridism that is flexible enough to be used for various types of pages to make it a little more attractive.


Out-of-box page layout “Blank web part page” (forgive the web part order, I was too lazy to reshuffle them to the same as below)


Custom Page Layout Preview

Custom page layout (download available below)


This particular page layout has a set maximum width, meaning it’ll add white space at the margins on larger monitors. It also hides the left navigation.

How to Install

To use, upload the HTML file linked at the bottom of this page to your master page gallery (link is in site settings) at your site collection root. Leave settings at default (i.e. content type is Welcome Page). Then check the file out, check it back in and publish a major version. Try the page layout on a test page first: edit a publishing page, use the Page tab of ribbon, Page Layout button, select “Custom Grid – Limited Width” from the bottom section.

Don’t see it in the Page Layouts menu? You may have limited your page layout options in Site Settings, make sure it’s enabled there (options are under the ‘Page layouts and site templates’ link).

Here’s what the zones look like in edit mode. It’s a lot like the default web part zone layout, but there is some breathing room between the zones.


Note on Responsiveness

Out-of-box SharePoint isn’t terribly responsive no matter what you use for the page layout because the top navigation (which includes the search box) aren’t responsive. When a browser window hits the width where the nav and the search box collide, it stops everything else. Unless you’re using a custom master page (which you probably shouldn’t be in SPO), there’s not a lot to be done about this. It’s my guess that Microsoft will eventually address it though.

 Download the HTML

Leave a Reply

Your email address will not be published. Required fields are marked *