Blocos WordPress: o que são e como usá-los

O WordPress transformou a maneira como os usuários criam e gerenciam conteúdo, e os blocos do WordPress são uma grande parte dessa evolução.

Com a introdução do editor Gutenberg, os blocos tornaram-se os elementos de construção essenciais para a concepção de posts, páginas e sites inteiros.

A versão atual do WordPress vem com mais de 90 blocos padrão. Eles incluem texto, mídia, widgets, elementos de tema e incorporações.

Neste artigo, veremos os blocos do WordPress, incluindo por que eles são úteis, os vários tipos de blocos disponíveis e como usá-los. Também veremos alguns dos plug-ins de bloco do WordPress mais populares que oferecem blocos de conteúdo extras, recursos de personalização e modelos de layout para ajudá-lo com seu design.

Então, vamos começar com uma rápida visão geral dos blocos do WordPress.

O que são blocos WordPress?

Os blocos WordPress são os elementos de construção essenciais do editor de blocos WordPress, também conhecido como Gutenberg. Os blocos permitem adicionar e estruturar conteúdo em suas postagens e páginas. Cada seção de conteúdo – um parágrafo, imagem, vídeo ou galeria – é um bloco separado que pode ser movido, editado e personalizado de forma independente. Este sistema torna a criação de conteúdo muito mais flexível em comparação ao editor clássico.

Os blocos também fornecem uma interface visual para interagir com seu conteúdo. Você pode ver suas alterações em tempo real, permitindo manter um layout consistente. Esta abordagem modular é o núcleo da experiência atual do WordPress, tornando-a acessível a todos os usuários.

Por que usar blocos WordPress?

O antigo editor WordPress era um editor de texto baseado em TinyMCE. A interface era muito semelhante à de um editor de texto, sem elementos visuais para visualização de páginas ou postagens.

Por outro lado, os blocos de conteúdo permitem alterar o layout da página e incluir facilmente diversos elementos visuais e interativos, o que não era possível com o antigo editor clássico.

Além disso, os blocos facilitaram diversas tarefas. Por exemplo, incorporar mídia externa, como vídeos do YouTube, agora é tão simples quanto adicionar o bloco certo ao conteúdo e colar o URL.

Anteriormente, essa personalização de conteúdo poderia exigir o uso de código HTML adicional.

Além disso, o padrão de bloco sincronizado permite salvar um bloco pré-personalizado para uso futuro, eliminando a necessidade de construir o conteúdo do zero.

A outra opção é usar padrões de blocos regulares ou não sincronizados, que são layouts de blocos pré-construídos e adequados para vários usos.

Ainda mais, um tema WordPress baseado em blocos também permite personalizar modelos usando o editor de blocos e a interface de estilos globais. Facilita a personalização de modelos ou até mesmo do layout completo do site, apenas reorganizando os blocos de conteúdo.

No geral, o novo editor WordPress melhora a experiência do usuário na edição de conteúdo.

Que tipos de blocos WordPress estão disponíveis no Editor de blocos?

A versão mais recente do WordPress tem aproximadamente mais de 90 blocos, agrupados em seis categorias: texto, mídia, design, widgets, tema e incorporações.

Vamos dar uma olhada em alguns blocos do editor de blocos do WordPress.

Blocos de texto

Os blocos de texto são fundamentais para a criação de conteúdo escrito em seu site. Os blocos de texto mais comuns incluem:

• Bloco de Parágrafo: Este é o bloco mais utilizado para adicionar e formatar conteúdo de texto.
• Bloco de título: permite inserir títulos (H1, H2, H3, etc.) para estruturar seu conteúdo de forma lógica.
• Bloco de lista: Ideal para criar listas com marcadores ou numeradas para detalhar informações.
• Bloco de Citações: Permite inserir citações ou depoimentos, destacando pontos-chave do seu conteúdo.
• Bloco de código: útil para exibir trechos de código com formatação adequada.
• Bloco de Tabela: Crie conteúdo estruturado em linhas e colunas para exibir informações.
• E mais.

Blocos de mídia

Os blocos de mídia permitem fazer upload de arquivos para a biblioteca de mídia e incorporá-los ao seu conteúdo. Estes incluem:

• Bloco de imagens: adicione e personalize imagens, incluindo legendas e texto alternativo para SEO.
• Bloco de vídeo: insira vídeos diretamente ou incorpore-os de fontes externas como o YouTube.
• Bloco de galeria: exibe várias imagens em formato de grade, perfeito para criar uma galeria rica.
• Bloco de áudio: carregue e compartilhe arquivos de áudio, o que é ótimo para podcasts ou sites de música.
• Bloqueio de arquivo: inclua arquivos para download, como PDFs ou documentos do Word, em seu conteúdo.
• E mais.

Blocos de design

Os blocos de design ajudam a aprimorar o layout visual de suas postagens e páginas. Eles oferecem opções para estruturar e estilizar o conteúdo, incluindo:

• Bloco de colunas: crie layouts de várias colunas para dividir o conteúdo em seções, melhorando a legibilidade.
• Bloco Espaçador: Adicione espaço vazio entre os elementos, criando uma aparência mais limpa e organizada.
• Bloco de Botões: Insira botões customizáveis ​​para call to action, direcionando os usuários para outras páginas ou ações.
• Bloco separador: adicione linhas horizontais para dividir visualmente diferentes seções do seu conteúdo.
• Bloco de grupo: combine vários blocos em um único grupo para melhor gerenciamento de layout.
• E mais.

Blocos de widgets

Os blocos de widgets permitem inserir conteúdo dinâmico em seu site, incluindo:

• Bloco de shortcode: use códigos de acesso de plug-ins ou funções personalizadas para aprimorar seu conteúdo.
• Bloco de postagens mais recentes: exibe uma lista de suas postagens recentes, aumentando os links internos e a navegação.
• Bloco de calendário: adicione uma visualização de calendário ao seu site, o que é ótimo para blogs focados em eventos.
• Bloco HTML personalizado: adicione código HTML personalizado e visualize-o enquanto edita.
• Bloco de ícones sociais: exibe ícones com links para seus perfis sociais ou sites.
• E mais.

Blocos Temáticos

Os blocos de tema são usados ​​para adicionar e gerenciar conteúdo relacionado ao layout geral do seu site. Os exemplos incluem:

• Bloco de logotipo do site: exiba o logotipo do seu site em qualquer postagem ou página.
• Bloco de navegação: adicione um menu ou links de navegação diretamente à sua área de conteúdo.
• Bloco de título: exibe o título de uma postagem, página ou qualquer outro tipo de conteúdo.
• Bloco de autor: exibe detalhes do autor da postagem, como nome, avatar e biografia.
• Bloco de consulta: permite exibir tipos de postagens com base em diferentes parâmetros de consulta.
• E mais.

Incorpora blocos

Os blocos de incorporação facilitam a incorporação de conteúdo externo, como postagens em mídias sociais, vídeos e podcasts. WordPress oferece suporte a uma ampla variedade de incorporações:

• Bloco do YouTube: incorpore vídeos do YouTube diretamente em seu conteúdo com um URL simples.
• Bloco do Twitter: mostre tweets ou tópicos inteiros do Twitter colando o URL do tweet.
• Bloco Spotify: incorpore listas de reprodução, álbuns ou músicas do Spotify para aprimorar o conteúdo multimídia.
• Bloco do Pinterest: permite incorporar pins, painéis e perfis do Pinterest.
• E mais.

Como usar blocos WordPress

Agora que você aprendeu o que são os blocos do WordPress, vamos ver como você pode usá-los para projetar seu site.

Como adicionar um bloco WordPress

Para adicionar um novo bloco, clique em um dos ícones de adição (+) na interface para abrir o insersor de bloco. Em seguida, pesquise e selecione o bloco que deseja adicionar.

Para abrir o insersor de bloco completo, clique no ícone de adição (+) na barra de ferramentas principal. Em seguida, selecione um bloco. Ao passar o mouse sobre um bloco, você verá uma prévia de sua aparência.

Além disso, você também pode passar o mouse sobre uma área específica do seu conteúdo e clicar no ícone de adição (+) para obter uma interface de inserção de bloco menor. Se você usar este método para selecionar um bloco, ele será inserido automaticamente na área onde você clicou no ícone.

Como personalizar um bloco WordPress

Para personalizar um bloco, basta clicar nele para selecioná-lo. Se você estiver tendo problemas para encontrar o bloco adequado, abra a visualização de lista e selecione-o na lista – mais sobre isso na próxima seção.

Depois de selecionar o bloco, você terá duas opções principais para personalizá-lo. Primeiro, muitos blocos oferecerão algumas opções básicas em sua barra de ferramentas flutuante. Normalmente, você pode adicionar formatação de texto, ajustar seu alinhamento e fazer outras alterações básicas.

Em seguida, para acessar configurações mais avançadas, use as configurações de bloqueio na barra lateral direita. Essas configurações serão exclusivas para cada bloco, dando a você controle total sobre como ele funciona.

Por exemplo, o bloco de parágrafo tem opções para personalizar cor, tipografia, margem e preenchimento e outros elementos de design.

Como usar a visualização de lista para selecionar blocos

Em geral, você pode selecionar um bloco apenas clicando nele. No entanto, pode haver momentos em que será difícil selecionar o bloco exato que você deseja. Isto é especialmente verdadeiro com blocos de Colunas e Grupos, que discutiremos mais tarde.

Para resolver isso, use a Visualização de lista do editor de bloco. Quando você abre a visualização de lista, ela exibe uma lista de todos os blocos da sua postagem na ordem em que aparecem.

Para selecionar um bloco, clique nele na lista.

Como reorganizar blocos do WordPress

Quando se trata de reorganizar os blocos do WordPress, você tem duas opções.

Primeiro, se você precisar mover um bloco para cima ou para baixo algumas posições, selecione-o e clique na seta para cima ou para baixo, como pode ser visto na imagem abaixo.

Em segundo lugar, se precisar de mais controle, você pode usar a funcionalidade de arrastar e soltar para mover o bloco para qualquer lugar da sua página. Para utilizá-lo, selecione o bloco e clique com o cursor no ícone de seis pontos (como pode ser visto na imagem acima).

Em seguida, mova o bloco para seu novo local. Para ajudá-lo a ter certeza de que está na área certa, uma linha azul aparecerá onde o bloco se moveria se você soltasse o mouse.

Você também pode usar a visualização de lista para reorganizar os blocos.

Como selecionar vários blocos

Em alguns casos, você pode querer escolher vários blocos. Isto é especialmente útil se você deseja organizar muitos blocos usando os métodos listados acima.

Para selecionar vários blocos, basta clicar e arrastá-los, da mesma forma que seleciona vários parágrafos em um documento de texto.

Mesmo para ter mais controle, você também pode usar a visualização de lista para selecionar vários blocos para controle adicional. Para isso, basta clicar no primeiro bloco que deseja selecionar. Depois disso, segure Shift no teclado e clique no último bloco para escolher. Todos os blocos entre o primeiro e o último serão selecionados automaticamente.

Como colocar blocos WordPress lado a lado em colunas

Colocar blocos lado a lado é muito fácil e você pode fazer isso usando o bloco Colunas.

Para isso, basta clicar no ícone de adição (+) , procurar o bloco Colunas e adicioná-lo ao editor. Ao adicionar o bloco, você será solicitado a selecionar a estrutura de colunas desejada. Por exemplo, você pode usar duas colunas de tamanho semelhante ou tornar uma coluna maior que a outra. Como alternativa, use mais de duas colunas.

Depois de configurar a estrutura das colunas, você notará ícones de adição (+) em cada coluna. Você pode usar esses ícones para adicionar conteúdo diretamente a cada coluna, permitindo colocá-los lado a lado.

Se precisar alterar o layout da coluna no futuro, você pode fazer isso facilmente editando as configurações do bloco de coluna principal.

Como agrupar blocos WordPress

O agrupamento de blocos pode ser útil em alguns casos, como ao aplicar a mesma cor de fundo a vários blocos.

Você pode fazer isso usando o bloco Grupo.

Basta adicionar um novo bloco de Grupo ao editor Gutenberg WordPress. Em seguida, clique no ícone de adição (+) no bloco Grupo para adicionar outros blocos de conteúdo a esse Grupo.

Se você editar as configurações no bloco do Grupo principal, como adicionar um fundo colorido, isso afetará todos os blocos do Grupo. Você também pode mover o bloco Grupo. Todos os outros blocos permanecerão dentro.

Alguns dos melhores plug-ins de bloco WordPress

Instalar um plugin do WordPress é uma excelente maneira de adicionar muitas outras opções de bloqueio ao editor do WordPress.

Existem vários plug-ins do WordPress que podem ser usados ​​para adicionar mais blocos de conteúdo, opções de personalização e até modelos de layout à biblioteca de blocos.

Aqui estão alguns dos melhores plug-ins de bloco para WordPress.

1. Blocos Gênesis

Genesis Blocks é um plugin gratuito do Gutenberg que contém vários blocos personalizados do WordPress.

Possui 14 blocos principais de Gutenberg, quatro layouts de página pré-construídos e oito seções de página pré-construídas.

Alguns dos blocos da biblioteca incluem:

• Bloco de colunas avançadas
• Bloco de boletim informativo
• Bloco de preços
• Bloco de depoimento
• Bloco de acordeão
• E mais

Genesis Blocks oferece uma versão paga, Genesis Pro, que inclui mais blocos, 26 layouts de página inteira pré-construídos, 56 seções pré-construídas e outros recursos. É a escolha definitiva para criar um site impressionante e funcional rapidamente.

Genesis Blocks é propriedade da WP Engine, uma das mais populares empresas de hospedagem gerenciada de WordPress. Eles também fornecem temas StudioPress de alta qualidade que funcionam perfeitamente com o plugin Genesis Blocks.

Preço:

Uma versão gratuita está disponível. A versão pro custa US$ 30/mês.

Obtenha blocos Genesis

2. Espectros

Spectra, anteriormente conhecido como Ultimate Addon para Gutenberg, é o plugin de biblioteca de blocos de Gutenberg mais popular.

Este plugin, criado pelos mesmos desenvolvedores que criaram o popular tema Astra, está atualmente instalado em mais de 900.000 sites.

Ele contém mais de 30 blocos de Gutenberg, incluindo os seguintes:

• Bloco deslizante
• Bloco de contador
• Bloco de classificação por estrelas
• Bloco de perguntas frequentes
• Bloco de caixa de informações
• E mais

Uma vantagem de usar este plugin é que ele suporta o tema Astra, bem como todos os seus sites iniciais e kits de modelos. Como resultado, você pode importar um site inicial e usar o editor de blocos para criar layouts lindos.

Preço:

Uma versão gratuita está disponível. A versão pro começa em US$ 49/ano ou US$ 199 para uma licença vitalícia de um único site.

Obtenha espectros

3. Blocos de Cadência

Kadence Blocks é outro excelente plugin de bloco para WordPress. Inclui alguns dos blocos mais usados ​​e permite adicionar funcionalidades extras ao seu editor de conteúdo.

O plugin vem em versões gratuitas e pagas. A versão gratuita vem com 23 blocos personalizados, incluindo o seguinte:

• Bloco de acordeão
• Bloco de botões avançado
• Bloco de Galeria Avançado
• Bloco de contagem regressiva
• Bloco de índice
• E mais

O plugin permite que você desabilite quaisquer blocos desnecessários, mantendo seu editor limpo e leve.

Ele também oferece uma Biblioteca de Design, que possui uma biblioteca de padrões de blocos e layouts de página inteira que você pode usar para personalizar qualquer postagem ou página.

Se você gosta desses blocos e deseja ver mais do Kadence Themes, você pode adquirir o plugin profissional ou plano de associação.

Preço:

Uma versão gratuita está disponível. A versão pro começa em US$ 149/ano.

Obtenha blocos Kadence

Conclusão

O editor Gutenberg é construído em blocos WordPress, que fornecem uma maneira flexível de criar e gerenciar conteúdo. Você pode criar facilmente páginas com aparência profissional usando vários tipos de bloco, incluindo texto, mídia, widgets e incorporações. Graças à sua natureza configurável, o uso de blocos também melhora o SEO e a experiência do usuário.

Além disso, para obter mais blocos e funcionalidades, considere usar os plug-ins de blocos para desbloquear novas possibilidades de design.

Experimente vários blocos e plug-ins para ver o que funciona melhor para o seu site. Conhecendo os blocos do WordPress, você pode criar conteúdo atraente e dinâmico que se destaca.

Agora abra seu editor WordPress e descubra as possibilidades ilimitadas que os blocos oferecem!

Para saber mais, verifique estes outros recursos úteis:

• 12 melhores temas de bloco WordPress para edição completa do site
• Comparação Elementor vs Gutenberg: Qual é melhor?
• Melhores construtores de páginas WordPress para 2024: 13 principais comparados

Por último, siga-nos no Facebook e no Twitter para se manter atualizado sobre os últimos artigos sobre WordPress e blogs.