{"id":22244,"date":"2018-10-27T12:28:17","date_gmt":"2018-10-27T12:28:17","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=22244\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2022-07-21T12:29:35","slug":"create-custom-layout-cms-pages-magento-2","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/magento-tutorials\/create-custom-layout-cms-pages-magento-2\/","title":{"rendered":"How to Create a Custom Layout for CMS Pages in Magento 2?"},"content":{"rendered":"

Computer software called a content management system (CMS) is used to control the creation and modification of digital content (content management). Enterprise content management (ECM) and web content management (WCM) are typical applications for a CMS.<\/p>\n

ECM typically integrates document management, digital asset management, and record retention to support multiple users in a collaborative setting.<\/p>\n

In contrast, WCM is a collaborative process for creating websites that allows for the inclusion of text as well as embedded graphics, photos, video, audio, maps, and program code that interacts with users and displays content.<\/p>\n

In this article, we\u2019ll learn about how to create custom CMS pages layout for our cms pages.<\/p>\n

We\u2019ll create a custom layout named Knowband Layout.<\/strong><\/p>\n

\"Magento<\/a><\/p>\n

Magento provides us with the following layout:<\/p>\n

-> Empty<\/p>\n

-> 1 column<\/p>\n

-> 2 columns with left bar<\/p>\n

-> 2 columns with right bar<\/p>\n

-> 3 columns<\/p>\n

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:<\/p>\n

Step 1:<\/strong><\/p>\n

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

 <\/p>\n

<?xml version="1.0" encoding="UTF-8"?>\r\n\r\n<layout xmlns:xsi="https:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_layout.xsd">\r\n\r\n<update handle="empty"\/><!-- you can change the handle like 2columns-left or 3columns etc-->\r\n\r\n<referenceContainer name="page.wrapper">\r\n\r\n<container name="header.container" as="header_container" label="Page Header Container"\u00a0 htmlTag="header" htmlClass="page-header" before="main.content"\/>\r\n\r\n<container name="page.top" as="page_top" label="After Page Header" after="header.container"\/>\r\n\r\n<container name="footer-container" as="footer" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" \/>\r\n\r\n<\/referenceContainer>\r\n\r\n<\/layout><\/pre>\n
Step 2:<\/strong><\/p>\n
 <\/p>\n
Create <Vendor_Name>\/<Module_Name>\/view\/frontend\/layouts.xml. This file will register the custom layout.\r\n\r\n<?xml version="1.0" encoding="UTF-8"?>\r\n\r\n<page_layouts xmlns:xsi="https:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/PageLayout\/etc\/layouts.xsd">\r\n\r\n<layout id="kb_layout">\r\n\r\n<label translate="true">Knowband Layout<\/label>\r\n\r\n<\/layout>\r\n\r\n<\/page_layouts><\/pre>\n
After creating these two files, clear the cache and your custom layout will be added to the layout list.<\/p>\n
You can check your custom layout in the admin side at Content-> Pages -> Add New Page -> Design<\/p>\n
\"create-a-custom-layout\"<\/a><\/p>\n
Thanks for reading this. Please feel free to reach us at support@knowband.com for any issues.<\/p>\n
Knowband also provides many great extensions for major CMS platforms like Prestashop, Opencart, Magento, Magento 2, and Woocommerce.<\/p>\n
Take a look at our No Code Mobile App solution for all major CMS platforms here<\/a>.<\/p>\n
Know more:
\n