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.
Atualização editorial: esta notícia foi mantida como registro histórico sobre recursos para o Gutenberg. Se você quer aprender a usar o editor de blocos no WordPress hoje, veja nosso guia sobre o editor Gutenberg do WordPress. Se a sua dúvida é escolher entre Gutenberg, Elementor ou outros builders, veja também o guia de construtores de páginas para 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.
Templates e blocos prontos podem acelerar a criação de páginas, principalmente para quem ainda está se acostumando com o editor de blocos. Mesmo assim, antes de importar, copiar ou adaptar layouts prontos, vale entender como o Gutenberg organiza parágrafos, colunas, imagens, botões e padrões. Para esse passo a passo, leia: como usar o editor Gutenberg do WordPress.
Se a ideia é montar páginas mais elaboradas, a decisão não precisa ser automática entre “usar templates Gutenberg” ou “instalar um construtor visual”. O editor nativo pode resolver muitos casos simples, enquanto ferramentas como Elementor e outros builders podem fazer sentido em projetos que exigem mais controle visual. Veja a comparação completa em: construtores de páginas para 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.
Antes de adaptar templates, mexer em CSS ou alterar arquivos do tema, faça backup do site e teste as mudanças com cuidado. Em sites publicados, personalizações feitas diretamente no tema principal podem ser perdidas em atualizações. Para alterações mais avançadas, entenda quando usar um tema filho WordPress.
Templates ajudam no visual, mas não substituem planejamento de conteúdo. Para uma página ter melhor chance de desempenho em busca orgânica, revise título, subtítulos, intenção de busca, links internos, velocidade e experiência mobile. Se esse for o objetivo, veja o guia de SEO para WordPress.
Para continuar aprendendo com fontes confiáveis, veja também nossa lista de referências sobre WordPress em português.
