Site icon Sudhanshu's Blog

How to create custom layout page in Magento 2 ?

Sudhanshu Bajaj

It is very common requirement that we need to create a custom page for new campaigns. But the layout of that page is different from the website generic pages layout. Today we gonna learn how to create custom page layout.

Magento have default page payout which are as follows :

Creating custom layout is two steps process :). Here you go!

  1. Create <Vendor>/<Module Name>/view/frontend/layouts.xml file which register custom layout in the Magento 
    <?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="custom">
        <label translate="true">Bajaj Custom Layout</label>
    </layout>
</page_layouts>
  2. Create <Vendor>/<Module Name>/view/frontend/page_layout/custom.xml file to manage layout of your page. 
    <?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>

That’s it. Now you can check this layout in any Content > Elements > Pages > Design section.

 

Magento 2 Associate Developer Certification exam sample question

You’re tasked with investigating a custom page layout declared in MyCompany/MyModule that isn’t loading. You’ve determined that this is the result of your XML configuration.

Which 2 files do you investigate to locate the issue?

Please comment your answers 😀

Exit mobile version