In this post I am going to explain how to create custom page layout in Magento 2.
Magento 2 provides five front-end page layouts as below.
1. Empty
2. 1column
3. 2columns-left
4. 2columns-right
5. 3column
You can find all layouts at below path.
1 | vendor/magento/module-theme/view/base/page_layout/ |
Sometimes if amount of customization is too much then in this case you can override these layouts or you can different page layout for your page.
So, now we are going to make custom page layout.
First, make file “custom-layout.xml” at below path and here we will copy content from “1column” layout. It means our new custom layout is extended from “Empty” layout.
Path: app/design/frontend/<vendor>/<your_theme>/Magento_Theme/page_layout/custom-layout.xml
1 2 3 4 5 6 7 8 9 10 | <?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> |
Next, we need to do declaration in the list of layouts. So you can see this new layout option in all layout drop-downs.
Make the file “layouts.xml” at below path and add below code in it.
Path: app/design/frontend/<vendor>/<your_theme>/Magento_Theme/layouts.xml
1 2 3 4 5 6 7 | <?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> |
Now, Our new page layout is reday to use.
For example, Here I am going to change the contact page layout.
Make the file “contact_index_index.xml” at below path.
Path: app/design/frontend/<vendor>/<your_theme>/Magento_Contact/layout/contact_index_index.xml
The code of the file should like:
1 2 3 4 5 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="custom-layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>Contact Us</title> </head> </page> |
After all changes done, refresh cache and open contact page see your layout changes applied or not.
Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!
Leave a Reply