Módulo 6.4 Elementor: Design profissional de cabeçalho e rodapé

Objetivo: Aprender a criar cabeçalhos e rodapés coerentes que se mantenham em todas as páginas do seu site com Elementor.

📋 LIÇÃO 4.1: O QUE SÃO HEADERS E FOOTERS E POR QUE SÃO IMPORTANTES?

🏢 A ANALOGIA DO EDIFÍCIO

Imagine seu site como um edifício:

🏠 Header (Cabeçalho): É como a fachada e a porta principal. É a primeira coisa que os visitantes veem, contém a identidade da marca e a navegação principal.
📄 Páginas internas: São os cômodos e espaços. Cada uma tem conteúdo único.
🏢 Footer (Rodapé): É como os alicerces e o porão. Contém informações essenciais, links importantes e dá estabilidade.

🎯 POR QUE SÃO CRÍTICOS?

O Header é crucial porque:

✅ Primeira impressão – Define a percepção da sua marca.
✅ Navegação – Guia os usuários pelo seu site.
✅ Consistência – Mesmo visual em todas as páginas.
✅ Branding – Reforça a identidade visual.

O Footer é essencial porque:

✅ Informações-chave – Contato, legal, redes sociais.
✅ SEO – Links internos importantes.
✅ Credibilidade – Aspecto profissional completo.
✅ Conversões – Última oportunidade para ações.

🚨 LIÇÃO 4.2: LIMITAÇÕES DO ELEMENTOR GRATUITO PARA HEADERS/FOOTERS

📌 REALIDADE INICIAL:

Com Elementor Gratuito, NÃO é possível criar headers e footers globais diretamente. Mas há soluções.

🔧 DUAS OPÇÕES DISPONÍVEIS:

1️⃣ USAR AS OPÇÕES DO SEU TEMA 🌐

Vantagens: Fácil e nativo.
Desvantagens: Menos personalizável.
Ideal para: Projetos que não exigem algo tão sob medida.

2️⃣ USAR PLUGIN COMPLEMENTAR 🔌

Plugin recomendado: “Elementor Header & Footer Builder” por (Turbo Addons) https://es.wordpress.org/plugins/header-footer-builder-for-elementor/.

É gratuito e oficialmente compatível.
Permite projetar headers/footers com Elementor.
Limitação: Menos opções que o Elementor Pro.

🎯 NOSSO CAMINHO RECOMENDADO:

Vamos usar a Opção 2 (plugin complementar) porque:

É gratuito.
É compatível 100% com Elementor.
Prepara você para quando usar o Elementor Pro.
É fácil de aprender.

🔧 LIÇÃO 4.3: INSTALAR ELEMENTOR HEADER & FOOTER BUILDER

PASSO A PASSO DA INSTALAÇÃO:

📂 Vá em Plugins no seu WordPress.
➕ Clique em “Adicionar novo”.
🔍 Busque: “Elementor Header & Footer Builder”.
🎯 Identifique: Autor: Turbo Addons.
⬇️ Instale e ▶️ Ative.

✅ VERIFICAÇÃO DE INSTALAÇÃO CORRETA:

Após ativar:

👀 Olhe o menu esquerdo do WordPress.
Você deve ver: “Turbo H&F Builder”.

🎨 LIÇÃO 4.4: CRIAR SEU PRIMEIRO HEADER PROFISSIONAL

🏗️ ESTRUTURA BÁSICA DE UM HEADER:

Um header profissional típico tem 3 zonas:

┌──────────────────────────────────────────┐
│            ZONA SUPERIOR                 │
│  [Logo]           [Info contato]         │
├──────────────────────────────────────────┤
│            ZONA PRINCIPAL                │
│  [Menu principal]    [Botão CTA]         │
└──────────────────────────────────────────┘

PASSO 1: ACESSAR O CONSTRUTOR:

📁 Vá em: Turbo H&F Builder.
🖱️ Clique em “Header Templates”.
✏️ Dê um nome: “Header Principal”.
🎯 Clique em “Edit with Elementor”.

PASSO 2: ESTRUTURA INICIAL:

Criamos 1 linha:

Linha 1 – Informações rápidas:

➕ Nova seção: 2 colunas (25% | 75%).
Coluna 1: Widget “Logo do site”.
- Seu logo é inserido automaticamente.
- Se você não tem logo: use o widget “Imagem”.
Coluna 2: Widget “Menu” ou “Navegação”.
- Se usar “Menu”: selecione seu menu do WordPress.
- 🎨 Estilo: Espaçamento uniforme, sem sublinhados.

PASSO 3: SALVAR E ASSIGNAR:

💾 Salve seu header.
🚪 Saia do editor.
📍 Em Turbo H&F Builder > Header Templates:
- “Edit conditions”.
- Defina Display Condition > “Entire site” (a condição para mostrar o menu será em todo o site).
- Clique no botão “Update” (salva as alterações).

Agora, ao ver seu site, você verá o novo menu que criou.

📱 LIÇÃO 4.5: HEADER RESPONSIVO – MENU HAMBURGUER

🎯 O PROBLEMA DO CELULAR:

Em telas pequenas, menus horizontais não funcionam.

SOLUÇÃO: MENU HAMBURGUER 🍔

PASSO 1: VER NA VISUALIZAÇÃO CELULAR:

No editor do header.
🖱️ Clique em 📱 Mobile (barra superior).
👁️ Observe: Seu menu provavelmente fica mal ou não como você gostaria.

PASSO 2: CONFIGURAR BREAKPOINT:

⚙️ Vá em: Elementor > Configurações.
📱 Procure: “Dispositivos de visualização”.
📏 Tablet Breakpoint: 768px (padrão).
📏 Mobile Breakpoint: 425px (padrão).

PASSO 3: AJUSTAR O HEADER PARA CELULAR:

Na visualização 📱 Mobile, selecione o menu:
Na coluna da esquerda, edite as opções “Menu mobile”:
1. Você poderá editar o tamanho do ícone hamburguer, cor, alinhamento, etc, a partir das opções “Conteúdo” e “Estilo“.

🏢 LIÇÃO 4.6: CRIAR RODAPÉ COMPLETO

🏗️ ESTRUTURA DE RODAPÉ PROFISSIONAL:

Os melhores rodapés têm 3 partes:

┌────────────────────────────────────────────┐
│         SEÇÃO SUPERIOR                     │
│  [Logo+Descrição] [Links rápidos]          │
│                        [Contato]           │
├────────────────────────────────────────────┤
│         SEÇÃO MÉDIA                        │
│   [Redes sociais] [Métodos de pagamento]   │
├────────────────────────────────────────────┤
│         SEÇÃO INFERIOR                     │
│© 2024 SuaEmpresa | Política de privacidade │
└────────────────────────────────────────────┘

PASSO 1: CRIAR NOVO RODAPÉ:

📁 Vá em: Turbo H&F Builder.
🖱️ Clique em “Footer Templates”.
✏️ Dê um nome: “Rodapé Principal”.
🎯 Clique em “Edit with Elementor”.

PASSO 2: SEÇÃO SUPERIOR (4 COLUNAS):

➕ Nova seção: 4 colunas (25% cada).

Coluna 1 – Logo e descrição:

Logo do site ou Imagem.
Editor de texto abaixo:
- Breve descrição da sua empresa (1-2 linhas).
- 🎨 Estilo: Texto pequeno, cinza claro.

Coluna 2 – Links rápidos:

Título: “Links rápidos” (H4).
Lista de ícones ou Editor de texto:
- Início.
- Serviços.
- Portfólio.
- Contato.
- 🎨 Estilo: Lista sem marcadores.

Coluna 3 – Contato:

Título: “Contato” (H4).
Ícone + texto (telefone).
Ícone + texto (e-mail).
Ícone + texto (endereço).
🎨 Estilo: Ícones pequenos alinhados.

Coluna 4 – Newsletter:

Título: “Newsletter” (H4).
Editor de texto: “Inscreva-se para novidades”.
Formulário (se você tiver Elementor Pro).
Ou Botão “Inscrever-se” com link.

PASSO 3: LINHA SEPARADORA:

➕ Nova seção: 1 coluna.
🧱 Separador
- 📏 Largura: 100%.
- 🎨 Cor: Cinza muito claro (#EEEEEE).
- 📏 Espessura: 1px.

PASSO 4: SEÇÃO INFERIOR (COPYRIGHT):

➕ Nova seção: 2 colunas (50% | 50%).

Coluna 1 – Copyright:

Coluna 2 – Redes sociais:

🧱 Ícones sociais (se seu tema tiver).
Ou Ícones individuais linkados.
🎨 Estilo: Alinhar à direita.

PASSO 5: ESTILO GERAL DO RODAPÉ:

Selecione cada seção do rodapé.
🎨 Estilo > Fundo:
- Cor escura (#222222 ou #333333).
- 🎨 Cor do texto: Cinza claro (#CCCCCC).
📏 Ajuste os preenchimentos:
- Seção superior: 60px acima/abaixo.
- Seção inferior: 30px acima/abaixo.

PASSO 6: SALVAR E ATIVAR:

💾 Salve seu rodapé.
🚪 Saia do editor.
📍 Em Turbo H&F Builder > Footer Templates:
- “Edit conditions”.
- Defina Display Condition > “Entire site” (a condição para mostrar o rodapé será em todo o site).
- Clique no botão “Update” (salva as alterações).

🏆 PROJETO PRÁTICO: HEADER E RODAPÉ COMPLETOS

📋 OBJETIVO:

Criar header e rodapé profissionais para um site de serviços digitais.

🎯 CRITÉRIOS DE AVALIAÇÃO:

PARA O HEADER:

Logo alinhado à esquerda.
Menu principal com no mínimo 5 links.
Botão CTA “Solicitar orçamento”.
Sticky ativado para o menu (ativar em “Edit Conditions”).
Funcional no celular (hamburguer ou simplificado).
Cores coerentes com a identidade.

PARA O RODAPÉ:

4 colunas no desktop.
Informações de contato completas.
Links legais (privacidade, termos).
Redes sociais.
Copyright atualizado.
Newsletter ou CTA final.

⏳ TEMPO ESTIMADO:

Header: 30 minutos.
Rodapé: 30 minutos.
Teste responsivo: 10 minutos.
Total: 1 hora e 10 minutos.

📝 CHECKLIST FINAL:

✅ Header aparece em todas as páginas.
✅ Rodapé completo e sem erros.
✅ Celular totalmente funcional.
✅ Sticky funciona corretamente.
✅ Links todos funcionam.
✅ Cores coerentes em ambos.
✅ Logo nítido e bem dimensionado.
✅ CTA claro e visível.

💡 CONSELHOS PROFISSIONAIS

🎨 DESIGN VISUAL:

Mantenha a altura do header consistente (80-100px ideal).
Use espaços generosos no rodapé (não amontoe).
Hierarquize informações: o mais importante acima/esquerda.
Contraste suficiente para leitura fácil.

⚡ DESEMPENHO:

Otimize o logo para web (PNG comprimido).
Não use widgets complexos no header/rodapé.
Use ícones SVG em vez de imagens (widgets de ícones já estão em svg).

✅ RESUMO DO QUE FOI APRENDIDO

Neste módulo, você aprendeu:

✅ Importância de headers e rodapés profissionais.
✅ Soluções para Elementor Gratuito (plugin complementar).
✅ Criação de header completo com navegação.
✅ Design de rodapé estruturado e útil.
✅ Técnicas responsivas (menu hamburguer).

🎉 EXCELENTE TRABALHO!
Agora seu site terá a base profissional que merece com header e rodapé coerentes e funcionais.

Você está pronto para projetar a página mais importante: a Home?

No Módulo 5 você aprenderá a:

🏠 Estruturar uma Home Page completa e eficaz.
🎯 Hierarquizar conteúdo para máxima conversão e visitas.
📱 Projetar seções hero impactantes.
✨ Implementar chamadas à ação eficazes.