{"id":7193,"date":"2017-11-09T10:49:36","date_gmt":"2017-11-09T12:49:36","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=7193"},"modified":"2025-12-18T12:01:02","modified_gmt":"2025-12-18T15:01:02","slug":"gutenberg-pros-e-contras","status":"publish","type":"post","link":"\/br\/tutoriais\/gutenberg-pros-e-contras\/","title":{"rendered":"O que \u00e9 Gutenberg no WordPress? Como usar o editor de blocos da plataforma"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Ol&aacute;! Se voc&ecirc; est&aacute; chegando agora no mundo do WordPress, uma boa forma de come&ccedil;ar &eacute; se familiarizando com o Gutenberg, seu editor de blocos, para gerenciar a plataforma com mais efici&ecirc;ncia. Apresentado como um substituto para o editor cl&aacute;ssico, ao longo dos anos ele se tornou uma parte essencial da experi&ecirc;ncia do CMS.<\/p><p class=\"wp-block-paragraph\">O Gutenberg WordPress usa um sistema baseado em blocos visuais, o que permite que ele seja usado por pessoas com qualquer n&iacute;vel de conhecimento t&eacute;cnico. Em outras palavras, dominando as fun&ccedil;&otilde;es e os recursos de design do editor, voc&ecirc; poder&aacute; criar seu site dos sonhos sem precisar mexer em uma linha de c&oacute;digo sequer.<\/p><p class=\"wp-block-paragraph\">N&atilde;o importa se voc&ecirc; est&aacute; criando um blog simples ou um site complexo com v&aacute;rias p&aacute;ginas: este tutorial ajudar&aacute; voc&ecirc; a tirar o m&aacute;ximo proveito do Gutenberg no WordPress. Vamos l&aacute;?<\/p><p>\n\n\n\n\n\n\n<\/p><p class=\"wp-block-paragraph\"><\/p><p>\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   O que &eacute; Gutenberg no WordPress?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Sucessor do editor cl&aacute;ssico, o Gutenberg &eacute; a ferramenta padr&atilde;o do WordPress para criar e editar conte&uacute;do usando blocos. Cada bloco pode ser um texto, uma imagem, um v&iacute;deo ou outro elemento. Isso torna mais f&aacute;cil personalizar o layout sem precisar de c&oacute;digos complicados, pois voc&ecirc; pode mover, adicionar ou remover blocos simplesmente arrastando e soltando os elementos.<\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Na comunidade WordPress, o Gutenberg n&atilde;o &eacute; apenas um editor de conte&uacute;do: ele faz parte de um projeto maior que ambiciona transformar toda a experi&ecirc;ncia de edi&ccedil;&atilde;o de sites e revolucionar a forma de <a href=\"\/br\/tutoriais\/tutorial-wordpress\/\"><strong>como usar o WordPress<\/strong><\/a>. A equipe do WordPress delineou um&nbsp;<a href=\"https:\/\/br.wordpress.org\/about\/roadmap\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>roteiro<\/strong><\/a>&nbsp;para alcan&ccedil;ar esse objetivo:<\/p><ul class=\"wp-block-list\">\n<li><strong>Edi&ccedil;&atilde;o mais f&aacute;cil.<\/strong>&nbsp;Introduzido no WordPress 5.0, o editor de blocos Gutenberg oferece uma abordagem mais intuitiva para a cria&ccedil;&atilde;o de sites.<\/li>\n\n\n\n<li><strong>Personaliza&ccedil;&atilde;o.<\/strong>&nbsp;O WordPress 5.9 ganhou novos recursos como edi&ccedil;&atilde;o completa de site, padr&otilde;es de blocos, um diret&oacute;rio de blocos e temas baseados em blocos com base na interface Gutenberg.<\/li>\n\n\n\n<li><strong>Colabora&ccedil;&atilde;o.<\/strong>&nbsp;As futuras atualiza&ccedil;&otilde;es visam simplificar a colabora&ccedil;&atilde;o e trazer novas funcionalidades para torn&aacute;-la mais f&aacute;cil de usar.<\/li>\n\n\n\n<li><strong>Multil&iacute;ngue.<\/strong>&nbsp;A equipe est&aacute; trabalhando para oferecer suporte a sites multil&iacute;ngues nativamente no software principal.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>Como o Gutenberg funciona<\/strong><\/h3><p class=\"wp-block-paragraph\">O editor Gutenberg permite que voc&ecirc; adicione e edite v&aacute;rios tipos de elementos em seus posts e p&aacute;ginas usando blocos de conte&uacute;do individuais. Cada bloco funciona como uma pe&ccedil;a aut&ocirc;noma com configura&ccedil;&otilde;es personaliz&aacute;veis.<\/p><p class=\"wp-block-paragraph\">Para usar o Gutenberg, basta acessar o painel do WordPress e ir at&eacute;&nbsp;<strong>P&aacute;ginas&nbsp;<\/strong>or&nbsp;<strong>Posts<\/strong>&nbsp;&rarr;&nbsp;<strong>Adicionar Novo.<\/strong><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"739\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/04\/gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"p&aacute;gina do Gutenberg na web\" class=\"wp-image-34048\" title=\"editor-gutenberg\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/04\/gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/04\/gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/04\/gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/04\/gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Para adicionar um bloco, clique no &iacute;cone&nbsp;<strong>+<\/strong>&nbsp;no canto superior esquerdo para ver todas as op&ccedil;&otilde;es dispon&iacute;veis organizadas por tipo. Arraste e solte um bloco no editor e coloque-o onde quiser.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode personalizar cada bloco usando a barra de ferramentas na parte superior do elemento ou o painel de configura&ccedil;&otilde;es &agrave; direita.<\/p><p class=\"wp-block-paragraph\">Para criar seu design ainda mais rapidamente, o Gutenberg traz suporte a&nbsp;<a href=\"\/br\/tutoriais\/padroes-de-bloco-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>padr&otilde;es de blocos<\/strong><\/a>, que s&atilde;o combina&ccedil;&otilde;es pr&eacute;-fabricadas como colunas com imagens e bot&otilde;es.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; tiver experi&ecirc;ncia com linguagens de programa&ccedil;&atilde;o, voc&ecirc; pode at&eacute; mesmo criar seus pr&oacute;prios&nbsp;blocos do WordPress&nbsp;(ou padr&otilde;es de blocos) e compartilh&aacute;-los com outras pessoas.<\/p><h2 class=\"wp-block-heading\" id=\"h-editor-gutenberg-vs-editor-classico\"><strong>Editor Gutenberg vs. editor cl&aacute;ssico<\/strong><\/h2><p class=\"wp-block-paragraph\">Para entender melhor o editor de blocos, vamos compar&aacute;-lo com seu antecessor e ver as melhorias e diferen&ccedil;as que ele oferece.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"643\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/publicar-agendar-editor-classico.png\/w=1024,h=1024,fit=scale-down\" alt=\"agendando posts no editor cl&aacute;ssico do wordpress\" class=\"wp-image-45516\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/publicar-agendar-editor-classico.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/publicar-agendar-editor-classico.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/publicar-agendar-editor-classico.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/publicar-agendar-editor-classico.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">O editor cl&aacute;ssico do WordPress, alimentado pelo editor HTML TinyMCE, oferece uma interface simples e familiar para criar e editar posts e p&aacute;ginas. Ele imita os editores de texto tradicionais, como o Microsoft Word, oferecendo op&ccedil;&otilde;es de negrito, it&aacute;lico e listas para estiliza&ccedil;&otilde;es r&aacute;pidas.<\/p><p class=\"wp-block-paragraph\">Ele conta com dois modos de visualiza&ccedil;&atilde;o, que voc&ecirc; pode alternar no canto superior direito da tela: o editor visual permite que os usu&aacute;rios fa&ccedil;am upload de m&iacute;dias por meio do carregador de imagens integrado. J&aacute; a aba do editor de texto permite que voc&ecirc; adicione c&oacute;digo HTML personalizado aos posts e p&aacute;ginas.<\/p><p class=\"wp-block-paragraph\">Embora o editor cl&aacute;ssico seja confi&aacute;vel e f&aacute;cil de usar, ele n&atilde;o oferece muita flexibilidade para seus designs. Para criar layouts complexos ou designs avan&ccedil;ados, voc&ecirc; provavelmente precisar&aacute; de plugins ou usar HTML personalizado. Al&eacute;m disso, a adi&ccedil;&atilde;o de imagens e v&iacute;deos &eacute; mais trabalhosa e n&atilde;o &eacute; poss&iacute;vel ver uma visualiza&ccedil;&atilde;o em tempo real das suas cria&ccedil;&otilde;es.<\/p><p class=\"wp-block-paragraph\">O editor de blocos Gutenberg veio para resolver essas limita&ccedil;&otilde;es.<\/p><p class=\"wp-block-paragraph\">Em vez de depender de uma &uacute;nica caixa de texto, o Gutenberg usa blocos individuais para diferentes elementos, incluindo m&iacute;dias. Essa abordagem torna o processo de cria&ccedil;&atilde;o de cada p&aacute;gina ou post mais visual e intuitivo.<\/p><p class=\"wp-block-paragraph\">O recurso de arrastar e soltar elimina a necessidade de shortcodes e plugins adicionais, permitindo que voc&ecirc; crie layouts personalizados e veja os resultados em tempo real. Voc&ecirc; tamb&eacute;m pode personalizar padr&otilde;es de blocos e seus layouts para atender &agrave;s suas necessidades.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, com o recurso de edi&ccedil;&atilde;o completa do site, voc&ecirc; tamb&eacute;m pode criar e editar cabe&ccedil;alhos, rodap&eacute;s e outros elementos do site em posts e p&aacute;ginas. Al&eacute;m disso, o Gutenberg &eacute; amig&aacute;vel para desenvolvedores, permitindo que usu&aacute;rios com mais conhecimento t&eacute;cnico criem blocos personalizados e modelos reutiliz&aacute;veis.<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; um resumo das diferen&ccedil;as entre o editor Gutenberg e o editor cl&aacute;ssico:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Editor Gutenberg<\/strong><\/td><td><strong>Editor cl&aacute;ssico<\/strong><\/td><\/tr><tr><td><strong>Interface do editor<\/strong><\/td><td>Responsivo e intuitivo, com configura&ccedil;&otilde;es de menu autoexplicativas.<\/td><td>Interface de texto simples, semelhante a um processador de documentos online, como o Google Docs.<\/td><\/tr><tr><td><strong>Cria&ccedil;&atilde;o de conte&uacute;do<\/strong><\/td><td>Usa blocos com conte&uacute;do incorporado e recursos de personaliza&ccedil;&atilde;o.<\/td><td>Oferece uma tela em branco para escrever posts e p&aacute;ginas.<\/td><\/tr><tr><td><strong>Facilidade de uso<\/strong><\/td><td>Usa blocos de arrastar e soltar. Voc&ecirc; pode usar programa&ccedil;&atilde;o, mas isso &eacute; opcional.<\/td><td>Funciona como o Google Docs, mas voc&ecirc; pode personalizar mais suas p&aacute;ginas com conhecimentos b&aacute;sicos de HTML.<\/td><\/tr><tr><td><strong>Recursos<\/strong><\/td><td>Oferece blocos de arrastar e soltar, visualiza&ccedil;&otilde;es em tempo real e personaliza&ccedil;&atilde;o f&aacute;cil para qualquer n&iacute;vel de habilidade.<\/td><td>Fornece uma caixa de texto simples com ferramentas b&aacute;sicas de formata&ccedil;&atilde;o.<\/td><\/tr><tr><td><strong>Pr&oacute;s<\/strong><\/td><td>Oferece design flex&iacute;vel, blocos de arrastar e soltar, visualiza&ccedil;&otilde;es em tempo real e modelos reutiliz&aacute;veis.<\/td><td>Interface simples e familiar com formata&ccedil;&atilde;o f&aacute;cil e curva de aprendizado m&iacute;nima.<\/td><\/tr><tr><td><strong>Contras<\/strong><\/td><td>&Eacute; preciso um pouco de pr&aacute;tica para se acostumar.<\/td><td>Carece de maior flexibilidade de design, ferramentas de layout visual e recursos modernos de personaliza&ccedil;&atilde;o.<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">O editor de blocos Gutenberg j&aacute; vem pr&eacute;-instalado no WordPress 5.0 e vers&otilde;es mais recentes da plataforma. Se voc&ecirc; estiver usando uma vers&atilde;o mais antiga do CMS, &eacute; poss&iacute;vel us&aacute;-lo instalando o&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>plugin Gutenberg<\/strong><\/a>&nbsp;&mdash; no entanto, sempre recomendamos atualizar para a vers&atilde;o mais recente do WordPress para otimizar aspectos como estabilidade e&nbsp; seguran&ccedil;a.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; n&atilde;o quer se preocupar com as atualiza&ccedil;&otilde;es do WordPress, venha para a Hostinger. Nossos planos de&nbsp;<strong><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\">hospedagem WordPress<\/a><\/strong> incluem&nbsp;<strong>atualiza&ccedil;&otilde;es autom&aacute;ticas inteligentes<\/strong>, mantendo seu site seguro e atualizado ap&oacute;s cada ativa&ccedil;&atilde;o. Como cada atualiza&ccedil;&atilde;o do WordPress geralmente traz melhorias para o Gutenberg, ativar as atualiza&ccedil;&otilde;es inteligentes ajudar&aacute; voc&ecirc; a economizar tempo e melhorar ainda mais o seu website.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-como-usar-o-editor-gutenberg-no-wordpress\"><strong>Como usar o editor Gutenberg no WordPress<\/strong><\/h2><p class=\"wp-block-paragraph\">Agora, vamos explorar&nbsp;recursos essenciais do WordPress&nbsp;e passar pelas etapas para usar o Gutenberg em seu site.<\/p><h3 class=\"wp-block-heading\"><strong>Como adicionar um novo bloco<\/strong><\/h3><p class=\"wp-block-paragraph\">A primeira etapa para usar o editor de blocos &eacute;, naturalmente, adicionar um novo bloco. H&aacute; v&aacute;rias maneiras de fazer isso.<\/p><p class=\"wp-block-paragraph\">Ao abrir o editor do Gutenberg, voc&ecirc; notar&aacute; que um bloco de t&iacute;tulo j&aacute; est&aacute; no lugar certo. Para adicionar outro bloco, basta posicionar seu cursor abaixo dele e clicar no &iacute;cone preto&nbsp;<strong>+<\/strong>&nbsp;para escolher entre as op&ccedil;&otilde;es dispon&iacute;veis. Se voc&ecirc; n&atilde;o encontrar o bloco de que precisa, clique em&nbsp;<strong>Navegar por todos&nbsp;<\/strong>para ver mais.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"adicionando elemento no editor gutenberg wordpress\" class=\"wp-image-48364\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Como alternativa, use a galeria de blocos dispon&iacute;vel no canto superior esquerdo, marcada por um bot&atilde;o azul&nbsp;<strong>+<\/strong>. Nela, voc&ecirc; pode clicar em um bloco para coloc&aacute;-lo onde est&aacute; o cursor ou arrast&aacute;-lo para a posi&ccedil;&atilde;o desejada.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"menu de selecionar elemento no editor de blocos do wordpress\" class=\"wp-image-48365\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Outro m&eacute;todo pr&aacute;tico &eacute; digitar barra (<strong>\/<\/strong>) seguida do termo desejado ou nome do bloco. Quando o bloco desejado for exibido, pressione&nbsp;<strong>Enter&nbsp;<\/strong>para adicion&aacute;-lo &agrave; sua p&aacute;gina ou postagem.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"880\" height=\"1052\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=1024,h=1024,fit=scale-down\" alt=\"adi&ccedil;&atilde;o r&aacute;pida de bloco no editor gutenberg do wordpress\" class=\"wp-image-48366\" style=\"width:522px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=880,fit=scale-down 880w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=251,fit=scale-down 251w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=857,fit=scale-down 857w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=125,fit=scale-down 125w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionando-elemento-wordpress-3.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Voc&ecirc; pode escolher entre seis categorias de blocos principais: texto, m&iacute;dia, apresenta&ccedil;&atilde;o, widgets, tema e c&oacute;digos incorporados. Se o bloco que voc&ecirc; precisa n&atilde;o estiver dispon&iacute;vel, o inseridor sugerir&aacute; op&ccedil;&otilde;es do&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/block-directory\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>diret&oacute;rio de blocos do Gutenberg<\/strong><\/a>, que faz parte do reposit&oacute;rio de plugins do WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"637\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/sugestao-blocos-gutenberg-instalar.png\/w=1024,h=1024,fit=scale-down\" alt=\"sugest&atilde;o de blocos para baixar no editor gutenberg wordpress\" class=\"wp-image-48370\" style=\"width:330px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/sugestao-blocos-gutenberg-instalar.png\/w=637,fit=scale-down 637w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/sugestao-blocos-gutenberg-instalar.png\/w=159,fit=scale-down 159w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/sugestao-blocos-gutenberg-instalar.png\/w=544,fit=scale-down 544w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/sugestao-blocos-gutenberg-instalar.png\/w=80,fit=scale-down 80w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como personalizar blocos<\/strong><\/h3><p class=\"wp-block-paragraph\">Personalizar os blocos do Gutenberg no WordPress &eacute; muito f&aacute;cil: basta clicar em um bloco no editor, e sua barra de ferramentas aparecer&aacute; na parte superior.<\/p><p class=\"wp-block-paragraph\">A barra de ferramentas muda de acordo com o bloco que voc&ecirc; selecionou. Por exemplo, se estiver trabalhando com um bloco de tabela, voc&ecirc; ver&aacute; op&ccedil;&otilde;es para ajustar o alinhamento do texto ou adicionar linhas e colunas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"446\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-menu.png\/w=1024,h=1024,fit=scale-down\" alt=\"menu contextual para tabela no editor de blocos do wordpress\" class=\"wp-image-48371\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Voc&ecirc; tamb&eacute;m pode acessar mais configura&ccedil;&otilde;es clicando no &iacute;cone de engrenagem no canto superior direito do editor. Isso abre um painel na barra lateral direita, onde voc&ecirc; pode ajustar estilos, dimens&otilde;es e tipografia. Para usu&aacute;rios avan&ccedil;ados, &eacute; poss&iacute;vel adicionar HTML ou CSS personalizados para fazer as altera&ccedil;&otilde;es que voc&ecirc; desejar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-configuracoes.png\/w=1024,h=1024,fit=scale-down\" alt=\"configura&ccedil;&otilde;es de tabela no wordpress\" class=\"wp-image-48373\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-configuracoes.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-configuracoes.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-configuracoes.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/tabela-wordpress-configuracoes.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como organizar os blocos<\/strong><\/h3><p class=\"wp-block-paragraph\">Uma das maiores vantagens de usar o Gutenberg &eacute; a facilidade de organizar os blocos. Para mover um bloco, basta clicar nele, selecionar o &iacute;cone de seis pontos na barra de ferramentas e arrast&aacute;-lo para o local desejado.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"472\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-bloco-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"arrastando bloco no editor gutenberg\" class=\"wp-image-48353\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-bloco-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-bloco-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-bloco-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-bloco-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Voc&ecirc; tamb&eacute;m pode mover v&aacute;rios blocos de uma vez. Mantenha pressionada a tecla&nbsp;<strong>Shift<\/strong>, clique no primeiro bloco e, em seguida, selecione os outros que deseja incluir. Depois de agrupados temporariamente, use o &iacute;cone de seis pontos para arrast&aacute;-los juntos.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"592\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-multiplos-blocos-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"arrastando m&uacute;ltiplos blocos no editor gutenberg\" class=\"wp-image-48354\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-multiplos-blocos-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-multiplos-blocos-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-multiplos-blocos-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/arrastar-multiplos-blocos-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como agrupar v&aacute;rios blocos<\/strong><\/h3><p class=\"wp-block-paragraph\">Digamos que voc&ecirc; esteja criando uma se&ccedil;&atilde;o de Servi&ccedil;os em uma p&aacute;gina inicial, na qual cada item tem uma imagem, um t&iacute;tulo e uma descri&ccedil;&atilde;o, todos bem alinhados. O agrupamento de blocos &eacute; perfeito para isso, pois permite que voc&ecirc; gerencie toda a se&ccedil;&atilde;o como uma unidade.<\/p><p class=\"wp-block-paragraph\">&Eacute; poss&iacute;vel agrupar blocos usando os blocos&nbsp;<strong>Grupo<\/strong>,&nbsp;<strong>Colunas<\/strong>,&nbsp;<strong>Linha&nbsp;<\/strong>ou&nbsp;<strong>Pilha&nbsp;<\/strong>na se&ccedil;&atilde;o&nbsp;<strong>Design&nbsp;<\/strong>do seletor de blocos. Esses elementos de design criam blocos aninhados &ndash; isto &eacute;, blocos colocados dentro de um bloco pai &ndash; dando ao seu layout uma estrutura clara e f&aacute;cil de manipular.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"694\" height=\"1128\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/blocos-apresentacao-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"selecionando blocos de apresenta&ccedil;&atilde;o e layout no editor gutenberg wordpress\" class=\"wp-image-48355\" style=\"width:456px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/blocos-apresentacao-gutenberg-wordpress.png\/w=694,fit=scale-down 694w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/blocos-apresentacao-gutenberg-wordpress.png\/w=185,fit=scale-down 185w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/blocos-apresentacao-gutenberg-wordpress.png\/w=630,fit=scale-down 630w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/blocos-apresentacao-gutenberg-wordpress.png\/w=92,fit=scale-down 92w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Por exemplo, um bloco de coluna pode atuar como um pai, mantendo blocos filhos, como texto e imagens, que aparecem recuados sob ele no editor.<\/p><p class=\"wp-block-paragraph\">Veja a seguir como usar o bloco&nbsp;<strong>Colunas<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Abra o seletor de blocos &rarr;&nbsp;<strong>Design<\/strong>&nbsp;&rarr;&nbsp;<strong>&nbsp;Colunas<\/strong>.<\/li>\n\n\n\n<li>Escolha um layout predefinido ou crie um personalizado.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"660\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/colunas-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"criando coluna no editor de blocos do wordpress\" class=\"wp-image-48360\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/colunas-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/colunas-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/colunas-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/colunas-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Adicione blocos dentro de cada coluna clicando no sinal de&nbsp;<strong>+<\/strong>&nbsp;.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/inserir-conteudo-dentro-de-coluna-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"inserindo conte&uacute;do dentro de coluna no editor gutenberg do wordpress\" class=\"wp-image-48362\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/inserir-conteudo-dentro-de-coluna-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/inserir-conteudo-dentro-de-coluna-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/inserir-conteudo-dentro-de-coluna-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/inserir-conteudo-dentro-de-coluna-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Use as configura&ccedil;&otilde;es da barra de ferramentas ou da barra lateral para ajustar o layout e o alinhamento dos blocos.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Na barra lateral, voc&ecirc; encontrar&aacute; op&ccedil;&otilde;es como&nbsp;<strong>Blocos internos usam a largura do conte&uacute;do<\/strong>. Ative essa op&ccedil;&atilde;o para ajustar os blocos internos dentro da largura do bloco pai, criando um design mais coeso.<\/p><h3 class=\"wp-block-heading\"><strong>Como adicionar cabe&ccedil;alhos e texto<\/strong><\/h3><p class=\"wp-block-paragraph\">Voc&ecirc; pode introduzir texto em posts ou p&aacute;ginas com blocos de par&aacute;grafos e t&iacute;tulos.<\/p><p class=\"wp-block-paragraph\">Para adicionar um par&aacute;grafo, comece a digitar diretamente no editor do Gutenberg. Como alternativa, use o seletor de blocos e selecione&nbsp;<strong>Par&aacute;grafo<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"784\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-paragrafo-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"adicionando par&aacute;grafo no editor gutenberg do wordpress\" class=\"wp-image-48368\" title=\"novo-post\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-paragrafo-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-paragrafo-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-paragrafo-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-paragrafo-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Esse bloco tem uma barra de ferramentas para op&ccedil;&otilde;es b&aacute;sicas, como alinhamento de texto, negrito, it&aacute;lico e adi&ccedil;&atilde;o de links. Voc&ecirc; pode at&eacute; incluir elementos adicionais, como notas de rodap&eacute;, destaques, imagens em linha ou subscritos e sobrescritos. As configura&ccedil;&otilde;es da barra lateral permitem que voc&ecirc; personalize a cor, a tipografia e as dimens&otilde;es do texto para obter uma apar&ecirc;ncia mais refinada.<\/p><p class=\"wp-block-paragraph\">Os blocos de t&iacute;tulo ajudam a organizar seu conte&uacute;do, facilitando a leitura e a indexa&ccedil;&atilde;o dos mecanismos de pesquisa. Para adicionar um t&iacute;tulo, use qualquer um dos m&eacute;todos de adi&ccedil;&atilde;o de blocos e selecione&nbsp;<strong>T&iacute;tulo<\/strong>. A partir da&iacute;, escolha o n&iacute;vel do cabe&ccedil;alho (H1 a H6) na barra de ferramentas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2020\/05\/titulo-subtitulo-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"editor de blocos Gutenberg do wordpress com edi&ccedil;&atilde;o de t&iacute;tulos h1 e h2\" class=\"wp-image-44023\" title=\"novo-post\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2020\/05\/titulo-subtitulo-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2020\/05\/titulo-subtitulo-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2020\/05\/titulo-subtitulo-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2020\/05\/titulo-subtitulo-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Assim como o bloco de par&aacute;grafos, o bloco de t&iacute;tulos permite ajustar o alinhamento, a largura e outros atributos usando as configura&ccedil;&otilde;es da barra de ferramentas ou da barra lateral.<\/p><h3 class=\"wp-block-heading\"><strong>Como adicionar imagens e m&iacute;dia<\/strong><\/h3><p class=\"wp-block-paragraph\">O editor Gutenberg facilita a adi&ccedil;&atilde;o de diferentes tipos de m&iacute;dia aos seus posts e p&aacute;ginas, como imagens, &aacute;udio, v&iacute;deos e arquivos. Ele tamb&eacute;m oferece alguns blocos din&acirc;micos, incluindo:<\/p><ul class=\"wp-block-list\">\n<li><strong>M&iacute;dia e texto.<\/strong>&nbsp;Combina m&iacute;dia e texto lado a lado para melhor contar hist&oacute;rias.<\/li>\n\n\n\n<li><strong>Galeria de imagens.<\/strong>&nbsp;Exibe v&aacute;rias imagens em uma &aacute;rea, excelente para portf&oacute;lios e sites de fotografia.<\/li>\n\n\n\n<li><strong>Cobertura.<\/strong>&nbsp;Adiciona sobreposi&ccedil;&otilde;es de texto a imagens ou v&iacute;deos, ideais para cabe&ccedil;alhos ou destaques chamativos.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"698\" height=\"910\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-bloco-midia-gutenberg-wordpress.png\/public\" alt=\"adicionar blocos de m&iacute;dia no wordpress\" class=\"wp-image-48372\" style=\"width:398px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-bloco-midia-gutenberg-wordpress.png\/w=698,fit=scale-down 698w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-bloco-midia-gutenberg-wordpress.png\/w=230,fit=scale-down 230w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-bloco-midia-gutenberg-wordpress.png\/w=115,fit=scale-down 115w\" sizes=\"(max-width: 698px) 100vw, 698px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Para usar esses blocos, escolha o desejado na biblioteca de blocos e carregue sua m&iacute;dia ou selecione arquivos da Biblioteca de m&iacute;dia. Como alternativa, voc&ecirc; pode colar URLs para adicionar arquivos como &aacute;udio ou imagens. Nos blocos de imagem e galeria, voc&ecirc; pode arrastar e soltar v&aacute;rios arquivos de uma s&oacute; vez para economizar tempo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-galeria-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"criando nova galeria no wordpress\" class=\"wp-image-48356\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-galeria-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-galeria-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-galeria-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-galeria-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Cada bloco tem suas pr&oacute;prias configura&ccedil;&otilde;es. Por exemplo, o bloco&nbsp;<strong>Imagem&nbsp;<\/strong>permite ajustar os cantos, as bordas e o raio da m&iacute;dia, enquanto o bloco&nbsp;<strong>M&iacute;dia e Texto<\/strong>&nbsp;oferece op&ccedil;&otilde;es de alinhamento, organiza&ccedil;&atilde;o em dispositivos m&oacute;veis, cor e tipografia.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/midia-e-texto-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"bloco de m&iacute;dia e texto no editor gutenberg\" class=\"wp-image-48352\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/midia-e-texto-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/midia-e-texto-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/midia-e-texto-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/midia-e-texto-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como incorporar m&iacute;dias<\/strong><\/h3><p class=\"wp-block-paragraph\">Por padr&atilde;o, o editor de blocos do WordPress oferece suporte a v&aacute;rios tipos de m&iacute;dia de diferentes servi&ccedil;os.<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o alguns exemplos de blocos dedicados para incorpora&ccedil;&atilde;o de conte&uacute;do:<\/p><ul class=\"wp-block-list\">\n<li>V&iacute;deos do YouTube, TikTok, Vimeo, Dailymotion e TED.<\/li>\n\n\n\n<li>Imagens do Instagram, Flickr, Imgur e Pinterest.<\/li>\n\n\n\n<li>Publica&ccedil;&otilde;es do Facebook, X, Bluesky e Reddit.<\/li>\n\n\n\n<li>Arquivos de &aacute;udio do Spotify, SoundCloud e Mixcloud.<\/li>\n\n\n\n<li>Documentos do Scribd e do Issuu.<\/li>\n\n\n\n<li>Sondagens e pesquisas do Crowdisgnal.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Veja como incorporar m&iacute;dias no editor do Gutenberg:<\/p><ol class=\"wp-block-list\">\n<li>Abra o inseridor de blocos e role para baixo at&eacute; a se&ccedil;&atilde;o&nbsp;<strong>C&oacute;digos Incorporados<\/strong>.<\/li>\n\n\n\n<li>Escolha a fonte de m&iacute;dia.<\/li>\n\n\n\n<li>Cole o URL da m&iacute;dia e selecione <strong>Incorporar<\/strong>.<\/li>\n\n\n\n<li>A p&aacute;gina ou postagem agora exibir&aacute; o conte&uacute;do incorporado.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/incorporar-youtube-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"elemento de incorporar m&iacute;dia do YouTube no editor gutenberg wordpress\" class=\"wp-image-48358\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/incorporar-youtube-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/incorporar-youtube-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/incorporar-youtube-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/incorporar-youtube-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como criar padr&otilde;es<\/strong><\/h3><p class=\"wp-block-paragraph\">Os padr&otilde;es, anteriormente chamados de blocos reutiliz&aacute;veis, s&atilde;o trechos de conte&uacute;do que voc&ecirc; pode usar em todo o site para economizar tempo e manter um design consistente em todas as suas p&aacute;ginas e publica&ccedil;&otilde;es.<\/p><p class=\"wp-block-paragraph\">H&aacute; dois tipos de padr&otilde;es:<\/p><ul class=\"wp-block-list\">\n<li><strong>Padr&otilde;es sincronizados.<\/strong>&nbsp;S&atilde;o blocos de conte&uacute;do reutiliz&aacute;veis que se sincronizam em seu site como um todo. Ou seja, qualquer altera&ccedil;&atilde;o que voc&ecirc; fizer em um padr&atilde;o sincronizado ser&aacute; automaticamente atualizada em todos os lugares em que ela &eacute; usada &mdash; o que &eacute; &oacute;timo para elementos que precisam de consist&ecirc;ncia, como banners, chamadas ou cabe&ccedil;alhos.<\/li>\n\n\n\n<li><strong>Padr&otilde;es n&atilde;o sincronizados.<\/strong>&nbsp;Esses padr&otilde;es funcionam como c&oacute;pias aut&ocirc;nomas. Quando voc&ecirc; insere um padr&atilde;o n&atilde;o sincronizado em um post ou p&aacute;gina, ele n&atilde;o afeta outras vers&otilde;es dele. Isso &eacute; &uacute;til quando voc&ecirc; deseja reutilizar um design, mas personalizar seu conte&uacute;do para p&aacute;ginas espec&iacute;ficas.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Veja como criar um padr&atilde;o:<\/p><ol class=\"wp-block-list\">\n<li>Clique em&nbsp;<strong>Vis&atilde;o geral do documento<\/strong>&nbsp;&rarr;&nbsp;<strong>&nbsp;Lista<\/strong>. Mantenha pressionada a tecla Shift e selecione as se&ccedil;&otilde;es que deseja salvar como padr&atilde;o.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"736\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/lista-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"lista de blocos no editor gutenberg\" class=\"wp-image-48359\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/lista-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/lista-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/lista-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/lista-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Clique no bot&atilde;o&nbsp;<strong>Op&ccedil;&otilde;es&nbsp;<\/strong>na barra de ferramentas e selecione&nbsp;<strong>Criar padr&atilde;o<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"737\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-padrao-blocos-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"criar padr&atilde;o de blocos no editor gutenberg do wordpress\" class=\"wp-image-48361\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-padrao-blocos-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-padrao-blocos-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-padrao-blocos-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/criar-padrao-blocos-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>D&ecirc; um nome ao seu padr&atilde;o e decida se deseja que ele seja sincronizado ou n&atilde;o sincronizado; em seguida, clique em&nbsp;<strong>Criar<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"756\" height=\"786\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-padrao-wordpress-gutenberg.png\/public\" alt=\"adicionando novo padr&atilde;o no wordpress\" class=\"wp-image-48367\" style=\"width:418px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-padrao-wordpress-gutenberg.png\/w=756,fit=scale-down 756w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-padrao-wordpress-gutenberg.png\/w=289,fit=scale-down 289w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/adicionar-padrao-wordpress-gutenberg.png\/w=144,fit=scale-down 144w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Para usar o padr&atilde;o, abra o seletor de blocos e v&aacute; para&nbsp;<strong>Padr&otilde;es<\/strong>&nbsp;&rarr;<strong>&nbsp;Meus Padr&otilde;es<\/strong>. Voc&ecirc; tamb&eacute;m pode digitar uma barra (<strong>\/<\/strong>) seguida do nome do bloco diretamente no editor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/meus-padroes-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt='menu \"meus padr&otilde;es\" no editor gutenberg do wordpress' class=\"wp-image-48350\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/meus-padroes-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/meus-padroes-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/meus-padroes-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/meus-padroes-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Tamb&eacute;m &eacute; muito f&aacute;cil editar um padr&atilde;o existente. Basta clicar no padr&atilde;o e clicar em&nbsp;<strong>Editar original<\/strong>. Fa&ccedil;a as altera&ccedil;&otilde;es desejadas e clique em&nbsp;<strong>Salvar<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/editar-padrao-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"editando padr&atilde;o no editor gutenberg do wordpress\" class=\"wp-image-48349\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/editar-padrao-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/editar-padrao-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/editar-padrao-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/editar-padrao-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Para gerenciar todos os padr&otilde;es existentes, clique no bot&atilde;o&nbsp;<strong>Op&ccedil;&otilde;es&nbsp;<\/strong>no canto superior direito do editor e escolha&nbsp;<strong>Gerenciar padr&otilde;es<\/strong>. Isso o levar&aacute; ao&nbsp;<strong>Editor de Site<\/strong>, onde voc&ecirc; poder&aacute; editar ou gerenciar em massa os padr&otilde;es (nativos e personalizados).<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/gerenciar-padroes-wordpress-gutenberg.png\/w=1024,h=1024,fit=scale-down\" alt=\"gerenciando padr&otilde;es no editor gutenberg wordpress\" class=\"wp-image-48351\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/gerenciar-padroes-wordpress-gutenberg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/gerenciar-padroes-wordpress-gutenberg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/gerenciar-padroes-wordpress-gutenberg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/gerenciar-padroes-wordpress-gutenberg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Deseja usar um padr&atilde;o sincronizado em uma p&aacute;gina ou post sem afetar os demais? Abra o menu de tr&ecirc;s pontos na barra de ferramentas do bloco e selecione&nbsp;<strong>Desanexar padr&atilde;o<\/strong>. Isso torna o bloco independente, de modo que as altera&ccedil;&otilde;es n&atilde;o ser&atilde;o sincronizadas em todo o site.<\/p><p class=\"wp-block-paragraph\">Confira nosso guia sobre&nbsp;<a href=\"\/br\/tutoriais\/padroes-de-bloco-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>padr&otilde;es de blocos do WordPress&nbsp;<\/strong><\/a>para obter mais dicas sobre como us&aacute;-los e personaliz&aacute;-los.<\/p><h3 class=\"wp-block-heading\"><strong>Como usar os atalhos de teclado do Gutenberg<\/strong><\/h3><p class=\"wp-block-paragraph\">Os atalhos de teclado do Gutenberg s&atilde;o uma &oacute;tima maneira de acelerar seu fluxo de trabalho e se concentrar na cria&ccedil;&atilde;o de conte&uacute;do. Essas combina&ccedil;&otilde;es de teclas permitem que voc&ecirc; execute tarefas no editor de blocos do WordPress sem precisar clicar em menus ou bot&otilde;es.<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; uma tabela com alguns dos atalhos mais &uacute;teis. Voc&ecirc; tamb&eacute;m pode encontrar a lista completa clicando no &iacute;cone de tr&ecirc;s pontos no canto superior direito do editor e selecionando&nbsp;<strong>Atalhos de teclado<\/strong>.<\/p><p class=\"wp-block-paragraph\">Importante: se voc&ecirc; estiver usando o macOS, substitua&nbsp;<strong>Ctrl&nbsp;<\/strong>por&nbsp;<strong>Command (&#8984;)&nbsp;<\/strong>e&nbsp;<strong>Alt&nbsp;<\/strong>por&nbsp;<strong>Option (&#8997;)<\/strong>.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>A&ccedil;&atilde;o<\/strong><\/td><td><strong>Atalho de teclado<\/strong><\/td><\/tr><tr><td>Exibir todos os atalhos de teclado<\/td><td>Shift + Alt + H<\/td><\/tr><tr><td><strong>Atalhos globais<\/strong><\/td><td><\/td><\/tr><tr><td>Abra a paleta de comandos<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Alternar entre editores visuais e de c&oacute;digo<\/td><td>Ctrl + Shift + Alt + M<\/td><\/tr><tr><td>Ativar o modo sem distra&ccedil;&otilde;es<\/td><td>Ctrl + Shift + \\<\/td><\/tr><tr><td>Ativar o modo de tela cheia<\/td><td>Ctrl + Shift + Alt + F<\/td><\/tr><tr><td>Abrir a visualiza&ccedil;&atilde;o da lista de blocos<\/td><td>Shift + Alt + O<\/td><\/tr><tr><td>Mostrar ou ocultar a barra lateral de configura&ccedil;&otilde;es<\/td><td>Ctrl + Shift + ,<\/td><\/tr><tr><td>Navegar at&eacute; a pr&oacute;xima parte do editor<\/td><td>Ctrl + ` ou Shift + Alt + N<\/td><\/tr><tr><td>Navegar at&eacute; a parte anterior do editor<\/td><td>Ctrl + Shift + ` ou Shift + Alt + P<\/td><\/tr><tr><td>Navegar at&eacute; a barra de ferramentas mais pr&oacute;xima<\/td><td>Alt + F10<\/td><\/tr><tr><td>Salvar altera&ccedil;&otilde;es<\/td><td>Ctrl + S<\/td><\/tr><tr><td>Desfazer as &uacute;ltimas altera&ccedil;&otilde;es<\/td><td>Ctrl + Z<\/td><\/tr><tr><td>Refazer o desfazer anterior<\/td><td>Ctrl + Shift + Z<\/td><\/tr><tr><td><strong>Atalhos de sele&ccedil;&atilde;o<\/strong><\/td><td><\/td><\/tr><tr><td>Selecionar todo o texto ao digitar<\/td><td>Ctrl + A<\/td><\/tr><tr><td>Limpar sele&ccedil;&atilde;o<\/td><td>Esc<\/td><\/tr><tr><td><strong>Atalhos de blocos<\/strong><\/td><td><\/td><\/tr><tr><td>Duplicar o bloco selecionado<\/td><td>Ctrl + Shift + D<\/td><\/tr><tr><td>Excluir o bloco selecionado<\/td><td>Shift + Alt + Z<\/td><\/tr><tr><td>Inserir um novo bloco antes do bloco selecionado<\/td><td>Ctrl + Alt + T<\/td><\/tr><tr><td>Inserir um novo bloco ap&oacute;s o bloco selecionado<\/td><td>Ctrl + Alt + Y<\/td><\/tr><tr><td>Excluir sele&ccedil;&atilde;o<\/td><td>Delete ou Backspace<\/td><\/tr><tr><td>Mover o bloco selecionado para cima<\/td><td>Ctrl + Shift + Alt + T<\/td><\/tr><tr><td>Mover o bloco selecionado para baixo<\/td><td>Ctrl + Shift + Alt + Y<\/td><\/tr><tr><td>Alterar o tipo de bloco ap&oacute;s adicionar um novo par&aacute;grafo<\/td><td>\/<\/td><\/tr><tr><td><strong>Formata&ccedil;&atilde;o de texto<\/strong><\/td><td><\/td><\/tr><tr><td>Transformar o texto destacado em negrito<\/td><td>Ctrl + B<\/td><\/tr><tr><td>Transformar o texto destacado em it&aacute;lico<\/td><td>Ctrl + I<\/td><\/tr><tr><td>Transformar o texto destacado em um link<\/td><td>Ctrl + K<\/td><\/tr><tr><td>Remover um link<\/td><td>Ctrl + Shift + K<\/td><\/tr><tr><td>Sublinhar o texto destacado<\/td><td>Ctrl + U<\/td><\/tr><tr><td>Riscar o texto destacado<\/td><td>Shift + Alt + D<\/td><\/tr><tr><td>Transformar o texto destacado em c&oacute;digo em linha<\/td><td>Shift + Alt + X<\/td><\/tr><tr><td>Converter o t&iacute;tulo selecionado em um par&aacute;grafo<\/td><td>Shift + Alt + 0<\/td><\/tr><tr><td>Converter o par&aacute;grafo ou o t&iacute;tulo selecionado em um t&iacute;tulo de n&iacute;vel um a seis<\/td><td>Shift + Alt + 1-6<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\"><strong>Como usar a visualiza&ccedil;&atilde;o da lista de blocos<\/strong><\/h3><p class=\"wp-block-paragraph\">A visualiza&ccedil;&atilde;o da lista de blocos no editor do Gutenberg oferece uma vis&atilde;o geral de todos os blocos em sua postagem ou p&aacute;gina. Ela &eacute; especialmente &uacute;til para navegar em documentos longos com muitos blocos aninhados.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode abrir a&nbsp;<strong>visualiza&ccedil;&atilde;o da lista de blocos&nbsp;<\/strong>clicando no &iacute;cone&nbsp;<strong>Vis&atilde;o geral do documento&nbsp;<\/strong>(tr&ecirc;s linhas empilhadas) no canto superior esquerdo do editor ou usando o atalho&nbsp;<strong>Shift + Alt + O<\/strong>. A partir da&iacute;, basta clicar em qualquer bloco da lista para ir diretamente para ele na &aacute;rea de edi&ccedil;&atilde;o, independentemente da profundidade do aninhamento.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/visualizacao-lista.png\/w=1024,h=1024,fit=scale-down\" alt=\"visualiza&ccedil;&atilde;o em lista no editor gutenberg do wordpress\" class=\"wp-image-44409\" title=\"grupos\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/visualizacao-lista.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/visualizacao-lista.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/visualizacao-lista.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/visualizacao-lista.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ao lado da exibi&ccedil;&atilde;o de lista de blocos est&aacute; a&nbsp;<strong>Estrutura<\/strong>, que oferece uma vis&atilde;o r&aacute;pida da estrutura do documento, incluindo os t&iacute;tulos dos cabe&ccedil;alhos e sua hierarquia. &Eacute; uma &oacute;tima ferramenta para garantir que seu conte&uacute;do est&aacute; fluindo logicamente e voc&ecirc; est&aacute; usando os cabe&ccedil;alhos corretamente, o que &eacute; perfeito para escritores e criadores de conte&uacute;do.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/estrutura-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"estrutura de post com subt&iacute;tulos no editor de blocos do wordpress\" class=\"wp-image-48357\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/estrutura-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/estrutura-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/estrutura-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/estrutura-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como personalizar blocos com a edi&ccedil;&atilde;o completa do site<\/strong><\/h3><p class=\"wp-block-paragraph\">J&aacute; falamos sobre o uso do editor de blocos para p&aacute;ginas e postagens individuais, mas n&atilde;o paramos por a&iacute;. O Gutenberg tamb&eacute;m tem o Editor Completo de Site, que permite que voc&ecirc; fa&ccedil;a altera&ccedil;&otilde;es nos blocos em todo o seu site para obter uma apar&ecirc;ncia consistente.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1739\" height=\"908\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=1024,h=1024,fit=scale-down\" alt=\"editor de modelos do wordpress\" class=\"wp-image-26245\" title=\"modo-edicao-modelo\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=1739,fit=scale-down 1739w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/01\/Modelos-editor-de-tema-em-blocos-WordPress-5-9.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1739px) 100vw, 1739px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Para acessar o editor de site do Gutenberg, v&aacute; para&nbsp;<strong>Apar&ecirc;ncia &rarr; Editor&nbsp;<\/strong>no painel do WordPress. Por l&aacute;, voc&ecirc; pode personalizar v&aacute;rias partes do seu site:<\/p><ul class=\"wp-block-list\">\n<li><strong>Navega&ccedil;&atilde;o.<\/strong>&nbsp;Atualize os menus com elementos como links personalizados e logotipos do site.<\/li>\n\n\n\n<li><strong>Estilos.<\/strong>&nbsp;Escolha uma combina&ccedil;&atilde;o de estilos do seu tema e ajuste as cores, a tipografia e os layouts em todo o site.<\/li>\n\n\n\n<li><strong>P&aacute;ginas.<\/strong>&nbsp;Edite o conte&uacute;do da p&aacute;gina diretamente no Editor do Site, sem a necessidade de alternar entre interfaces.<\/li>\n\n\n\n<li><strong>Modelos.<\/strong>&nbsp;Crie layouts para p&aacute;ginas espec&iacute;ficas, como a p&aacute;gina inicial do seu blog ou postagens individuais. Alguns temas podem oferecer op&ccedil;&otilde;es de layout adicionais.<\/li>\n\n\n\n<li><strong>Padr&otilde;es.<\/strong>&nbsp;Gerencie padr&otilde;es sincronizados para obter elementos de design consistentes em seu site.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Para ter uma experi&ecirc;ncia de edi&ccedil;&atilde;o completa, voc&ecirc; pode visualizar o modelo no editor enquanto trabalha no conte&uacute;do da sua p&aacute;gina ou postagem. Abra a guia&nbsp;<strong>Post&nbsp;<\/strong>na barra lateral direita e selecione&nbsp;<strong>Template<\/strong>&nbsp;&rarr;&nbsp;<strong>&nbsp;Mostrar template<\/strong>. Isso permite que voc&ecirc; veja como seu conte&uacute;do se encaixa no layout geral da p&aacute;gina.<\/p><p class=\"wp-block-paragraph\">Lembre-se de que esse tipo de personaliza&ccedil;&atilde;o s&oacute; &eacute; poss&iacute;vel caso voc&ecirc; esteja usando um tema baseado em blocos. V&aacute;rios temas mais modernos s&atilde;o desse tipo, tais como:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/br.wordpress.org\/themes\/twentytwentyfour\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Twenty Twenty-Four<\/strong><\/a>. Um tema padr&atilde;o do WordPress com um layout limpo e moderno.<\/li>\n\n\n\n<li><a href=\"https:\/\/br.wordpress.org\/themes\/ona\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Ona<\/strong><\/a>. Vem com&nbsp;<a href=\"\/br\/tutoriais\/como-criar-o-tema-filho-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>temas filhos<\/strong><\/a>&nbsp;para v&aacute;rios nichos de sites.<\/li>\n\n\n\n<li><a href=\"https:\/\/br.wordpress.org\/themes\/neve-fse\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Neve FSE<\/strong><\/a>. O Neve &eacute; um tema popular do WordPress, adequado para todos os tipos de site, e essa &eacute; a sua vers&atilde;o adaptada para a edi&ccedil;&atilde;o completa de site.<\/li>\n\n\n\n<li><a href=\"https:\/\/br.wordpress.org\/themes\/tove\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tove<\/strong><\/a>. Inclui mais de 40 padr&otilde;es de blocos para uma personaliza&ccedil;&atilde;o mais r&aacute;pida.<\/li>\n\n\n\n<li><a href=\"https:\/\/br.wordpress.org\/themes\/bricksy\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Bricksy<\/strong><\/a>. Tamb&eacute;m vem com padr&otilde;es de blocos pr&eacute;-constru&iacute;dos, al&eacute;m de suporte ao WooCommerce.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>Como usar a paleta de comandos<\/strong><\/h3><p class=\"wp-block-paragraph\">A&nbsp;paleta de comandos&nbsp;&eacute; uma ferramenta de acesso r&aacute;pido que permite executar a&ccedil;&otilde;es ou navegar no editor usando uma barra de pesquisa simples, evitando o inc&ocirc;modo de clicar nos menus.<\/p><p class=\"wp-block-paragraph\">Esse recurso pode ser acessado no editor de blocos do Gutenberg com o atalho&nbsp;<strong>Ctrl + K&nbsp;<\/strong>(ou&nbsp;<strong>Cmd + K&nbsp;<\/strong>no Mac) ou clicando na barra na parte superior da interface.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"paleta de comandos no editor de blocos do wordpress\" class=\"wp-image-48363\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ao clicar nela, voc&ecirc; ver&aacute; uma barra de pesquisa e uma pequena lista de tarefas comuns, como&nbsp;<strong>Duplicar<\/strong>,&nbsp;<strong>Excluir&nbsp;<\/strong>e&nbsp;<strong>Adicionar depois<\/strong>. Basta digitar uma letra ou uma palavra-chave relacionada &agrave; tarefa que voc&ecirc; est&aacute; procurando para ver as op&ccedil;&otilde;es relevantes.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"912\" height=\"814\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress-1.png\/public\" alt=\"paleta de comandos do wordpress\" class=\"wp-image-48369\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress-1.png\/w=912,fit=scale-down 912w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/paleta-comandos-gutenberg-wordpress-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 912px) 100vw, 912px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Aqui est&atilde;o alguns exemplos que podem acelerar seu fluxo de trabalho:<\/p><ul class=\"wp-block-list\">\n<li>Acesse um post ou uma p&aacute;gina espec&iacute;fica apenas digitando o t&iacute;tulo.<\/li>\n\n\n\n<li>Adicione uma nova p&aacute;gina ou postagem.<\/li>\n\n\n\n<li>Saia do modo de tela cheia para mostrar a barra lateral de administra&ccedil;&atilde;o do WordPress.<\/li>\n\n\n\n<li>Entre no modo livre de distra&ccedil;&otilde;es.<\/li>\n\n\n\n<li>Visualize seu trabalho em uma nova guia.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>Como desativar o editor de blocos do WordPress<\/strong><\/h3><p class=\"wp-block-paragraph\">Se voc&ecirc; estiver tendo problemas para se adaptar ao editor Gutenberg, o WordPress permite desativ&aacute;-lo com um plugin ou editando o&nbsp;arquivo functions.php.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode instalar o plugin&nbsp;<strong><a href=\"https:\/\/br.wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Editor Cl&aacute;ssico<\/a><\/strong> para desativar completamente o Gutenberg, se desejado. Se quiser ter mais controle, use o plugin&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/disable-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Disable Gutenberg<\/strong><\/a>: ele desativa o Gutenberg em todo o site, mas voc&ecirc; pode ajustar as configura&ccedil;&otilde;es do plugin para que ele funcione apenas em determinadas fun&ccedil;&otilde;es, tipos de postagem ou modelos.<\/p><p class=\"wp-block-paragraph\">Como alternativa, adicione um trecho de c&oacute;digo ao seu arquivo&nbsp;<strong>functions.php&nbsp;<\/strong>usando o Editor de Arquivos de Tema do WordPress, um Gerenciador de Arquivos ou o Protocolo de Transfer&ecirc;ncia de Arquivos (FTP).<\/p><p class=\"wp-block-paragraph\">Veja como fazer isso usando o Gerenciador de Arquivos da Hostinger, dispon&iacute;vel no hPanel:<\/p><ol class=\"wp-block-list\">\n<li>Acesse&nbsp;<strong>o Gerenciador de Arquivos&nbsp;<\/strong>no hPanel e navegue at&eacute;&nbsp;<strong>public_html &rarr; wp-content &rarr; themes<\/strong>.<\/li>\n\n\n\n<li>Entre na pasta do seu tema ativo e clique duas vezes no arquivo<strong>&nbsp;functions.php&nbsp;<\/strong>para abri-lo.<\/li>\n\n\n\n<li>Adicione o seguinte c&oacute;digo antes da &uacute;ltima linha:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">add_filter('use_block_editor_for_post', '__return_false');<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Salve e feche o arquivo e, em seguida, recarregue o site do WordPress.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Se voc&ecirc; n&atilde;o quiser mexer diretamente no c&oacute;digo do seu site, use o plugin&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Code Snippets<\/strong><\/a>:<\/p><ol class=\"wp-block-list\">\n<li>Depois de instalar e ativar o plugin, acesse&nbsp;<strong>Snippets<\/strong>&nbsp;&rarr;<strong>&nbsp;Add New&nbsp;<\/strong>no painel.<\/li>\n\n\n\n<li>Nomeie o snippet e cole o c&oacute;digo acima na guia&nbsp;<strong>PHP Functions<\/strong>. Ative a op&ccedil;&atilde;o&nbsp;<strong>Only run in administration area<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1686\" height=\"692\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=1024,h=1024,fit=scale-down\" alt=\"adicionando c&oacute;digo para desabilitar editor gutenberg no plugin code snippets para wordpress\" class=\"wp-image-48374\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=1686,fit=scale-down 1686w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/11\/wordpress-code-snippets.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1686px) 100vw, 1686px\" \/><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Clique em&nbsp;<strong>Save Changes&nbsp;<\/strong>e&nbsp;<strong>Activate<\/strong>.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Lembre-se que desativar Gutenberg &eacute; uma solu&ccedil;&atilde;o tempor&aacute;ria, pois ele &eacute; o editor padr&atilde;o do WordPress. &Agrave; medida que o Gutenberg evolui e recebe novos recursos, fazer a mudan&ccedil;a do editor cl&aacute;ssico para ele permitir&aacute; que voc&ecirc; aproveite ao m&aacute;ximo tudo que o WordPress tem a oferecer.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Deseja aprimorar sua experi&ecirc;ncia com o WordPress?                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Descubra os&nbsp;<a href=\"\/br\/tutoriais\/melhores-plugins-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>melhores plugins do WordPress<\/strong><\/a>&nbsp;compat&iacute;veis com o Gutenberg para aprimorar ainda mais o seu site.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">O editor de blocos Gutenberg revolucionou a forma como voc&ecirc; pode criar e projetar sites no WordPress. Com seus blocos flex&iacute;veis para v&aacute;rios elementos, voc&ecirc; tem uma maneira simples e flex&iacute;vel de criar posts e p&aacute;ginas como quiser.<\/p><p class=\"wp-block-paragraph\">Ao resolver v&aacute;rias limita&ccedil;&otilde;es do editor cl&aacute;ssico, a interface de arrastar e soltar do Gutenberg permite que usu&aacute;rios em todos os n&iacute;veis de habilidade criem e editem seus sites facilmente. Recursos como padr&otilde;es sincronizados garantem designs consistentes, enquanto o Editor de Site permite que voc&ecirc; personalize seu tema diretamente, sem precisar de plugins adicionais.<\/p><p class=\"wp-block-paragraph\">Esperamos que este guia tenha ajudado voc&ecirc; a entender como o Gutenberg funciona e como ele pode melhorar sua experi&ecirc;ncia com o WordPress. Boa sorte!<\/p><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-sobre-o-wordpress-gutenberg\"><strong>Perguntas frequentes sobre o WordPress Gutenberg<\/strong><\/h2><p class=\"wp-block-paragraph\">Por fim, vamos responder algumas perguntas frequentes sobre o Gutenberg WordPress.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6944172e3e4c1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>O Gutenberg &eacute; gratuito?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim. O Gutenberg est&aacute; integrado ao n&uacute;cleo do WordPress, portanto &eacute; gratuito e vem pr&eacute;-instalado com o WordPress 5.0 e vers&otilde;es mais recentes.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944172e3e4c7\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>O Gutenberg &eacute; melhor do que o Elementor?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Depende de suas necessidades e prefer&ecirc;ncias. O Gutenberg oferece simplicidade e desempenho com um editor de blocos leve e gratuito para personaliza&ccedil;&otilde;es b&aacute;sicas e moderadas. O Elementor, por sua vez, &eacute; uma solu&ccedil;&atilde;o paga que prima pelo design avan&ccedil;ado, apresentando uma interface de arrastar e soltar com widgets e templates para layouts precisos. Em resumo, o Gutenberg &eacute; mais indicado para quem busca velocidade e facilidade, enquanto o Elementor &eacute; melhor pela sua flexibilidade e pelo controle mais detalhado que voc&ecirc; ter&aacute; dos seus designs &mdash; por um custo adicional.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944172e3e4c8\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>O Gutenberg &eacute; bom para SEO?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, o Gutenberg &eacute; &oacute;timo para SEO. Ele gera um c&oacute;digo HTML limpo e estruturado que ajuda os mecanismos de pesquisa a entender seu conte&uacute;do. O editor de blocos tamb&eacute;m facilita a otimiza&ccedil;&atilde;o de imagens e t&iacute;tulos, que s&atilde;o fundamentais para um bom SEO. Al&eacute;m disso, ele funciona perfeitamente com&nbsp;<a href=\"\/tutoriais\/12-melhores-plugins-seo-para-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>plugins de SEO populares<\/strong><\/a>, como o&nbsp;<strong>Yoast SEO<\/strong>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944172e3e4c9\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Qual &eacute; a diferen&ccedil;a entre blocos e widgets?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No WordPress, os blocos s&atilde;o usados para projetar posts e p&aacute;ginas no editor, enquanto os widgets adicionam recursos a &aacute;reas como barras laterais e rodap&eacute;s. Com o WordPress 5.8, a plataforma introduziu o editor de widgets baseado em blocos, permitindo que os usu&aacute;rios gerenciem widgets usando blocos, da mesma forma que o editor Gutenberg funciona para posts e p&aacute;ginas.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ol&aacute;! Se voc&ecirc; est&aacute; chegando agora no mundo do WordPress, uma boa forma de come&ccedil;ar &eacute; se familiarizando com o Gutenberg, seu editor de blocos, para gerenciar a plataforma com mais efici&ecirc;ncia. Apresentado como um substituto para o editor cl&aacute;ssico, ao longo dos anos ele se tornou uma parte essencial da experi&ecirc;ncia do CMS. O [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/gutenberg-pros-e-contras\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":30374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"O que \u00e9 Gutenberg no WordPress? Como usar o editor de blocos","rank_math_description":"O editor Gutenberg do WordPress tem muitos recursos e ferramentas a oferecer. Aprenda como otimiz\u00e1-las e melhorar suas postagens!","rank_math_focus_keyword":"gutenberg wordpress","footnotes":""},"categories":[8042,8027],"tags":[5142,5141,5143,4798],"class_list":["post-7193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criacao-de-conteudo","category-wordpress","tag-editor-gutenberg","tag-gutenberg","tag-projeto-gutenberg","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/gutenberg-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/gutenberg-pros-e-contras\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/gutenberg-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-menggunakan-gutenberg-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-gutenberg-editor\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/wordpress-gutenberg\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/gutenberg-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/gutenberg-pros-e-contras\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/7193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=7193"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/7193\/revisions"}],"predecessor-version":[{"id":51867,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/7193\/revisions\/51867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/30374"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=7193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=7193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=7193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}