{"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>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>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>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><\/p><p>\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O que &eacute; Gutenberg no WordPress?<\/h2>\n                    <p>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>\n                <\/div>\n\n\n\n<\/p><p>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>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>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\/public\" 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><\/div><p>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>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>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>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>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\/public\" 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><\/div><p>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>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>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>O editor de blocos Gutenberg veio para resolver essas limita&ccedil;&otilde;es.<\/p><p>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>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>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>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>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>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><\/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>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>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>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\/public\" 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><\/div><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como personalizar blocos<\/strong><\/h3><p>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>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\/public\" 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><\/div><p>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como organizar os blocos<\/strong><\/h3><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como agrupar v&aacute;rios blocos<\/strong><\/h3><p>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>&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\/public\" 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><\/div><p>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>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\/public\" 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><\/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\/public\" 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><\/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>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>Voc&ecirc; pode introduzir texto em posts ou p&aacute;ginas com blocos de par&aacute;grafos e t&iacute;tulos.<\/p><p>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\/public\" 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><\/div><p>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>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\/public\" 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><\/div><p>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>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><\/div><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como incorporar m&iacute;dias<\/strong><\/h3><p>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>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>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como criar padr&otilde;es<\/strong><\/h3><p>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>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>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\/public\" 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><\/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\/public\" 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><\/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><\/div><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><p>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\/public\" 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><\/div><p>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>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>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>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>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>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>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\/public\" 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><\/div><p>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\/public\" 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><\/div><h3 class=\"wp-block-heading\"><strong>Como personalizar blocos com a edi&ccedil;&atilde;o completa do site<\/strong><\/h3><p>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\/public\" 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><\/div><p>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>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>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>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>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\/public\" 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><\/div><p>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><\/div><p>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>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>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>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>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>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\/public\" 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><\/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>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                    <h4 class=\"title\">Deseja aprimorar sua experi&ecirc;ncia com o WordPress?<\/h4>\n                    <p>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<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>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>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>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>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":[4911],"tags":[5142,5141,5143,4798],"class_list":["post-7193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":0},{"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-editor-gutenberg-wordpress","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/wordpress-gutenberg","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-gutenberg","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/gutenberg-wordpress\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/gutenberg-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/gutenberg-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/agregar-meta-descripcion-wordpress-19","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-reparar-error-establishing-a-database-connection-wordpress-10\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/gutenberg-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/gutenberg-pros-e-contras","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}],"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}]}}