Magento 2 Custom CMS page layout

Related Inchoo Services

We’ve had a request to add a new custom layout for CMS pages in one Magento shop.
This can be very useful and can save you a lot of time for different static pages of your shop.

In this example we’ll create a layout named Inchoo Layout.

We should focus on two xml files: layouts.xml and page_layout/inchoo-layout.xml under Magento_Theme folder.

Create inchoo-layout.xml in:


with content:

<?xml version="1.0" ?>
<layout xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />

Our layout is based off the empty page layout, you can also create a layout based another layout.
Just replace <update handle=”empty”/> with the layout you wish to use, e.g <update handle=”3columns”/>

Create layouts.xml in:


with content:

<page_layouts xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="inchoo-layout">
        <label translate="true">Inchoo Layout</label>

Now, our custom layout is in the list of layouts.


Note: Clear cache! 😉

Matej Djakovic

- Frontend Developer

Matej is a Frontend Developer who is passionate about Wordpress, Symfony 2 and Magento. He is also enthusiastic about sports and spends some of his free time for inline roller skating.

Read more posts by Matej / Visit Matej's profile


  1. Hey.
    It must be right:

  2. I followed your tutorial to create custom layout in Magento 2.1.10. I have assigned the custom layout to cms page and added some content to it but on frontend I am seeing an empty page.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.