Categories: Content ManagementGeneral TipsMagento 2 TutorialsMagento NewsTips & Tricks

Magento 2: Layout File Types & Instructions

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

Toggle

a. 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

b. Page layouts declaration

To 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 layout declarations:Â <module_dir>/view/frontend/layouts.xml
Theme layout declaration:Â <theme_dir>/<Namespace>_<Module>/layouts.xml

Declare 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.

a. Page configuration file conventional location

Conventionally page configuration files must be located as follows:

ModuleÂ page configurations:Â <module_dir>/view/frontend/layout
ThemeÂ page configurations:Â <theme_dir>/<Namespace>_<Module>/layout

b. Page configuration structure and allowed layout instructions

The 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>	`layout = {layout}` `xsi:noNamespaceSchemaLocation ="{path_to_schema}"`	`<html>` `<head>` `<body>` `<update>`	Mandatory root element.
<html></html>	None	`<attribute>`	Mandatory element.
<head></head>	None	`<title>` `<meta>` `<link>` `<css>` `<script>`
<body></body>	None	`<block>` `<container>` `<move>` `<attribute>` `<referenceBlock>` `<referenceContainer>` `<action>`
<attribute>	`name = {arbitrary_name}` `value = {arbitrary_value}`		Specified forÂ `<html>`, rendered like following: `<html name="value'>`
<title>	None	None	Page title
<meta>	`content` `charset` `http-equiv` `name` `scheme`	None
<link>	`defer` `ie_condition` `charset` `hreflang` `media` `rel` `rev` `sizes` `src` `src_type` `target` `type`	none
<css>	`defer` `ie_condition` `charset` `hreflang` `media` `rel` `rev` `sizes` `src` `src_type` `target` `type`	None
<script>	`defer` `ie_condition` `async` `charset` `src` `src_type` `type`	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.

a. Generic layout file conventional location

Conventionally generic layout files must be located as follows:

Module generic layouts:Â <module_dir>/view/frontend/layout
Theme generic layouts:Â <theme_dir>/<Namespace>_<Module>/layout

b. Generic layout structure and allowed layout instructions

The 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>	`xsi:noNamespaceSchemaLocation="{path_to_schema}"`	`<container>` `<update>`	Mandatory root element
<update>	`handle="{name_of_handle_to_include}"`	None
<container>	`name="root"` For complete list of attributes, see Layout instructions	`<block>` `<container>` `<referenceBlock>` `<referenceContainer>`	Â 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:

Related Extension on LandOfcoder you may be interested in:

Phuong Pham

Next Magento 2 Tutorial: How to Create an Intergration »

Previous « Magento 2 Tutorial: How to Add Custom Header and Footer Links.

View Comments

Alex Morco says:

September 11, 2018 at 12:36 pm

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.