{"id":1119,"date":"2020-01-08T03:06:29","date_gmt":"2020-01-08T03:06:29","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=1119"},"modified":"2021-07-22T03:00:10","modified_gmt":"2021-07-22T03:00:10","slug":"how-to-make-custom-page-layout-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","title":{"rendered":"How To Make Custom Page Layout In Magento 2"},"content":{"rendered":"\n\n\n

In the previous article, we learned about How to get store config value in Magento 2<\/a>. Today, we will introduce you about How to make custom page layout in Magento 2<\/strong>.<\/p>\n\n\n\n

I think you should read How To Create New Theme In Magento 2<\/a> first.<\/p>\n\n\n\n

Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-left, 2columns-right, 3column.<\/p>\n\n\n\n

Simplest is Empty. It hasn’t header, footer, left sidebar, right sidebar but it has all js, css, cookies, session, etc.<\/p>\n\n\n\n

You can find it in: vendor\\magento\\module-theme\\view\\base\\page_layout<\/code>.<\/p>\n\n\n\n

The layout 1 column, 2 columns-left, 2columns-right, 3 column was extended from Empty layout. You can find it in: vendor\\magento\\module-theme\\view\\frontend\\page_layout<\/code>.<\/p>\n\n\n\n

If the amount of customizations is large, you can override list. Also maybe you need to create a different page layout for your theme.<\/p>\n\n\n\n

Make custom page layout<\/h2>\n\n\n\n

We\u2019ll copy content from Empty layout then add a block to main container.<\/p>\n\n\n\n

Make file <theme_dir>\/Magetop_themes\/page_layout\/magetop-layout.xml<\/code> should look like:<\/p>\n\n\n

\n<?xml version="1.0" ?>\n<layout xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_layout.xsd">\n    <container name="root">\n        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"\/>\n        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">\n            <container name="global.notices" as="global_notices" before="-"\/>\n            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">\n                <container name="columns.top" label="Before Main Columns"\/>\n                <container name="columns" htmlTag="div" htmlClass="columns">\n                    <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main">\n                        <block class="Magento\\Framework\\View\\Element\\Template" name="custom.container" template="Magetop_Themes::html\/custom_mainContainer.phtml" before="-"\/>\n                    <\/container>\n                <\/container>\n            <\/container>\n            <container name="page.bottom.container" as="page_bottom_container" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"\/>\n            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"\/>\n        <\/container>\n    <\/container>\n<\/layout>\n<\/pre><\/div>\n\n\n
Then create file <theme_dir>\/Magetop_themes\/templates\/html\/custom_mainContainer.phtml then insert the following code<\/code>.<\/p>\n\n\n\n
<h1>Enter your custom code here<\/h1><\/code><\/pre>\n\n\n\n
For example, we\u2019ll update for the contact page.<\/p>\n\n\n\n
Make file <theme_dir>\/Magento_Contact\/layout\/contact_index_index.xml<\/code> should look like:<\/p>\n\n\n
\n<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="magetop-layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n<\/page>\n<\/pre><\/div>\n\n\n
Refresh cache then go to contact page see your changes applied.<\/em><\/p>\n\n\n\n
Frontend<\/strong><\/p>\n\n\n\n\n\n
Declaration in the list of layouts<\/h2>\n\n\n\n
Make file <theme_dir>\/Magetop_themes\/layouts.xml<\/code> should look like:<\/p>\n\n\n
\n<page_layouts xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/PageLayout\/etc\/layouts.xsd">\n    <layout id="magetop-layout">\n        <label translate="true">Magetop Layout<\/label>\n    <\/layout>\n<\/page_layouts>\n<\/pre><\/div>\n\n\n
See it in backend<\/strong><\/p>\n\n\n\n\n\n
We updated our file structure looks as follows<\/p>\n\n\n\n
app\/design\/frontend\/Magetop\/\n  \u251c\u2500\u2500 Default\/\n  \u2502   \u251c\u2500\u2500 Magetop_themes\/\n  \u2502   \u2502     \u251c\u2500\u2500 page_layout\/\n  \u2502   \u2502     \u2502    \u251c\u2500\u2500 magetop-layout.xml\n  \u2502   \u2502     \u251c\u2500\u2500 templates\/\n  \u2502   \u2502     \u2502    \u251c\u2500\u2500 html\n  \u2502   \u2502     \u2502    \u2502   \u251c\u2500\u2500 custom_mainContainer.phtml\n  \u2502   \u2502     \u251c\u2500\u2500 layouts.xml\n  \u2502   \u251c\u2500\u2500 Magento_Contact\/\n  \u2502   \u2502     \u251c\u2500\u2500 layout\/\n  \u2502   \u2502     \u2502    \u251c\u2500\u2500 contact_index_index.xml<\/code><\/pre>\n\n\n\n
Good luck!<\/p>\n\n\n\n
This is  How to make custom page layout in Magento 2<\/strong>.<\/p>\n\n\n\n
You can see the next post: How to get product collection in Magento 2<\/a>.<\/p>\n\n\n\n
Follow us for more helpful tutorial!<\/p>\n\n\n\n
We hope this is a useful blog for you.<\/p>\n\n\n\n
Thank you for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous article, we learned about How to get store config value in Magento 2. Today, we will introduce you about How to make custom page layout in Magento 2.<\/p>\n","protected":false},"author":1,"featured_media":1123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[210,208,107,211,209],"class_list":["post-1119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-how-to-make-custom-page-layout","tag-how-to-make-custom-page-layout-in-magento-2","tag-magento-2-tutorials","tag-make-custom-page-layout","tag-make-custom-page-layout-in-magento-2"],"yoast_head":"\nHow To Make Custom Page Layout In Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Make Custom Page Layout In Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-08T03:06:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-22T03:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adam Roger\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Roger\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\"},\"author\":{\"name\":\"Adam Roger\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\"},\"headline\":\"How To Make Custom Page Layout In Magento 2\",\"datePublished\":\"2020-01-08T03:06:29+00:00\",\"dateModified\":\"2021-07-22T03:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\"},\"wordCount\":246,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1\",\"keywords\":[\"How To Make Custom Page Layout\",\"How To Make Custom Page Layout In Magento 2\",\"magento 2 tutorials\",\"Make Custom Page Layout\",\"Make Custom Page Layout In Magento 2\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\",\"name\":\"How To Make Custom Page Layout In Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1\",\"datePublished\":\"2020-01-08T03:06:29+00:00\",\"dateModified\":\"2021-07-22T03:00:10+00:00\",\"description\":\"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1\",\"width\":750,\"height\":445,\"caption\":\"How To Make Custom Page Layout In Magento 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Make Custom Page Layout In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\",\"name\":\"Adam Roger\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"caption\":\"Adam Roger\"},\"description\":\"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.\",\"sameAs\":[\"https:\/\/www.magetop.com\",\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/www.instagram.com\/magetopstore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\",\"https:\/\/magetop.tumblr.com\"],\"url\":\"https:\/\/www.magetop.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Make Custom Page Layout In Magento 2 - Magetop Blog","description":"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...","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:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How To Make Custom Page Layout In Magento 2 - Magetop Blog","og_description":"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...","og_url":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_author":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2020-01-08T03:06:29+00:00","article_modified_time":"2021-07-22T03:00:10+00:00","og_image":[{"width":750,"height":445,"url":"https:\/\/i1.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","type":"image\/png"}],"author":"Adam Roger","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Adam Roger","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/"},"author":{"name":"Adam Roger","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411"},"headline":"How To Make Custom Page Layout In Magento 2","datePublished":"2020-01-08T03:06:29+00:00","dateModified":"2021-07-22T03:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/"},"wordCount":246,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","keywords":["How To Make Custom Page Layout","How To Make Custom Page Layout In Magento 2","magento 2 tutorials","Make Custom Page Layout","Make Custom Page Layout In Magento 2"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","url":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/","name":"How To Make Custom Page Layout In Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","datePublished":"2020-01-08T03:06:29+00:00","dateModified":"2021-07-22T03:00:10+00:00","description":"Today, we will introduce you about How to make custom page layout in Magento 2. Magento gave us 5 frontend form page layout: Empty, 1column, 2columns-...","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","width":750,"height":445,"caption":"How To Make Custom Page Layout In Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/how-to-make-custom-page-layout-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Make Custom Page Layout In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411","name":"Adam Roger","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","caption":"Adam Roger"},"description":"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.","sameAs":["https:\/\/www.magetop.com","https:\/\/www.facebook.com\/MagetopStore","https:\/\/www.instagram.com\/magetopstore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA","https:\/\/magetop.tumblr.com"],"url":"https:\/\/www.magetop.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Make-Custom-Page-Layout-1.png?fit=750%2C445&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-i3","jetpack-related-posts":[{"id":1098,"url":"https:\/\/www.magetop.com\/blog\/how-to-get-store-config-value-in-magento-2\/","url_meta":{"origin":1119,"position":0},"title":"How To Get Store Config Value In Magento 2","author":"Adam Roger","date":"January 6, 2020","format":false,"excerpt":"In the previous article, we learned about How To Create Simple Module To Configure Options For Theme In Magento 2. Today, we will introduce you about How To Get Store Config Value In Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Get Store Config Value M2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7153,"url":"https:\/\/www.magetop.com\/blog\/change-category-page-layout-in-magento-2\/","url_meta":{"origin":1119,"position":1},"title":"How To Change Category Page Layout In Magento 2","author":"Aaron LX","date":"August 5, 2021","format":false,"excerpt":"In this post, I will guide you on How To Change Category Page Layout In Magento 2. Adjust the catalog page layout for your store in the Magento Admin Panel.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Change Category Page Layout In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Change-Category-Page-Layout-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Change-Category-Page-Layout-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Change-Category-Page-Layout-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Change-Category-Page-Layout-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Change-Category-Page-Layout-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5708,"url":"https:\/\/www.magetop.com\/blog\/configure-default-page-layout-in-magento-2\/","url_meta":{"origin":1119,"position":2},"title":"How To Configure Default Page Layout In Magento 2","author":"Aaron LX","date":"May 21, 2021","format":false,"excerpt":"Adjust the default layout for your store in the Magento Admin Panel. In this post, I will guide you on\u00a0How To Configure Default Page Layout In Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Configure Default Page Layout In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/05\/How-To-Configure-Default-Page-Layout-In-Magento-2.png?fit=1062%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/05\/How-To-Configure-Default-Page-Layout-In-Magento-2.png?fit=1062%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/05\/How-To-Configure-Default-Page-Layout-In-Magento-2.png?fit=1062%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/05\/How-To-Configure-Default-Page-Layout-In-Magento-2.png?fit=1062%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/05\/How-To-Configure-Default-Page-Layout-In-Magento-2.png?fit=1062%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1067,"url":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","url_meta":{"origin":1119,"position":3},"title":"Customize Cover, Illustration Layout In Magento 2","author":"Adam Roger","date":"January 2, 2020","format":false,"excerpt":"Our previous post is How to create new theme in Magento 2. I think you guys should read it. To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Customize Cover, Illustration Layout Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":94,"url":"https:\/\/www.magetop.com\/blog\/how-to-create-new-custom-module-in-magento-2\/","url_meta":{"origin":1119,"position":4},"title":"How To Create New Custom Module in Magento 2","author":"Adam Roger","date":"March 23, 2019","format":false,"excerpt":"In this tutorial, we will teach you how to create new custom module in Magento 2 to add customized functionality and give you more control over the store. We\u2019re going to build a very simple module in Magento 2. When finished, the module\u2019s output will say \u201cHello world!\u201d in the\u2026","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"how to create new custom module in magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/03\/create-custom-magento-2-module.png?fit=679%2C360&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/03\/create-custom-magento-2-module.png?fit=679%2C360&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/03\/create-custom-magento-2-module.png?fit=679%2C360&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3500,"url":"https:\/\/www.magetop.com\/blog\/how-to-create-custom-404-page\/","url_meta":{"origin":1119,"position":5},"title":"How To Create Custom 404 Page In Magento 2","author":"Aaron LX","date":"November 30, 2020","format":false,"excerpt":"Change the boring default 404 Not Found page to a friendly 404 page. This is easy. In How To Create Custom 404 Page In Magento 2, I will guide you to customize it.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create Custom 404 Page In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/How-To-Create-Custom-404-Page.jpg?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/How-To-Create-Custom-404-Page.jpg?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/How-To-Create-Custom-404-Page.jpg?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/How-To-Create-Custom-404-Page.jpg?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=1119"}],"version-history":[{"count":7,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1119\/revisions"}],"predecessor-version":[{"id":5904,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1119\/revisions\/5904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/1123"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=1119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=1119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=1119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}