Magento 2: Create Custom Structure Layout

By default, Magento is providing structure Layout like , empty, 1 column, 2 column-left, 2 column-right, 3 columns. Sometime when we implement the design we need to create new structure layout and set the design as per our theme.
Let’s How to create custom structure layout

1) We need to create layout.xml on the app/code/Webmull/Customtheme/view/frontend

Code:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/View/PageLayout/etc/layouts.xsd">
<layout id="homepage">
<label translate="true">Home Page</label>
</layout>
</page_layouts>

<?xml version="1.0" encoding="UTF-8"?>

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/View/PageLayout/etc/layouts.xsd">

</layout>

</page_layouts>

Now check this layout, It will display in cms >> Design tab, Catalog >> Design tab, Categories >> Design tab.

Form the above page we can choose the layout.

Then create homepage.xml which are define as a layout id in the path app/code/Webmull/Customtheme/view/frontend/page_layouts. In the File we can define the structure of the page.

code:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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>