How to create custom layout page magento 2

How to create custom layout page magento 2

  • By admin
  • Magento 2
  • Comments Off on How to create custom layout page magento 2

How to create custom layout page magento 2

Magento 2 have great feature to create many custom layout pages
Creating layouts.xml and define page_layout
Magento default layouts:
-Empty

-1 column

-2 columns with left bar

-2 columns with right bar

-3 columns

Steps to create new layout page.

USING MODULE
1 – Create Namespace/Module/view/frontend/layouts.xml
USING THEME
app/design/frontend/_YOUR_VENDOR/_YOUR_THEME_/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=”test”>
<label translate=”true”>test layout</label>
</layout>
</page_layouts>
USING MODULE
2. Create Namespace/Module/view/frontend/page_layout/test.xml
USING THEME
app/design/frontend/_YOUR_VENDOR_/_YOUR_THEME_/Magento_Theme/page_layout/test.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>