Decodificando o WordPress: Trabalhando com Padrões de Blocos

by Jason Cosper
Decodificando o WordPress: Trabalhando com Padrões de Blocos thumbnail

Imagine se construir um site fosse como jogar Tetris — empilhando peças pré-fabricadas na ordem que você desejar.

Seria bastante satisfatório, certo?

Bem, isso é o que você obtém com padrões de blocos do WordPress. Com esses designs pré-fabricados, você pode adicionar seções inteiras a qualquer página ou postagem com um clique. E ao contrário do Tetris, eles não desaparecerão quando você os empilhar perfeitamente. 

Isso parece ótimo no papel. Mas como exatamente você usa os padrões de blocos? 

É isso que este guia trata.

Fique conosco pelos próximos minutos, e você aprenderá o que são padrões de blocos e como usá-los em seu próprio site WordPress.

Vamos lá!

O que é um Padrão de Bloco do WordPress?

Um padrão de blocos no WordPress é um layout pronto para uso feito de blocos reutilizáveis. 

Estes layouts podem ser inseridos quase em qualquer lugar no seu site WordPress, incluindo páginas e posts.

exemplo de padrão de bloco wordpress mostrando h1 no canto superior esquerdo, descrição à direita e uma foto de montanhas abaixo

Uma vez inseridos, você pode editar e modificar o conteúdo nos padrões de blocos. Os componentes individuais funcionam exatamente como blocos Gutenberg regulares, então você pode fazer ajustes em cores e fontes, reordenar componentes, trocar imagens e alterar o conteúdo dentro de cada bloco. 

Glossário DreamHost

Gutenberg

Gutenberg é o nome do projeto do Editor de Blocos no WordPress. Muitos desenvolvedores e entusiastas do WordPress usam os termos Editor Gutenberg e Editor de Blocos de forma intercambiável.

Leia Mais

Você também pode reutilizar padrões de blocos inúmeras vezes em seu site, até mesmo dentro de uma única página ou postagem. 

Isso significa que você não precisa criar manualmente (e recriar) layouts um bloco de cada vez quando usar o Editor de Blocos.

Conhecendo os Blocos do WordPress

Para entender completamente como os padrões de blocos funcionam, você precisa saber um pouco sobre blocos.

Os blocos têm sido uma parte essencial do WordPress desde o final de 2018, quando a versão 5.0 introduziu o novo editor de blocos do WordPress, Gutenberg.

Este componente flexível do WordPress permite que você construa posts e páginas usando elementos individuais, conhecidos como blocos. Exemplos incluem imagens, parágrafos, listas, cabeçalhos, embeds, divisores, tabelas e colunas.

Glossário DreamHost

Embed

Embed significa inserir conteúdo externo diretamente em uma página da web em vez de vincular a ele. A inserção permite que os visitantes visualizem o conteúdo sem sair do site.

Leia Mais

Cada bloco vem com um conjunto de opções de personalização, como alinhamento, cor e tamanho da fonte. Você pode mover blocos por meio de um editor de arrastar e soltar

Para voltar à metáfora do Tetris, imagine ser capaz de mover uma peça no jogo depois de ela ter caído completamente — tudo porque você não gostou de onde a colocou inicialmente. Essa é a flexibilidade que o Gutenberg oferece.

Padrões de Bloco: Quais são os Benefícios?

Quando você constrói padrões de blocos, você está simplesmente juntando vários blocos para criar um pequeno modelo. Isso significa que você pode montar seu site bastante rapidamente, já que não está construindo cada página do zero.

E isso não é a única vantagem. Aqui estão algumas outras vantagens:

  • Você pode criar seções inteiras usando blocos: Criar seus próprios padrões de blocos personalizados significa que qualquer pessoa que trabalhe em seu site pode gerenciar conteúdos sem se preocupar com o layout e o design.
  • Você pode usar padrões de blocos prontos de designers profissionais: Você pode modificar esses modelos para combinar com seu estilo, oferecendo muitas opções para brincar ao criar uma postagem ou página.
  • Você pode salvar padrões que você usa frequentemente: Após criar ou selecionar padrões de blocos, você pode salvá-los e construir uma biblioteca de modelos que se adapte à sua marca.
  • Você pode construir novos conteúdos mais rapidamente. É muito mais rápido usar um padrão salvo do que projetar uma página do zero.
  • Eles são flexíveis e personalizáveis: Você pode adaptar padrões de blocos pré-construídos às suas necessidades específicas de design e funcionalidade. Encontre um padrão de bloco no Diretório de Padrões do WordPress que lhe agrade e modifique-o conforme sua criatividade o guiar.
  • Eles são independentes de temas: Padrões de blocos customizados não estão vinculados a um tema específico. Se você mudar o tema do seu site WordPress mais tarde, seus padrões permanecerão os mesmos.
  • Eles fornecem layouts de páginas e postagens responsivos: Projetar seu site WordPress usando blocos e padrões de blocos significa que o conteúdo do seu site será adequadamente otimizado para diferentes dispositivos, como smartphones ou tablets.

Receba conteúdo diretamente na sua caixa de entrada

Inscreva-se agora para receber todas as últimas atualizações, diretamente na sua caixa de entrada.

Como os Padrões de Bloco Evoluíram ao Longo do Tempo

Os padrões de blocos foram introduzidos lá em agosto de 2020 com o lançamento do WordPress 5.5 “Eckstine.” 

Desde esse tempo, vimos muita evolução:

  • WordPress 5.9 adicionou a opção de copiar e colar padrões de blocos no Editor Completo do Site.
  • WordPress 6.0 facilitou a navegação no inseridor de blocos e tornou mais fácil para os desenvolvedores adicionarem padrões aos seus temas.
  • WordPress 6.3 introduziu padrões sincronizados, que parecem idênticos em todo o seu site. Você pode editar um padrão sincronizado em uma página, e todas as outras cópias serão atualizadas para parecerem iguais.
  • WordPress 6.5 apresentou uma nova seleção agradável de padrões de blocos, divididos em categorias.
  • WordPress 6.6 introduziu a opção de sobrescrever o sistema de padrões sincronizados, para que cada cópia de um padrão possa ter um conteúdo ou estilo único.

Como Criar Seus Próprios Padrões de Blocos

Hoje, os padrões de blocos são bastante poderosos e muito fáceis de usar.

Se você está pronto para começar a experimentar essa funcionalidade do WordPress, aqui está um tutorial rápido passo a passo:

Etapa 1: Criar uma Postagem Rascunho

Para criar um padrão de bloco, comece fazendo uma nova postagem ou página rascunho no WordPress. 

Um novo rascunho não terá nenhum conteúdo existente. É uma tela em branco para a sua criatividade baseada em blocos!

Comece adicionando os blocos que você gostaria de incluir no seu padrão: cabeçalhos e parágrafos, colunas, imagens e galerias, vídeo e áudio, separadores e mais.

captura de tela da visão do usuário no wordpress usando os padrões de blocos em uma postagem

Depois de adicionar seus blocos, certifique-se de estilizá-los. Use as paletas de cores integradas e os seletores de fontes.

Etapa 2: Selecionar e Copiar Blocos

Uma vez que seus blocos estiverem como você deseja, você precisa criar o padrão. Não se preocupe, não é técnico!

Comece selecionando manualmente todos os blocos que você deseja no seu padrão de blocos. Clique no primeiro bloco, pressione e segure Alt (Shift no Mac), depois clique no último bloco que você quer que apareça no padrão.

Para finalizar, clique nos três pontos verticais no topo do seu editor e selecione Criar padrão no menu suspenso.

mesma captura de tela anterior mostrando onde abrir as opções de padrão dentro do bloco de título

Dica profissional: Se você não consegue ver facilmente todos os blocos que deseja selecionar, abra a aba Visão Geral do Documento para ver a lista completa de elementos. É o botão com três linhas horizontais deslocadas no canto superior direito do editor. 

Etapa 3: Salve Seu Padrão de Bloco

Depois de construir seu padrão de bloco, você só precisa salvá-lo na biblioteca de padrões do WordPress.

Você deve ver uma caixa de pop-up que pede para você nomear seu padrão de bloco e escolher uma categoria. As categorias de padrão ajudam você a agrupar modelos, como todos os padrões para uma página específica.

captura de tela da caixa de adicionar novo padrão mostrando onde inserir o nome e as categorias com botão de adicionar no canto inferior direito da caixa

Finalmente, você tem uma grande escolha a fazer: sincronizar ou não sincronizar (como provavelmente diria Shakespeare).

Lembre-se, padrões de blocos sincronizados estão todos vinculados. Se você alterar um, todas as outras cópias mudam. Em contraste, padrões de blocos não sincronizados são independentes. 

Depois de tomar sua decisão, clique em Criar… e pronto!

Como Criar Padrões de Bloco no Editor do Site

O método acima é provavelmente a maneira mais fácil de criar padrões de blocos. Mas você também pode construir e salvar através do Editor de Sites do WordPress se você tiver um tema baseado em blocos.

Para fazer isso, vá até Aparência > Editor no painel administrativo do WordPress.

captura de tela do botão de editor sob temas sob aparência na barra de navegação à esquerda

Agora, olhe para sua esquerda. Vê aquela barra lateral? Clique em Padrões, e você verá todos os padrões que coletou até agora, organizados em categorias.

captura de tela da navegação de padrões mostrando a categorização de modelos como rodapé, cabeçalho, cabeçalho de checkout e mini-carrinho

No canto superior direito, você deve ver o botão Adicionar Novo Padrão. Clique nele.

Isso abrirá o pop-up de nome e categoria. Preencha os detalhes e clique em Criar.

O WordPress abrirá então um editor em branco.

captura de tela do editor em branco mostrando uma caixa de cabeçalho e uma imagem com a inscrição DreamHost logo abaixo

Escolha e configure os blocos que deseja no seu padrão de bloco e pressione Salvar no canto superior direito para finalizar.

Navegando no Diretório de Padrões

Se projetar seus próprios padrões parece um trabalho árduo, temos boas notícias para compartilhar.

Assim como os temas, o WordPress tem um diretório onde as pessoas compartilham padrões de blocos.

Captura de tela da página de Padrões

No momento da escrita, existem cerca de 2.000 desses padrões para escolher, e todos são completamente gratuitos.

Para pegar esses designs, vá até o Diretório de Padrões (disponível tanto no WordPress.org quanto no .com) e encontre algo que você goste. Toque em um design e então clique em Copiar. Isso transferirá todo o código fonte do padrão de bloco para a sua área de transferência.

screenshot clicado um passo adiante em uma das opções de padrão mostrando o botão de copiar padrão

Em seguida, volte ao post ou página em que está trabalhando e cole o código. Et voilà! Você tem um novo padrão brilhante.

Dica profissional: As imagens fornecidas nos padrões de blocos criados por outros designers são normalmente referenciadas de fontes externas. É sempre possível que esses links se quebrem, por isso, geralmente é uma melhor ideia usar suas próprias imagens (ou aquelas que você tem licença).

Adicione Padrões de Blocos da Sua Biblioteca

Se você criou e salvou alguns padrões, pode estar se perguntando como usá-los.

Para começar, abra um rascunho de post ou página, e toque no + no canto superior esquerdo para abrir o inseridor de blocos.

A princípio, serão oferecidos alguns blocos. Clique na aba Padrões no topo deste painel.

captura de tela de uma postagem colocando os padrões de blocos e alternando para padrões a partir de blocos no topo do menu

Aqui, você pode conferir todos os seus padrões de blocos salvos ou navegar por eles por categoria. Uma vez que encontrar o certo, clique na imagem de pré-visualização para adicioná-lo ao seu rascunho.

Lembre-se de que os padrões de blocos são apenas modelos, então você pode alterar o conteúdo uma vez que tenha inserido um padrão salvo.

Dica profissional: Certos plugins (como construtores de páginas) adicionam padrões pré-fabricados extras ao seu elenco. Spectra e JetBrains são dois que adicionam uma frota inteira de padrões quando ativados.

Como Gerenciar Seus Padrões de Bloco

Se você está utilizando um tema de blocos, você pode gerenciar os padrões que criou através do Editor de Site. O menu relevante está em Aparência > Editor > Padrões.

Na seção principal à direita, toque nos três pontos ao lado de qualquer padrão salvo para editar ou excluí-lo.

captura de tela da organização categórica dos padrões mostrando novamente os três pontos sob um modelo para clicar e encontrar as opções de editar e duplicar

Se você está usando um tema clássico do WordPress que não suporta completamente a edição completa do site, navegue até Aparência > Padrões para ver uma lista clássica dos seus padrões salvos. Aqui você pode editar, exportar ou deletá-los.

Precisa de Ajuda?

Como você pode ver, os padrões de blocos não são super técnicos. Eles são na verdade bastante fáceis de usar. 

Isso dito, ainda há algum trabalho de design envolvido. Se você não se sente confiante nessa área, podemos ajudar.

Nossa equipe de design especializada pode construir o site dos seus sonhos do zero, para que você não precise mover um dedo.

E com nosso serviço de Hospedagem Gerenciada do WordPress, configurar e manter um site atraente é mais fácil do que nunca. É super rápido e completamente confiável.

Cadastre-se hoje para experimentar você mesmo!

website management by DreamHost
Hospedagem WordPress

Otimize Seu Pequeno Negócio com o DreamPress

Nossas atualizações automáticas e defesas de segurança robustas retiram a gestão do servidor de suas mãos para que você possa focar em seus clientes.

Veja os Planos

Esta página contém links de afiliados. Isso significa que podemos ganhar uma comissão se você adquirir serviços através do nosso link sem custo adicional para você.