In today's tutorial, we will explain how to create a custom CMS page layout XML file in Magento 2. It can be majorly used when you want to add any custom CSS and JS to your custom CMS page.
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:
First of all, we believe that you already have a simple module. Now, create an XML file in your layout folder. The file name should be : cms_page_view_id_<your-custom-cms-page-identifier>.xml
Once you create the file, paste the below code in that file. Now, add a block, container, jss, etc depending on your requirement.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add your css and js file tag here-->
</head>
<body>
<!-- Add your reference container, ref block etc. here -->
</body>
</page>
Post this, simply clean the cache and check your output.
That’s it !!!
We hope we covered every step in this tutorial, if we missed out something, feel free to reach us out!
Also read:
How to Add New Page Layout Option in Magento 2
How to Convert CMS Page Content to HTML in Magento 2
How to Change Product View Page Layout Based on Price in Magento 2