Magento / Magento2

Create custom layout Page in Magento2

How to Create Custom Layout Page in Magento2

In this Post We will know How to Create custom layout Page in Magento2

In this post, We will create a layout named Homepage Layout shown in above image, it’s the exact same as the default(1 column) layout but you can add your own here, Let’s start

Create app/design/frontend/–VENDOR–/–THEME–/Magento_Theme/page_layout/homepage-layout.xml

<?xml version=”1.0″ ?>
<layout xmlns:xsi=”” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_layout.xsd” alt=”page layout”>
<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=”” 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” />

Here, Homepage layout is based on the empty page layout, We can also create a custom layout based on another layout, such as 2columns-right, 2columns-left or 3columns. To do that just replace with the layout you wish to use, e.g

Now We have to add a Magento reference about custom Layout

Create app/design/frontend/–VENDOR–/–THEME–/Magento_Theme/layouts.xml

<page_layouts xmlns:xsi=”” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/PageLayout/etc/layouts.xsd”>
<layout id=”homepage-layout”>
<label translate=”true”>Homepage Layout</label>

As shown in Above Image, you can see Homepage Layout added in the layout list.
I hope It will help you.