How to create a new page layout with 4 columns?

Question

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.

Answer 1

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>

Answer 2

I finally solved the issue this way.

Declare the layout in VENDOR/THEME/Magento_Theme/layouts.xml

<?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>

Create the four columns layout VENDOR/THEME/Magento_Theme/page_layout/4columns.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="empty"/>

    <referenceContainer name="columns">

        <container name="column1" htmlTag="div" htmlClass="column-float-left" after="-">
            <block class="Magento\Framework\View\Element\Text">
                <arguments>
                    <argument name="text" xsi:type="string">Sample text in fourth column</argument>
                </arguments>
            </block>
        </container>

        <container name="column2" htmlTag="div" htmlClass="column-float-left" after="-">
            <block class="Magento\Framework\View\Element\Text">
                <arguments>
                    <argument name="text" xsi:type="string">Sample text in fourth column</argument>
                </arguments>
            </block>
        </container>

        <container name="column3" htmlTag="div" htmlClass="column-float-left" after="-">
            <block class="Magento\Framework\View\Element\Text">
                <arguments>
                    <argument name="text" xsi:type="string">Sample text in fourth column</argument>
                </arguments>
            </block>
        </container>

        <container name="column4" htmlTag="div" htmlClass="column-float-left" after="-">
           <block class="Magento\Framework\View\Element\Template" name="test" template="Magento_Theme::lorem.phtml" />
        </container>

    </referenceContainer>

</layout>

Create a template file for the last column VENDOR/THEME/Magento_Theme/templates/lorem.phtml

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem suscipit, adipisci, cum quos, alias similique ad eum at deserunt eligendi enim dignissimos, unde vero ipsam voluptatibus cumque accusantium! Obcaecati, quasi.</h2>

Declare CSS in VENDOR/THEME/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" />
    <css src="css/styles.css" /> 
  </head>
</page>

Set CSS in VENDOR/THEME/web/css/styles.css

.page-layout-4columns .column-float-left {
     float: left;
     width: 25%;
}

Flush the cache:

bin/magento cache:flush

Load the new layout fron "Content > Pages > Home Page" and open your homepage to see the result.

But I'm now wondering how to do it from the "3columns" handle instead of the "empty" handle.