How To Make Custom Page Layout In Magento 2

In the previous article, we learned about How to get store config value in Magento 2. Today, we will introduce you about How to make custom page layout in Magento 2.

I think you should read How To Create New Theme In Magento 2 first.

Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-left, 2columns-right, 3column.

Simplest is Empty. It hasn’t header, footer, left sidebar, right sidebar but it has all js, css, cookies, session, etc.

You can find it in: vendor\magento\module-theme\view\base\page_layout.

The layout 1 column, 2 columns-left, 2columns-right, 3 column was extended from Empty layout. You can find it in: vendor\magento\module-theme\view\frontend\page_layout.

If the amount of customizations is large, you can override list. Also maybe you need to create a different page layout for your theme.

Make custom page layout

We’ll copy content from Empty layout then add a block to main container.

Make file <theme_dir>/Magetop_themes/page_layout/magetop-layout.xml should look like:

<?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">
    <container name="root">
        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>
        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">
                <container name="columns.top" label="Before Main Columns"/>
                <container name="columns" htmlTag="div" htmlClass="columns">
                    <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main">
                        <block class="Magento\Framework\View\Element\Template" name="custom.container" template="Magetop_Themes::html/custom_mainContainer.phtml" before="-"/>
                    </container>
                </container>
            </container>
            <container name="page.bottom.container" as="page_bottom_container" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"/>
            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
        </container>
    </container>
</layout>

Then create file <theme_dir>/Magetop_themes/templates/html/custom_mainContainer.phtml then insert the following code.

<h1>Enter your custom code here</h1>

For example, we’ll update for the contact page.

Make file <theme_dir>/Magento_Contact/layout/contact_index_index.xml should look like:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="magetop-layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
</page>

Refresh cache then go to contact page see your changes applied.

Frontend

Declaration in the list of layouts

Make file <theme_dir>/Magetop_themes/layouts.xml should look like:

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="magetop-layout">
        <label translate="true">Magetop Layout</label>
    </layout>
</page_layouts>

See it in backend

We updated our file structure looks as follows

app/design/frontend/Magetop/
  ├── Default/
  │   ├── Magetop_themes/
  │   │     ├── page_layout/
  │   │     │    ├── magetop-layout.xml
  │   │     ├── templates/
  │   │     │    ├── html
  │   │     │    │   ├── custom_mainContainer.phtml
  │   │     ├── layouts.xml
  │   ├── Magento_Contact/
  │   │     ├── layout/
  │   │     │    ├── contact_index_index.xml

Good luck!

This is How to make custom page layout in Magento 2.

You can see the next post: How to get product collection in Magento 2.

Follow us for more helpful tutorial!

We hope this is a useful blog for you.

Thank you for reading!