Objetivo: Conhecer em profundidade os widgets básicos e aprender a controlar a estrutura de suas páginas com Elementor no WordPress.

📋 LIÇÃO 3.1: WIDGETS, OS BLOCOS DE CONSTRUÇÃO

Um widget no Elementor é um bloco funcional que realiza uma tarefa específica. Se sua página web fosse uma casa, os widgets seriam os tijolos, janelas, portas e móveis.

🏗️ A HIERARQUIA DE CONSTRUÇÃO

Para entender como tudo funciona, é crucial conhecer esta estrutura:

 1. 📄 PÁGINA (sua tela completa)
   ↓
2. 🏗️ SEÇÃO (áreas horizontais principais)
   ↓
3. 📊 COLUNAS (divisões dentro de cada seção)
   ↓
4. 🧱 WIDGETS (conteúdo específico dentro de cada coluna)

Exemplo visual:

[🏢 SEÇÃO 1: Cabeçalho Hero]
├── [📊 COLUNA 1 (60%)]
│   └── 🧱 Widget Título "Bem-vindos"
│   └── 🧱 Widget Texto "Descrição"
│   └── 🧱 Widget Botão "Ver mais"
│
└── [📊 COLUNA 2 (40%)]
    └── 🧱 Widget Imagem (foto principal)

🎯 LIÇÃO 3.2: OS WIDGETS BÁSICOS INDISPENSÁVEIS

1. 🏷️ TÍTULO

Para que serve? Para títulos e subtítulos de qualquer nível (H1, H2, H3…)

Configuração essencial:

• 📝 Título: O texto que será exibido.
• 🏷️ Tag HTML: H1 (principal), H2 (seções), H3 (subseções).
• 🔗 Link: Se você quiser que seja clicável.
• 🎨 Estilo: Cor, tipografia, alinhamento, sombras.

💡 Prática rápida:

1. Adicione um Título à sua página.
2. Altere-o para Tag H2.

2. 🖼️ IMAGEM

Para que serve? Para mostrar fotografias, ilustrações, logotipos…

Configuração essencial:

• 🖼️ Selecionar imagem: Do seu computador ou biblioteca.
• 📏 Tamanho: Miniatura, Médio, Grande, Completo.
• 🔗 Link: Para onde leva ao clicar.
• 📝 Texto alternativo: Importante para SEO e acessibilidade.

💡 Dica profissional:
Sempre adicione um Texto alternativo descritivo. Para uma imagem de escritório: “Escritório moderno com equipe trabalhando” em vez de apenas “escritorio.jpg”.

3. 📝 EDITOR DE TEXTO

Para que serve? Para parágrafos, listas, textos longos…

Diferença com Título:

• Título: Títulos curtos (1 linha).
• Editor de texto: Parágrafos longos (múltiplas linhas).

Controles de formato:

✏️ Negrito | 𝒞 Itálico | 🔗 Link | 📋 Listas | 🔄 Alinhamento

💡 Prática rápida:

1. Adicione um Editor de texto.
2. Adicione um link para “#” em outra palavra.

4. ▶️ VÍDEO

Para que serve? Para inserir vídeos do YouTube, Vimeo ou auto-hospedados.

Configuração essencial:

• 🔗 Link: URL do vídeo (YouTube/Vimeo).
• 🖼️ Imagem de capa: O que é visto antes de reproduzir.
• ⚙️ Reprodução: Autoplay, controles, loop.

⚠️ Importante: Vídeos auto-hospedados (enviados diretamente) podem tornar seu site mais lento. Melhor usar YouTube ou Vimeo.

5. 🔘 BOTÃO

Para que serve? Para chamadas à ação (CTA).

Partes de um botão eficaz:

[🎨 COR ATRATIVA] [✏️ TEXTO CLARO] [🔗 LINK RELEVANTE]

Configuração essencial:

• ✏️ Texto: “Baixar PDF”, “Solicitar orçamento”, “Ver catálogo”.
• 🔗 Link: Para onde o botão leva.
• 🎨 Estilo: Cores (normal e hover), bordas, sombras.

💡 Psicologia do botão:

• Texto em primeira pessoa: “Quero meu orçamento” vs “Solicitar orçamento”.
• Urgência: “Oferta termina em 24h”.
• Benefício: “Baixar guia gratuito”.

6. ➖ SEPARADOR

Para que serve? Para criar linhas divisórias entre seções.

Tipos de linhas:

• Sólida: ───────
• Dupla: ═══════
• Pontilhada: ┈┈┈┈┈┈
• Decorativa: ~~~ ~~~~ ~~~

Configuração:

• 📏 Largura: 100% (toda a largura) ou personalizada.
• 🎨 Estilo: Tipo de linha, espessura, cor.
• ✨ Efeitos: Sombras, animações.

7. ⬜ ESPAÇADOR

Para que serve? Para criar espaço vazio (margens personalizadas).

Casos de uso:

• Espaçar dois widgets sem alterar as margens dos widgets.
• Criar um espaço preciso entre elementos.
• Compensar alturas em colunas.

💡 Dica: Melhor usar Espaçador do que margens grandes em widgets individuais.

8. 🗺️ GOOGLE MAPS

Para que serve? Para mostrar localizações geográficas.

Configuração essencial:

• 📍 Endereço: Seu endereço físico.
• 🔍 Zoom: Nível de aproximação (10-15 para rua).
• 🎨 Estilo: Cores do mapa.

⚡ Otimização: Nas versões recentes, você pode ativar o carregamento diferido (lazy load) para que o mapa não deixe a página inicial mais lenta.

9. ✨ ÍCONE

Para que serve? Para ícones decorativos ou informativos.

Fontes de ícones disponíveis:

• Font Awesome: 1.500+ ícones gratuitos.
• Sua própria biblioteca: SVGs personalizados.

💡 Prática:

1. Adicione um widget Ícone.
2. Procure “phone” (telefone).
3. Adicione-o antes do seu número de telefone.

📱 LIÇÃO 3.3: AJUSTES ESPECÍFICOS POR DISPOSITIVO

Como funciona:

1. 📱 Mobile na barra superior.
2. Faça as alterações.
3. As alterações se aplicam apenas ao mobile.

Exemplos comuns:

Dica: se você aplicar alterações a tablets, essas alterações só se aplicarão a partir dos tablets para baixo (ou seja, tablets e mobile) e se você aplicar a mobile, as alterações só se aplicarão aos mobile. Portanto, se em tablets e mobile algo estiver ruim, ajustando em tablets pode já ficar bom no mobile sem precisar fazer modificações na visualização mobile. Digamos que as alterações herdam das visualizações superiores: PC > Tablet (herda do PC) > Mobile (herda do tablet).

🚫 OCULTAR ELEMENTOS EM CERTOS DISPOSITIVOS

Quando usar:

• 🖼️ Imagens decorativas não essenciais no mobile
• 📊 Widgets complexos que não funcionam bem no mobile
• ✨ Elementos puramente estéticos

Como fazer:

1. Selecione o elemento.
2. 🚀 Avançado.
3. “Responsivo”.
4. Ocultar em mobile/tablet/desktop.

⚠️ Cuidado: Não oculte conteúdo importante apenas porque “não cabe”.

💼 LIÇÃO 3.4: PROJETO PRÁTICO – PÁGINA “SERVIÇOS”

📋 OBJETIVO FINAL:

• ✅ Cabeçalho hero com título e descrição.
• ✅ 3 serviços em grade responsiva.
• ✅ Seção de depoimentos.
• ✅ Chamada à ação final.

🏗️ PASSO 1: ESTRUTURA BASE

1. Página nova > “Nossos Serviços”.
2. Abrir com Elementor.
3. Seção 1: 1 coluna (para o cabeçalho hero).

🎨 PASSO 2: CABEÇALHO HERO

Na seção de 1 coluna:

1. 🧱 Título: “Soluções Profissionais para Seu Negócio”
   • Tag HTML: H1.
   • Alinhamento: Centro.
   • Tamanho: 52px (desktop) / 36px (mobile).
2. 🧱 Editor de texto: (abaixo do título)
   • Texto: “Oferecemos serviços especializados projetados para impulsionar seu crescimento e otimizar suas operações empresariais.”
   • Alinhamento: Centro.
3. 🧱 Botão: “Descobrir serviços”.
   • Link: “#servicos” (sem aspas).
   • Estilo: Botão preenchido.

💡 Dica: No Estilo da seção, coloque um fundo degradê suave.

📊 PASSO 3: SEÇÃO DE SERVIÇOS

1. Nova seção: 3 colunas (33% | 33% | 33%).
2. Título da seção: (acima das colunas).
   • 🧱 Título: “Nossos Serviços Principais”.
   • Tag HTML: H2.
   • Alinhamento: Centro.

Coluna 1 – Serviço A:

1. 🧱 Ícone: ✨ (escolha um relacionado ao design).
2. 🧱 Título: “Design Web”.
   • Tag HTML: H3.
   • Alinhamento: Centro.
3. 🧱 Editor de texto: “Criamos sites modernos, rápidos e otimizados para conversões.”
   • Alinhamento: Centro.
4. 🧱 Botão: “Mais informações”.
   • Tamanho: Pequeno.
   • Alinhamento: Centro.

Coluna 2 – Serviço B:

1. Duplique a coluna 1 (clique na coluna > duplicar).
2. Altere o ícone, o título e a descrição.
3. Certifique-se de que tudo esteja centralizado.

Coluna 3 – Serviço C:

1. Repita o processo para a terceira coluna.

📱 PASSO 4: OTIMIZAR PARA MOBILE

1. 📱 Mobile.
2. Verifique cada seção:
   • Os textos estão legíveis?
   • Os botões são fáceis de tocar?
   • As colunas empilham corretamente?
3. Ajuste o necessário:
   • Tamanhos de fonte.
   • Margens e espaçamentos.
   • Tamanho dos botões.

💾 PASSO 5: SALVAR E TESTAR

1. 👁️ Visualizar no desktop.
2. 👁️ Visualizar no mobile (use o seletor de dispositivo do navegador).
3. 🎯 Publicar quando estiver satisfeito.

🚨 ERROS COMUNS E SOLUÇÕES

1️⃣ “Minhas colunas não empilham no mobile”

Causa: Você não configurou bem o responsivo.
Solução:

1. 📱 Mobile.
2. Selecione a coluna.
3. 📋 Layout > Largura > coloque 100%
4. “Empilhar verticalmente” se sua versão tiver.

2️⃣ “Os widgets saem da coluna”

Causa: Margens ou preenchimentos muito grandes.
Solução:

1. Selecione o widget.
2. 🚀 Avançado.
3. Reduza Margens e Preenchimento (Padding).
4. Verifique na visualização mobile.

3️⃣ “Não consigo alinhar verticalmente”

Causa: Você está tentando alinhar o widget, não a coluna.
Solução:

1. Selecione a COLUNA (borda).
2. 📋 Layout.
3. “Alinhamento vertical”.
4. Escolha Centro.

4️⃣ “O design fica diferente ao publicar”

Causa: Cache do navegador ou plugins.
Solução:

1. Limpe o cache (Ctrl+F5).
2. Desative plugins de cache temporariamente.
3. Regenere o CSS em Elementor > Ferramentas.

💡 CONSELHOS PROFISSIONAIS DO MÓDULO 3

🎯 PLANEJE ANTES DE CONSTRUIR

1. Defina hierarquia: O que é H1, H2, H3…
2. Escolha cores: 1 principal, 1 secundária, 1 de destaque.
3. Selecione fontes: 1 para títulos, 1 para texto.

⚡ OTIMIZE PARA VELOCIDADE

1. Comprima imagens antes de enviá-las.
2. Limite animações (deixam a página mais lenta).
3. Verifique no mobile com conexão 3G simulada.

🔧 MANTENHA CONSISTÊNCIA

1. Mesmas margens em todas as seções similares.
2. Mesmo estilo para todos os botões do mesmo tipo.
3. Mesmo preenchimento (padding) em todos os cards de serviços.
4. Mesmas cores para todos os links.

📱 TESTE EM DISPOSITIVOS REAIS

1. Seu celular (o que você mais usa).
2. Tablet de um familiar.
3. Computador com tela grande.
4. Navegadores diferentes: Chrome, Safari, Firefox.

✅ RESUMO DAS COMPETÊNCIAS DO MÓDULO 3

Agora você sabe como:

1. ✅ Usar os 9 widgets básicos com maestria.
2. ✅ Controlar seções e colunas a nível profissional.
3. ✅ Criar páginas complexas com estrutura lógica.
4. ✅ Solucionar erros comuns de estrutura.
5. ✅ Aplicar conselhos profissionais de otimização.

🏆 DESAFIO FINAL DO MÓDULO 3

Crie uma página “Equipe” com estes requisitos:

📋 REQUISITOS TÉCNICOS:

• ✅ Cabeçalho hero com título + descrição.
• ✅ Grade de 3 membros da equipe (foto, nome, cargo, biografia curta).
• ✅ Seção secundária com 3 ícones + estatísticas.
• ✅ Botão final “Junte-se à nossa equipe”.
• ✅ Completamente responsivo.

🎯 CRITÉRIOS DE AVALIAÇÃO:

• Consistência: Mesmos estilos para elementos similares.
• Hierarquia: Títulos H1, H2, H3 usados corretamente.
• Responsivo: Funciona perfeitamente no mobile e tablet.
• Espaçamento: Margens e preenchimentos consistentes.
• Performance: Imagens otimizadas, sem excesso de efeitos.

🎉 PARABÉNS! Você dominou a essência da construção com Elementor.
No Módulo 4, você aprenderá a criar cabeçalhos e rodapés profissionais que se manterão consistentes em todo o seu site.
Pronto para o próximo nível com o Módulo 4? 🚀