Magento – Magento 2 : How to Remove Container Div From CMS Page

cmscms-pagescontainersmagento-2.1

How to remove container block from cms page for particular layout. I have created new layout and apply on cms page but not able to customize it.

Below my custom layout code:

app/design/frontend/CleverSoft/moza/Magento_Theme

layouts.xml

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="fullpage">
        <label translate="true">Full Page Layout</label>
    </layout>
</page_layouts>

app/design/frontend/CleverSoft/moza/Magento_Theme/page_layout

fullpagelayout.xml

<?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="1column"/>
</layout>

It is possible to set block outside the main container?

Best Answer

Check Magento documentation guide on layout https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/layout-override.html

Remove container block from cms page

<referenceBlock name="your_block_name" remove="1"/>

You can create custom layout

app/design/frontend/CleverSoft/moza/Magento_Theme

layouts.xml

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="fullpage">
        <label translate="true">Full Page</label>
    </layout>
</page_layouts>

app/design/frontend/CleverSoft/moza/Magento_Theme/page_layout

filename should be layout id fullpage.xml

fullpage.xml

it may be update any layout 1column or empty or 2column-left or 2column-right Just replace <update handle=”empty”/> with the layout you wish to use, e.g <update handle=”3columns”/>. 

    <?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="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" after="-" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

if you want to further customize/override these layout 1column.xml or empty.xml or 2column-left or 2column-right.xml or 3column.xml

copy from vendor/magento/module-theme/view/base/page-layout/empty.xml.

to

app/design/frontend/CleverSoft/moza/Magento_Theme/page_layout

copy from

vendor/magento/module-theme/view/frontend/page-layout/1column.xml,2column-left,2column-right.xml,3column.xml .

to

app/design/frontend/CleverSoft/moza/Magento_Theme/page_layout

Yes you can set block outside the main container check following path

app/design/frontend/CleverSoft/moza/Magento_Theme/layout/default.xml

Let's assume this is your block 

<block class="Magento\Framework\View\Element\Template" name="your_block_name" template="vendor_modulename::template.phtml"/>

Here's how you set your block after main container

<move element="your_block_name" destination="page.wrapper" after="main.content"/>
Related Topic