How To Create Custom Layout Page In Magento2?

  • author-img Nidhi Arora
  • 4 years
  • 168 views
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 [email protected], and don’t forget to share this “How to” blog with your fellow Magento 2 users!

Download Blog

ENQUIRY

Ready to Get started

Communication is the key for us to understand each other. Allow us to understand
your requirements or queries. Present us with an opportunity to serve you.

Fill out the form and out team will get back to you
within 24 hours

    Head Office

    1250 Pittsford Victor Road Ste 310
    Pittsford, NY 14534

    Development Center

    Plot no. 10, Rajiv Gandhi
    Chandigarh Technology Park