Custom Page Layout | Magento 2

If you want to express the uniqueness of your brand, you’ll need to create a custom page layout for your Magento 2 website.

Layout and Layout File

A layout represents the way in which a web page is structured. The layout file is an XML file that defines the page structure. When you are developing a Magento 2 website, it usually includes the changes in the page’s appearance and structure. That’s why it is extremely important to truly understand the layout instructions.

A layout file can be located in {module_root}/view/{area}/layout.The area path can be frontend or adminhtml which defines where the layout will be applied.

Basic Elements of XML Files

The basic components of XML files are containers and blocks.

A container is a structure without content that holds other layout elements such as blocks and containers. Containers are very helpful because they contain HTML tags and attributes such as div, header, class, id, etc. Also, they will not render any output if there are no children assigned to them.

A block represents the end of the chain in rendering HTML for Magento. It is a link between a PHP block class that contains logic and a template that renders content. Blocks can have children, grandchildren, and so on. Information can be passed from layout XML into the block via the <arguments/> child node.

Layout File Types

Page layout is defined by two major components: page configuration file and page layout file.

Page Configuration File

A page configuration file is an XML file that declares a detailed structure, content, and meta-information of a page (i.e., <html>, <head>, and <body> sections of the HTML page markup).

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

Page Layout File

A page layout file is an XML file that declares the page’s wireframe inside the <body> section of the HTML page markup, for example, a two-column page layout.

In Magento, there are 5 page layout types for the frontend (empty, 1column, 2columns-left, 2columns-right, and 3columns) and 3 page layout types for the backend (admin-empty, admin-1column, and admin-2columns-left).

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

Create a New Page Layout in a Custom Theme

In case you need more than an existing Magento page layout offers, you can create a new page layout. Its main purpose is to create a structured and united set of template layouts for the page display.

Today, we will create a layout for the category page (banner top) with a promo banner.

Create a Custom Page Layout

Standard layout files are located at the following path:

vendor/magento/module-theme/view/frontend/page_layout

Select the desired layout from the admin panel:

Page layouts can be customized in the admin panel for products, categories, and CMS pages.

In order to create a new layout for the category page (banner top), you have to create the page_layout folder in your theme.

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/banner-top.xml

The content should be the following:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
  	<update handle="2columns-left"/> 
    <referenceContainer name="columns.top">
    	<container name="banner.top" htmlTag="div" htmlClass="banner-top" before="-">
    		<container name="banner.top.inner" htmlTag="div" htmlClass="banner-top-inner" before="-">
    			<block class="Magento\Framework\View\Element\Template" name="banner.top.block" template="Magento_Catalog::banner.phtml"/>
    		</container>
    	</container>
    </referenceContainer>
</layout>

Insert a PHTML file in this layout (Magento_Catalog::banner.phtml) before product content and after breadcrumbs on the category page. In this file, you can load your banner:

<img src='<?php echo $this->getViewFileUrl('images/banner.jpg'); ?>' alt="Banner">

Next, you need to add a new layout to the layouts.xml file of the theme directory:

app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml

The content should be the following:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="banner-top">
        <label translate="true">Banner Top</label>
    </layout>
</page_layouts>

Note: the value of the new layout ID should match the name of the created page layout XML file.

After that, we must select our layout for a specific category in the admin panel. To change the category layout, follow this path: Products > Categories > Select your desired Category. Then, go to the Design tab, and select the desired option from the Layout dropdown.

Conclusion

This is the easiest way to create a custom page layout. With the help of these layouts, we can do a lot of useful things like adding specific CSS classes on the root reference container and style page depending on the design.

Source

Magento DevDocs