Como usar os padrões de bloco do WordPress: um guia simples

Publicados: 2022-12-21

Desde o lançamento do WordPress 5.8 em 2021, os padrões de bloco se tornaram uma forma cada vez mais popular de criar conteúdo no WordPress. Eles permitem que desenvolvedores e designers os utilizem em todos os aspectos de seus sites, incluindo cabeçalhos, rodapés, postagens, páginas e muito mais. Como um bônus adicional, os usuários podem salvar os padrões de bloco do WordPress para tornar o processo de design mais rápido e fácil. Neste post, discutiremos o que são padrões de bloco e como usá-los. Vamos começar.

O que são padrões de bloco do WordPress?

Padrões de bloqueio do WordPress

Ao criar conteúdo no WordPress, você pode inserir um grupo de blocos em suas postagens ou páginas para exibir seu conteúdo de maneira bonita e funcional. Esses grupos de blocos são chamados de padrões de bloco do WordPress. O WordPress oferece uma série de padrões de blocos pré-fabricados no repositório do WordPress. Além disso, a maioria dos temas do WordPress também terá uma coleção deles. Os padrões de bloco podem ser editados tão facilmente quanto qualquer bloco que você criar. Os padrões podem conter vários blocos ou até páginas inteiras. E, com a edição completa do site no WordPress, eles podem ser usados ​​em qualquer lugar e são úteis até mesmo para criar cabeçalhos, rodapés, modelos de página, consultas e muito mais.

Padrões de bloco do WordPress x blocos reutilizáveis

blocos reutilizáveis

Conforme declarado anteriormente, um padrão de bloco é um grupo de blocos que podem ser inseridos em uma postagem, página, parte de modelo ou modelo. Os padrões de bloco podem ser inseridos em vários locais, mas alterados individualmente . Os padrões de bloco podem ser salvos como blocos reutilizáveis, mas quando isso acontecer, ele mudará em todos os lugares em que o bloco reutilizável for usado. Então, basicamente, os blocos reutilizáveis ​​assumem uma propriedade global, enquanto os padrões de bloco são uma coleção de blocos que podem ser editados para ter uma aparência diferente, independentemente de quantas vezes eles são usados ​​em um site.

Como encontrar novos padrões de bloco do WordPress

Existem alguns lugares para encontrar padrões de bloqueio do WordPress. A primeira maneira é dentro do próprio tema do WordPress. Conforme mencionado anteriormente, a maioria dos temas contém padrões de blocos que você pode usar em seu site. Por exemplo, o tema Twenty Twenty-Two tem uma coleção decente de padrões. Você pode escolher entre categorias, incluindo colunas, texto, galerias, páginas e muito mais.

Padrões de bloqueio padrão do WordPress

Outra maneira de encontrar padrões de bloco é dentro do diretório de padrão de bloco do WordPres. Atualmente, existem mais de 65 páginas de padrões para usar, incluindo cabeçalhos, rodapés, wireframes, colunas, botões e muito mais.

Como adicionar padrões de bloco ao seu site

Adicionar padrões de blocos ao seu site é um processo simples. Se você quiser pesquisar dentro do seu tema para adicionar um padrão, basta clicar no ícone azul + no canto superior esquerdo da tela.

Adicionar bloco à página do WordPress

Em seguida, vá até Patterns . Selecione o padrão que deseja usar e clique nele para adicioná-lo automaticamente à sua página.

Adicionar um padrão de bloco

Outra forma de adicionar padrões de blocos ao seu site é copiá-los e colá-los do diretório de padrões. Navegue até o diretório do padrão, localize o padrão de sua escolha e passe o mouse sobre ele para revelar o botão copiar .

copiar padrão de bloco

Em seguida, retorne à sua página. Clique dentro do quadro de edição e clique com o botão direito do mouse e selecione colar ou use CTRL + V (no Windows) ou CMD + V (Mac) . Seu padrão de bloco aparecerá na página. Você pode reorganizar sua localização clicando na exibição de lista e arrastando-a para o local desejado.

colando o padrão de bloco

Como usar padrões de bloco no WordPress

Usar padrões de bloco no WordPress é fácil. Como mencionado anteriormente, eles podem ser editados como qualquer outro bloco. Agora que você sabe como acessá-los e adicioná-los ao seu site, vamos editá-los.

Normalmente, quando você importa um padrão de bloco para sua página, ele será agrupado. Agrupar blocos facilita arrastá-los pela página, bem como ajustar configurações como largura, cor, tamanho da tipografia, preenchimento e espaçamento do bloco – no próprio grupo.

configurações de bloqueio de grupo

Para fazer alterações em um bloco individual dentro do grupo, basta clicar para editá-lo. A edição de blocos individuais não exige que você os desagrupe e são editados da mesma forma que os blocos normais. Por exemplo, vejamos o bloco de imagem dentro do nosso padrão. Você pode adicionar links, recortar, adicionar texto ou substituir a imagem, como faria de outra forma.

editar bloco individual no padrão

Você pode adicionar quantos padrões de bloco quiser em seu layout. Adicionar padrões é uma maneira fácil de criar conteúdo bonito em um piscar de olhos. Além disso, remover blocos é igualmente simples. Se você deseja remover um padrão da página, basta clicar no elemento pai na exibição de lista ou clicar no menu de reticências no editor de página e, em seguida, clicar em Remover grupo .

remover grupo

Como criar e salvar seus próprios padrões de bloco no WordPress

Existem algumas maneiras de criar e salvar padrões de bloco no WordPress. A maneira como você faz isso depende do seu nível de conhecimento e se deseja compartilhá-lo com outras pessoas. Vamos nos aprofundar para aprender sobre como criar, salvar e compartilhar padrões de bloco.

Crie padrões de bloco no diretório de padrões do WordPress

Este método requer que você tenha uma conta WordPress, mas é a maneira mais simples de criar padrões para usar em seu site. Comece indo para o diretório padrão do WordPress. Em seguida, clique em criar um novo padrão .

criar um novo padrão

Em seguida, você precisará fazer login ou criar uma nova conta do WordPress. Uma vez logado, você será redirecionado para o editor de moldes. Funciona da mesma forma que o editor de páginas do seu próprio site. Como um bônus adicional, você terá acesso a imagens isentas de royalties para usar em seus moldes. Para começar, dê um nome ao seu padrão e comece a adicionar blocos clicando no botão + preto .

nomeie seu padrão

Depois de terminar de projetar seu padrão de bloco, é hora de salvá-lo para uso em seu site. Existem duas opções para salvar seu padrão. Escolher salvar rascunho permitirá que você salve o padrão apenas para seu uso . Você poderá manter seu padrão na nuvem e acessá-lo a qualquer momento para copiar e colar em seu site.

salve seu padrão

Para acessar seus padrões, volte para a página do diretório de padrões e clique no link Meus padrões. Tanto seus rascunhos quanto os favoritos podem ser usados ​​em seus sites WordPress.

meus padrões

Envie seu padrão de bloco para o WordPress

O WordPress permite que seus usuários criem e enviem padrões de blocos para todos os seus usuários utilizarem em temas de blocos do WordPress. Na verdade, a galeria de padrões é apenas isso - padrões enviados pelo usuário. Para criar um padrão de bloco para envio, siga as etapas da seção anterior. No entanto, desta vez, você clicará no botão enviar . Seu padrão passará por um processo de revisão antes de ser adicionado ao diretório. Uma vez ativo, seu padrão ficará visível no diretório de padrões do WordPress, onde pode ser acessado por qualquer pessoa.

Use um plug-in para criar padrões de bloco

Com a crescente popularidade dos blocos Gutenberg, há mais opções do que nunca para salvar padrões de blocos em seus sites. Até recentemente, se você quisesse criar um padrão de bloco no WordPress, teria que codificá-lo sozinho, o que não é adequado para iniciantes. Felizmente, existem algumas opções para quem deseja criá-los facilmente.

Plug-in CoBlocks

CoBlocks é criado por GoDaddy. Ele oferece uma coleção de mais de 40 blocos para usar em seu site, além da capacidade de criar padrões de blocos e registrá-los. O processo é simples e leva apenas algumas etapas. Primeiro, crie seu layout preferido. Em seguida, selecione os blocos que deseja incluir em seu padrão. Por fim, selecione Adicionar padrão de design .

Criar padrão com CoBlocks

Nomeie seu padrão, dê a ele uma descrição opcional e atribua uma categoria. Por fim, clique em Salvar padrão .

Salvar padrão de design

Para visualizar seu padrão recém-criado, navegue até a guia Padrões, selecione a categoria atribuída e role para baixo para visualizá-la.

veja seu padrão salvo

Blockmeister – Construtor de Padrões de Bloco

Outra opção é o plugin Blockmeister – Block Pattern Builder. O processo é muito semelhante ao dos CoBlocks. No entanto, este plug-in não oferece nenhum bloco adicional para seus layouts. Apenas lhe dá a capacidade de criar padrões de bloco. Para começar, crie seu layout e selecione todos os blocos a serem incluídos nele. Em seguida, clique no menu de reticências na exibição de lista e selecione Adicionar aos padrões de bloco .

criar um padrão Blockmeister

A próxima etapa é nomear seu padrão e clicar em Criar padrão . Uma vez salvo, atualize sua página para encontrar o padrão no diretório padrão do seu tema.

Padrão de nome Blockmeister

Para localizar seu padrão, use o menu suspenso de categorias em padrões e escolha o nome do seu site.

categoria padrão

Padrões de bloco do WordPress versus layouts Divi

Ambos os padrões de blocos e layouts Divi oferecem os mesmos recursos básicos. Você pode criar, editar, personalizar e salvá-los. No entanto, Divi tem muito mais em termos de opções de personalização, é aí que terminam as semelhanças entre os dois. Veja bem, as personalizações de blocos são baseadas em temas, o que significa que você obtém apenas o que o tema oferece em termos de cores, fontes e efeitos. Para obter mais opções, os usuários precisam adicionar plug-ins ou código para obtê-los. Com o Divi, você tem várias opções de personalização à sua disposição para ajudá-lo a criar layouts incríveis para o seu site.

Divi por temas elegantes

Divi não é apenas um tema WordPress, é uma plataforma completa de criação de sites com muito poder sob o capô. O Divi utiliza um Visual Builder proprietário de arrastar e soltar que permite criar belos layouts no front-end - em tempo real. Não há necessidade de visualizar seu layout em uma nova guia para ver como sua página ficará no navegador.

Divi tem opções ilimitadas de personalização

Existem opções de design ilimitadas com mais de 200 elementos de site. Dentro de cada elemento, existem opções de fundo incríveis usando o sistema dinâmico de cores mágicas do Divi. Além disso, você pode impressionar seus layouts com efeitos de transição, foco e animação. Além disso, você pode ajustar o espaçamento, o tamanho, adicionar filtros e sombras de caixa e muito mais.

Divi visual builder

Salvar layouts usando o Divi Cloud

Nuvem Divi

Quando você deseja reutilizar um layout, o Divi facilita. Você pode salvar módulos, linhas, seções ou até páginas inteiras usando o Divi. Além disso, os layouts podem ser salvos como globais para que, quando você precisar fazer uma alteração em um layout que está sendo usado em todo o site, ele precise ser alterado apenas uma vez. Como um bônus adicional, você pode salvar seus layouts no Divi Cloud, o que permite usá-los em qualquer site Divi, em qualquer lugar.

Perguntas frequentes sobre os padrões de bloqueio do WordPress

Com tudo o que falamos no post, você pode ter algumas perguntas sobre os padrões de bloqueio. A boa notícia é que temos respostas. Leia.

Os padrões de bloco são como blocos reutilizáveis?

De certa forma, sim. Tanto os padrões de bloco quanto os blocos reutilizáveis ​​podem ser criados, salvos e editados. No entanto, os blocos reutilizáveis ​​são mais parecidos com os blocos globais. Por exemplo, se você criar um bloco reutilizável como um boletim informativo para usar em todo o site, fazer alterações em uma instância resultará na alteração feita sempre que o bloco for exibido. Se você usar um padrão de bloco, poderá alterar a cor de fundo, a cor do botão ou fazer outras edições de design sem afetar todas as instâncias.

Onde posso obter padrões de blocos para o meu site?

Como mencionado anteriormente, você pode obtê-los no diretório padrão do WordPress, dentro do seu tema WordPress ou com um plug-in como Gutenberg Template and Pattern Library da Extendify.

Por que devo usar padrões de bloco?

Em suma, é uma ótima maneira de economizar tempo. O maior devorador de tempo com o desenvolvimento do WordPress é criar o conteúdo. Com blocos de padrão, você pode economizar tempo e energia criando padrões que você pode usar nas páginas e posts do seu site.

Posso criar blocos de padrão manualmente?

Você pode! No entanto, você precisará se sentir confortável escrevendo e editando código para criar blocos de padrão manualmente. O WordPress.org tem uma boa lição que ajudará a guiá-lo no processo, se você quiser tentar.

Encerrando as Coisas

Os padrões de bloco fornecem uma maneira fácil e rápida de adicionar conteúdo ao seu site. Além disso, você pode encontrar belos designs profissionais no diretório de padrões do WordPress para ajudá-lo a começar. Se você não estiver usando blocos padrão em seu site, é altamente recomendável fazê-lo.

Você está usando blocos padrão em seu site? Em caso afirmativo, diga-nos por que você gosta de usá-los na seção de comentários abaixo.