2

On the page layouts 1 column, 2 columns, 3 columns, there is always a div called "columns" in it. I would like to create a page layout, where that div does not exist. How can I do that? Where is that file / where do I need to copy it to my theme?

9

You need to create two files for custom layout

1 - Create layouts.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

This file will registered custom layout

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

After creating above file you can check your custom layout in admin panel.

2 - Create custom.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

This file will manage design for your layout page.

<?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" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

Now, flush the cache and check the new custom layout in admin panel configuration setting.

Check this link for the full article: blog.mageprince.com

enter image description here

| improve this answer | |
  • Thanks alot. Where would I need to copy these files in my own theme folder? And How can I prevent that the div "column main" is in the layout? thanks! – N1njaWTF May 12 '17 at 9:11
  • @N1njaWTF see my updated answer. – Prince Patel May 12 '17 at 9:23
  • 1
    I tried it, but it gives me a white page with this custom layout (Magento 2.2.0), I get the following error message in the logs: main.INFO: Broken reference: the 'header.panel.wrapper' element cannot be added as child to 'header.container', because the latter doesn't exist [] [] – DevonDahon Oct 19 '17 at 7:10
0

If you want to change inside layout XML file in your custom theme.

Copy the

vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml

to

app/design/frontend/PACKAGE/THEME/Magento_Catalog/layout/catalog_product_view.xml

If you want to display product details page 2column left then change file is catalog_product_view.xml, set layout value layout="2columns-right" inside <page> node.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

If you want it for cms pages, you can do it using the admin panel, just go to Content > Pages > Select the page, from the left bar, select the Design tab, on the Layout drop-down on the right select the 2 columns right.

CMS Page Design

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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