{"id":56063,"date":"2023-11-10T07:00:28","date_gmt":"2023-11-10T15:00:28","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=56063"},"modified":"2025-05-26T12:54:30","modified_gmt":"2025-05-26T19:54:30","slug":"mudar-para-temas-de-bloco-do-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/","title":{"rendered":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress"},"content":{"rendered":"\n<p>Se voc\u00ea \u00e9 f\u00e3 de Legos, ent\u00e3o vai adorar os temas em blocos do WordPress.<\/p>\n\n\n\n<p>A partir da vers\u00e3o 5.9, o WordPress oferece suporte completo para temas em blocos. Esta foi uma mudan\u00e7a importante para a maioria dos sites, que foram constru\u00eddos sobre o que agora s\u00e3o conhecidos como temas \u201ccl\u00e1ssicos\u201d.<\/p>\n\n\n\n<p>Mas mudar de um tema cl\u00e1ssico para um tema baseado em blocos requer um pouco de trabalho.<\/p>\n\n\n\n<p>Neste artigo, explicaremos como eles funcionam e quais passos voc\u00ea pode seguir para mudar do estilo antigo para o novo.<\/p>\n\n\n\n<p>N\u00e3o ser\u00e1 <b>t\u00e3o <\/b>divertido quanto montar uma Estrela da Morte de colecionador de 2005 com 3.441 pe\u00e7as. Mas faremos o nosso melhor.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">O que \u00e9 um Tema de Bloco do WordPress?<\/h2>\n\n\n\n<p>Os temas de blocos permitem que os usu\u00e1rios e administradores de sites personalizem o layout de suas p\u00e1ginas e conte\u00fados usando blocos de conte\u00fado edit\u00e1veis e reutiliz\u00e1veis.<\/p>\n\n\n\n<p>Originalmente conhecido como &#8220;<a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/edicao-completa-de-site-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">edi\u00e7\u00e3o completa do site<\/a>&#8221; (FSE) ou &#8220;edi\u00e7\u00e3o do site&#8221;, esses temas adicionam funcionalidade modular e baseada em blocos aos layouts e templates do seu tema. Semelhante a como o <a href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">editor Gutenberg<\/a> introduziu <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">blocos<\/a> e templates de blocos que podem ser usados dentro das suas p\u00e1ginas e conte\u00fado de postagens.<\/p>\n\n\n\n<p>Mas agora, voc\u00ea pode personalizar o layout e o conte\u00fado em todo o seu site (incluindo modelos de p\u00e1gina e modelos personalizados) usando blocos visuais, no estilo arrastar e soltar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example.jpg\" alt=\"Exemplo de Editor de Blocos\" class=\"wp-image-42357 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-editor-example-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-editor-example-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Estes novos recursos de edi\u00e7\u00e3o visual tornam extremamente f\u00e1cil construir novas estruturas de p\u00e1gina ou personalizar o conte\u00fado de qualquer p\u00e1gina al\u00e9m do que est\u00e1 dentro do corpo da p\u00e1gina.<\/p>\n\n\n\n<p>Isso significa que voc\u00ea n\u00e3o precisar\u00e1 depender de desenvolvedores para personalizar seus arquivos de tema ou construir modelos personalizados para adicionar elementos al\u00e9m de palavras e imagens ao seu conte\u00fado. Em vez disso, voc\u00ea pode personalizar o conte\u00fado usando o editor.<\/p>\n\n\n\n<p>Blocos individuais podem ser criados e projetados para se encaixarem em um layout responsivo e combinar com a cor e a tipografia do seu site.<\/p>\n\n\n\n<p>Al\u00e9m disso, voc\u00ea pode criar e usar <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\">padr\u00f5es de blocos<\/a> compartilh\u00e1veis. Estes s\u00e3o blocos pr\u00e9-fabricados criados por indiv\u00edduos, empresas e desenvolvedores do WordPress.<\/p>\n\n\n\n<p>Juntos, os temas em blocos transformam o WordPress em um sistema mais modular e flex\u00edvel. Ele emula grande parte da funcionalidade de outros construtores de sites de arrastar e soltar, popularizados por empresas como Squarespace e Wix.<\/p>\n\n\n\n<p>Temas constru\u00eddos sobre o framework de blocos geralmente v\u00eam com blocos personalizados pr\u00e9-constru\u00eddos que combinam com o design e estilo do site. Voc\u00ea pode ent\u00e3o usar esses blocos dentro do seu site onde precisar deles.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"differences\" class=\"wp-block-heading\">Temas em Blocos Vs. Temas Cl\u00e1ssicos<\/h2>\n\n\n\n<p>Os temas cl\u00e1ssicos do WordPress foram criados para criar um estilo e design consistentes.<\/p>\n\n\n\n<p>A maioria das \u00e1reas do site s\u00f3 podia ser editada personalizando o tema ou editando diretamente os arquivos de template PHP para adicionar funcionalidades espec\u00edficas ao site.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>PHP<\/h3>\n    <p>PHP (Hypertext Preprocessor) \u00e9 uma linguagem de script de c\u00f3digo aberto. \u00c9 amplamente utilizada no desenvolvimento web e pode ser incorporada ao HTML. V\u00e1rios populares Sistemas de Gest\u00e3o de Conte\u00fado (CMS), como o WordPress, s\u00e3o constru\u00eddos com PHP.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/php\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Ent\u00e3o, a maioria dos sites possu\u00eda alguns modelos padr\u00e3o para cada tipo de conte\u00fado. Por exemplo, um modelo de p\u00e1gina e um modelo de postagem. Editores de blocos ainda geralmente possuem essa mesma estrutura de tema, mas voc\u00ea pode facilmente criar varia\u00e7\u00f5es ou personalizar cada modelo usando o editor.<\/p>\n\n\n\n<p>Com o <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-update-old-wordpress-posts-block-editor\/\" target=\"_blank\" rel=\"noopener\">editor de blocos<\/a>, voc\u00ea tem mais controle sobre as partes individuais de cada p\u00e1gina ou postagem, e pode construir novos modelos em tempo real.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"517\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block.jpg\" alt=\"Adicionar Bloco de \u00cdcones Sociais\" class=\"wp-image-42358 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-300x97.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-1024x331.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-768x248.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-social-icons-block-1536x496.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-600x194.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1200x388.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-730x236.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1460x472.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-784x253.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-1568x507.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-social-icons-block-877x283.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/517;\" \/><\/figure>\n\n\n\n<p>Por exemplo, voc\u00ea pode adicionar um bloco com \u00edcones sociais ou uma galeria de imagens aos seus modelos de p\u00e1gina para que apare\u00e7am em todas as p\u00e1ginas do seu site ou adicion\u00e1-los a uma \u00fanica postagem.<\/p>\n\n\n\n<p>Tamb\u00e9m existe um editor de estilo que permite ajustar as configura\u00e7\u00f5es do bloco e personalizar os elementos visuais, como paleta de cores e layout. Voc\u00ea nem precisa editar nenhum CSS.<\/p>\n\n\n\n<p>Al\u00e9m da flexibilidade e controle adicionais, os temas em blocos oferecem muitos benef\u00edcios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Eliminar Shortcodes e Edi\u00e7\u00e3o de C\u00f3digo HTML<\/h3>\n\n\n\n<p>Com temas cl\u00e1ssicos, muitos usu\u00e1rios do WordPress passaram a depender de maneiras personalizadas para adicionar funcionalidades ou editar o layout e o design de suas postagens e p\u00e1ginas de blog.<\/p>\n\n\n\n<p>Shortcodes e snippets HTML personalizados eram frequentemente usados para substituir ou injetar novos recursos que n\u00e3o estavam inclu\u00eddos no tema do site.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>HTML<\/h3>\n    <p>HTML significa HyperText Markup Language. \u00c9 o bloco de constru\u00e7\u00e3o mais fundamental da web e a linguagem de marca\u00e7\u00e3o padr\u00e3o para criar p\u00e1ginas e aplica\u00e7\u00f5es web.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Por exemplo, voc\u00ea pode ter copiado e colado um longo trecho de c\u00f3digo em cada postagem para adicionar um chamado \u00e0 a\u00e7\u00e3o ou inserir um formul\u00e1rio de <i>opt-in<\/i>.<\/p>\n\n\n\n<p>Agora, voc\u00ea pode simplesmente criar um <a href=\"https:\/\/wordpress.org\/documentation\/article\/reusable-blocks\/\" target=\"_blank\" rel=\"noopener\">padr\u00e3o sincronizado<\/a> (bloco reutiliz\u00e1vel) para este conte\u00fado. Em seguida, crie um modelo de post personalizado para cada CTA relevante. Finalmente, basta selecionar o modelo de post para cada post para que o CTA apare\u00e7a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Desbloqueie Elementos Nativos do Construtor de P\u00e1ginas<\/h3>\n\n\n\n<p>Para muitos usu\u00e1rios, um tema baseado em blocos eliminar\u00e1 a necessidade de plugins de construtor de p\u00e1ginas que se tornaram populares na comunidade WordPress.<\/p>\n\n\n\n<p>Estes Plugins serviram como uma solu\u00e7\u00e3o tempor\u00e1ria para usu\u00e1rios que desejavam um sistema modular e baseado em blocos para construir seu site antes de estar dispon\u00edvel para a maioria dos temas do WordPress.<\/p>\n\n\n\n<p>Esses temas ainda s\u00e3o, claro, populares. Divi, Elementor, Gutenify e outros foram pioneiros nesse espa\u00e7o, mas agora voc\u00ea n\u00e3o precisa usar esses temas espec\u00edficos para desbloquear capacidades modulares de constru\u00e7\u00e3o de sites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Melhore o Desempenho do Site<\/h3>\n\n\n\n<p>Outro grande benef\u00edcio da mudan\u00e7a para temas em blocos \u00e9 a melhoria na velocidade de carregamento da p\u00e1gina e no desempenho do site.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Tempo de Carregamento da P\u00e1gina<\/h3>\n    <p>Tempo de carregamento da p\u00e1gina \u00e9, muito simplesmente, a quantidade de tempo que leva para uma p\u00e1gina da web carregar. Em termos mais t\u00e9cnicos, \u00e9 o tempo necess\u00e1rio para baixar e exibir todo o conte\u00fado de uma p\u00e1gina da web. Geralmente \u00e9 medido em segundos.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/page-load-time\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Muitos sites dependiam de plugins de terceiros ou de copiar e colar trechos de c\u00f3digo para obter a funcionalidade e o design desejados para suas p\u00e1ginas. Isso muitas vezes leva \u00e0 adi\u00e7\u00e3o de scripts e estilos extras nas p\u00e1ginas. Cada um desses recursos leva tempo para carregar e desacelera seu site.<\/p>\n\n\n\n<p>Portanto, ao migrar de um tema cl\u00e1ssico para um tema de blocos, muitos sites poder\u00e3o remover essas pe\u00e7as extras. Isso simplificar\u00e1 o c\u00f3digo na p\u00e1gina e deve <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/gtmetrix\/\" target=\"_blank\" rel=\"noopener\">melhorar a velocidade de carregamento e o desempenho da p\u00e1gina<\/a>.<\/p>\n\n\n\n<p>Que, por sua vez, pode <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/melhorar-seo\/\" target=\"_blank\" rel=\"noopener\">melhorar o SEO<\/a>, aumentar o engajamento e incrementar as convers\u00f5es.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SEO<\/h3>\n    <p>Search Engine Optimization (SEO) \u00e9 a pr\u00e1tica de melhorar o posicionamento de um site nos resultados de busca. Os resultados s\u00e3o agregados com base em v\u00e1rios fatores, incluindo a relev\u00e2ncia e qualidade do site. Otimizar seu site para esses fatores pode ajudar a aumentar seu posicionamento.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/seo\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Reduza Conflitos, Atualiza\u00e7\u00f5es e Vulnerabilidades<\/h3>\n\n\n\n<p>Com menos depend\u00eancia de Plugins de terceiros, voc\u00ea tamb\u00e9m enfrentar\u00e1 menos conflitos ou atualiza\u00e7\u00f5es necess\u00e1rias para o seu <a href=\"https:\/\/www.dreamhost.com\/blog\/what-makes-up-a-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">site WordPress<\/a>.<\/p>\n\n\n\n<p>\u00c0 medida que os sites se tornam mais complexos, os Plugins adicionais que est\u00e3o sendo usados podem muitas vezes entrar em conflito uns com os outros. Isso pode criar problemas que quebram o site, como o not\u00f3rio <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/solucao-de-problemas-da-tela-branca-da-morte-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">White Screen of Death<\/a>. E atualizar plugins pode parecer um total tiro no escuro. (\u201cSer\u00e1 que esse vai quebrar meu site?!\u201d)<\/p>\n\n\n\n<p>Talvez ainda mais importante, menos depend\u00eancia de Plugins\/plugin de terceiros tamb\u00e9m <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/proteja-seu-site-wordpress\/\" target=\"_blank\" rel=\"noopener\">tornar\u00e1 seu site mais seguro<\/a>. Essas ferramentas podem frequentemente introduzir vulnerabilidades ou exploits ao seu c\u00f3digo. (Especialmente se voc\u00ea evitar atualiz\u00e1-las por medo de quebrar algo importante.)<\/p>\n\n\n\n<h2 id=\"should\" class=\"wp-block-heading\">Deve Mudar Para Um Tema em Blocos?<\/h2>\n\n\n\n<p>Com todos esses benef\u00edcios em mente, parece claro que, na maioria dos casos, fazer o upgrade para um tema em blocos \u00e9 uma jogada inteligente.<\/p>\n\n\n\n<p><b>A maioria<\/b> das empresas e sites deveriam considerar a mudan\u00e7a de um tema cl\u00e1ssico para um tema em blocos.<\/p>\n\n\n\n<p>Introduz diversas melhorias de qualidade de vida que facilitam a gest\u00e3o do seu site e do seu conte\u00fado, permitindo que sua equipe trabalhe de forma mais eficiente e personalize o conte\u00fado sem a necessidade de tempo dedicado de um desenvolvedor, usando capacidades de edi\u00e7\u00e3o sem c\u00f3digo.<\/p>\n\n\n\n<p>E \u00e9 um passo valioso para melhorar o desempenho e a seguran\u00e7a do seu site.<\/p>\n\n\n\n<p>Quando voc\u00ea <b>n\u00e3o <\/b>deve mudar?<\/p>\n\n\n\n<p>Em resumo: Se voc\u00ea n\u00e3o tem tempo e recursos para dedicar \u00e0 mudan\u00e7a. Alterar seu tema WordPress, especialmente se for constru\u00eddo sob medida ou altamente personalizado, requer uma quantidade significativa de trabalho.<\/p>\n\n\n\n<p>Embora seu conte\u00fado, m\u00eddia e outros ativos permane\u00e7am intactos, o design geral do seu site mudar\u00e1 para corresponder ao novo tema.<\/p>\n\n\n\n<p>Se voc\u00ea deseja manter a apar\u00eancia do seu tema atual ou deseja uma apar\u00eancia completamente diferente, voc\u00ea ter\u00e1 que ajustar o design de acordo.<\/p>\n\n\n\n<p>Por outro lado: Fazer essas edi\u00e7\u00f5es ser\u00e1 mais f\u00e1cil porque seu novo tema ser\u00e1 baseado em blocos e permitir\u00e1 que voc\u00ea edite a maioria dos layouts, elementos, cores e estilos do tema sem editar o c\u00f3digo.<\/p>\n\n\n\n<p>Vamos analisar o processo.<\/p>\n\n\n\n<h2 id=\"howto\" class=\"wp-block-heading\">Como Mudar Para Um Tema em Bloco WP<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 1: Fa\u00e7a Backup do Seu Site<\/h3>\n\n\n\n<p>Sempre que voc\u00ea fizer atualiza\u00e7\u00f5es importantes no seu site, crie um backup.<\/p>\n\n\n\n<p>\u00c9 t\u00e3o importante que vamos repetir.<\/p>\n\n\n\n<p>Crie um backup. (S\u00e9rio.)<\/p>\n\n\n\n<p>Se voc\u00ea estiver usando um servi\u00e7o de <a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/gerenciado\/\" target=\"_blank\" rel=\"noopener\">Hospedagem Gerenciada do WordPress<\/a>, voc\u00ea dever\u00e1 ter op\u00e7\u00f5es de backup autom\u00e1tico e manual.<\/p>\n\n\n\n<p>Se voc\u00ea n\u00e3o est\u00e1, considere usar um plugin do WordPress como <a href=\"https:\/\/blogvault.net\/\" target=\"_blank\" rel=\"noopener\">BlogVault<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/updraftplus\/\" target=\"_blank\" rel=\"noopener\">UpdraftPlus<\/a>, ou <a href=\"https:\/\/wordpress.org\/plugins\/jetpack-backup\/\" target=\"_blank\" rel=\"noopener\">Jetpack Backup<\/a> para salvar todos os arquivos e conte\u00fados do seu site.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Jetpack<\/h3>\n    <p>Jetpack \u00e9 um plugin do WordPress criado pela Automattic, a empresa por tr\u00e1s do WordPress.com. \u00c9 um plugin que oferece acesso a funcionalidades normalmente dispon\u00edveis apenas em sites do WordPress.com.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/jetpack\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Dessa forma, se algo der errado, voc\u00ea ter\u00e1 uma maneira de restaurar seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 2: Avalie Seu Site<\/h3>\n\n\n\n<p>A pr\u00f3xima coisa que precisamos fazer \u00e9 ter uma no\u00e7\u00e3o do que acontecer\u00e1 quando voc\u00ea fizer a mudan\u00e7a.<\/p>\n\n\n\n<p>Alterar seu tema geralmente tem dois efeitos imediatos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>O layout geral, as cores e os estilos do seu site mudar\u00e3o.<\/li>\n\n\n\n<li>Voc\u00ea perder\u00e1 qualquer c\u00f3digo personalizado ou modifica\u00e7\u00f5es que foram adicionadas diretamente nos arquivos ou modelos do seu tema antigo.<\/li>\n\n\n<\/ol>\n\n\n\n<p>Al\u00e9m disso, seu conte\u00fado e tudo o que foi adicionado ao corpo de suas postagens e p\u00e1ginas deve permanecer o mesmo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1537\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change.jpg\" alt=\"Apenas mais uma mudan\u00e7a de tema\" class=\"wp-image-42359 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-300x288.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-1024x984.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-768x738.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/just-another-theme-change-1536x1476.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-600x576.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1200x1153.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-730x701.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1460x1403.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-784x753.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-1568x1506.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/just-another-theme-change-877x842.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1537;\" \/><\/figure>\n\n\n\n<p>Por exemplo, se voc\u00ea est\u00e1 usando um tema cl\u00e1ssico e personalizou o layout do cabe\u00e7alho do seu site, essas altera\u00e7\u00f5es n\u00e3o ser\u00e3o transferidas.<\/p>\n\n\n\n<p>Ent\u00e3o, o que voc\u00ea deve fazer?<\/p>\n\n\n\n<p>Percorra cada uma das p\u00e1ginas do seu site (ou pelo menos todos os modelos \u00fanicos).<\/p>\n\n\n\n<p>Procure por qualquer conte\u00fado personalizado, widgets, banners, gr\u00e1ficos, etc, que tenham sido adicionados aos arquivos do tema. Estes geralmente aparecem em se\u00e7\u00f5es \u201cest\u00e1ticas\u201d como seu cabe\u00e7alho, barra lateral ou rodap\u00e9.<\/p>\n\n\n\n<p>Anote cada inst\u00e2ncia que encontrar. \u00c9 poss\u00edvel adicionar este conte\u00fado de volta ao seu site ap\u00f3s fazer a troca.<\/p>\n\n\n\n<p>E n\u00e3o se preocupe. Mesmo que voc\u00ea perca algo, geralmente voc\u00ea pode voltar ao seu tema antigo para ver o que aparecia e agora est\u00e1 faltando no seu novo site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passo 3: Escolha Um Tema<\/h3>\n\n\n\n<p>Agora \u00e9 hora de escolher seu tema.<\/p>\n\n\n\n<p>Qual \u00e9 o resultado desejado?<\/p>\n\n\n\n<p>Voc\u00ea deseja um tema que se assemelhe de perto ao design do seu site atual? Ou algo radicalmente diferente? Um visual totalmente novo.<\/p>\n\n\n\n<p>Independentemente da dire\u00e7\u00e3o, voc\u00ea pode come\u00e7ar navegando pelos temas dispon\u00edveis no <a href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" target=\"_blank\" rel=\"noopener\">diret\u00f3rio de temas do WordPress<\/a>. (Clique em \u201cBlock Themes\u201d para filtrar.)<\/p>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode conferir nossa lista dos <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/temas-de-bloco-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">27 melhores temas de blocos<\/a>.<\/p>\n\n\n\n<p>Tenha em mente que as op\u00e7\u00f5es de personaliza\u00e7\u00e3o s\u00e3o quase ilimitadas com todos os temas de blocos. \u00c9 como quando voc\u00ea est\u00e1 procurando um apartamento ou casa. N\u00e3o se prenda \u00e0 pintura nas paredes. Voc\u00ea sempre pode pintar novamente. Enquanto voc\u00ea ainda quer procurar temas que estejam pr\u00f3ximos ao estilo geral e \u00e0s prefer\u00eancias de design, voc\u00ea poder\u00e1 modificar o tema para atender \u00e0s suas necessidades.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea prefere um design minimalista, ent\u00e3o voc\u00ea pode querer come\u00e7ar com um tema simples. Outra op\u00e7\u00e3o \u00e9 modificar um tema complexo para remover parte do conte\u00fado.<\/p>\n\n\n\n<p>Por \u00faltimo, observe os blocos pr\u00e9-projetados inclu\u00eddos nos temas.<\/p>\n\n\n\n<p>Muitos temas incluem estilos de blocos personalizados que j\u00e1 foram constru\u00eddos e est\u00e3o dispon\u00edveis como op\u00e7\u00f5es assim que voc\u00ea os ativa. Isso pode economizar muito tempo em compara\u00e7\u00e3o a ter que criar blocos adicionais manualmente ap\u00f3s configurar o novo tema.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples.jpg\" alt=\"Exemplos de blocos de padr\u00f5es\" class=\"wp-image-42360 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/pattern-block-examples-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/pattern-block-examples-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n\n<p>Explore a se\u00e7\u00e3o \u201cPatterns\u201d do tema para ver como esses blocos s\u00e3o usados para criar se\u00e7\u00f5es personalizadas. Muitos temas incluir\u00e3o exemplos de padr\u00f5es para cabe\u00e7alhos, padr\u00f5es para rodap\u00e9s e outras se\u00e7\u00f5es ou componentes relevantes que voc\u00ea pode querer usar em seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 4: Instalar e Ativar Tema<\/h3>\n\n\n\n<p>Depois de escolher um tema, \u00e9 hora de instalar.<\/p>\n\n\n\n<p>Voc\u00ea pode baixar o arquivo zip do tema em bloco localmente e depois fazer o upload. Ou, se o tema estiver no diret\u00f3rio do WordPress, voc\u00ea pode instal\u00e1-lo a partir do seu WP Admin.<\/p>\n\n\n\n<p>Para fazer isso, v\u00e1 para <i>Appearance &gt; Themes,<\/i> e clique no bot\u00e3o \u201cAdd New\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"992\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin.jpg\" alt=\"Adicionar Novo Tema no WP Admin\" class=\"wp-image-42361 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-1024x635.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/add-new-theme-wp-admin-1536x952.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1200x744.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-730x453.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1460x905.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-1568x972.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/add-new-theme-wp-admin-877x544.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/992;\" \/><\/figure>\n\n\n\n<p>Em seguida, digite o nome do tema na caixa de pesquisa. Encontre o tema que deseja instalar e passe o mouse sobre ele. Clique em \u201cInstalar\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme.jpg\" alt=\"Instalar Novo Tema\" class=\"wp-image-42362 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/install-new-theme-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/install-new-theme-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n\n<p>Agora o seu novo tema est\u00e1 instalado!<\/p>\n\n\n\n<p>Volte para a sua p\u00e1gina de <i>Temas<\/i> e encontre o tema. Voc\u00ea pode ativ\u00e1-lo imediatamente clicando em \u201cAtivar\u201d.<\/p>\n\n\n\n<p><b>Nota Nerd<\/b>: Se voc\u00ea ainda est\u00e1 incerto sobre como seu site ficar\u00e1 com o novo tema, use a op\u00e7\u00e3o \u201cLive Preview\u201d para ver como ele ficar\u00e1. Ou, ainda melhor, instale o tema e siga os pr\u00f3ximos passos em uma <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-do-iniciante-para-staging-de-websites\/\" target=\"_blank\" rel=\"noopener\">vers\u00e3o provis\u00f3ria do seu site<\/a>. Desta forma, as mudan\u00e7as n\u00e3o ser\u00e3o ao vivo enquanto voc\u00ea estiver atualizando e personalizando seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 5: Personalize o Layout e o Design<\/h3>\n\n\n\n<p>Uma vez que voc\u00ea tenha ativado o tema, seu site provavelmente parecer\u00e1 diferente do que antes.<\/p>\n\n\n\n<p>Agora \u00e9 a sua vez de personalizar a apar\u00eancia com a configura\u00e7\u00e3o do seu tema. Novamente, voc\u00ea pode recriar o design anterior que usou para o seu site, ou pode lev\u00e1-lo em uma dire\u00e7\u00e3o totalmente nova.<\/p>\n\n\n\n<p>De qualquer forma, voc\u00ea pode usar a funcionalidade de bloqueio de site completo para personalizar com apenas alguns cliques.<\/p>\n\n\n\n<p>Normalmente, se seu tema pode usar o Editor de Site, ele exibir\u00e1 uma nova mensagem na p\u00e1gina <i>customize.php<\/i>, dizendo \u201cViva! Seu tema suporta a edi\u00e7\u00e3o de site com blocos! Diga-me mais. Use o Editor de Site.\u201d<\/p>\n\n\n\n<p>Se voc\u00ea n\u00e3o ver esta mensagem por qualquer motivo, na p\u00e1gina de <i>Themes<\/i>, clique em \u201cCustomize\u201d no seu novo tema.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"991\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme.jpg\" alt=\"Personalizar Tema do WordPress\" class=\"wp-image-42363 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-300x186.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-1024x634.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-768x476.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wordpress-customize-theme-1536x951.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-600x372.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1200x743.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-730x452.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1460x904.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-784x486.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-1568x971.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wordpress-customize-theme-877x543.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/991;\" \/><\/figure>\n\n\n\n<p>Agora voc\u00ea ver\u00e1 a tela do Editor. A partir daqui, voc\u00ea pode mergulhar e editar qualquer p\u00e1gina ou post espec\u00edfico no seu site. Voc\u00ea tamb\u00e9m pode editar e criar novos modelos ou padr\u00f5es.<\/p>\n\n\n\n<p>Aqui \u00e9 onde voc\u00ea vai querer passar a maior parte do seu tempo. Dependendo dos seus objetivos para o novo tema, voc\u00ea pode querer percorrer cada modelo e padr\u00e3o padr\u00e3o para personalizar o conte\u00fado e o layout.<\/p>\n\n\n\n<p>Al\u00e9m de mudar o layout e os blocos do seu site, voc\u00ea tamb\u00e9m pode usar as op\u00e7\u00f5es de edi\u00e7\u00e3o para personalizar suas configura\u00e7\u00f5es de estilo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings.jpg\" alt=\"Configura\u00e7\u00f5es de Estilo de Bloco\" class=\"wp-image-42364 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/block-style-settings-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/block-style-settings-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Em \u201cConfigura\u00e7\u00f5es de bloco\u201d, voc\u00ea deve ver uma s\u00e9rie de op\u00e7\u00f5es de estilo. Aqui voc\u00ea pode ajustar os elementos de design como tamanho da fonte, alinhamento, espa\u00e7amento e esquemas de cores.<\/p>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode adicionar classes CSS personalizadas para cada elemento em <i>Avan\u00e7ado<\/i>.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) \u00e9 uma linguagem de codifica\u00e7\u00e3o essencial usada para estilizar p\u00e1ginas da web. O CSS ajuda a criar p\u00e1ginas bonitas modificando a apar\u00eancia de v\u00e1rios elementos, incluindo estilo de fonte, cor, layout e muito mais.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 6: Verifique se h\u00e1 Plugins ou Widgets quebrados<\/h3>\n\n\n\n<p>Nem todos os Plugins, widgets ou personaliza\u00e7\u00f5es funcionar\u00e3o com temas em blocos.<\/p>\n\n\n\n<p>Se seu site estava usando uma s\u00e9rie de Plugins e widgets (os quais voc\u00ea deveria ter identificado no Passo 2), ent\u00e3o voc\u00ea pode precisar fazer alguns ajustes no backend.<\/p>\n\n\n\n<p>Plugins de bloco s\u00e3o compat\u00edveis com temas de bloco, mas alguns antigos podem n\u00e3o funcionar.<\/p>\n\n\n\n<p>Suponha que voc\u00ea queira adicionar um widget social que usava com seu tema antigo. Se voc\u00ea n\u00e3o encontrar a op\u00e7\u00e3o de adicionar esse widget espec\u00edfico a partir do editor de blocos, ent\u00e3o provavelmente precisar\u00e1 encontrar um novo plugin que seja suportado.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Encontre o Tema de Bloco Perfeito Para o Seu Site<\/h2>\n\n\n\n<p>Agora que voc\u00ea conhece os passos, \u00e9 hora da parte divertida.<\/p>\n\n\n\n<p>Encontrar o tema de bloco certo para o seu site, seja ele um blog pessoal, site de empresa ou plataforma de m\u00eddia, pode ser empolgante, com tantas \u00f3timas op\u00e7\u00f5es dispon\u00edveis.<\/p>\n\n\n\n<p>Alguns dos nossos temas de blocos populares favoritos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/themes\/twentytwentythree\/\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-Three<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/generatepress\/\" target=\"_blank\" rel=\"noopener\">GeneratePress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\" target=\"_blank\" rel=\"noopener\">Blockbase<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/coming-soon\/\" target=\"_blank\" rel=\"noopener\">SeedProd<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener\">Divi<\/a><\/li>\n\n\n<\/ol>\n\n\n\n<p>Com o tema certo, voc\u00ea est\u00e1 no caminho certo para se tornar um mestre em <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-usar-blocos-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">blocos WordPress<\/a>, a DreamHost pode ajudar!<\/p>\n\n\n\n<p>Feliz constru\u00e7\u00e3o!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Voc\u00ea Sonha, N\u00f3s Programamos\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Aproveite mais de 20 anos de experi\u00eancia em programa\u00e7\u00e3o ao escolher nosso servi\u00e7o de Desenvolvimento Web. Apenas nos diga o que voc\u00ea deseja para o seu site \u2014 n\u00f3s cuidamos do resto.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/desenvolvimento\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Saiba Mais                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea \u00e9 f\u00e3 de Legos, ent\u00e3o vai adorar os temas de blocos do WordPress. A partir da vers\u00e3o 5.9, o WordPress oferece suporte completo para temas de blocos. Essa foi uma mudan\u00e7a importante para a maioria dos sites, que foram constru\u00eddos sobre o que agora s\u00e3o conhecidos como temas \u201ccl\u00e1ssicos\u201d. Mas mudar de um tema cl\u00e1ssico para um tema baseado em blocos requer [\u2026]<\/p>\n","protected":false},"author":1077,"featured_media":42353,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"O que \u00e9 um Tema de Bloco do WordPress?\"],[\"differences\",\"Temas em Blocos Vs. Temas Cl\u00e1ssicos\"],[\"should\",\"Deve Mudar Para Um Tema em Blocos?\"],[\"howto\",\"Como Mudar Para Um Tema em Bloco WP\"],[\"summary\",\"Encontre o Tema de Bloco Perfeito Para o Seu Site\"]]","hide_toc":false,"footnotes":""},"categories":[14474,14407,14409],"tags":[],"class_list":["post-56063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comecando-pt","category-design-de-sites-pt","category-wordpress-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress - DreamHost 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:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress\" \/>\n<meta property=\"og:description\" content=\"Se voc\u00ea \u00e9 f\u00e3 de Legos, ent\u00e3o vai adorar os temas de blocos do WordPress. A partir da vers\u00e3o 5.9, o WordPress oferece suporte completo para temas de blocos. Essa foi uma mudan\u00e7a importante para a maioria dos sites, que foram constru\u00eddos sobre o que agora s\u00e3o conhecidos como temas \u201ccl\u00e1ssicos\u201d. Mas mudar de um tema cl\u00e1ssico para um tema baseado em blocos requer [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-10T15:00:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:54:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jos Velasco\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jos Velasco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress - DreamHost 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:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress","og_description":"Se voc\u00ea \u00e9 f\u00e3 de Legos, ent\u00e3o vai adorar os temas de blocos do WordPress. A partir da vers\u00e3o 5.9, o WordPress oferece suporte completo para temas de blocos. Essa foi uma mudan\u00e7a importante para a maioria dos sites, que foram constru\u00eddos sobre o que agora s\u00e3o conhecidos como temas \u201ccl\u00e1ssicos\u201d. Mas mudar de um tema cl\u00e1ssico para um tema baseado em blocos requer [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-11-10T15:00:28+00:00","article_modified_time":"2025-05-26T19:54:30+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","type":"image\/jpeg"}],"author":"Jos Velasco","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jos Velasco","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/"},"author":{"name":"Jos Velasco","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a"},"headline":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress","datePublished":"2023-11-10T15:00:28+00:00","dateModified":"2025-05-26T19:54:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/"},"wordCount":2771,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","articleSection":["Come\u00e7ando","Design de Sites","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/","name":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","datePublished":"2023-11-10T15:00:28+00:00","dateModified":"2025-05-26T19:54:30+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Moving-From-WordPress-Classic-Themes-To-Block-Theme-HERO-Image.jpg","width":1460,"height":1095},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/mudar-para-temas-de-bloco-do-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Mudar de um Tema Cl\u00e1ssico para Temas de Blocos do WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a","name":"Jos Velasco","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","caption":"Jos Velasco"},"description":"Jos Velasco is a WordPress Professional Consultant at DreamHost. His responsibilities include helping with advanced WordPress cases, creating training material, and identifying trends impacting the WordPress community. In his free time, he enjoys climbing mountains, eating healthy, and watching drama movies. Follow Jos on LinkedIn: https:\/\/www.linkedin.com\/in\/josvelasco\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/josvelasco\/"}]}},"lang":"pt","translations":{"pt":56063,"es":42367,"en":42351,"uk":50963,"de":56065,"pl":56069,"ru":56072,"it":68576,"fr":70741,"nl":70765},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1077"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=56063"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56063\/revisions"}],"predecessor-version":[{"id":62221,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56063\/revisions\/62221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42353"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=56063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=56063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=56063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}