As you may know, layout is the face of any page. In this article, we will focus on Layout of Magento 2. In magento 2, layout is defined by two major layout components: page layout file and page configuration file. We also distinguish the third type of layout files, generic layouts with the expectation that you can easily define what type of layout file you are using for your site.
This blog gives you a comprehensive description of each magento 2 layout file type and their instructions.
1.Page layout file
The first magento 2 layout file type is Page layout file.
Definition: A page layout file defines the page wireframe, for example, one-column layout. Technically page layout is an .xml file defining the structure inside the <body> section of the HTML page markup. Page layouts feature only containers. All page layouts used for page rendering should be declared in the page layout declaration file.
Page layout declares the wireframe of a page inside the <body> section, for example one-column layout or two-column layout.
Allowed layout instructions:
Sample page layout:
<Magento_Theme_module_dir>/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>Table of Contents
Conventionally page layouts must be located as follows:
<module_dir>/view/frontend/page_layout<theme_dir>/<Namespace>_<Module>/page_layoutTo be able to use a layout for actual page rendering, you need to declare it in layouts.xml.
Conventionally layout declaration file can be located in one of the following locations:
<module_dir>/view/frontend/layouts.xml<theme_dir>/<Namespace>_<Module>/layouts.xmlDeclare a layout file using the <layout></layout> instruction, for which specify the following:
<layout id="layout_file_name">. For example, the 2columns-left.xml page layout is declared like following: <layout id = "2columns-left"/><label translate="true|false">{Label_used_in_Admin}</label>Sample page layout declaration file:
<Magento_Theme_module_dir>/view/frontend/layouts.xml<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="1column">
<label translate="true">1 column</label>
</layout>
<layout id="2columns-left">
<label translate="true">2 columns with left bar</label>
</layout>
<layout id="2columns-right">
<label translate="true">2 columns with right bar</label>
</layout>
<layout id="3columns">
<label translate="true">3 columns</label>
</layout>
</page_layouts>2. Layout page configuration
The second one in the list of magento 2 layout file types is Page configuration.
Definition: Page configuration is also an .xml file. It defines the detailed structure (page header, footer, etc.), contents and page meta information, including the page layout used. Page configuration features both main elements, blocks of particular classes and containers.
The page configuration adds content to the wireframe defined in a page layout file. A page configuration also contains page meta-information, and contents of the <head> section.
Conventionally page configuration files must be located as follows:
<module_dir>/view/frontend/layout<theme_dir>/<Namespace>_<Module>/layoutThe following table describes the instructions specific for page configuration files. For the descriptions of common layout instructions see the Layout instructions article.
| Element | Attributes | Parent of | Description |
| <page></page> |
|
| Mandatory root element. |
| <html></html> | None |
| Mandatory element. |
| <head></head> | None |
| |
| <body></body> | None |
| |
| <attribute> |
| Specified for <html>, rendered like following:
| |
| <title> | None | None | Page title |
| <meta> |
| None | |
| <link> |
| none | |
| <css> |
| None | |
| <script> |
| None |
3. Generic Layout
The last type is Generic Layout.
Definition: Generic Layouts are .xml files which define the contents and detailed structure inside the <body> section of the HTML page markup. These files are used for pages returned by AJAX requests, emails, HTML snippets and so on.
Conventionally generic layout files must be located as follows:
<module_dir>/view/frontend/layout<theme_dir>/<Namespace>_<Module>/layoutThe following table describes the instructions specific for generic layout files. For the descriptions of common layout instructions see the Layout instructions article.
| Element | Attributes | Parent of | Description |
| <layout></layout> |
|
| Mandatory root element |
| <update> |
| None | |
| <container> |
|
| Â Mandatory element |
Sample generic layout:
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
<update handle="formkey"/>
<update handle="adminhtml_googleshopping_types_block"/>
<container name="root">
<block class="Magento\Backend\Block\Widget\Grid\Container" name="googleshopping.types.container" template="Magento_Backend::widget/grid/container/empty.phtml"/>
</container>
</layout>Above is some of my sharing about Magento 2 Layout file types. Hopefully, you will get a general understanding about this and can easily define what type of layout file you are using for your online store. If you have any question, please give us your comment.
Related Blogposts You May be Interested In:
In the global business arena, AI vs Traditional B2B eCommerce has altered how businesses interact,…
As an ecommerce business owner, it would be a dream to see thousands of interested…
If you ask an expert web designer from a leading website design company, he will…
Due to the ever-increasing reliance of businesses on third-party apps and integrations to complete processes…
Your website is a visual representation of your restaurant. It acts as a welcome mat…
The availability of no-code tools has made software development more accessible than ever before. Businesses…
View Comments
Thanks for sharing this awesome article, I was trying to edit product page on Magento store and your post helped me a lot, Here’s another guide that helped me to update Meta tags through Magento layout xml file (https://www.cloudways.com/blog/customize-magento-modules-through-layout-xml-files/), hope it will help your readers to find the use of this file with different functions.