3

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.

11

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>
  • It's not working. – Jayesh Oct 22 '18 at 19:12
  • Can you please tell me any error log generate or? – Rohan Hapani Oct 22 '18 at 19:15
  • No log file generated about error – Jayesh Oct 22 '18 at 19:20
  • 1
    How do I find my "custom cms page identifier"? – br4nnigan Feb 27 '20 at 17:42
  • 1
    @br4nnigan, it's page's url key – Vladyslav Sikailo Sep 7 '20 at 15:00
1

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.

  • It's not working for me :( – Jayesh Oct 22 '18 at 19:04
  • I want to create in my custom module. not in theme – Jayesh Oct 22 '18 at 19:13
  • +1 for answer :) – Jayesh Oct 22 '18 at 19:23
  • How can I add custom CSS in the column-full.xml? – Rafael Perozin Nov 12 '19 at 13:48
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.