How to add a new page layout in Magento 2?
How to add a new page layout in Magento 2?

How to add a new page layout in Magento 2?

In this article, I am going to learn that How we can create a new layout in Magento 2.

There are 5 default layouts available in Magento

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

During frontend development, Sometimes we need to create our own layout page for customization. So follow the below steps to create a new layout.

We can create directly in custom theme or custom module. We need to create two files

  1. layouts.xml – To register new layout
  2. custom.xml – Manage design to a custom layout

1: Create layouts.xml

If you have custom module create layout.xml at Vendor/Module/view/frontend/layouts.xml

If you have custom theme create layout.xml at app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

<?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">custom layout</label>
    </layout>
</page_layouts>

2: Create custom.xml

If you have custom module create custom.xml at Vendor/Module/view/frontend/page_layout/custom.xml 

If you have custom theme create custom.xml at app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

<?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 flush the cache and check the new layout in the admin panel configuration setting like Admin->Content->Pages->Add New Page

I hope this article will help you to understand how to create a new layout in Magento 2. If you have any question please comment below. Happy Coding…:)

Leave a Reply

Close Menu