Magento 2 – How to Create a New Page Layout with 4 Columns

layoutmagento2.2

I'm trying to achieve exercise 3.6.9 of "Core Principles for Theming in Magento 2" from Magento U.

In my custom theme, I have this tree structure :

|-- Magento_Theme
|   |-- layouts.xml
|   `-- page_layout
|       `-- 4columns.xml

layouts.xml contains :

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="4columns">
        <label translate="true">4 columns</label>
    </layout>

</page_layouts>

And 4columns.xml contains :

<?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="3columns"/>

    <referenceContainer name="4columns">
        <container name="fourth.column" htmlTag="div" htmlClass="fourth-column" after="-" >
        </container>
    </referenceContainer>

</layout>

When I select the "4 columns" layout in "Content > Pages > Home Page", I get a white screen in the frontend homepage. What's wrong with this code ?

I'm doing my tests with a fresh install of Magento 2.2.0 with sample data. My homepage is set to display a widget with new products list when it works, which works fine when selecting other default layouts.

Best Answer

Replace line in 4columns.xml:

<referenceContainer name="4columns">

to:

<referenceContainer name="columns">

We adding new column in container named "columns", not "4columns".

Full page layout with sample text in fourth column:

<?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="empty"/>

    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>

    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
        <container name="fourth.column" htmlTag="div" htmlClass="fourth-column" after="-">
            <block class="Magento\Framework\View\Element\Text">
                <arguments>
                    <argument name="text" xsi:type="string">Sample text in fourth column</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>

</layout>

Related Solutions

Magento 2 – How to Achieve a 2 Columns Page Layout

You can achieve all of above without creating a new page layout which is preferable in my opinion. I will only create a custom layout if a very complex layout structure is required which is not achievable through already available layout pages. Magento's layout instructions let you re-use, modify and change layout by using layout instructions.

In your case you can use 1 column page layout and add layout instructions in app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml file to achieve what you require. Let's say you have two cms static blocks with id "cms_block_1" and "cms_block_2", you can use below code:

<?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">
<body>         
<referenceContainer name="content">
        <block name="cms.block1" before="-" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_1</argument>
            </arguments>
        </block>

      <block name="cms.block2" after="cms.block1" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_2</argument>
            </arguments>
        </block>
    </referenceContainer>
    </body>
</page>

Similarly you can create another CMS static block and show it after cms.block2 which will position it at the bottom. You can use css to position block one and block 2 parallel to each other.

Magento 2 – How to Add a New Page Layout

You need to create two files for custom layout

1 - Create layouts.xml

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

This file will registered custom layout

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

After creating above file you can check your custom layout in admin panel.

2 - Create custom.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

This file will manage design for your layout page.

<?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="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

Now, flush the cache and check the new custom layout in admin panel configuration setting.

Check this link for the full article: blog.mageprince.com

Best Answer

Related Solutions

Magento 2 – How to Achieve a 2 Columns Page Layout

Magento 2 – How to Add a New Page Layout

Related Topic