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
- layouts.xml – To register new layout
- 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…:)