How to Create a Custom Layout for CMS Pages in Magento 2?

In this article, we’ll learn about how to create custom CMS pages layout for our cms pages.

We’ll create a custom layout named Knowband Layout.

Magento provides us the following layout:

-> Empty

-> 1 column

-> 2 columns with left bar

-> 2 columns with right bar

-> 3 columns

If you want to create your own customized layout for the cms pages or some specific pages then you need to focus on the following steps:

Step 1:

Create <Vendor_Name>/<Module_Name>/view/frontend/page_layout/kb_layout.xml file. This file will define the design of your custom layout.

 

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

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

<update handle="empty"/><!-- you can change the handle like 2columns-left or 3columns etc-->

<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" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />

</referenceContainer>

</layout>

Step 2:

 

Create <Vendor_Name>/<Module_Name>/view/frontend/layouts.xml. This file will register the 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="kb_layout">

<label translate="true">Knowband Layout</label>

</layout>

</page_layouts>

After creating these two files, clear the cache and your custom layout will be added to the layout list.

You can check your custom layout in the admin side at Content-> Pages -> Add New Page -> Design

create-a-custom-layout

Thanks for reading this.

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *