6

I am having a doubt.

  • What is mean by 1 column, 2 columns-left, 2 columns-right and 3 columns ?
  • What is the use ?
  • How we can identify this page is 1 column , or 2 columns-left or 2 columns-right or 3 columns ?
  • Can anyone please explain in brief ?

Thanks in advance.

Improve this question

3 Answers 3

Reset to default
5

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
Improve this answer
6
  • Anytime, If it solves your query then you can mark solution as accepted which will help future readers.
    – Aditya Shah
    Apr 24, 2019 at 5:00
  • what is the use of <update handle="1column"/> update handle?
    – Priya
    Apr 24, 2019 at 5:35
  • The update handle is basically a "merge this layout with my current layout".
    – Aditya Shah
    Apr 24, 2019 at 5:47
  • Thank you. one more thing , can you please explain me brief in Ajax in magento2
    – Priya
    Apr 24, 2019 at 6:08
  • sure, you are aware about normal AJAX right ?
    – Aditya Shah
    Apr 24, 2019 at 6:11
2

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">
Improve this answer
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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