{"id":36272,"date":"2023-05-16T11:01:04","date_gmt":"2023-05-16T14:01:04","guid":{"rendered":"\/tutoriais\/?p=36272"},"modified":"2023-05-16T13:38:42","modified_gmt":"2023-05-16T16:38:42","slug":"padroes-de-bloco-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/padroes-de-bloco-wordpress","title":{"rendered":"Padr\u00f5es de bloco do WordPress: o que s\u00e3o e como utilizar"},"content":{"rendered":"<p>Primeiramente introduzidos no WordPress vers&atilde;o 5.5, os padr&otilde;es de blocos abriram o caminho para que o editor <strong>Gutenberg<\/strong> se tornasse um construtor de p&aacute;ginas de larga escala. Os blocos ajudam os usu&aacute;rios do WordPress a construir sites complexos em pouco tempo, sem precisar de muito esfor&ccedil;o e conhecimento t&eacute;cnico para criar e estruturar suas p&aacute;ginas.<\/p><p>Neste guia, vamos te mostrar como os padr&otilde;es de blocos do WordPress funcionam e como eles se diferenciam dos blocos reutiliz&aacute;veis. Al&eacute;m disso, voc&ecirc; tamb&eacute;m vai aprender a utilizar os padr&otilde;es no editor de blocos do WordPress, assim facilitando a sua tarefa de <strong>criar um site do zero<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/WordPress-Security-Checklist(pt-br).pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/public\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O Que s&atilde;o os Padr&otilde;es de Blocos do WordPress?<\/h2>\n                    <p>Os Padr&otilde;es de Blocos do WordPress s&atilde;o layouts pr&eacute;-definidos constitu&iacute;dos pelos diversos blocos da plataforma. Os usu&aacute;rios do WordPress podem facilmente inserir um padr&atilde;o de bloco ou mais em posts e p&aacute;ginas do seu site para criar uma estrutura de conte&uacute;dos complexa com apenas alguns cliques.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Um exemplo de padr&atilde;o de bloco do WordPress &eacute; o bloco de CTA (<em>call to action<\/em>, ou Chamada para A&ccedil;&atilde;o) do tema <strong>Twenty Twenty<\/strong>. Ele cont&eacute;m os blocos de cabe&ccedil;alho, par&aacute;grafo e bot&otilde;es, que podem ser personalizados desde sua cor de fundo at&eacute; o tamanho e alinhamento do texto.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"414\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-74.png\/public\" alt=\"Exemplo de padr&atilde;o de bloco do tipo CTA no editor de blocos do WordPress\" class=\"wp-image-36274\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-74.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-74.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-74.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-74.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-padrao-de-bloco-vs-bloco-reutilizavel\"><strong>Padr&atilde;o de Bloco vs Bloco Reutiliz&aacute;vel<\/strong><\/h2><p>Tanto os padr&otilde;es de blocos quanto os blocos reutiliz&aacute;veis permitem que os usu&aacute;rios WordPress insiram rapidamente um layout ou modelo pr&eacute;-pronto em suas p&aacute;ginas e posts. A principal diferen&ccedil;a entre esses recursos &eacute; o que acontece quando voc&ecirc; edita eles.&nbsp;<\/p><p>Quaisquer altera&ccedil;&otilde;es feitas em um bloco reutiliz&aacute;vel ser&atilde;o aplicadas em todo post ou p&aacute;gina no qual esse bloco j&aacute; foi inserido. Enquanto isso, as altera&ccedil;&otilde;es feitas em um padr&atilde;o de bloco n&atilde;o afetam p&aacute;ginas e posts anteriores nos quais voc&ecirc; utilizou tal elemento.&nbsp;<\/p><p>Como exemplo, vamos supor que voc&ecirc; deseja inserir um bot&atilde;o CTA em seus posts. Considere utilizar:<\/p><ul class=\"wp-block-list\">\n<li><strong>Padr&atilde;o de bloco<\/strong> &ndash; para duplicar o design b&aacute;sico do bot&atilde;o, mas ainda poder personalizar o conte&uacute;do do CTA para cada post.&nbsp;<\/li>\n\n\n\n<li><strong>Bloco reutiliz&aacute;vel<\/strong> &ndash; para adicionar exatamente o mesmo CTA em todos os seus posts. S&oacute; ser&aacute; necess&aacute;rio editar o bloco do CTA uma &uacute;nica vez para que todas as publica&ccedil;&otilde;es contendo ele sejam automaticamente atualizadas.&nbsp;<\/li>\n<\/ul><p>Adicionalmente, os usu&aacute;rios podem registrar padr&otilde;es de blocos no diret&oacute;rio de Padr&otilde;es, ou inclu&iacute;-los em um plugin ou tema. Esses padr&otilde;es pr&eacute;-prontos ampliam suas op&ccedil;&otilde;es de estilo e funcionalidades enquanto estiver criando o design de posts e p&aacute;ginas do site.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-utilizar-os-padroes-de-blocos-do-wordpress\"><strong>Por Que Utilizar os Padr&otilde;es de Blocos do WordPress?<\/strong><\/h2><p>Ao usar um padr&atilde;o de bloco do WordPress, voc&ecirc; ter&aacute; os seguintes benef&iacute;cios:<\/p><p><strong>Economia de Tempo<\/strong><\/p><p>N&atilde;o h&aacute; necessidade de criar itens individuais para inserir no seu site, nem personaliz&aacute;-los atrav&eacute;s de c&oacute;digos de programa&ccedil;&atilde;o repetidas vezes. Com os blocos do WordPress, os usu&aacute;rios possuem acesso direto a padr&otilde;es comuns pr&eacute;-definidos para diversos prop&oacute;sitos, sendo poss&iacute;vel aplic&aacute;-los pelo editor de blocos em qualquer uma de suas p&aacute;ginas ou publica&ccedil;&otilde;es.&nbsp;&nbsp;<\/p><p>Se o padr&atilde;o de bloco original n&atilde;o for adequado para o seu site ou n&atilde;o te agradar em termos de estilo, visite a Biblioteca de Padr&otilde;es ou instale um plugin ou tema que ofere&ccedil;a m&uacute;ltiplas op&ccedil;&otilde;es.&nbsp;<\/p><p><strong>Profissionalismo<\/strong><\/p><p>Com os padr&otilde;es de blocos, voc&ecirc; consegue aproveitar as habilidades de desenvolvedores e designers profissionais, copiando seus padr&otilde;es a partir do diret&oacute;rio oficial do WordPress. H&aacute; centenas de padr&otilde;es de blocos pr&eacute;-prontos que podem ser utilizados e combinados entre si, sem que voc&ecirc; precise contratar uma ag&ecirc;ncia ou designer para construir seu site e deix&aacute;-lo com uma apar&ecirc;ncia profissional.&nbsp;<\/p><p><strong>Capacidade de Reutiliza&ccedil;&atilde;o<\/strong><\/p><p>Salve os padr&otilde;es de blocos que voc&ecirc; utiliza com regularidade, assim n&atilde;o h&aacute; a necessidade de recri&aacute;-los toda vez que for adicionar um post ou p&aacute;gina ao site. &Eacute; poss&iacute;vel criar e reutilizar o mesmo padr&atilde;o em diferentes &aacute;reas de um site WordPress, como cabe&ccedil;alho, rodap&eacute; e barras laterais. Al&eacute;m disso, voc&ecirc; ainda pode criar categorias para encontrar os padr&otilde;es com mais agilidade no futuro.&nbsp;<\/p><p><strong>Personaliza&ccedil;&atilde;o<\/strong><\/p><p>Diferentemente dos blocos reutiliz&aacute;veis, os padr&otilde;es de blocos permitem que os usu&aacute;rios ajustem o design ou conte&uacute;do do bloco em quest&atilde;o da forma que desejarem a cada vez que ele for adicionado. Isso oferece mais oportunidades aos desenvolvedores de temas, que podem disponibilizar mais se&ccedil;&otilde;es personaliz&aacute;veis para as p&aacute;ginas ao inv&eacute;s de ofertar um modelo de site completo &mdash; o que tende a confundir os clientes em termos de design e estiliza&ccedil;&atilde;o.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-as-categorias-de-padroes-de-blocos-wordpress\"><strong>As Categorias de Padr&otilde;es de Blocos WordPress<\/strong><\/h2><p>O editor de blocos Gutenberg conta com m&uacute;ltiplas categorias para organizar os padr&otilde;es de bloco do WordPress. Listamos abaixo seis op&ccedil;&otilde;es que o construtor oferece por padr&atilde;o.<\/p><p>Alguns dos mesmos blocos podem estar dispon&iacute;veis em categorias diferentes, j&aacute; que os padr&otilde;es incluem muitos elementos. Por exemplo, o bloco de tabela de pre&ccedil;os est&aacute; dispon&iacute;vel tanto no padr&atilde;o de colunas quanto no de bot&otilde;es, pois cont&eacute;m tr&ecirc;s caixas horizontais e bot&otilde;es de CTA.<\/p><h3 class=\"wp-block-heading\" id=\"h-cabecalho\"><strong>Cabe&ccedil;alho<\/strong><\/h3><p>O cabe&ccedil;alho se refere &agrave; se&ccedil;&atilde;o do topo da p&aacute;gina de um site, e geralmente exibe os elementos de logo, t&iacute;tulo, menus de navega&ccedil;&atilde;o e barra de pesquisa. Normalmente, essa categoria de padr&atilde;o de bloco possui seis op&ccedil;&otilde;es de estilo, com diferentes prop&oacute;sitos e designs.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-colunas\"><strong>Colunas<\/strong><\/h3><p>Utilizando o bloco de colunas, voc&ecirc; pode inserir m&iacute;dias, textos e outros tipos de conte&uacute;do em at&eacute; tr&ecirc;s colunas na p&aacute;gina. Nessa categoria, o WordPress oferece cinco padr&otilde;es com diferentes tipos de bloco. Por exemplo, duas colunas de texto e uma de t&iacute;tulo, ou uma tabela de pre&ccedil;os que consiste em tr&ecirc;s colunas com um t&iacute;tulo, um elemento de texto e um bot&atilde;o CTA.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-botoes\"><strong>Bot&otilde;es<\/strong><\/h3><p>Os blocos de bot&otilde;es ajudam os usu&aacute;rios do WordPress a adicionar links de forma atrativa em seus conte&uacute;dos. A categoria de padr&otilde;es de bloco de bot&otilde;es disponibiliza op&ccedil;&otilde;es como tabela de pre&ccedil;os, CTA simples com t&iacute;tulo, texto e bot&atilde;o, e links para redes sociais.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-texto\"><strong>Texto<\/strong><\/h3><p>O padr&atilde;o de bloco de texto pode ser uma &oacute;tima maneira de come&ccedil;ar quando voc&ecirc; n&atilde;o sabe o que incluir para organizar seus conte&uacute;dos e construir suas p&aacute;ginas. Essa categoria j&aacute; possui uma estrutura que voc&ecirc; pode editar de acordo com as suas necessidades. Alguns exemplos de blocos disponibilizados pela categoria de padr&atilde;o textual s&atilde;o cita&ccedil;&otilde;es ou imagens em cor s&oacute;lida com uma descri&ccedil;&atilde;o ao lado.<\/p><h3 class=\"wp-block-heading\" id=\"h-galeria\"><strong>Galeria<\/strong><\/h3><p>O padr&atilde;o de bloco de galeria pode ser muito &uacute;til para <a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\"><strong>criar um portf&oacute;lio digital<\/strong><\/a> de forma r&aacute;pida. Essa categoria organiza m&uacute;ltiplas fotos em um formato atrativo, ent&atilde;o voc&ecirc; s&oacute; precisa fazer o upload do arquivo e selecionar as imagens desejadas. Caso voc&ecirc; n&atilde;o possua imagens para um post ou p&aacute;gina, tamb&eacute;m &eacute; poss&iacute;vel navegar e pesquisar na biblioteca de m&iacute;dias do WordPress para ter acesso a milhares de imagens gratuitas para complementar seus conte&uacute;dos.<\/p><h3 class=\"wp-block-heading\" id=\"h-query\"><strong>Query<\/strong><\/h3><p>Um bloco de query permite que voc&ecirc; fa&ccedil;a a exibi&ccedil;&atilde;o de posts baseada nos par&acirc;metros que desejar, como por exemplo nas publica&ccedil;&otilde;es mais populares ou aquelas mais recentes. Essas publica&ccedil;&otilde;es podem ser blog posts normais ou produtos do WooCommerce. Geralmente, um padr&atilde;o de bloco de query combina uma imagem destacada, um t&iacute;tulo, uma data e um trecho do conte&uacute;do. Assim, a categoria de query pode ser uma &oacute;tima op&ccedil;&atilde;o para come&ccedil;ar a definir a estrutura de suas <a href=\"https:\/\/resultadosdigitais.com.br\/marketing\/site-dinamico-x-site-estatico\/\" target=\"_blank\" rel=\"noopener\"><strong>p&aacute;ginas din&acirc;micas<\/strong><\/a> e para reutiliz&aacute;-la em outras p&aacute;ginas.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-utilizar-padroes-de-blocos-no-wordpress\"><strong>Como Utilizar Padr&otilde;es de Blocos no WordPress&nbsp;<\/strong><\/h2><p>Para utilizar um padr&atilde;o de bloco do WordPress, siga os passos listados abaixo:<\/p><ol class=\"wp-block-list\">\n<li>Acesse o editor Gutenberg do WordPress, clique no <strong>bot&atilde;o de adicionar bloco<\/strong> e acesse a aba de <strong>Padr&otilde;es<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Ali, voc&ecirc; ver&aacute; os padr&otilde;es de blocos dispon&iacute;veis. Note que eles s&atilde;o exibidos em diferentes categorias, como Em Destaque, Bot&otilde;es e Galeria. Voc&ecirc; pode clicar nessas categorias para conferir as op&ccedil;&otilde;es de padr&otilde;es de blocos que cada uma delas oferece.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"841\" height=\"585\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-82.png\/public\" alt=\"Destaques para o bot&atilde;o de adicionar novo bloco e para a aba de padr&otilde;es no menu lateral do editor de blocos do WordPress\" class=\"wp-image-36282\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-82.png\/w=841,fit=scale-down 841w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-82.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-82.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-82.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Navegue por este menu para conferir todos os blocos dispon&iacute;veis, ou clique no bot&atilde;o de <strong>Explorar todos os padr&otilde;es<\/strong> para visualizar pr&eacute;vias em um tamanho maior atrav&eacute;s de uma janela de pop-up. Por fim, escolha o padr&atilde;o de bloco que preferir.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-77.png\/public\" alt=\"Navegando pelos padr&otilde;es de bloco em destaque\" class=\"wp-image-36277\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-77.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-77.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-77.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-77.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Arraste e solte o padr&atilde;o de bloco na p&aacute;gina, ou simplesmente clique nele para que seja automaticamente inserido na p&aacute;gina do site.<\/li>\n\n\n\n<li>Assim que tiver inserido o padr&atilde;o, clique no bloco que voc&ecirc; deseja personalizar, podendo alterar seu conte&uacute;do e estilo. Essas op&ccedil;&otilde;es de design podem ser visualizadas no menu lateral direito da tela.&nbsp;<\/li>\n\n\n\n<li>Clique na caixa do grupo ou do padr&atilde;o como um todo para personaliz&aacute;-lo de forma geral. Isso inclui redefini-lo e ajustar suas dimens&otilde;es ou adicionar um contorno.<\/li>\n\n\n\n<li>Adicione quantos padr&otilde;es desejar na sua p&aacute;gina, de acordo com as necessidades do seu site. Para remover um padr&atilde;o de bloco, clique com o bot&atilde;o direito sobre a caixa que agrupa os elementos e ent&atilde;o clique nos tr&ecirc;s pontinhos verticais. Entre as op&ccedil;&otilde;es, selecione a de <strong>Remover <\/strong>para deletar o padr&atilde;o de bloco em quest&atilde;o.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-como-encontrar-mais-padroes-de-blocos-para-um-site-wordpress\"><strong>Como Encontrar Mais Padr&otilde;es de Blocos para um Site WordPress&nbsp;<\/strong><\/h3><p>Al&eacute;m desses padr&otilde;es de blocos que originalmente acompanham o editor, voc&ecirc; pode localizar ainda mais op&ccedil;&otilde;es dispon&iacute;veis no diret&oacute;rio de padr&otilde;es, nos temas e nos plugins do WordPress. Confira mais detalhes de cada uma dessas op&ccedil;&otilde;es a seguir:<\/p><p><strong>Visite o <\/strong><a href=\"https:\/\/br.wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\"><strong>Diret&oacute;rio de Padr&otilde;es WordPress<\/strong><\/a><\/p><p>Essa biblioteca de blocos gratuitos permite que os usu&aacute;rios encontrem e compartilhem padr&otilde;es de blocos entre a comunidade do WordPress. Acesse o site do diret&oacute;rio e pesquise pelos padr&otilde;es que desejar. &Eacute; poss&iacute;vel filtrar a visualiza&ccedil;&atilde;o das op&ccedil;&otilde;es de acordo com categorias, data ou popularidade.&nbsp;<\/p><p>Clique no padr&atilde;o do bloco que te interessar para ver sua listagem de p&aacute;ginas, fazer sua pr&eacute;-visualiza&ccedil;&atilde;o em diferentes tipos de tela e para copiar o padr&atilde;o como um todo.&nbsp;<\/p><p>Alternativamente, voc&ecirc; pode utilizar o padr&atilde;o de bloco diretamente em seu site ao passar o mouse sobre ele quando estiver navegando pelo diret&oacute;rio e clicar no bot&atilde;o de <strong>Copiar<\/strong>. Em seguida, basta colar o padr&atilde;o em sua p&aacute;gina ou post.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1040\" height=\"569\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/public\" alt=\"Diret&oacute;rio oficial de padr&otilde;es de bloco do WordPress\" class=\"wp-image-36284\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/w=1040,fit=scale-down 1040w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-84.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" \/><\/figure><\/div><p><strong>Opte por um <\/strong><a href=\"https:\/\/br.wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\"><strong>Tema WordPress<\/strong><\/a><strong> que Ofere&ccedil;a mais Padr&otilde;es de Blocos&nbsp;<\/strong><\/p><p>Muitos <a href=\"\/br\/tutoriais\/o-que-e-tema-wordpress\"><strong>temas do WordPress<\/strong><\/a><strong> <\/strong>contam com seus pr&oacute;prios padr&otilde;es de blocos. Geralmente, todos esses padr&otilde;es combinam com a est&eacute;tica do tema, criando um design coeso. Al&eacute;m disso, &eacute; poss&iacute;vel acessar esses blocos por dentro do pr&oacute;prio editor do WordPress.<\/p><p>Alguns dos <a href=\"\/br\/tutoriais\/temas-wordpress-gratis\"><strong>temas WordPress gratuitos<\/strong><\/a><strong> <\/strong>que oferecem blocos personalizados s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li>Twenty Twenty<\/li>\n\n\n\n<li>Twenty Twenty-One<\/li>\n\n\n\n<li>Bricksy<\/li>\n\n\n\n<li>Naledi<\/li>\n<\/ul><p><strong>Instale um <\/strong><a href=\"https:\/\/br.wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener\"><strong>Plugin<\/strong><\/a><\/p><p>Al&eacute;m dos temas, m&uacute;ltiplos <a href=\"\/br\/tutoriais\/o-que-e-plugin\"><strong>plugins do WordPress<\/strong><\/a> oferecem padr&otilde;es de blocos personalizados. O <a href=\"https:\/\/br.wordpress.org\/plugins\/redux-framework\/\" target=\"_blank\" rel=\"noopener\"><strong>Redux<\/strong><\/a><strong> <\/strong>&eacute; uma das op&ccedil;&otilde;es mais populares dispon&iacute;veis hoje. Esse plugin conta com mais de mil padr&otilde;es de blocos diferentes, que podem ser acessados pelos usu&aacute;rios atrav&eacute;s do pr&oacute;prio editor Gutenberg. O plugin Redux tamb&eacute;m possui sites de demonstra&ccedil;&atilde;o para ajudar a pr&eacute;-visualizar cada estilo de bloco.<\/p><h3 class=\"wp-block-heading\" id=\"h-como-criar-padroes-de-blocos-personalizados-wordpress\"><strong>Como Criar Padr&otilde;es de Blocos Personalizados WordPress<\/strong><\/h3><p>Apesar de ser poss&iacute;vel copiar modelos pr&eacute;-prontos da biblioteca de padr&otilde;es de blocos do WordPress ou de um plugin, voc&ecirc; tamb&eacute;m pode criar seus pr&oacute;prios padr&otilde;es de blocos para que se encaixem melhor com o estilo e identidade visual do seu site. Abaixo, indicamos dois m&eacute;todos diferentes para te ajudar a construir padr&otilde;es de blocos sem precisar programar com c&oacute;digos.&nbsp;<\/p><p><strong>Use um Plugin<\/strong><\/p><p>O plugin <a href=\"https:\/\/br.wordpress.org\/plugins\/blockmeister\/\" target=\"_blank\" rel=\"noopener\"><strong>Blockmeister<\/strong><\/a> &eacute; uma op&ccedil;&atilde;o bastante popular para criar blocos personalizados. Com ele, voc&ecirc; pode criar padr&otilde;es customizados atrav&eacute;s do construtor integrado da ferramenta. Tamb&eacute;m d&aacute; para selecionar e combinar um ou mais blocos do editor de posts e p&aacute;ginas. Outra op&ccedil;&atilde;o &eacute; organizar os padr&otilde;es em categorias, adicionando palavras-chave para encontr&aacute;-los mais rapidamente quando precisar inserir uma categoria de bloco em seu site.&nbsp;<\/p><p>O primeiro passo &eacute; <a href=\"\/br\/tutoriais\/como-instalar-plugins-wordpress\"><strong>instalar e ativar o plugin<\/strong><\/a>. Em seguida, voc&ecirc; dever&aacute; visualizar uma nova aba em seu painel de controle WordPress chamada <strong>Block Patterns <\/strong>(Padr&otilde;es de Bloco). Clique nessa op&ccedil;&atilde;o e selecione <strong>Add News <\/strong>(Adicionar Novo) para adicionar um novo padr&atilde;o de bloco. Voc&ecirc; ser&aacute; redirecionado para o editor do WordPress, e qualquer mudan&ccedil;a ou ajuste que fizer no padr&atilde;o ir&aacute; afetar apenas o padr&atilde;o do bloco no seu reposit&oacute;rio &mdash; isto &eacute;, n&atilde;o ser&aacute; automaticamente publicado como um novo post ou p&aacute;gina.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1265\" height=\"510\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/public\" alt=\"Destaque para o bot&atilde;o de Adicionar Novo na p&aacute;gina de padr&otilde;es de bloco do painel WordPress\" class=\"wp-image-36275\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/w=1265,fit=scale-down 1265w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-75.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1265px) 100vw, 1265px\" \/><\/figure><\/div><p>Alternativamente, acesse uma p&aacute;gina ou um post no qual voc&ecirc; tenha criado um padr&atilde;o de bloco personalizado. Depois, selecione os blocos do WordPress que voc&ecirc; deseja incluir no padr&atilde;o e clique no &iacute;cone dos tr&ecirc;s pontinhos localizado na barra de ferramentas. Ali, clique na op&ccedil;&atilde;o <strong>Add to Block Patterns <\/strong>(Adicionar aos Padr&otilde;es de Bloco) para adicionar o bloco aos seus padr&otilde;es.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-85.png\/public\" alt=\"Destaque para a op&ccedil;&atilde;o de adicionar bloco aos padr&otilde;es de bloco\" class=\"wp-image-36286\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-85.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-85.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-85.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-85.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>D&ecirc; um nome &agrave; sua cria&ccedil;&atilde;o para se lembrar do padr&atilde;o de bloco personalizado, e a partir desse momento voc&ecirc; poder&aacute; utilizar esse elemento como qualquer outro padr&atilde;o de bloco da plataforma.&nbsp;<\/p><p>O novo padr&atilde;o de bloco tende a estar inserido na categoria <strong>Uncategorized <\/strong>(sem categoria) ou na se&ccedil;&atilde;o do nome do seu blog. Para agrupar padr&otilde;es de blocos, navegue at&eacute; <strong>Block Patterns <\/strong>&rarr; <strong>All Patterns <\/strong>(Padr&otilde;es de Blocos &rarr; Todos os Padr&otilde;es) no seu painel de controle WordPress. A partir da lista de todos os seus padr&otilde;es, selecione a op&ccedil;&atilde;o <strong>Edit <\/strong>(Editar)<strong> <\/strong>no padr&atilde;o de bloco que voc&ecirc; deseja adicionar a uma categoria.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1261\" height=\"424\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/public\" alt=\"Destaque para a op&ccedil;&atilde;o de Editar bloco na p&aacute;gina de padr&otilde;es de bloco do painel de controle WordPress\" class=\"wp-image-36279\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/w=1261,fit=scale-down 1261w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-80.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1261px) 100vw, 1261px\" \/><\/figure><\/div><p>Clique na aba <strong>Pattern <\/strong>(Padr&atilde;o) na barra lateral direita e ent&atilde;o selecione a op&ccedil;&atilde;o <strong>Categories <\/strong>(Categorias). Depois, escolha a categoria adequada para o padr&atilde;o de bloco que estiver configurando.&nbsp;&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-88.png\/public\" alt=\"Destaque para a sele&ccedil;&atilde;o de categorias dentro da aba Pattern (padr&atilde;o) na barra de ferramentas lateral direita do editor de blocos do WordPress\" class=\"wp-image-36288\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-88.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-88.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-88.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-88.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><strong>Crie um Padr&atilde;o de Bloco Atrav&eacute;s da Biblioteca de Padr&otilde;es<\/strong><\/p><p>Uma outra maneira de criar um padr&atilde;o de bloco personalizado &eacute; acessando o diret&oacute;rio de Padr&otilde;es e clicando no link <strong>Create a New Pattern<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1006\" height=\"549\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-83.png\/public\" alt=\"Destaque para o link de criar novo padr&atilde;o na p&aacute;gina do diret&oacute;rio de padr&otilde;es do WordPress\" class=\"wp-image-36283\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-83.png\/w=1006,fit=scale-down 1006w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-83.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-83.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-83.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1006px) 100vw, 1006px\" \/><\/figure><\/div><p>\n\n\n<div><p class=\"important\"><strong>Importante!<\/strong> Note que, para criar padr&otilde;es de blocos com este m&eacute;todo, &eacute; necess&aacute;rio que voc&ecirc; entre na sua conta ou crie uma conta no WordPress.org.<\/p><\/div>\n\n\n\n<\/p><p>Assim que entrar em sua conta WordPress, voc&ecirc; ver&aacute; um editor de blocos do WordPress que se parece muito com o tradicional. Adicione blocos para construir seu pr&oacute;prio padr&atilde;o, e navegue pelas diversas op&ccedil;&otilde;es de personaliza&ccedil;&atilde;o para ajustar seu modelo. Salve o design como um rascunho caso queira manter esse padr&atilde;o de bloco para voc&ecirc; mesmo, ou clique no bot&atilde;o <strong>Submit <\/strong>(Enviar)<strong> <\/strong>para enviar &agrave; plataforma e assim compartilhar sua cria&ccedil;&atilde;o com a comunidade WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"532\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-78.png\/public\" alt=\"Destaque para as op&ccedil;&otilde;es de salvar rascunho ou publicar padr&atilde;o de bloco rec&eacute;m constru&iacute;do no editor\" class=\"wp-image-36278\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-78.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-78.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-78.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-78.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Basta copiar o padr&atilde;o da sua p&aacute;gina de padr&otilde;es (<strong>My Patterns<\/strong>)<strong> <\/strong>e col&aacute;-lo no seu site quando desejar utiliz&aacute;-lo. Voc&ecirc; pode gerenciar todos os seus padr&otilde;es de blocos personalizados nesta p&aacute;gina, incluindo aqueles que voc&ecirc; compartilhou, favoritou e salvou como rascunho.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-81.png\/public\" alt=\"P&aacute;gina de acesso aos padr&otilde;es salvos\" class=\"wp-image-36281\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-81.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-81.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-81.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-81.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Antes de compartilhar o padr&atilde;o de bloco que voc&ecirc; acabou de criar, n&atilde;o se esque&ccedil;a de ler o <a href=\"https:\/\/br.wordpress.org\/patterns\/about\/\" target=\"_blank\" rel=\"noopener\"><strong>Guia do Diret&oacute;rio de Padr&otilde;es<\/strong><\/a>, e de adicionar uma descri&ccedil;&atilde;o para a sua cria&ccedil;&atilde;o.<\/p><h3 class=\"wp-block-heading\" id=\"h-como-criar-padroes-de-blocos-manualmente\"><strong>Como Criar Padr&otilde;es de Blocos Manualmente<\/strong><\/h3><p>Al&eacute;m de instalar um plugin ou visitar a biblioteca de padr&otilde;es, os usu&aacute;rios WordPress podem criar novos padr&otilde;es de blocos manualmente. Um novo padr&atilde;o pode ser criado e adicionado ao tema que est&aacute; ativo no site atrav&eacute;s da edi&ccedil;&atilde;o do arquivo&nbsp; <strong>functions.php<\/strong>.<\/p><p>Crie seu pr&oacute;prio padr&atilde;o de bloco no editor de p&aacute;ginas ou posts. Ent&atilde;o, selecionando os tr&ecirc;s pontinhos verticais no canto superior direito da tela, altere o modo de visualiza&ccedil;&atilde;o do editor do WordPress para Code Editor (<strong>Editor de C&oacute;digo<\/strong>). Copie todo o c&oacute;digo exibido e cole ele em um editor de textos comum do seu computador, como o Notepad.<\/p><p>Depois disso, acesse seu painel de controle WordPress, clique no menu de <strong>Apar&ecirc;ncia &rarr; Editor de Arquivos do Tema <\/strong>(Theme File Editor), e localize o arquivo <strong>functions.php<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1495\" height=\"766\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/public\" alt=\"Captura de tela do arquivo functions.php aberto pelo editor de arquivos do tema no painel WordPress\" class=\"wp-image-36285\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/w=1495,fit=scale-down 1495w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-86.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1495px) 100vw, 1495px\" \/><\/figure><\/div><p>Copie e cole o seguinte c&oacute;digo no final do arquivo em quest&atilde;o:&nbsp;<\/p><pre class=\"wp-block-preformatted\">function function_name() {\n\n&nbsp;&nbsp;register_block_pattern(\n\n&nbsp;&nbsp;&nbsp;&nbsp;'slug',\n\n&nbsp;&nbsp;&nbsp;&nbsp;array(\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'title' =&gt; __( 't&iacute;tulo do seu padr&atilde;o', 'text-domain' ),\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'description' =&gt; _x( 'descri&ccedil;&atilde;o do seu padr&atilde;o', 'Block pattern description', 'text-domain' ),\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'content' =&gt; &lsquo;c&oacute;digo do seu padr&atilde;o de bloco&rsquo;,\n\n&nbsp;&nbsp;&nbsp;&nbsp;)\n\n);\n\n}\n\nadd_action( 'init', 'function_name' );<\/pre><p>Nos campos respectivos, especifique o t&iacute;tulo e a descri&ccedil;&atilde;o do seu pr&oacute;prio padr&atilde;o de bloco, e substitua o texto do &lsquo;c&oacute;digo do seu padr&atilde;o de bloco&rsquo; pelo c&oacute;digo que voc&ecirc; copiou anteriormente e colou no editor de texto Notepad. Lembre-se de manter as aspas &uacute;nicas no in&iacute;cio e ao final do texto\/c&oacute;digo em quest&atilde;o. Por fim, clique no bot&atilde;o de <strong>Atualizar Arquivo <\/strong>(Update File) para salvar as altera&ccedil;&otilde;es feitas.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1496\" height=\"802\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/public\" alt=\"Arquivo functions.php acrescido do c&oacute;digo referente ao novo padr&atilde;o de bloco\" class=\"wp-image-36287\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/w=1496,fit=scale-down 1496w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-87.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1496px) 100vw, 1496px\" \/><\/figure><\/div><p>Para conferir o resultado, voc&ecirc; pode criar uma nova p&aacute;gina e clicar no bot&atilde;o para adicionar blocos, selecionando a aba de <strong>Padr&otilde;es <\/strong>(Patterns). Ent&atilde;o, clique no menu suspenso e selecione a categoria <strong>Uncategorized <\/strong>(Sem Categoria). Voc&ecirc; dever&aacute; visualizar seu novo padr&atilde;o de bloco listado nesta se&ccedil;&atilde;o.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-76.png\/public\" alt=\"Adicionando o bloco rec&eacute;m criado em um post\/p&aacute;gina pelo editor de blocos, categoria Uncategorized na aba de Patterns\" class=\"wp-image-36276\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-76.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-76.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-76.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-76.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-como-remover-um-padrao-de-bloco-do-wordpress\"><strong>Como Remover um Padr&atilde;o de Bloco do WordPress<\/strong><\/h3><p>Voc&ecirc; pode deletar ou descadastrar um padr&atilde;o de bloco que tenha criado ao copiar e colar o c&oacute;digo indicado abaixo no arquivo <strong>functions.php<\/strong> do seu tema:<\/p><pre class=\"wp-block-preformatted\">function unregister_my_patterns() {\n\n&nbsp;&nbsp;unregister_block_pattern('t&iacute;tulo do seu padr&atilde;o');\n\n}\n\nadd_action( 'init', 'unregister_my_patterns' );<\/pre><p>No nosso exemplo de padr&atilde;o de bloco personalizado, utilizamos o nome <strong>Free trial CTA<\/strong> para registrar um padr&atilde;o de bot&atilde;o de CTA para teste gratuito de um produto\/servi&ccedil;o.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"575\" height=\"135\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-73.png\/public\" alt=\"C&oacute;digo colado no arquivo\" class=\"wp-image-36273\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-73.png\/w=575,fit=scale-down 575w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-73.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/image-73.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/figure><\/div><p>Se o processo de remo&ccedil;&atilde;o for conclu&iacute;do com sucesso, voc&ecirc; n&atilde;o ver&aacute; mais seu padr&atilde;o personalizado como op&ccedil;&atilde;o dispon&iacute;vel no editor de blocos.<\/p><p>Tamb&eacute;m &eacute; poss&iacute;vel deletar os padr&otilde;es de blocos originais do WordPress, basta utilizar o prefixo <em>core<\/em> e inserir o nome do padr&atilde;o de bloco em quest&atilde;o. Por exemplo, abaixo indicamos como descadastrar o bloco de tabela de pre&ccedil;os:&nbsp;<\/p><pre class=\"wp-block-preformatted\">unregister_block_pattern( 'core\/Pricing table' );<\/pre><p>Se voc&ecirc; deseja deletar todos os padr&otilde;es de blocos que normalmente acompanham o WordPress, utilize o seguinte c&oacute;digo:<\/p><pre class=\"wp-block-preformatted\">remove_theme_support( 'core-block-patterns' );<\/pre><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-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Um padr&atilde;o de bloco &eacute; um layout pr&eacute;-projetado que consiste em um ou mais blocos do WordPress, auxiliando os usu&aacute;rios da plataforma na constru&ccedil;&atilde;o de seus sites de forma mais r&aacute;pida e simples. Um padr&atilde;o de bloco n&atilde;o &eacute; o mesmo que um bloco reutiliz&aacute;vel, j&aacute; que os usu&aacute;rios podem personalizar um padr&atilde;o sem afetar os posts e p&aacute;ginas em que ele foi inserido anteriormente.&nbsp;&nbsp;<\/p><p>Voc&ecirc; pode encontrar os padr&otilde;es de blocos tradicionais do WordPress no editor de Gutenberg, onde tamb&eacute;m pode inserir o padr&atilde;o que desejar em uma p&aacute;gina ou post. Se voc&ecirc; deseja ter mais op&ccedil;&otilde;es de estilo, visite o diret&oacute;rio de Padr&otilde;es, instale e ative um plugin como o <strong>Redux<\/strong> ou pesquise por temas WordPress que ofere&ccedil;am m&uacute;ltiplos padr&otilde;es de blocos.&nbsp;<\/p><p>Tamb&eacute;m &eacute; poss&iacute;vel criar seu pr&oacute;prio padr&atilde;o de bloco WordPress por meio do plugin <strong>Blockmeister <\/strong>ou atrav&eacute;s de um editor na biblioteca de Padr&otilde;es. Alternativamente, um novo padr&atilde;o de bloco pode ser constru&iacute;do ao inserir um c&oacute;digo espec&iacute;fico no seu arquivo <strong>functions.php<\/strong>.&nbsp;Agora que voc&ecirc; j&aacute; sabe o que &eacute; um padr&atilde;o de bloco do WordPress, &eacute; hora de come&ccedil;ar a utilizar essas ferramentas e acelerar o processo de <a href=\"\/br\/tutoriais\/como-fazer-o-layout-de-um-site\"><strong>design do seu site<\/strong><\/a>. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Primeiramente introduzidos no WordPress vers&atilde;o 5.5, os padr&otilde;es de blocos abriram o caminho para que o editor Gutenberg se tornasse um construtor de p&aacute;ginas de larga escala. Os blocos ajudam os usu&aacute;rios do WordPress a construir sites complexos em pouco tempo, sem precisar de muito esfor&ccedil;o e conhecimento t&eacute;cnico para criar e estruturar suas p&aacute;ginas. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/padroes-de-bloco-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":305,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Padr\u00f5es de Bloco WordPress","rank_math_description":"Os padr\u00f5es de bloco do WordPress s\u00e3o elementos estruturantes que facilitam a constru\u00e7\u00e3o de suas p\u00e1ginas e posts. Aqui voc\u00ea aprende a us\u00e1-los","rank_math_focus_keyword":"","footnotes":""},"categories":[4911],"tags":[7518],"class_list":["post-36272","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-blocos-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-block-patterns","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/padroes-de-bloco-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-block-patterns","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/understanding-wordpress-block-patterns-what-they-are-and-how-to-use-them","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/understanding-wordpress-block-patterns-what-they-are-and-how-to-use-them","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/padroes-de-bloco-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-block-patterns","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-block-patterns","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-block-patterns","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-block-patterns","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/36272","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\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=36272"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/36272\/revisions"}],"predecessor-version":[{"id":36337,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/36272\/revisions\/36337"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=36272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=36272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=36272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}