How to create custom cms page layout file?

magento.stackexchange https://magento.stackexchange.com/questions/329957

Question

In Magento 2, is there any solution to creating a custom layout XML file for custom cms page?

I want to add XML code and CSS and Js only for my custom cms page.

I know about there is one field available at admin side. But, XML code is the little bit large. So, it's not a better way.

Can anyone guide me how to create it?

Thanks.

Was it helpful?

Solution

You can create a custom CMS page layout file by using this below way.

File name should be like this :

cms_page_view_id_<your-custom-cms-page-identifier>.xml

=> For eg : If your cms page identifier is customhome, then file name should be cms_page_view_id_customhome.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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>

OTHER TIPS

app/design/frontend/Vendor/theme/Magento_Theme/page_layout/column-full.xml

<?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">
        <referenceContainer name="header.container" htmlClass="header" />
        <referenceContainer name="main.content" htmlClass="main-content" />
    </referenceContainer>
</layout>

app/design/frontend/Vendor/theme/Magento_Theme/layouts.xml

<?xml version="1.0"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="column-full">
        <label translate="true">Column Full</label>
    </layout>
</page_layouts>

Now you can use layout="column-full" in your XML file or you can select "Column Full" in CMS page > Layout Dropdown.

Hope it helps.

You can create custom page XML layout file within your custom theme at:

app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_page_view_id_page-url-key.xml
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top