loading

09/05/2019

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

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

Generic placeholder image
Nicol√°s Gonz√°lez

Desenvolvedor & Web Designer
Freelance

+598 98 398 010

[email protected]

Artigos
Relacionados

Biblioteca
de mídia
Wordpress
O tesouro
do seu site

O Biblioteca de m√≠dia WordPress: o tesouro do seu site √© o local onde armazenamos os elementos multim√©dia e depois adicionamo-los ao nosso conte√ļdo. √Č ...

Plugins para
WordPress:
Escolha o melhor
em 2019.
(Gr√°tis)

Plugins para WordPress s√£o ferramentas fant√°sticas que nos permitem personalizar o nosso site. A possibilidade de ter estas aplica√ß√Ķes √© talvez a raz√£o pela qual ...

O projeto web da sua empresa. Por onde começar?

O projecto web da sua empresa traduz-se na criação de uma página web que lhe dá visibilidade, tráfego e o mais importante: clientes. Por onde ...