Como usar Gutenberg no WordPress: guia completo para iniciantes

Publicados: 2023-12-11

A partir do lançamento do WordPress 5.0, o editor clássico foi substituído pelo Gutenberg como editor padrão. Portanto, se você estiver usando WordPress, precisará usar o novo Gutenberg ou voltar ao editor clássico para criar uma nova página ou post.

Mas por que retroceder quando o novo é mais abrangente? Gutenberg, também conhecido como “Editor de Bloco”, apresenta uma nova abordagem baseada em blocos para a criação de conteúdo com mais flexibilidade e facilidade.

Portanto, você precisa ter um conhecimento básico a avançado do editor de blocos de Gutenberg. E este blog vai facilitar as coisas para você.

Ao longo deste guia, você aprenderá o básico sobre como usar Gutenberg no WordPress, bem como alguns truques avançados, como blocos e padrões reutilizáveis.

Conteúdos [esconder
O que é o editor de blocos Gutenberg WordPress?
Compreendendo blocos e padrões
Como usar Gutenberg no WordPress?
Como funciona o editor de blocos Gutenberg no WordPress?
Passo 1: Como adicionar um bloco em Gutenberg
Etapa 2: adicione conteúdo ao bloco
Etapa 3: personalizar estilos de bloco
Salvando e reutilizando blocos em Gutenberg
Embrulhar

O que é o editor de blocos Gutenberg WordPress?

Em uma frase, Gutenberg é o editor comparativamente novo do WordPress que usa blocos para criar páginas e postagens da web. O editor de blocos foi introduzido com simplicidade e flexibilidade em mente. Em Gutenberg, cada conteúdo é um bloco individual.

Portanto, você pode criar uma página da web ou postar com uma mistura de diferentes tipos de conteúdo, incluindo texto, imagens, vídeos, tabelas e muito mais. Este editor ajuda você a reorganizar, estilizar e personalizar cada bloco de forma independente, dando máximo controle sobre a aparência do seu site.

Compreendendo blocos e padrões

Para saber como funciona o editor de blocos de Gutenberg, você deve se familiarizar com alguns termos novos. Blocos e padrões de bloco do WordPress são os dois termos que mais usaremos ao descrever Gutenberg. Então, vamos primeiro entendê-los.

Blocos:

Os blocos em Gutenberg são os elementos unitários usados ​​para criar conteúdo. Cada bloco representa um elemento separado ou uma parte do conteúdo. Por exemplo, usando o bloco de parágrafo, você pode adicionar conteúdo de texto, o bloco de imagem permite adicionar imagens ao seu conteúdo.

Da mesma forma, o editor de blocos do WordPress possui blocos como títulos, galerias, listas, citações, mídia incorporada (como vídeos ou tweets) e muito mais.

Além dos blocos padrão, muitos plug-ins são adicionados à lista de blocos do editor Gutenberg.

Blocos de Gutenberg

Padrões:

Por outro lado, os padrões são um conjunto de blocos agrupados para formar um layout ou design. Esses padrões ajudam os usuários a adicionar rapidamente layouts complexos ou combinações de blocos comumente usadas com um único clique. Em última análise, economizando tempo e esforço para construir páginas da web.

Os padrões podem variar de layouts simples, como uma seção de CTA com título, texto e botões, até designs mais complexos, como seção principal do site, carrosséis de depoimentos, seções de membros da equipe, tabelas de preços e muito mais.

Padrões de blocos de Gutenberg

Como usar Gutenberg no WordPress?

Usar Gutenberg é simples e fácil. Escolha um bloco, adicione conteúdo, personalize-o e sua página estará pronta! No entanto, há mais do que isso. Vamos descobrir em detalhes como usar o Gutenberg no WordPress.

Como funciona o editor de blocos Gutenberg no WordPress?

Se você estiver usando WordPress 5.0 ou versão superior, o que é mais provável, Gutenberg já é seu editor padrão. Assim você não precisa instalar ou ativar o editor de blocos. Basta abrir uma nova página ou postagem e você poderá criar seus designs no WordPress.

Como usar Gutenberg no WordPress – Adicionar nova página

Passo 1: Como adicionar um bloco em Gutenberg

Adicionar um bloco no Gutenberg, o editor de blocos padrão do WordPress, é um processo simples. Insira um título de página primeiro.

Agora, para adicionar um bloco,

  • Abra um campo para adicionar um bloco: Clique no ícone “+” do editor ou pressione / no teclado. Isso abrirá o inseridor de bloco.
  • Navegue e selecione um bloco: você pode pesquisar um bloco digitando seu nome ou percorrer os blocos disponíveis. Escolha um e clique no bloco que deseja adicionar.

Você pode explorar esses blocos para criar conteúdo diversificado e envolvente para o seu site WordPress. Depois que o bloco for adicionado, você poderá adicionar conteúdo ao bloco selecionado.

Como usar Gutenberg no WordPress – adicione um bloco

Etapa 2: adicione conteúdo ao bloco

Gutenberg oferece uma ampla gama de blocos para vários tipos de conteúdo. Como dito anteriormente, isso inclui parágrafos, títulos, imagens, vídeos, botões, tabelas e muito mais. Você pode adicionar diversos tipos de conteúdo à sua página da web usando esses blocos.

Por exemplo, se você deseja criar uma galeria de imagens, 1. escolha o bloco da galeria, 2. Carregue ou escolha imagens da biblioteca de mídia e você terá uma galeria adicionada à página.

Da mesma forma, se você quiser adicionar um título, basta selecionar o bloco de título e adicionar um texto de título.

Etapa 3: personalizar estilos de bloco

A coisa mais incrível sobre o editor de blocos do WordPress é que você pode personalizar cada bloco de maneira diferente. Por exemplo, dois blocos de parágrafo podem ter cores de texto e tipografia diferentes.

Portanto, quando você adiciona um bloco, o painel lateral direito mostrará as opções personalizáveis. Da mesma forma, para um bloco de parágrafo, você pode personalizar o texto e a cor de fundo, escolher o tamanho do texto e tipografia, como família de fontes, altura da linha, espaçamento entre letras, etc.

Personalize estilos de bloco de Gutenberg

Salvando e reutilizando blocos em Gutenberg

Blocos reutilizáveis, agora denominados “Padrões Sincronizados” é um dos recursos fáceis de usar introduzidos em Gutenberg. O editor de blocos do WordPress permite que você salve um bloco ou grupo de blocos com seus estilos personalizados e reutilize-os posteriormente em outras páginas ou posts. Isso economiza muito tempo e esforço.

Para tornar um bloco de Gutenberg reutilizável,

  1. Selecione um bloco ou grupo.
  2. Clique no ícone de três pontos (⋮).
  3. Encontre o “Criar Padrão/bloco reutilizável”.
  4. Insira o nome.
  5. Ative o botão “Sincronizado” para torná-lo reutilizável.
  6. Por fim, clique no botão Criar.
Salvando e reutilizando blocos em Gutenberg

Finalmente, seu bloco se transformará em blocos reutilizáveis. Agora, para usar os blocos reutilizáveis,

  1. Abra o editor do WordPress para uma postagem ou página onde deseja adicionar o bloco reutilizável.
  2. Clique no ícone “+” para adicionar um novo bloco.
  3. Na guia “Reutilizável”, você verá os blocos reutilizáveis ​​que criou. Clique naquele que deseja inserir.
Use blocos reutilizáveis ​​em Gutenberg

No geral, os blocos reutilizáveis ​​podem ser um recurso que economiza tempo, especialmente se você tiver determinados elementos ou layouts que usa com frequência em seu site.

Embrulhar

Concluindo, a introdução do editor de blocos Gutenberg provocou uma grande mudança na usabilidade do WordPress. Isso tornou a criação de páginas da web e postagens mais fácil e flexível.

Portanto, saber usar Gutenberg no WordPress é um requisito fundamental para quem usa o CMS WordPress em geral. Ao compreender o editor baseado em blocos e sua infinidade de recursos, você agora possui as ferramentas para criar layouts visualmente atraentes, conteúdo rico em multimídia e sites fáceis de usar.