How to setup a custom layout for a CMS page?

dmitry_fedyuk · February 18, 2016, 12:05pm

You can set a page layout for a CMS page through the «Design» → «Layout» option on the CMS page’s backend screen:

You can define a custom page layout through a layouts.xml file.

Examples of the standard `layouts.xml` files:

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/frontend/layouts.xml#L8-L21


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="1column">
    <label translate="true">1 column</label>
</layout>
<layout id="2columns-left">
    <label translate="true">2 columns with left bar</label>
</layout>
<layout id="2columns-right">
    <label translate="true">2 columns with right bar</label>
</layout>
<layout id="3columns">
    <label translate="true">3 columns</label>
</layout>
</page_layouts>

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/base/layouts.xml#L8-L12


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="empty">
    <label translate="true">Empty</label>
</layout>
</page_layouts>

Each page layout contains its definition in a separate file inside a page_layouts folder.

Examples of the standard layouts definitions:

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/base/page_layout/empty.xml#L8-L8


<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/frontend/page_layout/1column.xml#L8-L8


<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/frontend/page_layout/2columns-left.xml#L8-L8


<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/frontend/page_layout/2columns-right.xml#L8-L8


<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/Theme/view/frontend/page_layout/3columns.xml#L8-L8


<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

dmitry_fedyuk · February 18, 2016, 12:16pm

Examples of the standard layouts.xml files:

Examples of the standard layouts definitions:

Examples of the standard `layouts.xml` files: