How To Create Custom Layout Page In Magento2?

We already know that Magento provide following layout as default:-

– Empty
– 1 column
– 2 columns with left bar
– 2 columns with right bar
– 3 columns

Sometime we need some customization in our Magento design and want to change design of Home page or any specific page.

There are two files needed to create custom layout page

1 – Create Namespace/Module/view/frontend/layouts.xml this file registered custom layout. Use below code.

<?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="test">
 <label translate="true">test layout</label>
 </layout>
</page_layouts>

2- Create Namespace/Module/view/frontend/page_layout/test.xml this file to manage design your layout page. Use below Code.

<?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" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
</referenceContainer>
</layout>

Now this is complete to use as custom layout. You can check this layout in admin panel configuration setting.

If you still have any query regarding this “How to” or would like to add some suggestions to this solution, let us know your feedback or query at sales@envisionecommerce.com, and don’t forget to share this “How to” blog with your fellow Magento 2 users!