Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Guia passo a passo para o Gutenberg Builder para WordPress

Você está em:

Guia passo a passo para o Gutenberg Builder para WordPress
Guia passo a passo para o Gutenberg Builder para WordPress

Acho que você vai concordar quando eu disser: todo esse negócio de Gutenberg é confuso.

Em primeiro lugar, o novo editor de blocos é difícil de usar ou o quê? Quero dizer, você não sabe para onde foram todas as suas ferramentas favoritas. Agora, você provavelmente demorou mais para criar um post, certo?

Talvez adicionar um link (afiliado ou não) tenha lhe dado uma grande curva e você se sentiu desapontado. Talvez você tenha tido problemas para adicionar uma imagem ao lado do seu texto.

Talvez você tenha tentado adicionar várias colunas e as coisas não funcionaram conforme o esperado. Se esse não for o caso, talvez você não consiga adicionar seus arquivos PDF facilmente ou veja a temida mensagem “Falha na atualização”.

Bem, não se preocupe mais; Eu estava na sua posição exata não muito tempo atrás, mas agora acho Gutenberg uma emoção de usar. Há uma curva de aprendizado, sim, mas no final do post de hoje, você pensará em Gutenberg de maneira diferente.

O que é o Editor Gutenberg?

editor wordpress gutenberg

Você está olhando para o Gutenberg, o editor de blocos padrão do WordPress

Se você estiver usando o WordPress 5.0 e superior, você deve ter se deparado com o novo e brilhante editor do WordPress, conhecido como Gutenberg.

E assim como muitos outros usuários, você quer usar o editor revolucionário, mas está hesitante porque Gutenberg é complicado .

Ou talvez quando você conheceu Gutenberg, várias coisas não funcionaram. Afinal, os desenvolvedores estavam e ainda estão fazendo temas e plugins compatíveis com o editor de blocos.

Então, você rapidamente reverteu para o Editor Clássico , que, aliás, está tudo bem para nós. Lembre-se de que o WordPress não suportará o Editor Clássico após 2022. Além disso, você está perdendo todas as vantagens extras que o Gutenberg oferece.

Em termos de funcionalidade, o Classic Editor e o Gutenberg fazem a mesma coisa; você sabe, ambas as ferramentas ajudam você a criar conteúdo sem codificação.

No entanto, estamos tão acostumados com o antigo editor WYSIWYG que achamos a adaptação à nova interface do usuário do Gutenberg um pouco estranha, se não totalmente confusa. Pelo menos é o que eu acho.

Mas, o que exatamente é Gutenberg?

Gutenberg é o novo editor padrão do WordPress. É diferente do editor visual/texto tradicional; Gutenberg usa blocos de conteúdo como muitos construtores de páginas modernos.

Ele vem com recursos mais intuitivos do que o Classic Editor, o que significa que você pode criar conteúdo de mídia avançada em tempo real. Agora, você pode criar layouts extraordinários rapidamente, esteja trabalhando com postagens ou páginas do WordPress.

E com alguns complementos, o Gutenberg pode competir favoravelmente com os construtores de páginas do WordPress estabelecidos , como Brizy, Elementor e Divi.

A única desvantagem é que os construtores de páginas geralmente oferecem mais recursos porque são principalmente construtores de páginas! Ao mesmo tempo, Gutenberg ainda é bastante jovem, e você só pode esperar que o editor de blocos cresça aos trancos e barrancos.

No post de hoje, vamos nos divertir criando um post WordPress com o editor Gutenberg. Meu objetivo é cobrir todos os pequenos detalhes e recursos para que você possa usar o Gutenberg para criar conteúdo como os profissionais.

Você está pronto? Se sim, vamos criar esse post do WordPress.

Como criar um post WordPress com Gutenberg

Se você administra um site WordPress, provavelmente cria mais posts do que páginas. Na seção a seguir, criamos um post WordPress em Gutenberg do zero. Espero que você se divirta tanto quanto eu ao testar o Gutenberg.

Isso fora do caminho, navegue até  Posts> Adicionar novo , conforme destacamos na captura de tela abaixo.

criando um novo post em gutenberg

Fazer isso leva você diretamente ao editor Gutenberg mostrado abaixo.

editor wordpress gutenberg

Bem legal, hein? Agora, vamos arregaçar as mangas e começar a trabalhar.

Adicionando um título

adicionando um novo título em gutenberg

Você não pode escrever um post sem um título sólido. O bom é que o Gutenberg torna incrivelmente fácil adicionar um título.

O primeiro bloco que você vê é o Título na parte superior do documento conforme detalhamos na imagem acima. Para criar um título para sua postagem, digite dentro do bloco. Simples como A, B, C.

Precisa editar o link permanente? Você pode fazer isso facilmente no  bloco de título clicando no  botão Editar , conforme mostrado abaixo.

editar post link permanente em gutenberg

Depois de adicionar seu título, pressione a  tecla ENTER para iniciar uma nova linha. Ah, sim, o Gutenberg preserva a navegação nativa que você adorava no editor clássico do WordPress.

Adicionando um novo parágrafo

novo bloco de parágrafo em gutenberg

Pressionar a  tecla ENTER cria um novo bloco de parágrafo  , como mostrado acima. Antes de digitar qualquer texto, o bloco apresenta algumas opções. Veja a imagem numerada abaixo para mais detalhes.

novas opções de bloco de parágrafo gutenberg

Notas. Você pode:

  1. Converta o novo bloco de parágrafo em qualquer outro bloco, por exemplo, imagem, título, capa, galeria, WooCommerce, formulário, etc.
  2. Use o atalho para alterar o bloco de parágrafo em um bloco de imagem
  3. Altere o bloco de parágrafo em um bloco de título, ou seja, H2, H3 e H4
  4. Transforme o bloco de parágrafo em um bloco de imagem de capa

Para fins de ilustração, vou reservar o primeiro parágrafo para a introdução do post. Depois de adicionar algum texto, uma barra de ferramentas de formatação aparece como mostrado abaixo.

barra de ferramentas de formatação de parágrafo gutenberg

Graças à barra de ferramentas de formatação, você pode:

  • Transforme o parágrafo em um versículo, citação, título, lista, código e texto pré-formatado
  • Negrito , Itálico ,tachado, e sublinhe o conteúdo
  • Alinhar texto à esquerda, direita, centralizar e justificar
  • Adicionar um link que também pode ser aberto em uma nova guia
  • Insira uma imagem embutida (sim, ela existe!)
  • Ocultar configurações de bloqueio
  • Duplique o bloco
  • Insira um bloco antes ou depois do bloco atual (no nosso caso, esse é o primeiro parágrafo, então não estamos adicionando nada antes, apenas depois.) Você pode adicionar um bloco de imagem de capa antes do primeiro parágrafo, se desejar, porque parece Boa
  • Edite o bloco como HTML
  • Adicione o bloco atual a blocos reutilizáveis para poder usá-lo em outras postagens
  • Remova o bloco completamente

Você pode personalizar ainda mais o bloco de parágrafo com as opções disponíveis na guia Bloco encontrada no menu da barra lateral, conforme mostrado abaixo.

opções da barra lateral do gutenberg para bloco de parágrafo

Algumas observações sobre a imagem acima:

  1. Escolha a  guia Bloquear aqui para ver todas as opções e configurações de bloqueio
  2. Selecione o tamanho da fonte e ative o Drop Cap aqui
  3. Adicione cor de fundo ao seu parágrafo. Eu configurei para azul para fins de ilustração. Você também pode personalizar a cor do texto. Em ambos os casos, você pode adicionar cores personalizadas ilimitadas
  4. Você pode adicionar uma classe CSS personalizada aqui, o que significa que você pode adicionar estilos CSS adicionais ao seu bloco
  5. O fundo azul e o Drop Cap já aplicados no editor Gutenberg

A guia Documento na barra lateral

Há outra guia no menu da barra lateral; guia  Documento como mostrado abaixo.

guia do documento da barra lateral do bloco de parágrafo

Aqui, as notas para a imagem acima:

  1. Clique aqui para alternar para a  guia Documento
  2. Aqui você pode agendar uma postagem, definir a visibilidade como  Privada ou  Pública , definir uma postagem para  o status de Revisão Pendente , escolher o formato da postagem e criar uma postagem fixa
  3. A seção permite que você edite seu link permanente
  4. Você pode selecionar ou criar novas categorias aqui
  5. Adicione tags à sua postagem
  6. Definir imagem em destaque
  7. Criar um trecho manual
  8. Permitir comentários, pingbacks e trackbacks

Como você pode ver, você tem muitas opções para criar um bloco de parágrafo (e todo o post) da maneira que desejar. A propósito, blocos diferentes vêm com configurações diferentes, como aprenderemos em um minuto.

Após o primeiro parágrafo, pressione a  tecla ENTER  novamente para criar uma nova linha (ou bloco de parágrafo). Agora, vamos adicionar uma imagem abaixo do primeiro parágrafo.

Adicionando imagens no Gutenberg

adicionando uma nova imagem em gutenberg

Dizem que uma imagem fala mais que mil palavras, e um post de blog sem imagens é, bem, monótono. Para adicionar uma imagem em sua postagem do WordPress usando o Gutenberg, você tem algumas opções.

Quando você pressionou a  tecla ENTER alguns momentos atrás, você acionou um novo bloco de parágrafo. Visto que o Gutenberg é intuitivo, você pode adicionar uma imagem clicando nos ícones de mais (+), imagem ou capa conforme destacamos na imagem abaixo.

adicionando uma nova imagem no editor gutenberg

Algumas notas:

  1. Você pode adicionar uma imagem através dos ícones de mais (+)
  2. Aqui, você pode adicionar uma imagem facilmente
  3. Esta opção permite que você adicione uma imagem de capa (geralmente são maiores que outras fotos. Além disso, você pode adicionar texto nas imagens de capa, BTW)

Vá em frente e clique em qualquer um dos ícones de mais (+). Em seguida, clique na guia Imagem , conforme mostrado abaixo.

adicionando imagens em gutenberg

Clicar na  guia  Imagem carrega o bloco Imagem mostrado na captura de tela abaixo.

bloco de imagem de gutenberg

O  bloco Imagem permite que você carregue uma imagem ou adicione uma de um URL ou da biblioteca de mídia. No processo, você pode adicionar texto alternativo (importante para SEO), legenda e descrição por meio das configurações da tela de mídia ou da barra lateral Bloquear , conforme mostrado nas imagens a seguir.

As configurações de mídia usuais…

configurações de mídia wordpress

…e as  configurações do bloco de imagem .

configurações do bloco de imagem gutenberg

Você está aprendendo algo aqui hoje? Espero que sim. Vamos continuar.

Depois de adicionar sua imagem, Gutenberg adiciona um novo bloco de parágrafo logo abaixo dela. Você pode adicionar o que quiser, mas para fins de ilustração, adicionei um texto e depois um botão abaixo dele.

Como adicionar arquivos para download, por exemplo, PDF, imagens, vídeos, etc.

O Gutenberg torna incrivelmente fácil adicionar arquivos para download ao seu post ou página do WordPress.

Em um novo  bloco de parágrafo , clique no ícone de mais (+), navegue até  Blocos Comuns e clique na  guia Arquivo , conforme destacamos abaixo.

adicionando arquivos para download em gutenberg

Fazê-lo vai lançar o seguinte bloco:

bloco de arquivo gutenberg

No  bloco Arquivo , você pode carregar um novo arquivo ou adicionar um da sua biblioteca de mídia. Depois de adicionar seu arquivo, o Gutenberg adiciona automaticamente um  botão de download fofo , como visto na imagem abaixo.

adicionando arquivo em gutenberg

Você pode brincar com as opções. Por exemplo, você pode editar/excluir o título “ Free Gutenberg PDF Checklist ” bem como o  botão Download . Você pode adicionar uma classe CSS ao bloco e estilizá-lo da maneira que desejar.

Adicionando uma cotação em Gutenberg

Em seguida, vamos adicionar uma citação porque eles são charmosos, cativantes e ajudam você a levar o ponto para casa. Em uma nova linha, clique no sinal de mais (+), navegue até Common Blocks e clique na  guia Quote , conforme mostrado abaixo.

adicionando citações em gutenberg

Fazer isso adiciona o  bloco Citação em sua postagem, conforme destacamos na captura de tela abaixo.

configurações do bloco de citação gutenberg

Observe as configurações do bloco de cotação na barra lateral direita acima?

Para adicionar sua cotação, digite dentro do bloco. Aqui está o meu resultado.

citação de gutenberg

Parece incrível, certo?

Adicionando Incorporações de Mídia no Gutenberg

O Gutenberg vem com vários blocos para incorporar vídeos e outras mídias de mais de 30 sites, como YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare e assim por diante.

Para incorporar conteúdo, clique no ícone de adição (+), navegue até Incorporações e escolha o site. Por exemplo, eu queria o YouTube, como mostrado abaixo.

incorporação do youtube de gutenberg

Em seguida, copie e cole o URL do vídeo do YouTube e clique no botão Incorporar , conforme mostrado na imagem abaixo.

bloco de incorporação do youtube gutenberg

Assim que você pressiona o  botão Incorporar , o Gutenberg converte o link em um vídeo automaticamente, conforme destacamos abaixo.

vídeo do youtube incorporado em gutenberg

Navegação suave até o fim. Agora, vamos adicionar um botão autônomo que é perfeito para criar uma chamada para ação (CTA).

Como adicionar um botão em Gutenberg

Você não deve ter dificuldade em adicionar blocos neste momento. Basta clicar no sinal de mais (+) e escolher o seu bloco. Não pode ficar mais fácil do que isso.

Então, como adicionamos um botão?

Em uma nova linha (ou bloco), clique no ícone de adição (+), navegue até  Layout Elements e clique na  guia Button conforme mostrado abaixo.

adicionando botões no editor gutenberg

Fazer isso leva você ao  bloco Button , conforme detalhamos abaixo.

adicionando botões no editor gutenberg

Como você pode ver na imagem acima, você pode editar o texto do botão e adicionar um link. Além disso, você pode personalizar o botão através do menu da barra lateral à direita da tela.

Depois de alguns cliques, aqui está o que eu tenho.

exemplo de botão de gutenberg

A propósito, se você usar combinações de cores difíceis de ler em seus botões, o Gutenberg informará prontamente . Que legal?

Como adicionar colunas no Gutenberg

Com um lindo botão no lugar, vamos adicionar algumas colunas. Vou adicionar duas colunas, então siga com atenção.

Aqui está o que fazer. Clique no ícone de mais (+), navegue até  Layout Elements e clique na guia Columns como visto na imagem abaixo.

editor de guia de colunas de gutenberg

Gutenberg adiciona duas colunas por padrão. Veja a imagem abaixo e lembre-se, eu já adicionei conteúdo nas colunas.

colunas de gutenberg no editor wordpress

O que me pega:

frontend de colunas de gutenberg

Nada mal para alguns segundos de trabalho. Mas talvez você não queira criar colunas. Talvez você queira exibir uma imagem ao lado de algum texto.

Existe algum bloqueio para isso? Sim existe!

Como adicionar uma imagem ao lado do texto em Gutenberg

Você deseja adicionar uma imagem ao lado de algum texto? Se sim, você vai adorar a seção a seguir.

Como de costume, clique no ícone de adição (+), navegue até  Elementos de layout e clique em  Mídia e texto conforme mostrado abaixo.

bloco de mídia e texto gutenberg

Você deverá ver o  bloco Mídia e texto , conforme mostrado abaixo.

mídia e bloco de texto em gutenberg

Em seguida, carregue sua imagem/vídeo/mídia ou adicione um da biblioteca de mídia. Depois disso, adicione seu texto ao lado da mídia, conforme mostrado na imagem abaixo.

Eu brinquei com o bloco de mídia e texto e cheguei ao seguinte. Lembre-se; Eu consegui apertar um botão lá também

mídia e bloco de texto em plena ação

Ah, esse é o back-end! Deixe-me mostrar-lhe o front-end. Aqui:

bloco de texto de mídia em gutenberg

Parece muito profissional, certo? Você certamente pode imaginar o quanto pode alcançar com o editor Gutenberg.

Blocos Gutenberg de terceiros

Os desenvolvedores do WordPress estão interessados em tornar os temas e plugins compatíveis com o editor Gutenberg. Alguns exemplos incluem WooCommerce, Jetpack e Yoast SEO.

Por exemplo, você pode adicionar blocos WooCommerce em sua postagem do WordPress. Em primeiro lugar, você deve instalar e ativar o WooCommerce.

Em seguida, em uma nova linha, clique no ícone de mais (+), navegue até  WooCommerce e escolha o bloco que desejar, conforme mostrado abaixo.

blocos woocommerce gutenberg

Você sabe o que isso significa? Isso significa que você pode criar rich media e ótimas postagens e páginas em questão de minutos.

Outros blocos notáveis

Já estamos com mais de 2.000 palavras, e se continuarmos assim, vamos acabar escrevendo um eBook inteiro. Minha oração é que agora você possa usar o Gutenberg sem soluços.

Isso fora do caminho, aqui está uma lista dos outros blocos disponíveis.

  • Widgets – Você pode adicionar conteúdo de seus widgets em postagens de blog
  • Shortcodes – Você ainda pode usar shortcodes nativos do WordPress
  • Clássico – Um ótimo bloco que mantém seu conteúdo antigo
  • Mais – O bloco era anteriormente conhecido como a  tag Leia mais
  • Quebra de página, separadores, espaçadores
  • HTML personalizado, pullquote, tabela
  • Galeria  e áudio/vídeo HTML5
  • E muito mais dependendo dos temas e plugins que você usa

A parte: Criar uma página do WordPress é semelhante a criar um post, exceto por algumas diferenças de minutos, então não vamos nos aprofundar nisso hoje.

Hacks rápidos do Gutenberg e atalhos de teclado

Gutenberg vem com alguns hacks e atalhos de teclado que facilitam ainda mais. Por exemplo, se você digitar “/” dentro de um bloco de parágrafo, aparecerá uma lista de blocos.

Você pode até selecionar um bloco específico digitando o título do bloco após a barra invertida (/), por exemplo, digitar “/image” traz o bloco de imagem entre outros blocos relacionados à imagem. Veja a imagem abaixo para mais detalhes.

atalho de reação de gutenberg

Atalhos de teclado: Para visualizar todos os atalhos disponíveis, pressione  SHIFT + ALT + H no Windows e OPT + CTRL + H no Mac.

Na parte superior do documento, você pode ver a estrutura do documento clicando no ícone (i), conforme mostrado abaixo.

estrutura do documento de gutenberg

Agradável. Extraordinariamente suave.

Ah, e a propósito, o erro “Falha na atualização” geralmente acontece devido a uma conexão de internet instável


Cá entre nós, Gutenberg é um editor de conteúdo fantástico. Desde que você esteja disposto a aprender as cordas; você pode colher muito do editor WordPress do futuro.

Gutenberg ainda é relativamente jovem, e você pode esperar que cresça em termos de usabilidade e funcionalidade. Será uma força séria a ser enfrentada nos próximos dias. É melhor os criadores de páginas ficarem atentos, ou eles ficarão sem negócios

Esperamos que nosso guia passo a passo para o editor Gutenberg tenha ajudado você a colocar as coisas em perspectiva. Acreditamos que agora você pode usar o editor de blocos para criar conteúdo como um profissional.

Por favor, compartilhe suas preocupações, pensamentos e perguntas na seção de comentários abaixo.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.