Magento 2 Custom CMS page layout

Magento 2 Custom CMS page layout

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:

app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/test-layout.xml

with content:

<?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="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="page.top" 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" />
</referenceContainer>
</layout>

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:

app/design/frontend/_YOUR_VENDOR/_YOUR_THEME_/Magento_Theme/layouts.xml

with content:

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

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

Frontend:

Note: Clear cache! 😉

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Override Magento 2 Layout: Product page example Mladen Ristic
, | 6

Override Magento 2 Layout: Product page example

Bypassing Magento 2 layout update restrictions in Admin Adrian Bece
Adrian Bece, | 2

Bypassing Magento 2 layout update restrictions in Admin

How to keep your CMS blocks organized (and not go insane) Adrian Bece
Adrian Bece, | 11

How to keep your CMS blocks organized (and not go insane)

7 comments

  1. Create inchoo-layout.xml in:

    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/test-layout.xml
    this is wrong, the name of file should be inchoo-layout and not test

  2. I also tried to follow this tutorial for a client front but ended with a white Page as well. Please, can you provide me with a solution, the project needs to be completed immediately?

  3. Hey.
    It must be right:
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/inchoo-layout.xml
    or
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/
    instead
    app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/test-layout.xml

  4. 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>.

Tell us about your project

Drop us a line. We'd love to know more about your project.