How to add Custom CMS page layout in Magento 2?

How To Add Custom CMS Page Layout In Magento 2
Magento2, Magento2 Tutorial

We will create custom layout with named Knowband Layout.

Create a new module with CustomLayout_CustomCMS.

Step 1: Create registration.php file.

app/design/frontend/CustomLayout/CustomCMS/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::MODULE,
	'CustomLayout_CustomCMS',
	__DIR__
);

Step 2: Create module.xml file.

app/design/frontend/CustomLayout/CustomCMS/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="CustomLayout_CustomCMS" setup_version="1.0.0">
    </module>
</config>

Step 3: Create kb_layout.xml file.

app/design/frontend/CustomLayout/CustomCMS/view/frontend/page_layout/kb_layout.xml

<?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 4: Create layouts.xml file.

app/design/frontend/CustomLayout/CustomCMS/view/frontend/layouts.xml

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

Step 5: Run the below command.

php bin/magento setup:upgrade

After creating these files, your custom layout will be added to the layout list.

Go to Admin panel > Content > Pages > Add New Page > Design

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Magento 2. You can also visit the Magento2 development page to check the services we offer.