Boas Práticas WordPress e Elementor

Protocolo padrão de implementação para garantir qualidade e consistência

Para Quem é Este Guia?

Este documento serve como protocolo padrão para:

• 👥 Time Easy Builder: Ao criar e subir templates
• 🎨 Usuários: Ao personalizar e criar páginas

1. Nomenclatura de Elementos

Por Que Nomear Elementos?

Quando você (ou outra pessoa) voltar para editar a página daqui 3 meses, nomes claros economizam horas de trabalho tentando entender onde está cada coisa.

Problema: Elementos com nomes genéricos

❌ Container
❌ Coluna 1
❌ Section 2
❌ Botão

Solução: Nomes descritivos e padronizados

✅ container-hero
✅ btn-cta-whatsapp
✅ secao-depoimentos
✅ card-servico-01

Padrão Recomendado

Use: tipo-funcao-identificador

Como Nomear no Elementor

2. Otimização de Imagens

Por Que Otimizar Imagens?

80% da lentidão de sites vem de imagens pesadas!

Imagem de 5MB (direto da câmera) = Site lento = Cliente insatisfeito = Menos vendas

Formatos: O Que Usar e Quando

**Vantagens:**
- Escalável infinitamente (não perde qualidade)
- Arquivo MUITO pequeno
- Pode alterar cores via CSS

**Quando usar:**
- Logos da empresa
- Ícones (ícones do Font Awesome já são SVG internamente)
- Ilustrações vetoriais
- Formas geométricas

**Onde criar:**
- Figma (exportar como SVG)
- Illustrator (salvar como SVG)
- Canva Pro (baixar como SVG)

Tamanhos: O Que Usar Para Cada Caso

Proporções: Quando Usar Cada Uma

3. Tipografia Responsiva

Por Que Usar REM ao Invés de PX?

REM é relativo ao tamanho base do navegador (16px), então:

• ✅ Respeita preferências do usuário (acessibilidade)
• ✅ Escala proporcionalmente
• ✅ Mais fácil de ajustar globalmente

PX é fixo:

• ❌ Não respeita preferências do usuário
• ❌ Difícil de manter consistência
• ❌ Não escala bem

Tabela Completa de Tamanhos

Use esta tabela como referência ao ajustar textos:

Quando Usar Cada Tamanho

**Exemplo:**
> "Crie Sites Profissionais em Horas, Não Dias"

**Desktop:** 3rem (48px)
**Mobile:** 1.75rem (28px)

Tipografia Fluida com clamp()

O que é clamp(): Faz o texto crescer/diminuir automaticamente conforme o tamanho da tela, SEM media queries!

Sintaxe: clamp(mínimo, ideal, máximo)

Exemplo prático:

/* H1 que escala automaticamente */
font-size: clamp(1.75rem, 5vw, 3.75rem);
/* Mobile: 1.75rem → Desktop: 3.75rem → Entre eles: 5% da largura da tela */

Como usar: copie a linha acima e cole no campo "CSS Personalizado" da página (ou no CSS do título). O texto vai encolher sozinho no celular e crescer no computador, sem você fazer nada. Se quiser, troque o 1.75rem pelo menor tamanho que o texto pode ter e o 3.75rem pelo maior; o 5vw no meio controla a velocidade dessa mudança (pode deixar como está).

Por que usar:

• ✅ Menos código (não precisa media query)
• ✅ Transição suave entre tamanhos
• ✅ Mais fluido e profissional

4. Espaçamentos (Padding e Margin)

Por Que Usar Sistema de Múltiplos?

Consistência visual! Usar sempre múltiplos de 8px (0.5rem) cria ritmo visual harmonioso.

Problema: Espaçamentos aleatórios

❌ padding: 13px 27px; (valores aleatórios)
❌ margin-bottom: 19px; (sem padrão)

Solução: Sistema padronizado

✅ padding: 1rem 2rem; (16px 32px - múltiplos de 8)
✅ margin-bottom: 1.5rem; (24px - múltiplo de 8)

Sistema de Espaçamento Base

Containers: Quando e Como

Container Principal (seção inteira):

Container Interno (nested):

Espaço Entre Seções

Por que importa: Separação visual clara = página organizada e profissional

5. Botões Profissionais

Por Que Tamanho de Botão Importa?

Botões pequenos demais: Difícil de clicar (especialmente no mobile!) Botões grandes demais: Parecem amadores e poluem a página

Tamanhos Padrão

**Como usar:** copie o código acima e cole no campo "CSS Personalizado" do botão. Ele deixa o botão com um espaço interno confortável, texto de tamanho normal e cantos levemente arredondados. Quer cantos mais arredondados? Aumente o `0.5rem`. Quer cantos retos? Use `0`.

Botão Full Width no Mobile

Por quê fazer: Botões largos no mobile são MUITO mais fáceis de clicar!

/* Desktop e Tablet */
width: auto;

/* Mobile */
width: 100%; /* Ocupa tela toda */

Como usar: o jeito mais simples é fazer pelo Elementor (veja a dica abaixo). Se preferir colar código, ponha width: 100% no CSS do botão na visão mobile — assim ele estica e ocupa a tela toda no celular, ficando bem mais fácil de tocar. Não precisa mudar nada no código.

6. Padrões de Código CSS

Estrutura e Organização

Como organizar CSS personalizado no Elementor:

/* ============================================
   SEÇÃO: HERO PRINCIPAL
   ============================================ */

/* Botão CTA com efeito hover */
.btn-cta-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s ease;
}

.btn-cta-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* ============================================
   SEÇÃO: CARDS DE SERVIÇOS
   ============================================ */

.card-servico {
  border-radius: 1rem;
  transition: transform 0.3s ease;
}

.card-servico:hover {
  transform: scale(1.05);
}

Como usar: copie o código acima e cole no campo "CSS Personalizado" da página. Ele deixa o botão com fundo colorido em degradê que sobe levemente quando o mouse passa, e faz os cards crescerem um pouco ao passar o mouse. Para funcionar, o botão precisa ter a classe btn-cta-hero e os cards a classe card-servico (você coloca isso na aba "Avançado" do elemento). Quer outras cores no fundo? Troque os dois códigos de cor #667eea e #764ba2.

Boas Práticas de CSS

```css
.elemento {
  /* 1. Posicionamento */
  position: relative;
  top: 0;
  left: 0;

  /* 2. Box Model */
  display: flex;
  width: 100%;
  padding: 1rem;
  margin: 0;

  /* 3. Tipografia */
  font-size: 1rem;
  font-weight: 600;
  color: #333;

  /* 4. Visual */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.5rem;

  /* 5. Animações */
  transition: all 0.3s ease;
}
```

```css
/* Defina variáveis no topo */
:root {
  --cor-primaria: #667eea;
  --cor-secundaria: #764ba2;
  --cor-texto: #333333;
  --cor-fundo: #ffffff;
}

/* Use nas classes */
.btn-cta {
  background: var(--cor-primaria);
  color: var(--cor-fundo);
}

.btn-secundario {
  background: var(--cor-secundaria);
}
```

7. Padrões de JavaScript

Quando Usar JavaScript no Elementor

Use JS para:

• ✅ Interações (clique, scroll, hover complexo)
• ✅ Animações programáticas
• ✅ Validação de formulários customizada
• ✅ Integração com APIs

NÃO use JS para:

• ❌ Coisas que CSS faz melhor (animações simples, hover, transições)
• ❌ Estilização visual
• ❌ Layouts

Estrutura de Código JS

/* ============================================
   SCROLL SUAVE PARA SEÇÕES
   ============================================ */

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

/* ============================================
   MODAL DE VÍDEO
   ============================================ */

function abrirModal(videoId) {
  const modal = document.getElementById('modal-video');
  const iframe = document.getElementById('video-frame');

  // Insere URL do YouTube
  iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;

  // Mostra modal
  modal.classList.add('ativo');
}

function fecharModal() {
  const modal = document.getElementById('modal-video');
  const iframe = document.getElementById('video-frame');

  // Para vídeo
  iframe.src = '';

  // Esconde modal
  modal.classList.remove('ativo');
}

Como usar: copie este código e cole num bloco/widget de HTML da página (dentro de uma tag de script) ou no campo de código personalizado. A primeira parte faz a página rolar suavemente até a seção quando alguém clica num link de menu. A segunda parte abre e fecha uma janela de vídeo. Para o vídeo funcionar, o botão precisa chamar abrirModal com o código do vídeo do YouTube. Se não for usar vídeo, pode apagar a segunda parte.

Boas Práticas de JavaScript

    // ❌ Errado (antigo)
    var nome = "João";

    // ✅ Certo (moderno)
    const nome = "João"; // Não muda
    let idade = 25; // Pode mudar
    ```

**Por quê:** Mais seguro e previsível

    // Aguarda 300ms antes de executar
    // para evitar múltiplos cliques
    setTimeout(() => {
      enviarFormulario();
    }, 300);
    ```

**Como usar:** o ponto aqui é o hábito de escrever um comentário curto explicando o porquê do código. Se for usar este trecho, ele espera um instantinho (0,3 segundo) antes de enviar o formulário, evitando envio duplicado por clique repetido. Quer mais ou menos espera? Troque o número `300` (são milésimos de segundo; 1000 = 1 segundo).

**Por quê:** Você vai esquecer daqui 1 semana!

    // ❌ Evite inline
    <button onclick="clicar()">

    // ✅ Use addEventListener
    button.addEventListener('click', () => {
      // código aqui
    });
    ```

**Por quê:** Mais organizado e manutenível

    const elemento = document.querySelector('.botao');

    if (elemento) {
      elemento.addEventListener('click', () => {
        // Código seguro
      });
    }
    ```

**Como usar:** copie este modelo quando for mexer com algum elemento via código. Ele primeiro confere se o elemento existe na página antes de tentar usá-lo, evitando que o resto do código pare de funcionar por causa de um erro. Troque `.botao` pela classe do elemento que você quer usar.

**Por quê:** Evita erros se elemento não existir

8. Estrutura de Headings (SEO)

Por Que Hierarquia Importa?

Google usa headings para entender seu site!

✅ Hierarquia correta = Melhor SEO ❌ Hierarquia errada = Google confuso = Menos visitantes

Regras Fundamentais

Exemplo de Estrutura Completa

📄 Página: "Easy Builder - Crie Sites Rápido"

H1 - "Crie Sites Profissionais em Horas" (Hero)

  H2 - "Sobre o Easy Builder" (Seção)
    H3 - "Nossa Missão" (Subseção)
    H3 - "Nossos Valores" (Subseção)

  H2 - "Funcionalidades" (Seção)
    H3 - "Templates Prontos" (Card 1)
    H3 - "IA Integrada" (Card 2)
    H3 - "Suporte 24/7" (Card 3)

  H2 - "Depoimentos" (Seção)
    H3 - "João Silva" (Depoimento 1)
    H3 - "Maria Santos" (Depoimento 2)

  H2 - "Preços" (Seção)

  H2 - "Fale Conosco" (Seção)

9. Cores e Contraste (Acessibilidade)

Por Que Contraste Importa?

Contraste ruim = Texto ilegível = Usuário desiste = Cliente perde venda

Além disso, acessibilidade é LEI em muitos países!

Contraste Mínimo (WCAG)

Combinações Seguras Prontas

Texto escuro em fundo claro:

• Texto: #222222 ou #333333
• Fundo: #FFFFFF ou #F5F5F5
• Contraste: 12:1 ✅

Texto claro em fundo escuro:

• Texto: #FFFFFF ou #F5F5F5
• Fundo: #222222 ou #1A1A1A
• Contraste: 14:1 ✅

10. Performance: O Que Realmente Importa

4 Pilares da Performance

.btn-cta:hover {
  transform: translateY(-3px);
}
```

11. Responsividade: Como Pensar Mobile-First

Por Que Mobile-First?

70% dos acessos vêm de celular! Se o site não funciona bem no mobile, você perde 70% das conversões.

Breakpoints: O Que São e Como Usar

Breakpoints = Pontos onde layout muda

Como Configurar no Elementor

Técnicas Responsivas Essenciais

12. Formulários: UX e Acessibilidade

Por Que Formulários Importam?

Formulário ruim = Cliente desiste = Você perde lead/venda

Tamanhos Mínimos (Especialmente Mobile!)

Labels e Placeholders

Labels (texto acima do campo):

<label>Nome Completo</label>
<input type="text" placeholder="Digite seu nome">

Como usar: no Elementor você normalmente cria o campo pelo próprio widget de formulário, sem digitar esse código. Mas é assim que ele funciona por baixo: o "Nome Completo" é o rótulo que fica acima do campo (importante para acessibilidade) e o "Digite seu nome" é o texto-exemplo cinza que some quando a pessoa começa a digitar. Troque esses dois textos pelo que fizer sentido no seu campo.

Quando usar:

• ✅ Sempre use labels (acessibilidade!)
• ✅ Placeholder como exemplo adicional
• ❌ Não use APENAS placeholder sem label

Font size labels:

• Desktop: 0.875-1rem
• Mobile: 0.875-1rem (não menor!)

Textarea (Campo de Mensagem)

Altura mínima:

• Desktop: 9rem (≈6 linhas de texto)
• Mobile: 7rem (≈5 linhas)

Por quê: Usuário precisa ver o que está escrevendo!

Tabela Completa - Formulários (Detalhada)

Largura de Campos (Width)

12.1. Ícones - Tamanhos Detalhados

Por Que Tamanho de Ícone Importa?

Ícones muito pequenos: Invisíveis, perdem impacto Ícones muito grandes: Desproporcionais, amadores

Tabela Completa - Todos os Tipos de Ícones

Dica: Ícones Inline com EM

Por quê usar em para ícones inline:

/* ❌ Com rem (tamanho fixo) */
.icone-inline {
  font-size: 1.125rem; /* Sempre 18px */
}

/* ✅ Com em (escala com texto ao redor) */
.icone-inline {
  font-size: 1.2em; /* 120% do tamanho do texto pai */
}

Como usar: para um ícone que fica no meio de um texto, copie a segunda opção (font-size: 1.2em) e cole no CSS do ícone. Assim ele acompanha o tamanho do texto ao redor automaticamente. O 1.2 quer dizer "20% maior que o texto"; aumente para um ícone maior, diminua para um menor.

Vantagem: Ícone cresce/diminui junto com o texto automaticamente!

12.2. Cards em Grid - Dimensões Completas

Por Que Padronizar Cards?

Consistência visual = Profissionalismo

Cards do mesmo tamanho = Layout harmonioso e organizado

Tabela Completa - Cards de Serviços/Produtos

Layout de Grid Responsivo

Desktop (3 colunas):

.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
}

Como usar: copie e cole no campo "CSS Personalizado" da página. Ele organiza os cards em 3 colunas iguais lado a lado, com um espaço entre eles. Para funcionar, o bloco que contém os cards precisa ter a classe grid-cards (aba "Avançado"). Quer 4 colunas? Troque o 3 por 4. Quer mais espaço entre os cards? Aumente o 1.875rem.

Tablet (2 colunas):

@media (max-width: 1024px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

Como usar: cole este trecho logo abaixo do anterior, no mesmo campo de CSS. Ele faz os cards passarem para 2 colunas quando a tela for de tablet (até 1024px de largura). Não precisa mudar nada; se quiser, ajuste o número de colunas no repeat(2, ...).

Mobile (1 coluna):

@media (max-width: 767px) {
  .grid-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

Como usar: cole este trecho junto dos anteriores, no mesmo campo de CSS. Ele faz os cards ficarem um embaixo do outro (uma coluna só) no celular, que é o ideal em telas pequenas. Não precisa mudar nada.

Grid Automático (Responsivo sem Media Queries!)

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 3vw, 1.875rem);
}
/* Colunas se ajustam automaticamente! */

Como usar: copie e cole no campo "CSS Personalizado" da página (o bloco dos cards precisa ter a classe grid-auto). A grande vantagem deste aqui é que ele ajusta o número de colunas sozinho conforme a tela, sem você precisar configurar tablet e celular separadamente. Quer cards mais largos? Aumente o 18rem. Pode deixar o resto como está.

Aspect Ratio para Imagens em Cards

Por quê usar: Mantém proporção perfeita em qualquer tamanho!

/* Landscape 16:9 (vídeos, banners) */
.card-imagem {
  aspect-ratio: 16/9;
  object-fit: cover; /* Imagem preenche sem distorcer */
}

/* Quadrado 1:1 (produtos, perfis) */
.card-imagem {
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Retrato 4:5 (Instagram style) */
.card-imagem {
  aspect-ratio: 4/5;
  object-fit: cover;
}

Como usar: escolha o trecho da proporção que você quer (16/9 para imagens deitadas tipo vídeo, 1/1 para quadradas, 4/5 para em pé estilo Instagram), copie e cole no CSS da imagem do card (que precisa ter a classe card-imagem). Isso garante que todas as imagens fiquem na mesma proporção e bem cortadas, sem ficarem esticadas. Use só uma das três versões.

12.3. Tabelas de Referência Técnica Completa

Ícones - Valores Exatos por Breakpoint

Formulários - Valores Exatos por Breakpoint

Cards em Grid - Valores Exatos por Breakpoint

Botões - Valores Exatos Completos (REM e PX)

13. Padrões de HTML Semântico

Por Que HTML Semântico?

Google lê HTML para entender seu site!

✅ HTML semântico = Google entende = Melhor SEO ❌ Tudo div genérica = Google confuso = SEO ruim

Tags Semânticas e Quando Usar

14. Acessibilidade (A11y)

Por Que Acessibilidade?

• ✅ Legal: Muitos países exigem por lei
• ✅ Ético: 15% da população tem alguma deficiência
• ✅ SEO: Google favorece sites acessíveis
• ✅ Conversão: Mais gente consegue usar = mais vendas!

Checklist de Acessibilidade

15. Checklist Antes de Publicar

Use este checklist TODA VEZ antes de entregar site:

16. Erros Comuns e Como Evitar

17. Padrões de Código CSS Avançado

Animações e Transições

Quando adicionar animações:

• ✅ Hover em botões (feedback visual)
• ✅ Entrada de elementos (scroll-triggered)
• ✅ Modais/popups (abertura/fechamento)

Código padrão de animação:

/* ============================================
   BOTÃO COM HOVER SUAVE
   ============================================ */
.btn-cta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;

  /* Transição suave */
  transition: all 0.3s ease;

  /* Otimização de performance */
  will-change: transform;
}

.btn-cta:hover {
  /* Levanta botão */
  transform: translateY(-3px);

  /* Adiciona sombra */
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* ============================================
   CARD QUE CRESCE NO HOVER
   ============================================ */
.card-servico {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #e5e5e5;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-servico:hover {
  transform: scale(1.05); /* Cresce 5% */
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ============================================
   GRADIENTE ANIMADO (FUNDO)
   ============================================ */
.hero-gradiente {
  background: linear-gradient(
    270deg,
    #667eea,
    #764ba2,
    #f093fb,
    #4facfe
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Como usar: copie a parte que você quiser e cole no campo "CSS Personalizado" da página. São três efeitos prontos: um botão que sobe ao passar o mouse (classe btn-cta), um card que cresce um pouco ao passar o mouse (classe card-servico) e um fundo com cores que se movem sozinhas (classe hero-gradiente). Lembre de colocar a classe certa no elemento, na aba "Avançado". Quer outras cores? Troque os códigos de cor (#667eea, #764ba2 e os demais).

Efeitos Visuais Comuns

```css
/* Sombra sutil (cards) */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

/* Sombra média (hover) */
box-shadow: 0 10px 25px rgba(0,0,0,0.15);

/* Sombra forte (modais) */
box-shadow: 0 25px 50px rgba(0,0,0,0.25);
```

```css
/* Fundo desfocado atrás de texto */
.texto-sobre-imagem {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
}
```

```css
/* Gradiente linear (esquerda → direita) */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

/* Gradiente diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Gradiente radial (centro para fora) */
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

/* Gradiente em texto */
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
```

18. Meta Tags e SEO

O Que São Meta Tags?

Meta tags = informações SOBRE a página (invisíveis para visitantes, visíveis para Google)

Meta Tags Essenciais

19. Conversão Rápida: REM ↔ PX

Tabela de Conversão

Quando Usar Cada Unidade

20. Ferramentas Essenciais

Resumo Executivo: Referência Rápida

Aplicando no Easy Builder

Próximos Passos