{"id":11953,"date":"2021-01-09T10:45:36","date_gmt":"2021-01-09T05:15:36","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=11953"},"modified":"2021-01-15T16:22:58","modified_gmt":"2021-01-15T10:52:58","slug":"create-custom-page-layout-magento-2","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento\/create-custom-page-layout-magento-2\/","title":{"rendered":"How to Create Custom Page Layout in Magento 2"},"content":{"rendered":"

In this post I am going to explain how to create custom page layout in Magento 2.<\/p>\n

Magento 2 provides five front-end page layouts as below.<\/p>\n

1. Empty
\n2. 1column
\n3. 2columns-left
\n4. 2columns-right
\n5. 3column<\/p>\n

You can find all layouts at below path.<\/p>\n

vendor\/magento\/module-theme\/view\/base\/page_layout\/<\/pre>\n
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.<\/p>\n
So, now we are going to make custom page layout.<\/p>\n
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.<\/p>\n
Path: app\/design\/frontend\/<vendor>\/<your_theme>\/Magento_Theme\/page_layout\/custom-layout.xml<\/strong><\/p>\n
<?xml version=\"1.0\"?>\r\n\r\n<layout xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_layout.xsd\">\r\n    <update handle=\"empty\"\/>\r\n    <referenceContainer name=\"page.wrapper\">\r\n        <container name=\"header.container\" as=\"header_container\" label=\"Page Header Container\" htmlTag=\"header\" htmlClass=\"page-header\" before=\"main.content\"\/>\r\n        <container name=\"page.top\" as=\"page_top\" label=\"After Page Header\" after=\"header.container\"\/>\r\n        <container name=\"footer-container\" as=\"footer\" before=\"before.body.end\" label=\"Page Footer Container\" htmlTag=\"footer\" htmlClass=\"page-footer\"\/>\r\n    <\/referenceContainer>\r\n<\/layout><\/pre>\n
 <\/p>\n
Next, we need to do declaration in the list of layouts. So you can see this new layout option in all layout drop-downs.<\/p>\n
Make the file “layouts.xml” at below path and add below code in it.<\/p>\n
Path: app\/design\/frontend\/<vendor>\/<your_theme>\/Magento_Theme\/layouts.xml<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n\r\n<page_layouts xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/PageLayout\/etc\/layouts.xsd\">\r\n    <layout id=\"custom-layout\">\r\n        <label translate=\"true\">Custom Layout<\/label>\r\n    <\/layout>\r\n<\/page_layouts><\/pre>\n
Now, Our new page layout is reday to use.<\/p>\n
For example, Here I am going to change the contact page layout.<\/p>\n
Make the file “contact_index_index.xml” at below path.<\/p>\n
Path: app\/design\/frontend\/<vendor>\/<your_theme>\/Magento_Contact\/layout\/contact_index_index.xml<\/strong><\/p>\n
The code of the file should like:<\/p>\n
<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"custom-layout\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <head>\r\n        <title>Contact Us<\/title>\r\n    <\/head>\r\n<\/page><\/pre>\n
After all changes done, refresh cache and open contact page see your layout changes applied or not.<\/p>\n
<\/div>
 <\/a>
<\/div><\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
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. vendor\/magento\/module-theme\/view\/base\/page_layout\/ Sometimes if amount of customization is too much then in… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":12255,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,59,2138],"tags":[729,9,10,2153],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11953"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=11953"}],"version-history":[{"count":3,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11953\/revisions"}],"predecessor-version":[{"id":12251,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/11953\/revisions\/12251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/12255"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=11953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=11953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=11953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}