{"id":282315,"date":"2021-02-06T18:29:13","date_gmt":"2021-02-06T18:29:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=282315"},"modified":"2025-01-21T08:05:51","modified_gmt":"2025-01-21T08:05:51","slug":"magento-2-layout-and-templates","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/","title":{"rendered":"Magento 2: Layout and Templates"},"content":{"rendered":"\n

Now let’s come back to frontend development. Earlier we created a controller where I wrote a “Hello World” statement to show you that the controller is working. But in Magento<\/a>, we don’t write HTML code in the controller.<\/p>\n\n\n\n

To show HTML content we use .phtml files in Magento. These .phtml files are called template files. <\/p>\n\n\n\n

To map the controller with .phtml files we use layout files. The layout files are of .xml type. As all of these are related to viewing the page. So it makes sense to put them in a different folder, which is called the view<\/strong> folder.<\/p>\n\n\n\n

First, we need to modify the controller file, Controller\/Manage\/Add.php<\/strong><\/p>\n\n\n\n

\"Selection_099\"
File Structure<\/figcaption><\/figure>\n\n\n\n

Updated code for Controller\/Manage\/Add.php<\/em> file<\/p>\n\n\n\n

<?php\nnamespace Webkul\\BlogManager\\Controller\\Manage;\n\nuse Magento\\Customer\\Controller\\AbstractAccount;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Add extends AbstractAccount\n{\n    \/**\n     * @var PageFactory\n     *\/\n    private $resultPageFactory;\n\n    \/**\n     * Dependency Initilization\n     *\n     * @param Context $context\n     * @param PageFactory $resultPageFactory\n     *\/\n    public function __construct(\n        Context $context,\n\tPageFactory $resultPageFactory\n    ) {\n\t$this->resultPageFactory = $resultPageFactory;\n        parent::__construct($context);\n    }\n\n    \/**\n     * Provides content\n     *\n     * @return \\Magento\\Framework\\View\\Result\\Page\n     *\/\n    public function execute()\n    {\n        $resultPage = $this->resultPageFactory->create();\n        $resultPage->getConfig()->getTitle()->set(__('Add Blog'));\n        $layout = $resultPage->getLayout();\n        return $resultPage;\n    }\n}<\/pre>\n\n\n\n
Here we are using \\Magento\\Framework\\View\\Result\\PageFactory<\/em> class to initialize the layout. With this we can configure the page, here we have set the Title of the page. <\/p>\n\n\n\n
And after calling the getLayout()<\/em> method to process the layout file, we returned the result page.<\/p>\n\n\n\n
Layout<\/h2>\n\n\n\n
Now if you notice we have not explicitly mentioned the layout file name in the controller. So Magento will look for the layout file with the name routerId_controllerName_actionName.xml<\/strong>. If we want then we can explicitly give like,<\/p>\n\n\n\n
$resultPage->addHandle('some_other_layout');<\/pre>\n\n\n\n
For the layout file, we need to create a view\/frontend\/layout folder under the module directory. <\/p>\n\n\n\n
In the layout folder, we need to create a layout file with the name blogmanager_manage_add.xml. If you remembered we used blogmanager as our router id.<\/p>\n\n\n\n
It’s common practice to use routerId as the same as frontName because then the layout file name will be similar to the URL.<\/p>\n\n\n\n
\"Selection_100\"
Folder Structure<\/figcaption><\/figure>\n\n\n\n
Code for view\/frontend\/layout\/blogmanager_manage_add.xml<\/em> file<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceContainer name="content">\n            <block class="Magento\\Framework\\View\\Element\\Template" name="blogmanager.blog.add" template="Webkul_BlogManager::add.phtml" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
The body node refers to that we are modifying contents within the body tag of the HTML. The page layout in Magento is made out of multiple containers. <\/p>\n\n\n\n
And the container can have nested containers. The innermost containers have blocks in them and each block can have child blocks.<\/p>\n\n\n\n
Layout Types<\/h2>\n\n\n\n
As you can see in the page tag we have used the layout attribute with the value 1column. Magento supports different types of layouts such as,
i) 1coumn
ii) 2columns-left
iii) 2columns-right
iv) 3columns<\/p>\n\n\n\n
For simplicity, you can think of the header, footer, and main content as individual containers. However, Magento’s layout structure is much more complex, which helps us to modify any component.<\/p>\n\n\n\n
For the 2columns-left layout, the main content will have two sub-containers, one for content and another on the left side as a sidebar container.<\/p>\n\n\n\n
With the referenceContainer tag, we can target any container, here we are targeting the main container whose name is content.<\/p>\n\n\n\n
You can find more container and block names in the vendor\/magento\/module-theme\/view\/frontend\/layout\/default.xml<\/em> file.<\/p>\n\n\n\n
\"2021-02-06_22-35\"<\/figure>\n\n\n\n
Inside the container, we are calling our phtml file with a block tag. <\/p>\n\n\n\n
Here we are using the default template block class Magento\\Framework\\View\\Element\\Template but we can create our own block class if we have to pass some data into the phtml.<\/p>\n\n\n\n
We will see more about the Block class in the next blog. The block tag has a name attribute, we can use any sensible name here to identify that block.<\/p>\n\n\n\n
Templates<\/h2>\n\n\n\n
The interesting part in the block tag is template=”Webkul_BlogManager::add.phtml”<\/strong>, this represents the path of the template file. <\/p>\n\n\n\n
The first part of :: is the module name and the second part is the path in reference to the view\/frontend\/templates<\/strong> folder.<\/p>\n\n\n\n
As in the path we have given the phtml file name so we can directly create add.phtml file under the view\/frontend\/templates<\/strong> folder.<\/p>\n\n\n\n
\"Selection_101\"
Folder Structure<\/figcaption><\/figure>\n\n\n\n
Code for view\/frontend\/templates\/add.phtml<\/em> file<\/p>\n\n\n\n
<div class="blog-container">\n    <form class="blog-form">\n        Title: <input type="text" name="title"\/>\n        Content: <textarea name="content"><\/textarea>\n        <button type="submit">Submit<\/button>\n    <\/form>\n<\/div><\/pre>\n\n\n\n
After writing all of this code we have to run the di compile command. And now if you browse the URL you will see the page,<\/p>\n\n\n\n
\"2021-02-06_23-22\"<\/figure>\n\n\n\n
Please try out different layout types on your own.<\/p>\n\n\n\n
If you make some changes in the template file and can not find it when reloading the page then please flush the cache.<\/p>\n\n\n\n
php bin\/magento cache:flush<\/pre>\n\n\n\n
Enhancing<\/h2>\n\n\n\n
We are aiming to create a blog portal where customers can write blogs. <\/p>\n\n\n\n
So it makes much more sense that the page should appear like other customer account pages and instead of manually entering the URL we should have a menu in the customer navigation.<\/p>\n\n\n\n
To add the customer navigation menu we will follow the “Magento2 \u2013 Add New Link in My Account Navigation Panel<\/a>” blog. <\/p>\n\n\n\n
We have to create a customer_account.xml file under the view\/frontend\/layout folder. Magento already has this XML file we are just appending our code to it.<\/p>\n\n\n\n
\"Selection_102\"
Folder Structure<\/figcaption><\/figure>\n\n\n\n
Code for view\/frontend\/layout\/customer_account.xml<\/em> file<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceBlock name="customer_account_navigation">\n            <block class="Magento\\Framework\\View\\Element\\Html\\Link\\Current" name="customer-account-navigation-blog-add" after="-" >\n                <arguments>\n                    <argument name="label" xsi:type="string" translate="true">Add Blog<\/argument>\n                    <argument name="path" xsi:type="string">blog\/manage\/add<\/argument>\n                <\/arguments>\n            <\/block>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Now let’s modify our already created blogmanager_manage_add.xml file to match the customer account page structure.<\/p>\n\n\n\n
Updated code for view\/frontend\/layout\/blogmanager_manage_add.xml<\/em> file<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <update handle="customer_account"\/>\n    <body>\n        <referenceContainer name="content">\n            <block class="Magento\\Framework\\View\\Element\\Template" name="blogmanager.blog.add" template="Webkul_BlogManager::add.phtml" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Here you can see that we have removed the layout type and added the <update handle=”customer_account”\/> tag.<\/p>\n\n\n\n
Basically, it says that copies everything from the customer_account.xml, so it will copy all the structure from customer_account.xml which acts as a base for every customer account-related page.<\/p>\n\n\n\n
Now when we di compile and reload we will see something like,<\/p>\n\n\n\n
\"2021-02-06_23-52\"<\/figure>\n\n\n\n
Folder structure till now,<\/p>\n\n\n\n
\"Selection_103\"
Folder Structure<\/figcaption><\/figure>\n\n\n\n
PS. Please run the di compile command if you create a new file, modify any .xml file, or make changes in the constructor of a class.<\/p>\n\n\n\n
Sometimes running di compile might not have any effect then we should explicitly remove the generated\/code folder by running rm -rf generated\/code from the Magento root directory. Please be careful while running the rm -rf command.<\/p>\n\n\n\n
Also you can take benefits of our Magento 2 Template Development<\/a> service.<\/p>\n\n\n\n
Next Blog -> Magento 2 Development 09: Form Validation and Saving Data<\/a><\/p>\n\n\n\n
Previous Blog -> Magento 2 Development 07: Model, Resource Model and Collection<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Now let’s come back to frontend development. Earlier we created a controller where I wrote a “Hello World” statement to show you that the controller is working. But in Magento, we don’t write HTML code in the controller. To show HTML content we use .phtml files in Magento. These .phtml files are called template files. […]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[727,15564,256,138,2939],"class_list":["post-282315","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-blog","tag-github-login","tag-layout","tag-templates","tag-view"],"yoast_head":"\nMagento 2: Layout and Templates - Webkul Blog<\/title>\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\/magento-2-layout-and-templates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2: Layout and Templates - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Now let’s come back to frontend development. Earlier we created a controller where I wrote a “Hello World” statement to show you that the controller is working. But in Magento, we don’t write HTML code in the controller. To show HTML content we use .phtml files in Magento. These .phtml files are called template files. [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\" \/>\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=\"2021-02-06T18:29:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-21T08:05:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\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=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"Magento 2: Layout and Templates\",\"datePublished\":\"2021-02-06T18:29:13+00:00\",\"dateModified\":\"2025-01-21T08:05:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\"},\"wordCount\":984,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png\",\"keywords\":[\"Blog\",\"github login\",\"layout\",\"templates\",\"view\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\",\"name\":\"Magento 2: Layout and Templates - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png\",\"datePublished\":\"2021-02-06T18:29:13+00:00\",\"dateModified\":\"2025-01-21T08:05:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099.png\",\"width\":1517,\"height\":418,\"caption\":\"Selection_099\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2: Layout and Templates\"}]},{\"@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\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?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\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2: Layout and Templates - Webkul Blog","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\/magento-2-layout-and-templates\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2: Layout and Templates - Webkul Blog","og_description":"Now let’s come back to frontend development. Earlier we created a controller where I wrote a “Hello World” statement to show you that the controller is working. But in Magento, we don’t write HTML code in the controller. To show HTML content we use .phtml files in Magento. These .phtml files are called template files. [...]","og_url":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-02-06T18:29:13+00:00","article_modified_time":"2025-01-21T08:05:51+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"Magento 2: Layout and Templates","datePublished":"2021-02-06T18:29:13+00:00","dateModified":"2025-01-21T08:05:51+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/"},"wordCount":984,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png","keywords":["Blog","github login","layout","templates","view"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/","url":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/","name":"Magento 2: Layout and Templates - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099-1200x331.png","datePublished":"2021-02-06T18:29:13+00:00","dateModified":"2025-01-21T08:05:51+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_099.png","width":1517,"height":418,"caption":"Selection_099"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-2-layout-and-templates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2: Layout and Templates"}]},{"@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\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?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\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/282315","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\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=282315"}],"version-history":[{"count":20,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/282315\/revisions"}],"predecessor-version":[{"id":481150,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/282315\/revisions\/481150"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=282315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=282315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=282315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}