Gutenberg e os seus blocos de design. (com exemplos)

Gutenberg é o novo editor do WordPress. Ele foi lançado junto com o WordPress versão 5.0 e a verdade é que ele tem ferramentas muito importantes para o design de nossos conteúdos.

Em um artigo anterior, dissemos que este produto WordPress foi criado em colaboração com Yoast SEO, o que nos permite inferir as vantagens que ele traz para o posicionamento do nosso site.

Apesar de ainda carecer de algumas funcionalidades, a verdade é que introduziu muitos elementos que facilitam o nosso trabalho.

Vamos dar uma olhada nos elementos de design do Gutenberg:

• Espaçador
• Mídia e texto
• Colunas
• Mais
• Botão
• Separador
• Quebra de página

1. Bloco espaçador

Sua função é deixar um espaço em branco no lugar que você indicar. Por exemplo, entre títulos e parágrafos, entre parágrafo e parágrafo, antes e depois de imagens, ou em qualquer outro lugar do texto de acordo com o desenho que você deseja imprimir.

Dá-nos a capacidade de variar o seu tamanho movendo-o do ponto azul. E este bloco torna-se reutilizável, o que é, sem dúvida, uma grande vantagem.

Este não é exatamente um dos blocos mais funcionais. Na minha opinião, isso torna algo muito complexo que deve ser alcançado com um “enter and ready”. Além disso, por vezes mantém o espaçador que vem por defeito, mesmo que variemos o seu tamanho.

2. Bloco de colunas

Cães

Cuidado especial. Atenção às 24 horas.

Gatos

Cuidado especial. Atenção às 24 horas.

Aves

Cuidado especial. Atenção às 24 horas.

Talvez seja um pouco difícil de manusear no início, mas com a prática torna-se muito fácil de usar e os resultados são muito bons.

3. Bloco de mídia e texto

Este bloco permite-nos colocar um ficheiro multimédia que pode ser um vídeo ou uma imagem. Nós também podemos adicionar texto explicativo e editá-lo para torná-lo mais atraente.

Da mesma forma que no bloco de colunas, é muito fácil aplicar diferentes dimensões. Contém as mesmas opções que os outros elementos.

Podemos alterar o tamanho da fonte e ajustar a cor do fundo e do texto na barra lateral. Também é possível acrescentar links no texto, o que é muito vantajoso para a promoção de certos produtos.

Estes são alguns exemplos:

Agência de viagens

Paris no Outono. Uma experiência inesquecível.

Roma e suas maravilhas, ideal para suas férias.

Real State

A casa dos seus sonhos em Dreams Real Estate. Visite-nos.

Projecto de residências no spa La Costa. Restam poucas unidades.

4. Bloco Mais

O bloco Read More é aquele que marca o limite entre o conteúdo a ser exibido e aquele que requer um clique do usuário para ser exibido. É muito útil se a sua estratégia de conteúdo tiver considerado este ponto.

5. Bloco de botão

Este é um add-on que não estava no editor anterior. Antes de termos de inserir uma imagem e ligá-la, tudo isto está agora resolvido com esta ferramenta. Com a possibilidade de inserir o botão temos tarefas muito mais fáceis.

Basta inserir o texto e adicionar o link na opção que aparece e pronto. Para modificar a cor de fundo e também a cor do texto ta oferece um painel com vários tons. E até oferece sugestões de combinações.

Embora possamos mudar o estilo que vem por defeito, as opções são escassas. No entanto, ainda é um recurso muito útil.

6. Bloco separador

Esta é uma funcionalidade que nos permite incorporar uma linha ao nosso texto, por exemplo:

7. Bloco de quebra de página

Este recurso também é interessante porque nos permite incluir a paginação da nossa entrada. Portanto, indicamos quando dividir o texto e o leitor a continuar deve clicar no número da próxima página.

Os exemplos acima são apenas uma amostra do que podemos fazer com o editor do Gutenberg. Além disso, se aplicarmos um pouco de criatividade e usá-la bem, ela pode se tornar uma ferramenta muito importante para destacar suas publicações.

Anime-se e verá os resultados.

Imagens: Freepik, Pixabay

Tradução: Deepl