20.12.2025
Conceitos sobre criação de conteúdo com blocos Gutenberg em páginas WordPress
1. Resumo Técnico
Este guia aborda a criação de conteúdo no WordPress utilizando o Editor de Blocos (Gutenberg). O objetivo é que o aluno compreenda que cada elemento de uma página (título, parágrafo, imagem, botão) é um bloco independente, que pode ser manipulado e estilizado.
Ensinaremos a utilizar os blocos mais comuns e suas propriedades essenciais, focando na estrutura e na semântica do conteúdo. Esta abordagem é uma preparação para a intervenção de código, pois o aluno estará manipulando a estrutura HTML que o WordPress gera. O guia culmina com um teste prático de layout complexo.
2. Mapa Mental do Processo
-
Conceito de Bloco
- Unidade fundamental de conteúdo
- Cada bloco = uma tag HTML (semântica)
-
Blocos Essenciais
- Título (H1, H2, H3)
- Parágrafo
- Imagem
- Colunas (layout)
- Separador e espaçador (design)
- Botão (ação)
-
Propriedades do Bloco
- Painel de configurações (lateral)
- Ajustes de estilo e layout
-
Teste Final (Layout Complexo)
- Estrutura de título e linha
- Colunas com texto e imagem
- Botão de WhatsApp centralizado
3. Guia Detalhado: Manipulando a Estrutura HTML com Blocos
3.1. O Conceito de Bloco (Gutenberg)
O Editor de Blocos (Gutenberg) é a forma nativa do WordPress de gerenciar o conteúdo.
- Semântica: Cada bloco corresponde a uma tag HTML específica. O bloco Título corresponde à tag <h1> ou <h2>; o bloco Parágrafo corresponde à tag <p>. Ao usar os blocos, você está, na verdade, construindo a estrutura HTML da página de forma visual.
- Propriedades: Cada bloco possui um painel de configurações lateral (o Painel de Propriedades) que permite alterar seu estilo (cor, tamanho da fonte, margem) sem escrever CSS.
3.2. Blocos Essenciais e Suas Propriedades
| BLOCO | FUNÇÃO SEMÂNTICA | PROPRIEDADES ESSENCIAIS |
|---|---|---|
| Título | Define a hierarquia do conteúdo (H1 a H6). | Nível do Título (H1, H2, etc.), Cor, Tamanho da Fonte. |
| Parágrafo | Texto principal do conteúdo (<p>). | Alinhamento, Cor, Tamanho da Fonte. |
| Imagem | Insere mídia visual (<img>). | Tamanho, Alinhamento, Texto Alternativo (SEO). |
| Colunas | Cria layouts complexos (Ex: 50/50, 30/70). | Número de colunas, Largura de cada coluna. |
| Separador | Linha horizontal para dividir seções. | Estilo (linha fina, linha larga, pontos). |
| Espaçador | Insere espaço vertical vazio. | Altura em pixels (Ex: 20px). |
| Botão | Cria um Call to Action (CTA) (<a>). | Link de destino, Cor, Estilo (contorno, preenchido). |
3.3. Teste Final: Construindo um Layout Complexo
Abra uma das páginas criadas (Ex: Competências) e siga o passo a passo para construir o layout de teste:
Passo 1: Título e Linha Divisória
- Adicione um bloco Título.
- Defina o nível como H1 e escreva: Minhas Competências Técnicas.
- Adicione um bloco Separador.
- No Painel de Propriedades, ajuste o Separador para ter um estilo de linha larga e alinhamento à esquerda.
- Adicione um bloco Espaçador.
- No Painel de Propriedades, defina a altura para 10px.
Passo 2: Colunas e Conteúdo
- Adicione um bloco Colunas.
- Escolha o layout 50/50 (duas colunas iguais).
- Adicione um bloco Espaçador de 20px acima das colunas.
- Coluna 1 (Texto): Adicione um bloco Parágrafo e insira um texto lorem ipsum (texto de preenchimento).
- Coluna 2 (Imagem): Adicione um bloco Imagem e faça o upload de uma imagem de teste.
Passo 3: Botão de Ação (WhatsApp)
- Adicione um bloco Espaçador de 20px abaixo das colunas.
- Adicione um bloco Botão.
- Escreva o label: Fale Comigo Agora!.
- No Painel de Propriedades, defina o Alinhamento para Centralizado.
- Insira o link do WhatsApp (Ex: https://wa.me/seunumerodetelefone ).
Passo 4: Publicar e Visualizar
- Clique em Atualizar ou Publicar.
- Visualize a página no navegador.
4. Conclusão
Ao dominar os blocos, você adquire a capacidade de estruturar qualquer tipo de conteúdo. Você aprendeu a usar os blocos como se fossem tags HTML, manipulando a estrutura da página de forma visual. Este conhecimento é a base para a próxima etapa: a inserção do Conteúdo Final em todas as páginas do seu portfólio.
