#escola612 – Como usar o Gutenberg, o novo editor de texto do WordPress – Aula 4

Na aula anterior da #escola612 sobre o Gutenberg, o novo editor de texto do WordPress, ensinamos como adicionar uma imagem no corpo do post. Agora preparem-se, alunos: vamos levar a composição de posts para outro patamar com as novas formas de adicionar imagens no corpo de um post ou página do WordPress.

Se você perdeu as outras aulas da nossa #escola612 Gutenberg, eis os links:

Aula 1
Aula 2
Aula 3

Lembrando como sempre, porque nunca custa lembrar, o editor está disponível para download neste link, que deve ser empregado em sites de teste.

Muito bem, viram as demais aulas? Então estejam prontos porque o que vem por aí você vai adorar. Principalmente você que trabalha com blogs e quer algo mais dinâmico e incrível para levar ao ar nos seus posts.

Cover Image

Para entender melhor como funciona a Cover Image (imagem de capa) e porquê ela pode ser adicionada no corpo do post, vamos à função.

A caixa de diálogo é idêntica à de imagem, como mostramos acima.

 

Nem precisamos explicar como adicionar a imagem; é do mesmo jeito de como adicionar imagens conforme explicamos acima.

Porém há uma diferença: o gerenciador de mídia abre direto; ele sequer aparece na primeira opção.

 

Porém, caros alunos, é aí que está a graça da função! Veja que eu coloquei uma imagem quadrada, e ela vai aparecer escurecida e cortada. E mais: eu posso aplicar legenda. Melhor que isso: ela vai aparecer sobre a imagem.

 

Preste atenção nas caixas de diálogo: acima está a caixa de diálogo do posicionamento da imagem (esquerda, centro e direita), e a de posicionamento do texto dentro da imagem (esquerda, centro e direita). O lápis é por onde você edita ou substitui a imagem.

Clicando na imagem, você encontra ao lado uma caixa de opções avançadas, onde você pode fixar a imagem de fundo, controlar a luz da imagem – mais clara ou mais escura), bem como o alinhamento do texto. Há ainda um espaço para CSS adicional.

 

Veja como fica no corpo do post:

 

Galeria

Agora vamos entender como funciona a galeria no Gutenberg. A caixa de diálogo, como sempre, é idêntica às demais já exibidas.

 

Assim como na função de imagem simples, o botão de “Upload” da função Galeria abre direto na caixa de diálogo do computador – e não na biblioteca de mídia. Selecionei 3 imagens para compor a galeria que quero construir – você pode selecionar quantas você quiser.

 

Em cada imagem você pode adicionar uma legenda. Na caixa de opções avançadas – que se abre quando você clica sobre uma das imagens da galeria – você encontra as seguintes funções: número de colunas, cortar imagens, ou determinar para onde vão os links. Selecione “None” se você não quiser linkar as imagens da galeria.

 

O resultado ficará assim:

 

Ainda tem mais recursos para serem mostrados nos próximos posts. Tem muito mais possibilidades para você arrebentar nesse novo editor de texto. Treinando, a gente ensina e compartilha.

Compartilhe este post