Page Layouts : 1 column , 2 columns-left , 2 columns-right , 3 column

Page layout

  • Page layout declares the wireframe of a page inside the <body> section, for example one-column layout or two-column layout.
  • The example below showed the standard tag with the layout directive, which indicates the structure (type) of the page layout from which the new page layout is inherited.
  • It means that module page with this layout file will have a one-column grid, the same that is used by the standard Magento 2 “Luma” theme on the main page.
  • I would like to remind that you can also use the admin panel to select the required template. The corresponding menu item can be found in the following way:

Content ⇒ Pages ⇒ Target_Page_Edit ⇒ Design ⇒ Layout

If you apply a standard grid to the “Luma” theme main page.

enter image description here

Where are the existing page layouts used in Magento 2?

There are 5 types of default page layouts in Magento 2. Let’s take the “Luma” theme as an example and see which main pages they are applied at.

  • empty (page without containers) – checkout pages (update from empty),
  • 1 column (one container for all the content) – home page, product-view, all-cms-pages, cart, login-page, success page,
  • 2 column with left bar (container for content and left sidebar) – what-is-new, category-view, subcategory-view, account-pages,
  • 2 column with right bar (container for content and right sidebar) – no-route-page (404),
  • 3 column (3 optional containers).

Sample page layout:

/view/frontend/page_layout/2columns-left.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <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>
    </referenceContainer>
</layout>

Page layout files conventional location Conventionally page layouts must be located as follows

  • Module page layouts: <module_dir>/view/frontend/page_layout
  • Theme page layouts: <theme_dir>/<Namespace>_<Module>/page_layout

Refrences

  1. Magento DevDocs
  2. belvg

You can read layout image via devdocs: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/layout-overview.html

To use that column via layout, you can add attribute "layout" via your layout:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

I am trying to answer in my perspective

layout in nothing but an view layer in magento 2. What you see in webpage is an layout and it can be like

1 - column, 2- coulmns-left etc..,

it will be defined in layout.xml respective to the pages you're working on.

For example :

If you're working on homepage then you must defining the layout in cms_index_index.xml likewise it varies from product page catalog_product_view.xml

and coming back to the question

1 - Column

enter image description here

2 - column left enter image description here

2 - column right - is vise-versa of 2 - column left

and

3 - column

enter image description here

2 . How to identify layout of particular page

In magento you can inspect the page and check the body tag for layout class

It looks like

page-layout-1column or page-layout-2columns-left

and it does vary from page to page.

In magento you can verify by checking the xml file and for each page there will separate layout will be defined.

Home page - cms_index_index.xml

Cateogry Page - catalog_category_view.xml

Product Page - catalog_product_view.xml

Cart page - checkout_cart_index.xml

Checkout - checkout_index_index.xml

and for cms pages you have login to admin and find out the layout in specific to pages.

For more information visit here

Hope this information helps.

Tags:

Magento2

Recent Posts