Rua Alfredo Vaz Medeiros 3, Vila Gomes Cardim, CEP 03335-005, SP, Brasil
+34 698 34 62 29 - Espanha
suporte@seodeverdade.pro

# 4.5. Editor Gutenberg disposição em blocos

O que ninguém te ensina!

Editor gutemberg

O novo editor do wordpress Gutemberg está dando de falar, muitas pessoas têm dificuldades de utilizar e preferem o editor clássico, por isso, decidi criar essa aula para apresentar um tutorial de como usar gutemberg de forma simples e rápida.

O editor Gutemberg tem uma disposição em blocos, talvez por isso as pessoas têm dificuldade de usar. Mas isso vai ficar pra trás blz.

Como utilizar o editor Gutemberg?

Para acessar o gutemberg você pode ir em adicionar um post ou uma página. Como eu disse tudo agora está dividido em blocos, onde nós temos o título está dividido em bloco, os parágrafos estão em blocos, as imagens, ou qualquer elemento que você deseja adicionar no seu post ou página.

Clicando no sinal + você pode adicionar qualquer bloco que você desejar, imagem, lista, títulos, galeria, áudio, vídeo e muito mais. 

Essa disposição em bloco melhorou muito para navegação no celular, gera conteúdos compatíveis e responsivos com celular e isso facilita muito na navegação através de dispositivos móveis.

Se você escrever o texto do artigo no gutemberg tem algumas opcoes boas como: se selecionar um texto aparece a opções de personalizar formatação do texto o que é importante também a nível de otimização de SEO e experiência do usuário então se selecionar uma palavra ou frase você pode pôr e tirar Itálico, negrito, pode colocar link, centralizar o texto, colocar o texto com outra cor e mais.

Clicando nos 3 pontinhos aí igual na imagem acima nós temos a opção de apresentar ou esconde os blocos que aparecem do lado direito da página,cada bloco tem as suas configurações apresentadas no lado direito onde você pode alterar o tamanho da fonte do texto do bloco, podemos configurar a cor do fundo do bloco e mudar a cor do texto.

\

Então, para adicionar outro bloco é bem simples, basta apertar o Enter no teclado que ele já cria automaticamente outro bloco. Os blocos basicamente são parágrafos tratados de maneira separada uns dos outros.

Para colocar um título ou um subtópico que também chamamos de H2, basta dar um enter e clicar em título selecionar o H2, H3, H4, H5, H6 independentemente do título que você deseja adicionar dentro do post ou página.

Com o editor gutemberg você pode mover um bloco para cima ou para baixo com muita facilidade basta arrastar para onde deseja mover, pode mover, imagem, vídeo, parágrafos para cima ou para baixo dependendo do local que você deseja que esteja.

editor de blocos

Podemos adicionar facilmente um bloco com galeria de imagem igual na imagem acima, podem ser várias imagens ele organiza muito bem uma do lado da outra o que é muito bom para experiência do usuário. Do lado direito pode configurar o recorte de imagem para que todas as imagens fiquem no mesmo tamanho e podemos colocar links nas imagens.

Com o gutemberg facilmente podemos duplicar um bloco, apagar um bloco, agrupar blocos e mais, bastando clicar nos 3 pontinhos que aparecem quando você seleciona um bloco.

Como colocar um vídeo no post ou página usando editor gutemberg?

Para subir um vídeo com editor gutemberg basta seguir os passos que falamos na última aula: Multimídia: Gestão de vídeos e imagens.

Resumindo basta copiar o código embed do vídeo no youtube que você deseja que apareça em um post ou página acessar esse post, localizar o local onde deseja que apareça, clicar em HTML e colar o código lá. 

Se você estiver usando o editor gutemberg vai no canto superior direito na parte de edição ou criação de post ou página tem 3 pontinhos, clica neles vai abrir uma aba com opção editor visual e editor de código. Clique no editor de código e coloque o código embed que você pegou do vídeo no youtube igual na imagem abaixo.

editor de código html no gutemberg

Também temos a opção de incorporar com url que é mais fácil e rápido.

Como inserir uma tabela post ou página?

Assim como é fácil inserir imagens, vídeos ou qualquer elemento no post ou página o mesmo acontece com tabelas, então para inserir uma tabela, basta clicar no sinal de + para adicionar novo bloco e clicar no sinal + que está no canto superior esquerdo no editor e pesquisar por tabela, clicar na mesma, selecionar a quantidade de colunas e quantidades de linhas depois só só clicar em criar tabela.

Criar tabela com gutemberg

Lembre: sempre que clicar em qualquer bloco aparece opção de edição do lado direito da página, onde você pode editar o que deseja conforme as opções que são apresentadas.

Com esse editor nós temos muito mais flexibilidade para criar conteúdos de qualidade rapidamente.

Podemos colocar qualquer elemento que desejamos, clicando no sinal + no canto superior esquerdo, todos os elementos que aparecem aí são para ser usados desde, parágrafo, tabela, imagem, titulo, lista, citação, código, verso, galeria de imagem, áudio, cobertura, arquivo, mídia e texto, vídeos, botoes, colunas, separador, quebra de página, leia mais, shortcode, calendário, galeria, widget, rss, categorias, post mais recente, nuvens de tag pesquisa, icon redes sociais e muito mais, se tiver o plugin yoast instalado e ativado vai acrescentar mais opções nesse local.

Com as duas setas do canto superior esquerdo no editor você pode desfazer ou refazer uma ação.

Icon de fazer e desfazer no gutemberg

Clicando em um documento tem certas opções que nós podemos alterar como: link do artigo ou página, colocar imagem destacada, permitir ou não os comentários.

aba documentos do gutemberg

Basicamente é isso, essas são as opções que nós temos para desenvolver os conteúdos mais pra frente quando estivermos a desenvolver os conteúdos já trabalhando com tudo isso você já vão assimilar muito mais fácil e muito melhor.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *