Magento 2 Create New Page Layout

Quick post on how to add a custom page layout within Magento 2. I find these are very useful for landing pages such as the home page, about page or promotional page where you need to have a completely bespoke layout. Setting up a new page layout will give you a base to work with for this style of page without effecting Magento 2 default page layouts.

This blog post assumes you have a custom theme setup already, all the changes will be within your theme directory:

app/design/frontend/<VendorName>/<ThemeName>

First we need to create a new XML file for the page layout, for this example we will call it 1column-landing.xml:

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/1column-landing.xml

Now add the contents to the file and save:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
  <update handle="1column" />
  <referenceContainer name="breadcrumbs" remove="true" />
  <referenceContainer name="page.main.title" remove="true" />
</layout>

For this example I’m using the default Magento 2 1column layout as the base by using the update handle. This could be any of the other templates such as empty for example. I’m also removing the breadcrumbs and page title to illustrate how you can remove containers for this new page layout.

Next we need to create another XML file which will allow us to select our new page layout from the admin area when configuring a CMS page.

To do this create a new XML file called layouts.xml:

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml

Now add the contents to the file and save:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
  <layout id="1column-landing">
    <label translate="true">1 column landing</label>
  </layout>
</page_layouts>

Note: The layout id value must be the same name as the file name you created in the first step.

The label name is what gets shown in the dropdown when selecting the page layout for a CMS page in the admin area.

That’s all the code changes required. Now when you go to edit a CMS page in the admin area you will find your new page layout under the select field as per the screenshot below:

This is a very quick alternative for when the default page layouts don’t suit your needs, enjoy! For further details checkout Magento 2 documentation on page layouts.