4

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

Improve this question

2 Answers 2

Reset to default
7 
<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>
Improve this answer
0
4

Preferred way is to edit in theme's default.xml file. You may create or edit the default.xml file at path app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

If one wants to add container div under column div, should try this.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
           <referenceContainer name="columns">
                <container name="container" label="" htmlTag="div" htmlClass="container" />
            </referenceContainer>        
           <move element="main" destination="container" before="-"/>
        </body>
</page>
Improve this answer
1
  • This answer was helpful thank you. I wanted to put the search bar as a child of the navigation sections. <referenceContainer name="page.top"> <container name="toptop" label="" htmlTag="div" htmlId="toptop" /> </referenceContainer> <move element="navigation.sections" destination="toptop" after="-"/> <move element="top.search" destination="toptop" after="-"/>
    – Liam Mitchell
    Commented Feb 27, 2019 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.