Layout Overview in Magento 2

Published in

Nerd For Tech

6 min readJun 5, 2021

Welcome back to Magento 2 Tutorial series. In the previous article, we have discussed the basic Theme Concept in Magento 2. Today’s topic is the Layout overview in Magento.

In Magento, the basic concept of page building is Layout, Container and Block. Before creating a page structure we should know the layout, container and block.

Let’s Continue…

What is layouts?

Layouts are responsible for structure of any web page using an XML file that identifies all the containers and blocks composing the page.

Let me explain it in other simple way. In image , there is a page with just some lines which are dividing it into different sections, that section is describing the structure of a web page.

By default, Magento provides 5 page layout for frontend i.e, empty, 1column, 2columns-left, 2columns-right, and 3columns.

And 3 page layout for backend/admin i.e, admin-empty, admin-1column, and admin-2columns-left.

What is Container?

Container is basically a wrapper. It contains or group of <block /> and <container />.
Let me explain it, in above image there are different section like header, footer, left and main. Basically these sections are containers, there can be many of the items in each section.

For example,

Header(container) can have logo, navigation link, minicart, etc.

Attribute for container :

name : This can be used to address the container in layout . The name must be unique per generated page. For example, <container name=“custom.container” />
htmlTag : This specify the HTML tag to wrap the output. It can be aside, dd, div, dl, fieldset, main, nav, header, footer, ol, p, section, table, tfoot, ul. For example, <container name=“custom.container” htmlTag=“div” />.
htmlClass : This specify the class(es) to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” />
htmlId : This specify the id to apply to the wrapper HTML tag. For example, <container name=“custom.container” htmlTag=“div” htmlClass=“custom-container” htmlId=“custom-container” />

Sample of container in layout:

<container name="custom.container" htmlTag="div" htmlClass="custom-container" htmlId="custom-container" >
    your code goes here...
</container>

What is block?

Blocks are a foundational building unit for layout in Magento. Blocks can have children and grandchildren (and so on). Information can be passed from layout XML into the block via the <arguments/>.

In other way, see in above image there are many blocks under containers which are highlighted with dark color.

For example,

logo, header links, category filter, compare list, etc are block which is wrapped into respective container i.e, header, footer, main, etc .

Attribute for block :

name : This can be used to address the block in layout. The name must be unique per generated page. For example, <block name=“custom.block” />
class : Name of a class that implements rendering of a particular block. An object of this class is responsible for actual rendering of block output. For example, <block class=“Vendor\Module\Block\Class” />
template : This specify the template path for particular block. Notation for specifying path Tutorial_Simple::template.phtml. Here, Tutorial is vendor name , Simple is module name and template.phtml is name of template file. For example, <block template=“Vendor_Module::tempate.phtml” />
cacheable : This specify the cache property for that particular block. By default it is true, if false the entire page will not be cached with Full Page Cache. For example, <block cacheable=“false” />
ifconfig : Makes the block’s visibility dependent on a system configuration field. For example, <block ifconfig=“contact/contact/enabled” />

Sample of block in layout:

<block class=“Vendor\Module\Block\Class” name="custom.block" cacheable=“false” ifconfig=“contact/contact/enabled” template="Vendor_Module::tempate.phtml" />

Common Attribute used in container and block :

after/before : This is use toplaces the block before or after another element, as identified by its name.
remove : This is used to remove the element from rendering to frontend. By default, it is false.
move : This is used to move element in layout.

Sample of layout file :

Let’s create a new layout file with name new_layout_index.xml.

In above file name,

new is front name of a module

layout is name of controller

index is name of controller class.

Actually this is a part of Module development. We will learn about it in detail.

Under new_layout_index.xml lets create a structure of web page:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
     <container name="new.container" htmlTag="div" htmlClass="new-container" htmlId="custom-container">
      <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::newtemplate.phtml" cacheable="false" /> 
     </container>
    </body>
</page>

Output of above layout on browser :

<div class="new-container" id="custom-container">
    Content of block goes here...
</div>

Additional points which are used in layout :

referenceContainer : It is use to reference any existing container throughout the layout file. We can use existing container in our layout by its name within <referenceContainer />.

For example, if we need to add any content in main section of page

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
  <referenceContainer name="content">
   <container name="new.container" htmlTag="div" htmlClass="new-container" htmlId="custom-container">
    <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::newtemplate.phtml" cacheable="false" /> 
   </container>
  </referenceContainer>
 </body>
</page>

2. referenceBlock : It is use to reference any existing block throughout the layout file. We can use existing block in our layout by its name within <referenceBlock />.

For example, if we want to remove product sku from product detail page

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
  <referenceBlock name="product.info.sku" remove="true"/>
 </body>
</page>

We can see two type of page layout under layout file, first one is default.xml and other is specific page layout like cms_index_index.xml.

Let’s understand what is the difference between default.xml and specific page xml file:

What is difference between default.xml and specific page xml file?

To make changes available on every page, modify the default.xml file. For example, if we need to add a custom header and footer so we will modify it in default.xml. Because header and footer will be on all pages.

Location for default.xml file in theme

app/design/frontend/
 ├── Vendor/
 │   │   ├──Theme/
 │   │   │   ├── Magento_Theme
 │   │   │   |   ├── layout
 |   |   |   |   |   |── default.xml

/app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml

To add layout changes to a specific page, use a layout file that corresponds to the page’s path.

For example, if we want to make any changes only for homepage so we have to change cms_index_index.xml file.

Location for cms_index_index.xml file in theme :

app/design/frontend/
 ├── Vendor/
 │   │   ├──Theme/
 │   │   │   ├── Magento_Theme
 │   │   │   |   ├── layout
 |   |   |   |   |   |── cms_index_index.xml

/app/design/frontend/Vendor/Theme/Magento_Theme/layout/cms_index_index.xml.

Here are few example for specific page :

Homepage - cms_index_index.xml

Category Page - catalog_category_view.xml

Product Page - catalog_product_view.xml

Shopping Cart Page - checkout_cart_index.xml

Checkout page - checkout_index_index.xml

And so on…

After every change in layout file do cache flush

$ php bin/magento cache:flush

Next Tutorial topic is Configure Theme Properties in Magento 2

Hope you understand the basic concept of layout, container and block in Magento. Now I guess you are able to create a web page structure. If you have any query, you can ask me directly over email aryansrivastavadesssigner@gmail.com

If you like this article, you can buy me a cup of coffee https://www.buymeacoffee.com/aryansrivastava

Follow me on :

LinkedIn Twitter

Reference Links :

https://devdocs.magento.com