{"id":62785,"date":"2016-10-22T14:19:31","date_gmt":"2016-10-22T14:19:31","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=62785"},"modified":"2024-03-22T11:57:49","modified_gmt":"2024-03-22T11:57:49","slug":"how-to-create-custom-layout-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/","title":{"rendered":"How to create custom layout page in magento2"},"content":{"rendered":"\n<p>How to create custom layout page in &nbsp;Magento2 :- Here, I am going to learn that how to create custom layout page in magento2. We already know that Magento provide following layout as default :-<\/p>\n\n\n\n<p>-Empty<\/p>\n\n\n\n<p>-1 column<\/p>\n\n\n\n<p>-2 columns with left bar<\/p>\n\n\n\n<p>-2 columns with right bar<\/p>\n\n\n\n<p>-3 columns<\/p>\n\n\n\n<p>Sometime we need some customisation in our Magento design and want to change design of Home page or any specific page.There are some points which help you to create own layout page.<\/p>\n\n\n\n<p>We considered that we already create module necessary files like(registartion.php,composer.json,module.xml etc.)<\/p>\n\n\n\n<p>There are two files needed to create custom layout page<\/p>\n\n\n\n<p>1 &#8211; \u00a0 Create Namespace\/Module\/view\/frontend\/layouts.xml this file registered custom layout<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;page_layouts xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/PageLayout\/etc\/layouts.xsd&quot;&gt;\n    &lt;layout id=&quot;test&quot;&gt;\n        &lt;label translate=&quot;true&quot;&gt;test layout&lt;\/label&gt;\n    &lt;\/layout&gt;\n&lt;\/page_layouts&gt;<\/pre>\n\n\n\n<p>After creating above file you can check your test layout in admin panel.<\/p>\n\n\n\n<p>2- Create Namespace\/Module\/view\/frontend\/page_layout\/test.xml this file to manage design your layout page.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;layout xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:framework:View\/Layout\/etc\/page_layout.xsd&quot;&gt;\n    &lt;update handle=&quot;empty&quot;\/&gt;\n    &lt;referenceContainer name=&quot;page.wrapper&quot;&gt;\n        &lt;container name=&quot;header.container&quot; as=&quot;header_container&quot; label=&quot;Page Header Container&quot; htmlTag=&quot;header&quot; htmlClass=&quot;page-header&quot; before=&quot;main.content&quot;\/&gt;\n        &lt;container name=&quot;page.top&quot; as=&quot;page_top&quot; label=&quot;After Page Header&quot; after=&quot;header.container&quot;\/&gt;\n        &lt;container name=&quot;footer-container&quot; as=&quot;footer&quot; before=&quot;before.body.end&quot; label=&quot;Page Footer Container&quot; htmlTag=&quot;footer&quot; htmlClass=&quot;page-footer&quot;\/&gt;\n    &lt;\/referenceContainer&gt;\n&lt;\/layout&gt;<\/pre>\n\n\n\n<p>Now this is complete to use as custom layout.You can check this layout in admin panel configuration setting.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1291\" height=\"634\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\" alt=\"testlayout\" class=\"wp-image-62857\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png 1291w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout-250x123.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout-300x147.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout-768x377.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout-1200x589.png 1200w\" sizes=\"(max-width: 1291px) 100vw, 1291px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Thank\u2019s for read this.If you have any query please comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create custom layout page in &nbsp;Magento2 :- Here, I am going to learn that how to create custom layout page in magento2. We already know that Magento provide following layout as default :- -Empty -1 column -2 columns with left bar -2 columns with right bar -3 columns Sometime we need some customisation <a href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":115,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[3861,3862,2070],"class_list":["post-62785","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-custom-layout","tag-custom-page","tag-magento2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create custom layout page in magento2<\/title>\n<meta name=\"description\" content=\"How to create custom layout page in magento2, custom page layout for magento2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom layout page in magento2\" \/>\n<meta property=\"og:description\" content=\"How to create custom layout page in magento2, custom page layout for magento2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-22T14:19:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T11:57:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\" \/>\n<meta name=\"author\" content=\"Shubham Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shubham Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\"},\"author\":{\"name\":\"Shubham Sharma\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd\"},\"headline\":\"How to create custom layout page in magento2\",\"datePublished\":\"2016-10-22T14:19:31+00:00\",\"dateModified\":\"2024-03-22T11:57:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\"},\"wordCount\":195,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\",\"keywords\":[\"custom layout\",\"custom page\",\"Magento2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\",\"name\":\"How to create custom layout page in magento2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\",\"datePublished\":\"2016-10-22T14:19:31+00:00\",\"dateModified\":\"2024-03-22T11:57:49+00:00\",\"description\":\"How to create custom layout page in magento2, custom page layout for magento2\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage\",\"url\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\",\"contentUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create custom layout page in magento2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd\",\"name\":\"Shubham Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shubham Sharma\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shubham-sharma967\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create custom layout page in magento2","description":"How to create custom layout page in magento2, custom page layout for magento2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/","og_locale":"en_US","og_type":"article","og_title":"How to create custom layout page in magento2","og_description":"How to create custom layout page in magento2, custom page layout for magento2","og_url":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-10-22T14:19:31+00:00","article_modified_time":"2024-03-22T11:57:49+00:00","og_image":[{"url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png","type":"","width":"","height":""}],"author":"Shubham Sharma","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shubham Sharma","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/"},"author":{"name":"Shubham Sharma","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd"},"headline":"How to create custom layout page in magento2","datePublished":"2016-10-22T14:19:31+00:00","dateModified":"2024-03-22T11:57:49+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/"},"wordCount":195,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png","keywords":["custom layout","custom page","Magento2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/","url":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/","name":"How to create custom layout page in magento2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png","datePublished":"2016-10-22T14:19:31+00:00","dateModified":"2024-03-22T11:57:49+00:00","description":"How to create custom layout page in magento2, custom page layout for magento2","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#primaryimage","url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png","contentUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/10\/testlayout.png"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-layout-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create custom layout page in magento2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd","name":"Shubham Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shubham Sharma"},"url":"https:\/\/webkul.com\/blog\/author\/shubham-sharma967\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/62785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=62785"}],"version-history":[{"count":7,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/62785\/revisions"}],"predecessor-version":[{"id":429298,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/62785\/revisions\/429298"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=62785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=62785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=62785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}