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?
Add a comment
|
2 Answers
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
answered May 11, 2017 at 15:58
-
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!– N1njaWTFCommented May 12, 2017 at 9:11
-
-
1I 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 [] [] Commented Oct 19, 2017 at 7:10
-
@PrincePatel, how can add CSS and JS file for particular this custom layout layout? Is it possible? Commented Nov 4, 2020 at 10:16
-
its working but, the customer info like email and id not fetched when this layout is set for any page Commented Nov 15, 2021 at 13:49
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.
answered May 11, 2017 at 15:02
