Magento 2 – How to Add Custom Div Before Main Content

layoutmagento2

I am trying to add my custom div with class and id before the maincontent.

 <main id="maincontent" class="page-main">

can i add the custom div before this line? How this can be done. Please anyone suggest me.

Best Answer

You can try the below code:

<referenceContainer name="page.wrapper">
    <container name="your.custom.name" as="your-custom" label="Your Label Name" htmlTag="div" htmlClass="your-class" htmlId="your-id" before="main.content">
        <block class="Magento\Framework\View\Element\Template" name="custom.file" template="Vendor_Module::custom.phtml" /><!-- This is just an example -->
    </container>
</referenceContainer>

UPDATED ANSWER AS PER COMMENT:

Create default.xml under:

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

<referenceContainer name="page.wrapper">
    <container name="your.custom.name" as="your-custom" label="Your Label Name" htmlTag="div" htmlClass="your-class" htmlId="your-id" before="page-footer"/>
</referenceContainer>
<move element="main.content" destination="your.custom.name"/>
Related Topic