Guia passo a passo do Gutenberg Builder for WordPress

Guia passo a passo do Gutenberg Builder for WordPress

Acho que você concorda quando digo: 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 levou mais tempo para criar uma postagem, certo?

Talvez a adição de um link (afiliado ou não) tenha lhe causado uma curva e você se decepcionou. 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 não for esse o caso, talvez você não possa adicionar seus arquivos PDF facilmente ou veja a temida mensagem “Falha na atualização” várias vezes.

Bem, não se preocupe mais; Eu estava na sua posição exata há pouco tempo, mas agora acho Gutenberg uma emoção de usar. Existe uma curva de aprendizado, sim, mas até o final da postagem de hoje, você pensará em Gutenberg de maneira diferente.

O que é o Editor de Gutenberg?

editor wordpress gutenberg

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

Se você usa o WordPress 5.0 e superior, deve encontrar o novo e brilhante editor do WordPress, conhecido como Gutenberg.

E, assim como muitos outros usuários, você deseja usar o editor revolucionário, mas hesita 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 voltou ao Editor clássico, que, BTW, está bem conosco. Lembre-se de que o WordPress não oferece suporte ao Editor clássico depois de 2022. Além disso, você está perdendo todos os presentes extras que o Gutenberg oferece.

Em termos de funcionalidade, o Editor Clássico e Gutenberg fazem a mesma coisa; as duas ferramentas ajudam você a criar conteúdo sem codificar.

No entanto, estamos tão acostumados com o antigo editor WYSIWYG que achamos que a adaptação à nova interface 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 tradicional editor visual / de texto; Gutenberg usa blocos de conteúdo como muitos criadores de páginas modernos.

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

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

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

Na postagem de hoje, teremos um momento emocionante criando uma postagem do WordPress com o editor Gutenberg. O meu objetivo é cobrir todos os mínimos detalhes e recursos para que você possa usar o Gutenberg para criar conteúdo como os profissionais.

Você está pronto? Nesse caso, vamos criar essa postagem do WordPress.

Como criar uma publicação no WordPress com Gutenberg

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

Fora do caminho, navegue até Publicações> Adicionar novo como destacamos na captura de tela abaixo.

criando um novo post em gutenberg

Isso o leva diretamente ao editor Gutenberg mostrado abaixo.

editor wordpress gutenberg

Bem arrumado, não é? 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 uma postagem sem um título sólido. O bom é que 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 Título bloco clicando no Editar como mostrado abaixo.

editar publicação permalink em gutenberg

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

Adicionando um novo parágrafo

novo bloco de parágrafos em Gutenberg

Atingir o ENTRAR chave cria uma nova Parágrafo bloco, 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 bloqueio de parágrafo gutenberg

Notas. Você pode:

  1. Converta o novo bloco de parágrafo em qualquer outro bloco, por exemplo, imagem, cabeçalho, 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ágrafos em um bloco de cabeçalho, ou seja, H2, H3 e H4
  4. Transforme o bloco de parágrafo em um bloco de imagem de capa

Para fins ilustrativos, reservarei 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ágrafos de Gutenberg

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

  • Encobrir o parágrafo em verso, citação, cabeçalho, lista, código e texto pré-formatado
  • Negrito, Itálico, tachado, e sublinhado conteúdo
  • Alinhar texto à esquerda, direita, centralizar e justificar
  • Adicione um link que também pode abrir em uma nova guia
  • Inserir uma imagem embutida (sim, ela existe!)
  • Ocultar configurações de bloco
  • Duplicar o bloco
  • Inserir um bloco antes ou depois do bloco atual (no nosso caso, esse é o primeiro parágrafo; portanto, não adicionamos nada antes, somente 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 aos blocos reutilizáveis ​​para que você possa usá-lo em outras postagens
  • Remova completamente o bloco

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

opções da barra lateral de Gutenberg para o bloco de parágrafos

Algumas notas sobre a imagem acima:

  1. Escolha o Quadra aqui para exibir todas as opções e configurações de bloco
  2. Selecione o tamanho da fonte e ative o Drop Cap aqui
  3. Adicione cor de fundo ao seu parágrafo. Defino-o como azul para fins de ilustração. Você também pode personalizar a cor do texto. Nos dois 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 plano de fundo azul e o Drop Cap já foram aplicados no editor Gutenberg

A guia Documento na barra lateral

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

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

Aqui, as notas para a imagem acima:

  1. Clique aqui para alternar para o Documento aba
  2. Aqui você pode agendar uma postagem, definir a visibilidade como Privado ou Público, definir uma postagem para Revisão pendente status, escolha o formato da postagem e crie uma postagem
  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. Crie 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ágrafos (e toda a postagem) 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 o ENTRAR novamente para criar uma nova linha (ou bloco de parágrafo). Agora, vamos adicionar uma imagem abaixo do primeiro parágrafo.

Adicionando imagens em Gutenberg

adicionando uma nova imagem em gutenberg

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

Quando você bate no ENTRAR chave alguns momentos atrás, você acionou um novo bloco de parágrafo. Como 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 adicionar um cobrir imagem (geralmente são maiores que as outras fotos. Além disso, você pode adicionar texto às imagens da capa, entre outras)

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

adicionando imagens em gutenberg

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

bloco de imagem de Gutenberg

Imagem O bloco permite fazer upload de uma imagem ou adicionar uma de uma URL ou da biblioteca de mídia. No processo, você pode adicionar texto alternativo (importante para SEO), legenda e descrição através das configurações da tela de mídia ou do Quadra barra lateral como mostrado nas imagens a seguir.

As configurações normais de mídia…

configurações de mídia wordpress

…e a Imagem configurações de bloqueio.

configurações do bloco de imagem gutenberg

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

Depois de adicionar sua imagem, Gutenberg adiciona um novo bloco de parágrafo logo abaixo. Você pode adicionar o que quiser, mas, para fins ilustrativos, adicionei algum texto e, em seguida, um botão abaixo.

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

Gutenberg torna incrivelmente fácil adicionar arquivos para download à sua postagem ou página do WordPress.

Em um novo Parágrafo bloco, clique no ícone de mais (+), navegue até Blocos comuns e aperte o Arquivo guia como destacamos abaixo.

adicionando arquivos para download no gutenberg

Fazer isso inicia o seguinte bloco:

bloco de arquivo gutenberg

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

adicionando arquivo em gutenberg

Você pode brincar com as opções. Por exemplo, você pode editar / excluir o “Lista de verificação gratuita em PDF do Gutenberg”, Bem como o Baixar botão. Você pode adicionar uma classe CSS ao bloco e estilizá-la da maneira que desejar.

Adicionando uma cotação em Gutenberg

Em seguida, vamos adicionar uma cotação, porque eles são encantadores, atraentes e ajudam você a levar o assunto para casa. Em uma nova linha, clique no sinal de mais (+), navegue até Blocos comuns e aperte o Citar guia como mostrado abaixo.

adicionando citações em gutenberg

Fazer isso adiciona o Citar bloquear na sua postagem, como destacamos na captura de tela abaixo.

configurações de bloco de cotação de 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 em 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 etc..

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

gutenberg youtube incorporar

Em seguida, copie e cole o URL do vídeo do YouTube e clique no ícone Embutir como mostrado na imagem abaixo.

bloco de incorporação do gutenberg youtube

Assim que você bate no Embutir , o Gutenberg coloca o link em um vídeo automaticamente, como destacamos abaixo.

vídeo do youtube incorporado em Gutenberg

Navegação suave por todo o caminho. Agora, vamos adicionar um botão autônomo perfeito para criar uma chamada à 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 seu bloco. Não pode ser mais fácil do que isso.

Então, como adicionamos um botão?

Em uma nova linha (ou bloco), clique no ícone de mais (+), navegue até Elementos de layout e clique no Botão guia como mostrado abaixo.

adicionando botões no editor gutenberg

Fazer isso leva você ao Botão bloquear como 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 recebi.

exemplo do botão gutenberg

A propósito, se você usar combinações de cores difíceis de ler nos botões, Gutenberg informará imediatamente. Que bom?

Como adicionar colunas em Gutenberg

Com um botão bonito no lugar, vamos adicionar algumas colunas. Vou adicionar duas colunas, então siga cuidadosamente.

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

guia colunas editor gutenberg

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

colunas gutenberg no editor wordpress

O que me leva a:

frontend de colunas de Gutenberg

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

Existe um 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? Nesse caso, você vai adorar a seção a seguir.

Como de costume, clique no ícone de mais (+), navegue até Elementos de layout e clique Mídia e Texto como mostrado abaixo.

bloco gutenberg de mídia e texto

Você deve ver o Mídia e Texto bloco, como mostrado abaixo.

bloco de mídia e texto em Gutenberg

Em seguida, carregue sua imagem / vídeo / mídia ou adicione uma da biblioteca de mídia. Depois disso, adicione seu texto ao lado da mídia, como mostra a imagem abaixo.

Eu brinquei com o Mídia e Texto bloco, e eu vim com o seguinte. Mente você; Eu consegui apertar um botão lá também ��

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

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

bloco de texto de mídia em Gutenberg

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

Blocos de Gutenberg de terceiros

Os desenvolvedores do WordPress estão interessados ​​em tornar 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. Primeiro, 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, como mostrado abaixo.

blocos de gutenberg woocommerce

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á temos mais de 2.000 palavras e, se continuarmos, acabaremos escrevendo um eBook inteiro. Minha oração é que agora você pode usar Gutenberg sem soluços.

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

  • Widgets – Você pode adicionar conteúdo de seus widgets nas postagens do blog
  • Códigos de acesso – Você ainda pode usar códigos de acesso nativos do WordPress
  • Clássico – Um ótimo bloco que mantém seu conteúdo antigo
  • Mais – O bloco era conhecido anteriormente como consulte Mais informação tag
  • Page Break, 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, de lado: Criar uma página do WordPress é semelhante a criar uma postagem, exceto por algumas diferenças de minutos, então não vamos nos aprofundar nisso hoje.

Hacks Gutenberg rápidos 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, ele exibirá 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 folga de Gutenberg

Atalhos do 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), como mostrado abaixo.

estrutura de documentos de Gutenberg

Agradável. Extraordinariamente suave.

Ah, e a propósito, o erro “Falha na atualização” geralmente ocorre devido a uma conexão instável à Internet ��


Entre você e eu, Gutenberg é um editor de conteúdo fantástico. Desde que você esteja disposto a aprender as cordas; você pode colher muito com o editor WordPress do futuro.

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map