How to Create Custom Page Layout in Magento 2

In this article, You are going to learn about how you can create a custom page layout and manage the design of that layout with custom code guide.

Often, we are required to create a custom page layout for our custom theme or custom requirement of our Magento store for a better front-end view. However, Magento by default provides 1column, 2columns-left, 2columns-right, 3columns.

But in some cases, you need to develop a custom page layout instead of using the default page layout for your custom requirements. For homepage or any specific page you wish, you can change the page design to match your requirements and improve the page performance.

There are ways we can achieve this in Magento itself with some knowledge of coding. You need to follow the steps as described below to make custom page layouts with coding.

For example, if you want to create custom_column layout, You need to focus on two basic files,

• • layout.xml
  • page_layout/custom_column.xml

Let’s start with first step to locate the layout.xml file at,

app\code\Vendor\Extension\view\layout.xml

Use the code described below to create custom layout:

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

<page_layouts xmlns:xsi="http:// www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/ PageLayout/etc/layouts.xsd">

    <layout id=" custom_column">

       <label translate="true">Custom layout</label>

    </layout>

</page_layouts>

With this code, your custom layout file is created in admin panel.

• page_layout/custom_column.xml

locate the page_layout/custom_column.xml file at,

app\code\Vendor\Extension\view\page_layout\custom_column.xml

Use the below code to create the file to manage the design of page layout you created with above code:

<?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">

     <update handle="1column"/>

   <referenceContainer name="page.wrapper" htmlClass="page-wrapper page-layout-1column layout-custom-column"/>

</layout>

Once you have created the custom page layout file with these codes, the first thing you need to do is clear the cache. Your custom page layout will automatically be added to the page layout list.

So, in this post we learned that using these codes, you will be able to create new custom page layouts for your custom themes or requirement so that you can achieve a better frontend view. Also, you can customize the layout to help improve page performance. Follow the steps described above and you are good to go.

Lastly, if you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends and Let us know if you are facing any issue while implementing this code.

Happy Coding! ?