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

1. Conceito de Bloco
   1. Unidade fundamental de conteúdo
   2. Cada bloco = uma tag HTML (semântica)
2. Blocos Essenciais
   1. Título (H1, H2, H3)
   2. Parágrafo
   3. Imagem
   4. Colunas (layout)
   5. Separador e espaçador (design)
   6. Botão (ação)
3. Propriedades do Bloco
   1. Painel de configurações (lateral)
   2. Ajustes de estilo e layout
4. Teste Final (Layout Complexo)
   1. Estrutura de título e linha
   2. Colunas com texto e imagem
   3. 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

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

1. Adicione um bloco Título.
2. Defina o nível como H1 e escreva: Minhas Competências Técnicas.
3. Adicione um bloco Separador.
4. No Painel de Propriedades, ajuste o Separador para ter um estilo de linha larga e alinhamento à esquerda.
5. Adicione um bloco Espaçador.
6. No Painel de Propriedades, defina a altura para 10px.

Passo 2: Colunas e Conteúdo

1. Adicione um bloco Colunas.
2. Escolha o layout 50/50 (duas colunas iguais).
3. Adicione um bloco Espaçador de 20px acima das colunas.
4. Coluna 1 (Texto): Adicione um bloco Parágrafo e insira um texto lorem ipsum (texto de preenchimento).
5. 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)

1. Adicione um bloco Espaçador de 20px abaixo das colunas.
2. Adicione um bloco Botão.
3. Escreva o label: Fale Comigo Agora!.
4. No Painel de Propriedades, defina o Alinhamento para Centralizado.
5. Insira o link do WhatsApp (Ex: https://wa.me/seunumerodetelefone ).

Passo 4: Publicar e Visualizar

1. Clique em Atualizar ou Publicar.
2. 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.