📘 WordPress Aula 02 — Site Institucional em 4 Horas

Data: 22/06/2026 · Nível: Iniciante → Intermediário · Categoria: WordPress · Freela

🎯 Objetivo: Ao final desta aula você será capaz de criar um site institucional completo do zero com WordPress + Elementor em até 4 horas, pronto pra entregar num freela de R$ 2.000 a R$ 6.000.

🗺️ Estrutura do Site (Mapa de Páginas)

🏠 Home
   ├── Seção Hero (banner principal + CTA)
   ├── Seção Sobre (quem é)
   ├── Seção Serviços (cards com ícones)
   ├── Seção Portfólio (galeria com grid)
   ├── Seção Depoimentos
   └── Seção Contato (formulário + WhatsApp)

📄 Sobre (página dedicada com história)
📄 Serviços (detalhamento de cada serviço)
📄 Portfólio (galeria ampliada com filtros)
📄 Contato (formulário + mapa + redes sociais)

📰 Blog (opcional — posts)
💡 Regra do freela: 90% dos clientes só precisam da Home + Sobre + Serviços + Contato. O resto é upsell. Comece pelo mínimo.

⏱️ Cronograma (4h)

MinutoO que fazer
00:00–00:15Instalar WP, tema Astra, plugins essenciais
00:15–00:30Criar todas as páginas vazias e configurar menu
00:30–01:30Construir Home Page (Hero + Sobre + Serviços)
01:30–02:00Finalizar Home (Portfólio, Depoimentos, Contato)
02:00–02:30Páginas internas: Sobre e Serviços
02:30–03:00Páginas internas: Portfólio e Contato
03:00–03:30Ajustar responsivo (mobile + tablet)
03:30–04:00SEO básico + testes + entrega

🏗️ Passo a Passo

1. Preparação (15 min)

# No WordPress admin:
Aparência → Temas → Adicionar Novo → "Astra" → Instalar → Ativar

Plugins → Adicionar Novo:
  ✓ Elementor
  ✓ Yoast SEO
  ✓ WPForms Lite
  ✓ Wordfence Security

2. Criar Estrutura Base (15 min)

Páginas → Adicionar Nova:
  ✚ "Home"        → Publicar
  ✚ "Sobre"       → Publicar
  ✚ "Serviços"    → Publicar
  ✚ "Portfólio"   → Publicar
  ✚ "Contato"     → Publicar

Aparência → Menus:
  Criar menu "Principal"
  Adicionar: Home, Sobre, Serviços, Portfólio, Contato
  Localização: "Primary Menu"
  ✅ Salvar

Configurações → Leitura:
  "Sua página inicial": Página estática
  Página inicial: Home
💡 O menu do Astra aparece automaticamente no topo. Zero código.

3. Home Page — Hero Section (20 min)

A Hero Section é a primeira coisa que o visitante vê:

No Elementor:

1. Editar página "Home" com Elementor
2. Adicionar nova Seção → 1 coluna
3. Estilo → Background → Imagem → foto de fundo
4. Altura mínima: 100vh (tela cheia)
5. Background Overlay → preto com 50% opacidade
6. Widgets dentro da coluna:
   - Heading: Nome da empresa + slogan
   - Text Editor: Descrição de 1–2 linhas
   - Button: "Solicitar Orçamento" → link /contato

Truques visuais

💡 Imagens gratuitas: Unsplash.com, Pexels.com, Freepik.com. Baixe em 1920×1080 para Hero.

4. Home Page — Seção Sobre (15 min)

Logo abaixo do Hero, conte quem é a empresa em 2–3 parágrafos:

Nova Seção → 2 colunas (60% texto / 40% foto)
Coluna esquerda: Heading + Text Editor + Button "Saiba Mais"
Coluna direita: Widget Image com foto profissional

Dica de copywriting

❌ Ruim✅ Bom
Somos uma empresa de tecnologia fundada em 2020...Transformamos ideias em sites que vendem. Já ajudamos 50+ negócios a ter presença digital profissional.
💡 O cliente quer saber o que você faz POR ELE. Fale em benefícios.

5. Home Page — Seção Serviços (20 min)

Grid de cards: ícone + título + descrição curta.

1. Nova Seção → background contrastante
2. Heading centralizado: "Nossos Serviços"
3. Seção Interna com 3 colunas
4. Cada coluna: Icon Box (ícone + título + descrição)
ÍconeTítuloDescrição
🌐Sites InstitucionaisSites profissionais com design moderno
📱Landing PagesPáginas de alta conversão para campanhas
🛒E-commerceLojas completas com pagamento online
🔍SEOOtimização para aparecer no Google
💡 Se os ícones nativos não servirem, use Iconify — 200.000+ ícones gratuitos.

6. Home Page — Portfólio (15 min)

1. Nova Seção
2. Heading: "Trabalhos Recentes"
3. Widget Gallery: 3 colunas, espaçamento 15px, lightbox ativado
💡 3 projetos bem apresentados valem mais que 10 mal feitos. Qualidade > Quantidade.

7. Home Page — Contato (15 min)

Nova Seção → 2 colunas
Coluna esquerda: WPForms → selecionar formulário
Coluna direita: informaçཞes de contato
  - Icon List: Telefone, Email, Endereço
  - Button: WhatsApp → https://wa.me/55DDD+NUMERO?text=Olá!
💡 Link do WhatsApp: https://wa.me/55DDD+NUMERO?text=Olá!+Gostaria+de+um+orçamento.

📱 Responsivo (30 min)

O Elementor tem modo responsivo integrado — alterne entre Desktop, Tablet e Mobile:

  1. Clique no ícone 📱 no rodapé do editor
  2. Alterne para Mobile
  3. Ajuste para cada seção:
AjusteDesktopMobile
Tamanho da fonte60–80px32–40px
Margens/PaddingsNormalReduzir pela metade
Colunas3 colunas1 coluna empilhada
ImagensTamanho naturalLargura total

Checklist responsivo

☐ Texto não vaza da tela
☐ Botões têm tamanho tocável (mínimo 44×44px)
☐ Formulário ocupa 100% da largura
☐ Menu mobile funciona (Astra já tem hamburger)
☐ Hero section não ultrapassa a tela

🔍 SEO Básico (30 min)

Yoast SEO — página por página

1. Editar página → rolar até box do Yoast
2. Preencher:
   - Título SEO: diferente do título visível
   - Meta descrição: 120–155 caracteres
   - Palavra-chave foco: 1 por página
3. Seguir recomendações até luz verde do Yoast

Títulos que funcionam

❌ Ruim✅ Bom
HomeHB Studio — Criação de Sites Profissionais em Brasília
ContatoFale Conosco — Solicite um Orçamento pelo WhatsApp
ServiçosServiços de Criação de Sites, Landing Pages e SEO

📋 Checklist de Entrega

☐ Todas as páginas carregam (sem links quebrados)
☐ Formulário de contato funciona (teste o envio)
☐ Links de redes sociais apontam pros lugares certos
☐ Responsivo: testou em celular e tablet?
☐ Velocidade: PageSpeed Insights mínimo 70/100
☐ SEO: Yoast com luz verde em todas as páginas
☐ Favicon definido (Aparência → Personalizar)
☐ Criar usuário "Editor" pro cliente
☐ Gravar vídeo de 2–3 min mostrando como editar
☐ Ativar backup automático (UpdraftPlus → semanal)

🎨 Dica de Design (Dark Theme HB)

Se o cliente quiser tema escuro (nosso padrão HB):

ElementoValor
Fundo#0B0C15
Texto#E2E8F0
Links / Botões#FF6B35
Seções alternadasEscura #0B0C15 / Clara #13141F
TipografiaInter (Google Fonts)

✏️ Exercícios

1. Prática no seu WordPress de teste

  1. Crie as 5 páginas do site: Home, Sobre, Serviços, Portfólio, Contato
  2. Configure o menu de navegação com essas páginas
  3. Na Home, construa:
    • Hero Section com imagem de fundo, título, subtítulo, botão CTA
    • Seção Sobre com texto + foto (use placeholder)
    • Seção Serviços com 3–4 cards (Icon Box)
    • Seção Contato com formulário WPForms + botão WhatsApp
  4. Torne o site responsivo — teste no visualizador mobile do Elementor
  5. Configure Yoast SEO em TODAS as páginas (título + meta descrição)
  6. Altere a página inicial estática para "Home"

2. Análise de sites reais

  1. Visite 3 sites institucionais de empresas locais
  2. Identifique: usam WordPress? (clique direito → Ver código-fonte → procure "wp-content")
  3. Anote: o que funciona bem? O que está ruim? O que você faria melhor?

3. Precificação

  1. Quanto cobraria por um site institucional de 5 páginas?
  2. Em quantas horas entregaria?
  3. Qual seria seu valor/hora?

✅ Gabarito

1: (prática — o importante é executar todos os passos)

2: (varia conforme os sites visitados — procure por /wp-content/ ou /wp-admin)

3:

💡 Conforme seu portfólio cresce, você cobra mais por projeto (não por hora).

🚀 Próxima Aula

WP Aula 03 — E-commerce com WooCommerce: monte uma loja virtual completa com produtos, carrinho, pagamento via Pix e cartão, gestão de pedidos e frete.

📚 Recursos

← Voltar para Aulas WordPress