Layout file types

Page layout

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.

Allowed layout instructions:

<container>
<referenceContainer>
<move>
<update>

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>

To be able to use a layout for actual page rendering, you need to declare it in layouts.xml.

Page configuration

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.

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

Generic layouts

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

results matching ""

No results matching ""