Add new page layout option in Magento 2

In this tutorial, I will explain you how to add new page layout option in Magento 2.

Sometimes, you want to change page layout of your product page, category page, cms page etc. Your store’s page layout is also one of the important part to make your sales high and serve customer experience more better.

There are 4 layout types available in Magento 2 :

1 column
2 columns with left bar
2 columns with right bar
3 columns

For more details of layout file types, you can check here official Magento 2 docs.

In case, you may like this :

How to add color picker in Magento 2 system configuration

Now, if you want to add new layout type then, you need to follow this below steps.

1) First of all, create layouts.xml at app/design/frontend/Vendor/<your_theme>/Magento_Theme/

Using this file, you can register your custom layout.

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
   <layout id="custom">
      <label translate="true">custom page layout</label>
   </layout>
</page_layouts>

2) Now, create custom.xml file at app/design/frontend/Vendor/<your_theme>/Magento_Theme/page_layout/

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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>

Now, flush cache and check your new layout option in design layout drop-down list.

I hope this blog will helpful for easily understand about how to add new page layout option in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution