Magento – Magento 2 add new custom container above
tag

customlayoutmagento2page-layouts

I want to add new custom container the <main> tag.

I have created the custom layout for my custom page design. I have created in the below directory:

app\design\frontend\Vendor\Theme\Magento_Theme\page_layout\custom_layout.xml

And than assigned this in the layouts.xml like below:

app\design\frontend\Vendor\Theme\Magento_Theme\page_layout\custom_layout.xml

<?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="custom_layout">
        <label translate="true">Custom Layout</label>
    </layout>
</page_layouts>

And assigned this layout to my custom page. It's spearing in the frontend design, I just want to add new div container above the <main>.

How I can add new div container above the <main>?

enter image description here

Best Answer

<referenceContainer name="page.wrapper">
    <container name="{your_name}" htmlTag="div" before="main.content">
        <!-- must have content to display -->
        <block name="{some_content_block}" />
    </container>
</referenceContainer>

Be aware that the container will only display if it has content!

Reference: app/code/Magento/Theme/view/base/page_layout/empty.xml -> here you will find your main.content container wrapped in page.wrapper container thus you have to place your new container into page.wrapper with the before attribute to make it appear before main.content.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 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">
    <container name="root">
        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>
        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">
                <container name="columns.top" label="Before Main Columns"/>
                <container name="columns" htmlTag="div" htmlClass="columns">
                    <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main"/>
                </container>
            </container>
            <container name="page.bottom.container" as="page_bottom_container" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"/>
            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
        </container>
    </container>
</layout>
Related Topic