Magento 2 – How to Achieve a 2 Columns Page Layout

layoutmagento2

I try to get a hang of how to design a custom homepage design. I tried the samples I found here Creating a custom homepage template in Magento2 and have build a basic custom layout as pointed out. Resulting in a white home-page?

Now what I would like to achieve is a layout which looks like this:

cms homepage layout

The header can stay as it is on the Luma page.
Than I want two equal columns. In which per example can be (in the left one) text from the cms editor and in the left one a block or widget or also text from the cms editor.
Than a block showing 4 or 5 latest products
And the footer as on the luma page.

Now I have:

app/design/frontend//mytheme/Magento_Theme/Page_layout/custom_home.xml
app/design/frontend//mytheme/Magento_Theme
app/design/frontend//mytheme/Magento_Theme/layouts.xml

So how to achieve this? 🙂

this is my custom_theme structure:
custom_theme structure

Best Answer

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.

Related Topic