As you know, layout is a tool to build Magento application pages.
In Magento 2, layout is defined by two main layout components (page layout file and page configuration file) and another layout file type as generic layouts.
1. Page Layout File
Page layout file is defined as the frame of the page and is a file.xml which determines the internal structure of the body.
The page layout feature has only containers.
The components are allowed to use in page layout:
- Container: is a structure without content which contains block and container components.
Take an example: a sample in the layout.
<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: when there is an existing container and you want to put your block or container in that container, you will use the ReferenceContainer tag.
For example, you can override this value in your layout. In case you eliminate the value as true, the display attribute is ignored.
<referenceContainer name="container.name" display="false" />
- Move: is used to declare the block or container component as a child of another component in a certain order.
For example:
<move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/>
- Update: is used to add a complete handle layout into another layout.
For example:
<update handle="{name_of_handle_to_include}"/>
⇒ For example, a column layout is declared in a directory.
vendor/magento/module-theme/view/frontend/page_layout/1column.xml
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="page.wrapper"> <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/> </referenceContainer> </layout>
1.1 Location of page layout file
Page layout is usually located in the following positions:
- Module page layouts: <module_dir> / view / area / page_layout.
- Theme page layouts: <theme_dir> / <Namespace> _ <Module> / page_layout.
1.2. Declare page layout
In default Magento 2, there are 5 types of page layout for the frontend (empty, 1column, 2columns-left, 2columns-right, and 3columns) and 3 types of page layout for the backend (admin-empty, admin-1column, and admin-2columns-left).
When you desire to use layout for rendering a page, you need to declare it in layout.xml file.
The layout file is declared in the following positions:
- Module layout declarations: <module_dir> /view/frontend/layouts.xml
- Theme layout declaration: <theme_dir> / <Namespace> _ <Module> /layouts.xml
Declaring layout files often uses the following <layout> </layout> structure:
– <layout id=”layout_file_name”>
For example, the 1column.xml page layout is declared as follows:
layout id="1column">
– <label translate=”true|false”>{Label_used_in_Admin}</label>
The layout file template is declared in the 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. Page configuration file
The page configuration is 1 .xml file, which determines the detailed structure (page header, footer, …), content and meta information of the page. The page configuration has both the main blocks and containers.
The page configuration adds content to the specified frame in a page layout file. The page configuration also contains meta data information and the content of the <head> section.
2.1. Location of the page configuration file
Page configuration is usually in the following positions:
- Module page configurations: <module_dir>/view/frontend/layout
- Theme page configurations: <theme_dir>/<Namespace>_<Module>/layout
2.2. The page configuration structure and allowed layout instructions
| 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> | contentcharsethttp-equivnamescheme | None | |
| <link> | deferie_conditioncharsethreflangmediarelrevsizessrcsrc_typetargettype | none | |
| <css> | deferie_conditioncharsethreflangmediarelrevsizessrcsrc_typetargettype | None | |
| <script> | deferie_conditionasynccharsetsrcsrc_typetype | None |
For example: The page structure of the default_head_blocks.xml file is placed in the directory
vendor / magento / module-theme / view / frontend / layout / default_head_blocks.xml
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/> <css src="mage/calendar.css"/> <script src="requirejs/require.js"/> <script src="mage/polyfill.js"/> </head> <body> <referenceContainer name="after.body.start"> <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Theme::js/components.phtml" before="-"/> </referenceContainer> </body> </page>
3. Generic layout (Common Layout)
Generic Layouts is a file.xml that defines the content and detailed structure within the <body> section. These files are used for pages returned by Ajax, email, html, etc.
Differences between Generic layout and page layout: Generic layout represents a portion of the page (mostly html content). You can use this type of layout when you let your page inherit content from the original layout such as header, footer, etc.
3.1. Generic layout file location
Normally, Generic layout files must be located in the positions as below:
- Module generic layouts: <module_dir>/view/frontend/layout.
- Theme generic layouts: <theme_dir>/<Namespace>_<Module>/layout.
3.2. Generic layout and allowed layout structures
The following table gives specific instructions for generic layout files:
| 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">
