4

I am a newbie to magento .I have created a custom layout page & it appears in admin dropdown as well. But I don't know what code to put to divide it into 4 columns ?Can anyone explain me how html is generated ?

<container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>

What is header.container ?Where is it located

This is my default.xml.

<page layout="4columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="logo">
        <arguments>
            <argument name="logo_file" xsi:type="string">images/custom-logo.jpg</argument>
            <argument name="logo_img_width" xsi:type="number">100</argument> 
            <argument name="logo_img_height" xsi:type="number">100</argument>
        </arguments>
    </referenceBlock>
    <referenceContainer name="fouth.column">
<block class="Magento\Cms\Block\Block" name="home-page-block">
<arguments>
   <argument name="block_id" xsi:type="string">home-page-block</argument>
<arguments>
</block>
</referenceContainer>
</body>
</page>
2

2 Answers 2

2

It sounds like all you've done is declare a new page layout in layouts.xml without actually adding a new layout? If so then you will need to add an XML file for the page layout which is where you set up your 4 columns.

There are a few ways you can do this and it depends on your requirements and the way you work which way is best for you, in my example I'll do it the same way the other columns have been created in Magento 2.

Page Layout XML

Create app/design/frontend/VENDOR-NAME/THEME-NAME/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="3columns"/>

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

        </container>
    </referenceContainer>
</layout>

In here we 'extend' the 3columns layout (rather than reinvent the wheel), and add our container (column) into the layout. Then we add our new column to (the already set up) columns container.

Adding content to the new column

You can now add any content you wish into this column as you normally would in a layout file (not page_layout)!. For example in app/design/frontend/VENDOR-NAME/THEME-NAME/Magento_Theme/layout/default.xml:

<referenceContainer name="fourth.column">
    <block class="Magento\Framework\View\Element\Template" name="example.content" template="Magento_Cms::homepage/homepage-carousel.phtml" />
</referenceContainer>

Styling

If you set a page to use the 4 columns layout you should now see the content for your 4th column, although it won't yet be floating alongside the other columns. To achieve this try something along the lines of:

.page-layout-4columns .fourth-column,
.page-layout-4columns .sidebar,
.page-layout-4columns .main {
     float: left;
     width: 33.333%;
}

I haven't checked whether that CSS is correct or not so you'll likely need to change it to suit your needs. I know that 33.333% isn't 4 quarters but if I remember rightly two columns are in .main, or at least on the product page (the gallery and the product info are classed as 2 columns but both are in main).

I hope this helps.

6
  • I followed everything you mentioned but still it does not change my Home page layout. Jun 22, 2016 at 8:57
  • Can you please just check my default.xml file? Is there anything wrong with it? Jun 22, 2016 at 9:40
  • @user2431224 - Yeah you haven't closed the last arguments tag, it needs to be </arguments> instead of <arguments>. Also I made a typo in my answer that I've fixed, I spelt it fouth instead of fourth.
    – Ben Crook
    Jun 22, 2016 at 12:55
  • This solution doesn't work for me in Magento 2.2, I don't see the fourth column. Is there maybe some missing details in your explanation ?
    – DevonDahon
    Oct 25, 2017 at 7:42
  • Have you cleared the Magento cache?
    – Ben Crook
    Oct 25, 2017 at 10:26
0

In the xml file for layout,

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

In the page tag, you can set layout attribute with your desired column layout.

To define the 4 column page layout:

  • Create a layouts.xml file in view/frontend directory.

    <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 4columns.xml file in view/frontend/page_layout directory. Define your layout here in between layout tag like this...

    <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> __your element placement will go here.__ </layout>

8
  • I wrote a code like this : but no change :-( Jun 22, 2016 at 7:06
  • where have you created the layout file for 4 columns and by which name ? Jun 22, 2016 at 7:07
  • I have created my own theme & I have palced both the xml files as you have mentioned . this is my code for 4columns.xml <layout xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="3columns"/> </layout> Jun 22, 2016 at 7:22
  • this should work after clearing cache. Jun 22, 2016 at 7:24
  • I have cleared cache.But still the same. Jun 22, 2016 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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