Reading list Switch to dark mode

    How to create custom layout page in magento2

    Updated 22 March 2024

    How to create custom layout page in  Magento2 :- Here, I am going to learn that 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

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    -3 columns

    Sometime we need some customisation in our Magento design and want to change design of Home page or any specific page.There are some points which help you to create own layout page.

    We considered that we already create module necessary files like(registartion.php,composer.json,module.xml etc.)

    There are two files needed to create custom layout page

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

    <?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>

    After creating above file you can check your test layout in admin panel.

    2- Create Namespace/Module/view/frontend/page_layout/test.xml this file to manage design your layout 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>

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

    testlayout

    Thank’s for read this.If you have any query please comment below.

    . . .

    Leave a Comment

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


    2 comments

  • Shubham Sharma (Moderator)
    • Shubham Sharma (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home