Layouts

The basic components of page design are layouts, containers, and blocks. A layout represents the structure of a web page (1). Containers represent the placeholders within that web page structure (2). And blocks represent the UI controls or components within the container placeholders (3). These terms are illustrated and defined below.

The objective is to create a structured, common set of layout instructions to render pages. Most pages on a website can be categorized as a 1 column, 2 column, or 3 column layout. These page layouts can be applied to a page from within the admin panel.

In Magento 2, layouts play a crucial role in defining the structure and appearance of the storefront and admin interfaces. The layout system in Magento 2 is based on XML files and is responsible for rendering the various components of a webpage. It uses a combination of XML directives and blocks to generate the final HTML output that users see on their screens.

Here’s an overview of layouts in Magento 2:

1. XML Layout Files: Magento 2 utilizes XML files to define the layout structure for different pages of the website. These XML files are located in the `app/design/frontend` (for the storefront) and `app/design/adminhtml` (for the admin interface) directories. Each theme has its own set of layout files that can be customized to change the appearance of the store.

2. Page Layouts: The primary XML layout file in Magento 2 is the “page_layout” file. It sets up the basic structure of a page, such as the header, footer, main content area, and sidebars. Magento comes with several predefined page layouts, and you can also create custom page layouts to suit your specific requirements.

3. Blocks: In Magento 2, a block is a PHP class associated with a template file responsible for rendering a specific part of the page. Blocks contain business logic and can interact with data before rendering the output. In XML layout files, you can define which blocks are used in different sections of the page.

4. Containers: Containers are placeholders in the layout XML where blocks can be added or removed dynamically. They define the structural elements of the page, such as headers, sidebars, and footers. Containers can hold multiple blocks or other containers, creating a nested structure.

5. Reference Containers: Reference containers allow you to insert additional blocks or containers into existing containers defined by a layout. This is useful for customizing specific sections of the page without altering the original XML layout file.

6. Actions: Actions are PHP classes responsible for processing the layout XML directives and manipulating the blocks and containers accordingly. They are executed during the rendering process to determine the final arrangement of elements on the page.

7. Handle: Layout handles are XML tags that group together layout instructions for specific pages or conditions. For example, there are handles for product pages, category pages, CMS pages, and more. This allows you to target specific pages and apply different layout instructions as needed.

How to create a layout

If the new page has a 3-columns-double-footer layout, create a custom page-layout XML file: app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/3-columns-double-footer.xml

To add a block to the container, create the layout:

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layout/default.xml

Extend a layout

Rather than copy extensive page layout or page configuration code and then modify what you want to change, you only need to create an extending layout file that contains the changes you want.

To add an extending page configuration or generic layout file:

1. Put the layout file in the following location:

2. 

Override a layout

Not all layout customizations can be performed by extending layouts. If the amount of customizations is large, you can use the overriding function for the needed layout file. This means that the new file that you place in the theme will be used instead of the parent theme layout file or base layout file.

Override base layouts

To add an overriding base layout file (to override a base layout provided by the module):

1. Put a layout file with the same name in the following location:

2. 

3. These files override the following layouts:

   • <module_dir>/view/frontend/layout/<layout1>.xml
   • <module_dir>/view/frontend/layout/<layout2>.xml

Override theme layouts

To add an overriding theme file (to override a parent theme layout):

1. Put a layout file with the same name in the following location:
2. 

These files override the following layouts:

• <parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
• <parent_theme_dir>/<Namespace>_<Module>/layout/<layout2>.xml

By using XML layout files, blocks, containers, and actions, Magento 2 provides a flexible and robust system for controlling the presentation of storefront and admin interfaces. This modular approach makes it easier to customize and extend the layout of your Magento 2 store to create a unique and user-friendly shopping experience.