15/08/2022
We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
How to set theme layouts in Magento2?
In Magento 2, Layouts, containers and blocks are the basic components of design. The structure of a webpage is represented by a layout. Containers are the placeholders in the same web page structure. And UI components in the place holders are called containers. We will define these terms in details below.
The goal is to develop a well-structured, common set of layouts instructions to manifest web pages. Pages can be categorized in different ways like 1,2 or 3 column layouts. Admin panel can be used to apply these page layouts.
Layouts
Layouts use XML files to give the structures for web pages, XML file identifies the containers and blocks. We will describe XML file details later.
Containers
Containers allocate content structure to a web page using container tags in a layout XML file. A container does not have any additional content except just the content of elements included. Header, footer, left column, the main column is some examples of containers.
Blocks
Blocks use block tags within a layout XML file to render UI elements on a page. Blocks use templates to create the HTML. HTML is later on inserted into its parent structural block. Mini cart, list of category, product listing and tags are some examples of blocks.
Purpose of page layouts
Page layout purpose is to create a structured, standard set of page layout instructions that can be used to render pages. Many web pages can be categorized to fit 1, 2, or 3-column system. To provide a specific layout for each page, these page layouts can be selected from the admin panel.
Basic layouts
Magento storefront pages is described in two-page configuration layout files that are located in Magento theme module:
- <Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout.
- <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ <head> section.
These fundamental page configuration layouts are extended in other Magento themes and modules. These themes can also be extended or override later in our custom themes.
Layout handles
Layout handles are sets of layout instructions that are identified uniquely. The layout handle serves as the name of the layout file.
There are three different types of layout handles:
page-type
Page type layout handles are synonyms of the page type identifiers. Corresponding “full action names” of controller actions, e.g., catalog_product_view.
page layout
Page layout handles are Identifiers of specific pages. Correspond to controller actions with the parameters that identify specific pages. e.g. for a CMS page, cms_page_view_id_home.xml.
arbitrary
Arbitrary handles do not correspond to any page type, but can be used by other handles.
Layout files types and conventions
For a specific page, its layout is described by two main layout components.
- Page layout file
- Page configuration file
It includes generic layout for pages that are returned in AJAX requests, emails and so on.
What is page layout?
Page layout is an XML file that declares a page wireframe inside the body of HTML page mark-up, two column page layout is an example.
What is page configuration?
Page configuration is an XML file that declares the detailed structure, contents and meta-information of a page. Metadata includes the HTML, head, and body sections of the HTML page mark-up.
What is a generic layout?
The generic layout is an XML file that declares the page's detailed structure and the contents inside the HTML page mark-up body section. It is used for returned AJAX requests, HTML snippets, and emails.
Theme layout files and module
The following points are used to differentiate layouts given by different application components:
Base layouts
Base Layout is the files provided by modules. Standard location:
- Generic layout file and page configuration <module_dir>/view/frontend/layout
- Page layout file <module_dir>/view/frontend/page_layout
These are the files provided by themes. Standard location:
- Generic layout file and page configuration <theme_dir>/<Namespace>_<Module>/layout
- Page layout files <theme_dir>/<Namespace>_<Module>/page_layout
Customize layout
To guarantee stability and security of your customizations from being deleted while upgrading, don’t change out of the box Magento theme layouts and modules. Extend or over write the layout files in your custom theme to make important changes.
If you want to develop your Magento E-commerce website, visit Magento 2 Services.