Lançada biblioteca gratuita com 100 modelos de blocos prontos para o Gutenberg

O portal de notícias e recursos Gutenberg Hub lançou uma biblioteca gratuita com 100 modelos de seções de blocos prontos para uso no novo editor Gutenberg do WordPress.

O objetivo do projeto é ajudar os usuários a criar páginas com layouts complexos de forma simples.

A melhor parte é que você não precisa de nenhum plugin extra do WordPress para importar esses modelos. Basta procurar o modelo desejado, copiar e colar o código no Gutenberg, simples assim!

Se você ainda não sabe o que é o Gutenberg veja no nosso artigo sobre o novo editor do WordPress.

Modelos de seção para o Gutenberg

Os modelos da biblioteca são essencialmente seções de uma página. Os usuários podem importar várias seções para criar uma variedade de layouts complexos.

Os modelos foram divididos em 12 categorias com os padrões mais populares atualmente encontrados em sites modernos na web:

  • Hero (a principal ou primeira seção de uma página)
  • Depoimentos
  • Equipe
  • Estatísticas
  • Preços
  • Logos
  • Galeria
  • Lista de diferenciais e benefícios do negócio ou produto
  • Perguntas e Respostas
  • Conteúdo
  • Contatos
  • Cartões (cards)

Segundo Kamal, criador do projeto e fundador do Gutenberg Hub, ele está construindo um sistema para que outras pessoas possam adicionar e compartilhar seus modelos personalizados na biblioteca.

O objetivo é que o projeto seja executado principalmente pela comunidade. A idéia é semelhante ao site da comunidade ShareABlock, mas com foco em modelos.

Alguns modelos usam CSS personalizado

Segundo o criador do projeto ele tentou não usar ou usar minimamente CSS personalizado para os estilos e tipografia nos modelos.

Qualquer que seja o tema que você esteja usando os modelos adaptarão a maior parte da tipografia e dos estilos ao tema. Isso significa que você pode visualizar um design um pouco diferente do apresentado na biblioteca.

Porém fique atento porque alguns dos templates têm CSS personalizados para lidar com certos aspectos do design, que também são copiados e colados de forma simples.

Kamal recomenda o plugin Blocks CSS da ThemeIsle, que permite aos usuários adicionar CSS diretamente no editor de blocos.

A outra opção é adicionar o código CSS por meio do personalizador do tema no WordPress (Customizer) ou direto no arquivo style.css do seu tema (preferencialmente use um tema filho).

Alguns templates podem precisar de plugins de terceiros

Embora no lançamento do projeto o Kamal não tenha usado nenhum bloco ou plugin de terceiros para os 100 modelos criados, os templates da seção de contato exigem um plugin de formulário que ele mesmo criou, o Gutenberg Forms, porém com um pouco de alteração você pode substituir pelo seu plugin preferido de formulário.

Pode ser que futuramente surja a necessidade de plugins de terceiros, já que o repositório será aberto para colaboração da comunidade.

Portanto fique atento na página do template pois eles irão informar se for necessário algum plugin ou bloco extra.

Como importar um modelo no Gutenberg

Agora veja como importar os templates da biblioteca diretamente no seu site. É realmente muito simples, veja o passo a passo abaixo:

1º Escolha um template na biblioteca

Acesse a biblioteca de templates na página do projeto em https://templates.gutenberghub.com/ e clique no template escolhido.

2º Copie o código do template escolhido

Na página do template que você escolheu clique no botão Copy Code.

3º Cole o código no editor Gutenberg e pronto!

Agora basta simplesmente você colar (Ctrl + v) o código diretamente no editor de blocos do Gutenberg e pronto! O template irá aparecer prontinho para você.

Agora escolha, copie e cole quantos templates você quiser da biblioteca para criar página inteiras com lindos layouts.

Compartilhe esse post com seus amigos que possam interessar e ajude-os a criar sites incríveis!

Rolar para cima