Deseja usar o editor de blocos do Gutenberg (também chamado de editor do WordPress), mas não tem certeza de como adicionar ou usar blocos?
Neste post, você aprenderá como usar o novo editor do WordPress e como estender seus recursos.
Preparar? Vamos começar:
Como usar o editor de blocos Gutenberg
Você usará o editor de blocos ao criar postagens e páginas no WordPress. É uma ferramenta intuitiva que permite adicionar conteúdo ao seu site sem precisar escrever HTML, embora você possa alternar livremente entre os editores visuais (bloco) e de código (HTML).
Páginas e posts são chamados de “tipos de post” no WordPress. O editor de blocos é mais ou menos o mesmo para cada um, com algumas diferenças aqui e ali, dependendo do tipo de postagem.
Vamos ficar com as postagens, um tipo de postagem que você pode criar passando o mouse sobre Postagens no menu de administração no lado esquerdo do painel e selecionando Adicionar novo.
Também usaremos o tema Kadence WordPress , portanto, nosso editor pode ter algumas configurações diferentes das suas e nosso post pode parecer um pouco diferente no frontend. Também temos o plugin SEOPress SEO instalado, então você verá alguns painéis relacionados a SEO em nossas capturas de tela.
O editor de blocos o recebe com um tour de boas-vindas quando você o abre pela primeira vez (e quando você limpa o cache do seu navegador, infelizmente). Sinta-se à vontade para levar um segundo para navegar por ele.
Comece inserindo um título no campo “Adicionar título”. Este não precisa ser o título real que você deseja usar, ainda. Você pode usar um título de trabalho até estar pronto para publicar a postagem. Adicionar um título agora simplesmente ajudará você a reconhecer o rascunho quando visualizar sua lista de Todas as postagens.
Saiba apenas que o título que você colocar aqui representará o título que seu post tem no seu site e quando for compartilhado nas redes sociais.
Clique em Salvar rascunho a seguir. Este é um link localizado no menu superior direito do editor. Alternativamente, pressione Ctrl/Cmd+S no seu teclado. O editor do WordPress possui uma funcionalidade de salvamento automático integrada, mas salvar manualmente de vez em quando elimina o risco de perder seu rascunho se você perder energia de repente ou sua conexão com a Internet.
Se você quiser ver a aparência de sua postagem no frontend mesmo sem publicá-la, clique no link Visualizar e selecione Visualizar em uma nova guia.
Observação: assim que você clicar no botão Publicar, sua postagem será publicada para todos que visitarem seu site. É por isso que é melhor clicar em Salvar rascunho para mantê-lo offline por enquanto.
Isso permite que você veja como sua postagem fica com o estilo do seu tema.
Usando a biblioteca de blocos do Gutenberg
Qualquer postagem ou página que você cria com o editor de blocos do WordPress é composta de blocos de conteúdo. Isso significa que se sua postagem tiver dois parágrafos, depois um título e, finalmente, uma imagem, você terá dois blocos de parágrafo, um bloco de título e um bloco de imagem.
O WordPress tem algumas dezenas de blocos por padrão, mas você pode expandir sua biblioteca com plugins. Alguns temas e plugins de terceiros ainda vêm com seus próprios blocos.
Vamos ficar com os blocos padrão do WordPress por enquanto. Comece clicando onde diz Comece a escrever. Isso cria um bloco de parágrafo automaticamente e você pode começar a digitar se quiser adicionar um parágrafo.
Clique no botão mais + se quiser usar um bloco diferente.
O editor de blocos do Gutenberg herda os estilos de fonte do seu tema por padrão para que sua postagem tenha a aparência que aparecerá no frontend enquanto você a cria. É por isso que o texto em nossas capturas de tela provavelmente parece um pouco diferente do seu.
Quando você coloca o cursor em um bloco de parágrafo, uma barra de ferramentas flutuante é exibida. Ele permite que você transforme o texto do parágrafo de várias maneiras, como adicionando estilos em negrito ou itálico ou até mesmo incluindo um link. Não é muito diferente do Microsoft Word ou do Google Docs.
Vamos falar sobre as configurações do bloco, começando com o bloco Parágrafo. Se você olhar para a barra lateral no lado direito do editor, você notará que existem duas guias: uma para as configurações do post inteiro (Post) e outra para as configurações do bloco individual (Block).
Clique na guia Bloquear se você ainda não estiver lá. O bloco Parágrafo tem configurações de tipografia que você pode usar para personalizar o tamanho da fonte que esse parágrafo em particular usa, bem como a altura que cada linha dentro do parágrafo deve ter.
Seu tema já usa um tamanho de fonte e altura de linha globais, portanto, recomendamos deixar essas configurações em paz, a menos que você queira que esse parágrafo específico tenha configurações diferentes. Personalize as configurações de tipografia padrão do seu tema acessando Aparência → Personalizador.
O painel Cor é fechado por padrão. Clique nele para abri-lo, mas lembre-se de que a cor do texto é outra configuração global que você pode configurar no Personalizador. Mesmo assim, este painel permite personalizar as cores de um parágrafo específico e até adicionar um plano de fundo a ele.
A última configuração pode ser útil quando você deseja chamar a atenção para uma nota ou aviso especial.
Cada novo parágrafo que você cria é um bloco de parágrafo diferente e, portanto, tem configurações diferentes. Se você deseja controlar as configurações de vários blocos de parágrafos de uma só vez, você precisa agrupá-los.
Realce vários parágrafos com o cursor, clique no menu de três pontos que passa sobre eles e selecione Grupo.
Agora, você pode editar as configurações de cores para vários blocos de parágrafo. Infelizmente, as configurações de texto ainda precisam ser configuradas individualmente, pois a funcionalidade de grupo deve ser usada para criar vários blocos reutilizáveis de uma só vez.
Falando nisso, quando você clica no menu de três pontos para blocos de grupo e individuais, você também notará uma opção chamada Adicionar a blocos reutilizáveis.
Isso permite que você salve os blocos que criou em sua própria biblioteca pessoal. Ele salvará seu conteúdo e configurações. Você pode até dar a eles nomes exclusivos, como “Chamada para ação de mídia social”. Quando você quiser usar o bloco em outra página, tudo o que você precisa fazer é procurá-lo ao adicionar um novo bloco.
Em relação aos blocos de parágrafo, os blocos reutilizáveis são ótimos para informações que você costuma repetir em várias postagens. Isso inclui divulgações de links de afiliados e frases de chamariz que você usa com frequência, como “siga-me no Twitter e Instagram” com links para ambos os perfis incluídos.
Blocos reutilizáveis operam como blocos globais. Isso significa que se você inserir um bloco reutilizável no Post A, Post B e Post C e adicioná-lo ao Post D com as configurações editadas, essas configurações também serão alteradas nos Posts A, B e C.
Se você quiser apenas alterar o bloco para o Post D, precisará clicar no menu de três pontos novamente e selecionar Converter em bloco normal.
Bloco de rumo
Os títulos nos ajudam a dividir as postagens do blog em seções e essas seções em subseções. Não é diferente da forma como os artigos de jornais e revistas foram divididos em diferentes seções por eras.
As páginas da Web contêm até seis títulos: H1 a H6 ou Título 1 a Título 6. Os rótulos H1-H6 são tags HTML que representam o tamanho e a importância de um título em SEO.
Seu tema usa H1, o maior e mais importante título, para títulos de postagem, então você deve usar H2 para títulos primários em toda a sua postagem e H3 para títulos secundários. H4-H6 são menos comuns, mas você pode usá-los quando necessário.
Se você estiver tendo problemas para encontrar o botão de adição novamente, coloque o cursor no final do último parágrafo e pressione Enter. Em seguida, use o botão para adicionar um bloco de título à sua postagem.
A tag H2 é selecionada por padrão. Clique nele para selecionar uma tag diferente quando precisar.
As configurações são as mesmas para as tags de parágrafo, portanto, não nos incomodaremos em revisá-las. Apenas saiba que as configurações de tipografia do seu tema no Personalizador também devem ter configurações globais para títulos.
Bloco de imagem
Siga as mesmas etapas para adicionar um bloco de imagem, mas selecione Imagem desta vez.
O WordPress oferece três maneiras de fazer upload de imagens:
- Carregar – Escolha um arquivo do seu dispositivo para carregar no WordPress. O arquivo será armazenado em seu servidor de hospedagem por padrão, a menos que você configure uma funcionalidade de descarregamento para arquivos de mídia.
- Biblioteca de mídia – Escolha uma imagem da biblioteca de mídia do WordPress. Esta biblioteca permite gerenciar arquivos de mídia no WordPress. Escolher essa opção também permite que você carregue várias imagens de uma só vez, mas ainda opte por atribuir apenas uma a esse bloco específico.
- Inserir do URL – Adicione um URL que contenha sua imagem e escolha qual imagem inserir em sua postagem. Esta opção é desaconselhada por muitas razões. Primeiro, a imagem pode ser removida do URL inserido, o que fará com que ela seja interrompida em seu site. Em segundo lugar, você pode acabar cometendo violação de direitos autorais se a imagem inserida não for livre de atribuição. Finalmente, é melhor se você criar suas próprias imagens originais para que seu blog fique mais profissional.
Quando você tiver uma imagem selecionada, uma barra de ferramentas flutuante aparecerá exatamente como nos blocos Parágrafo e Título. Ele permite alterar o alinhamento da imagem para a esquerda, direita ou centro, adicionar um link à imagem, adicionar texto sobre ela e até cortá-la.
Você pode até adicionar uma legenda abaixo da imagem.
Para configurações, você pode adicionar um estilo à sua imagem e texto alternativo. Use um título curto e descritivo como seu texto alternativo que representa o que é a imagem. Isso é para fins de SEO.
Você também deve escolher “Full Size” como tamanho de imagem na maioria dos casos. O WordPress reduzirá sua imagem para a largura do conteúdo do seu blog automaticamente.
Não deixe de conferir nosso guia sobre como otimizar imagens para a web para obter mais ajuda nessa área.
Outros blocos e blocos de terceiros
Como dissemos, o WordPress possui uma biblioteca inteira repleta de dezenas de blocos de conteúdo organizados em diferentes seções. Quando você for adicionar um novo bloco, clique no botão Browse All para visualizar todos eles.
Aqui estão alguns comuns que você pode usar:
- Lista
- Citar
- Aspas
- Mesa
- Galeria
- Cobrir
- Mídia e texto
- Vídeo
- Botões
- Colunas
- Ícones sociais
- Incorporações de mídia social
- Perguntas frequentes
Se você quiser acessar mais blocos, use um plug-in de bloco de terceiros. Isso lhe dá acesso a mais blocos de conteúdo, alguns dos quais são melhorias nos blocos padrão do WordPress.
Ultimate Blocks é uma das opções mais populares por aí. Este plugin gratuito dá acesso a 20 blocos adicionais para o editor Gutenberg. Estes incluem Testemunho, Call to Action, Content Toggle, Tabbed Content, Table of Contents e muito mais.
Outra ótima opção é o Kadence Blocks , e uma ótima combinação com o tema Kadence WordPress. O tema Kadence tem demos de site para o editor Gutenberg e Elementor , então os blocos Gutenberg extras são fantásticos se você preferir usar o editor Gutenberg mais leve para construir seu site sobre o Elementor.
O plugin adiciona 15 blocos à sua coleção que oferecem versões melhores dos blocos padrão do Gutenberg, bem como alguns extras. Estes incluem Testemunho, Caixa de Informações, Acordeão, Índice, Contagem Regressiva e muito mais.
Você pode usar Ultimate Blocks e Kadence Blocks lado a lado se quiser adicionar os dois conjuntos de blocos à sua coleção.
O Kadence Blocks também possui a Design Library, um botão que você encontrará no menu superior do editor de blocos. Esta biblioteca tem três novas categorias de elementos de design para você usar. Primeiro, ele tem Seções, que são seções de página pré-projetadas, como uma tabela de preços, um formulário de contato ou uma linha para mostrar os membros da equipe, prontas para você importar e usar.
Os Starter Packs contêm páginas totalmente projetadas. A categoria Wireframe contém elementos de design semelhantes à categoria Sections, exceto que os elementos wireframe não têm conteúdo de demonstração.
Alguns plugins não são plugins dedicados ao Gutenberg, mas possuem blocos que você pode usar para adicionar suas funcionalidades ao editor de blocos com facilidade. Este é o caso do WP Table Builder , um plugin de tabela desenvolvido pela mesma equipe por trás do Ultimate Blocks.
Agora, você pode inserir tabelas de preços, dados e comparação bem projetadas no editor de blocos sem precisar depender de um construtor de páginas.
Pensamentos finais
O editor de blocos Gutenberg tem um pouco de curva de aprendizado quando você o compara aos editores WYSIWYG, como o editor clássico do WordPress, mas é incrivelmente fácil de usar depois de superar esses obstáculos. Além disso, ele permite que você use mais elementos de design em suas postagens de blog sem precisar recorrer a um plug-in do construtor de páginas.
Também permite que você seja mais eficiente se escrever seus rascunhos fora do WordPress em aplicativos como Google Docs ou Microsoft Word. Esses aplicativos permitem que você copie suas postagens e cole-as no editor de blocos do Gutenberg enquanto importa seus links, títulos e estilos de texto desses aplicativos. O Google Docs até exportará suas imagens.
