{"id":3565,"date":"2022-06-06T20:49:40","date_gmt":"2022-06-06T23:49:40","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=3565"},"modified":"2022-06-20T02:16:38","modified_gmt":"2022-06-20T05:16:38","slug":"criar-novo-layout-xml","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/","title":{"rendered":"Como criar um novo Layout XML no Magento 2"},"content":{"rendered":"\n

O Front End do Magento \u00e9 baseado em arquivos layout XML<\/em>. Eles servem basicamente para estruturar como uma p\u00e1gina deve ser entregue, e que componentes fazem parte dela. <\/p>\n\n\n\n

No Magento 2: O Curso<\/a>, tenho uma se\u00e7\u00e3o inteira sobre Layout XML. Mas hoje veremos especificamente como criar<\/strong> um novo layout xml<\/strong>. Nos pr\u00f3ximos artigos desta s\u00e9rie<\/a>, voc\u00ea ver\u00e1 como estender um arquivo de layout existente<\/a> e como sobrescrever um<\/a>.<\/p>\n\n\n\n

Criando um novo Layout<\/h2>\n\n\n\n

No Magento 2, voc\u00ea pode criar um novo layout dentro de um tema ou dentro de um m\u00f3dulo Magento<\/a>. Siga esses passos para criar um novo layout:<\/p>\n\n\n\n

Passo 1: crie o arquivo de layout<\/h3>\n\n\n\n

Para este exemplo, voc\u00ea pode cham\u00e1-lo de novo-layout.xml<\/code>.<\/p>\n\n\n\n

Se estiver criando ele dentro de um m\u00f3dulo, coloque-o em <pasta do seu m\u00f3dulo>\/view\/frontend\/page_layout\/novo-layout.xml<\/code>.<\/p>\n\n\n\n

No entanto, se estiver em um tema, coloque-o em <pasta do seu tema>\/Magento_Theme\/page_layout\/novo-layout.xml<\/code>.<\/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    <update handle=\"empty\"\/>\n    <referenceContainer name=\"page.wrapper\">\n        <container name=\"header.container\" as=\"header_container\" label=\"Page Header Container\" htmlTag=\"header\" htmlClass=\"page-header\" before=\"main.content\"\/>\n    <\/referenceContainer>\n    <referenceContainer name=\"page.wrapper\">\n        <container name=\"page.top\" as=\"page_top\" label=\"After Page Header\" after=\"header.container\"\/>\n    <\/referenceContainer>\n<\/layout><\/pre>\n\n\n\n
Passo 2: declare seu novo layout<\/h3>\n\n\n\n
Isso \u00e9 feito com a cria\u00e7\u00e3o do arquivo layouts.xml<\/code>. <\/p>\n\n\n\n
Se estiver criando um m\u00f3dulo, defina ele em <pasta do seu m\u00f3dulo>\/view\/frontend\/layouts.xml<\/code>.<\/p>\n\n\n\n
Se for um tema, <pasta do seu tema>\/Magento_Theme\/layouts.xml<\/code>.<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\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=\"novo-layout\">\n        <label translate=\"true\">Meu Novo Layout<\/label>\n    <\/layout>\n<\/page_layouts>\n<\/pre>\n\n\n\n
Lembre-se de definir um ID \u00fanico para seu novo layout. Ele deve ser igual ao nome do arquivo criado no primeiro passo.<\/strong><\/p>\n\n\n\n
Passo 3: Limpe o cache e confira o resultado<\/h3>\n\n\n\n
Fa\u00e7a isso com bin\/magento cache:clean<\/code> ou usando a op\u00e7\u00e3o “Flush Magento Cache” no admin.<\/p>\n\n\n\n
Se tudo estiver certo, seu novo layout ser\u00e1 exibido nos seletores de layout. Como por exemplo em Lojas > Configura\u00e7\u00f5es > Web > Layouts Padr\u00f5es.<\/p>\n\n\n\n
\"Seletor<\/figure>\n\n\n\n
No pr\u00f3ximo artigo desta s\u00e9rie, veremos como estender um layout existente.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"O Front End do Magento \u00e9 baseado em arquivos layout XML. Eles servem basicamente para estruturar como uma p\u00e1gina deve […]","protected":false},"author":1,"featured_media":3573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,25],"tags":[3,4,41,142,5,60,68],"yoast_head":"\nComo criar um novo Layout XML no Magento 2<\/title>\n<meta name=\"description\" content=\"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.\" \/>\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.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como criar um novo Layout XML no Magento 2\" \/>\n<meta property=\"og:description\" content=\"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\" \/>\n<meta property=\"og:site_name\" content=\"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/magenteiro\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-06T23:49:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-20T05:16:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2022\/06\/layoutxml-criar-m2-opt.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ricardo Martins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@magenteiro\" \/>\n<meta name=\"twitter:site\" content=\"@magenteiro\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ricardo Martins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\",\"name\":\"Magenteiro\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/magenteiro\",\"https:\/\/www.linkedin.com\/company\/magenteiro\",\"https:\/\/www.youtube.com\/magenteiro\",\"https:\/\/facebook.com\/magenteiro\",\"https:\/\/twitter.com\/magenteiro\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png\",\"contentUrl\":\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png\",\"width\":787,\"height\":149,\"caption\":\"Magenteiro\"},\"image\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#website\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/\",\"name\":\"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1\",\"description\":\"Artigos t\u00e9cnicos, tutoriais e muitos v\u00eddeos e cursos sobre Magento. Aqui voc\u00ea encontra dicas para lojistas e desenvolvedores feitos por quem entende do assunto.\",\"publisher\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magenteiro.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\",\"name\":\"Como criar um novo Layout XML no Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#website\"},\"datePublished\":\"2022-06-06T23:49:40+00:00\",\"dateModified\":\"2022-06-20T05:16:38+00:00\",\"description\":\"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magenteiro.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como criar um novo Layout XML no Magento 2\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\"},\"author\":{\"name\":\"Ricardo Martins\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150\"},\"headline\":\"Como criar um novo Layout XML no Magento 2\",\"datePublished\":\"2022-06-06T23:49:40+00:00\",\"dateModified\":\"2022-06-20T05:16:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/\"},\"wordCount\":253,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\"},\"keywords\":[\"desenvolvimento\",\"frontend\",\"Magento 2\",\"series-layout-xml-m2\",\"temas\",\"Tutoriais Magento\",\"tutorial\"],\"articleSection\":[\"Desenvolvimento\",\"Magento 2\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150\",\"name\":\"Ricardo Martins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g\",\"caption\":\"Ricardo Martins\"},\"description\":\"\u00c9 desenvolvedor web h\u00e1 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 11 cursos Magento (os principais no magenteiro.com\/cursos) com mais de 14 mil alunos de 105 pa\u00edses, \u00e9 tamb\u00e9m criador do m\u00f3dulo PagSeguro Transparente, usado em mais de 12 mil lojas.\",\"sameAs\":[\"https:\/\/www.magenteiro.com\/\"],\"url\":\"https:\/\/www.magenteiro.com\/blog\/author\/ricardomartins\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como criar um novo Layout XML no Magento 2","description":"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.","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.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/","og_locale":"pt_BR","og_type":"article","og_title":"Como criar um novo Layout XML no Magento 2","og_description":"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.","og_url":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/","og_site_name":"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1","article_publisher":"https:\/\/facebook.com\/magenteiro","article_published_time":"2022-06-06T23:49:40+00:00","article_modified_time":"2022-06-20T05:16:38+00:00","og_image":[{"width":960,"height":480,"url":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2022\/06\/layoutxml-criar-m2-opt.jpg","type":"image\/jpeg"}],"author":"Ricardo Martins","twitter_card":"summary_large_image","twitter_creator":"@magenteiro","twitter_site":"@magenteiro","twitter_misc":{"Written by":"Ricardo Martins","Est. reading time":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.magenteiro.com\/blog\/#organization","name":"Magenteiro","url":"https:\/\/www.magenteiro.com\/blog\/","sameAs":["https:\/\/www.instagram.com\/magenteiro","https:\/\/www.linkedin.com\/company\/magenteiro","https:\/\/www.youtube.com\/magenteiro","https:\/\/facebook.com\/magenteiro","https:\/\/twitter.com\/magenteiro"],"logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png","contentUrl":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png","width":787,"height":149,"caption":"Magenteiro"},"image":{"@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.magenteiro.com\/blog\/#website","url":"https:\/\/www.magenteiro.com\/blog\/","name":"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1","description":"Artigos t\u00e9cnicos, tutoriais e muitos v\u00eddeos e cursos sobre Magento. Aqui voc\u00ea encontra dicas para lojistas e desenvolvedores feitos por quem entende do assunto.","publisher":{"@id":"https:\/\/www.magenteiro.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magenteiro.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/","url":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/","name":"Como criar um novo Layout XML no Magento 2","isPartOf":{"@id":"https:\/\/www.magenteiro.com\/blog\/#website"},"datePublished":"2022-06-06T23:49:40+00:00","dateModified":"2022-06-20T05:16:38+00:00","description":"Arquivos de layout nos permitem organizar e configurar a forma como uma p\u00e1gina e seus elementos s\u00e3o definidos. Veja como criar um novo.","breadcrumb":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magenteiro.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como criar um novo Layout XML no Magento 2"}]},{"@type":"Article","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#article","isPartOf":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/"},"author":{"name":"Ricardo Martins","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150"},"headline":"Como criar um novo Layout XML no Magento 2","datePublished":"2022-06-06T23:49:40+00:00","dateModified":"2022-06-20T05:16:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/"},"wordCount":253,"commentCount":0,"publisher":{"@id":"https:\/\/www.magenteiro.com\/blog\/#organization"},"keywords":["desenvolvimento","frontend","Magento 2","series-layout-xml-m2","temas","Tutoriais Magento","tutorial"],"articleSection":["Desenvolvimento","Magento 2"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magenteiro.com\/blog\/magento-2\/criar-novo-layout-xml\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150","name":"Ricardo Martins","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g","caption":"Ricardo Martins"},"description":"\u00c9 desenvolvedor web h\u00e1 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 11 cursos Magento (os principais no magenteiro.com\/cursos) com mais de 14 mil alunos de 105 pa\u00edses, \u00e9 tamb\u00e9m criador do m\u00f3dulo PagSeguro Transparente, usado em mais de 12 mil lojas.","sameAs":["https:\/\/www.magenteiro.com\/"],"url":"https:\/\/www.magenteiro.com\/blog\/author\/ricardomartins\/"}]}},"_links":{"self":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/3565"}],"collection":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/comments?post=3565"}],"version-history":[{"count":4,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/3565\/revisions"}],"predecessor-version":[{"id":3660,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/3565\/revisions\/3660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/media\/3573"}],"wp:attachment":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/media?parent=3565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/categories?post=3565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/tags?post=3565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}