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

[php]
<?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” 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=”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>
[/php]

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

[php]
<page_layouts xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/PageLayout/etc/layouts.xsd”>
<layout id=”homepage-layout”>
<label translate=”true”>Homepage Layout</label>
</layout>
</page_layouts>
[/php]

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