Já sei o básico: começar rápido e workflows avançados

**O que você vai aprender:**



**Criar e configurar página:**

- WordPress → Páginas → Nova página

- Editar com Elementor

- Definições → Layout da Página: **"Elementor Canvas"** (remove cabeçalho/rodapé)



**Usar Easy Builder na prática:**

- Abrir extensão (Alt + clique no ícone)

- Diferença entre: Páginas, Sessões, Botões, Carrosséis e Códigos

- **Páginas completas:** Visualizar antes de copiar

- **Sessões:** Montar página bloco por bloco

- Botão direito → **"Colar de outro site"** → Ctrl+V



**2 Formas de Criar:**

- **Forma 1:** Copiar página inteira → Personalizar tudo

- **Forma 2:** Montar sessão por sessão (Hero → Benefícios → Depoimentos → etc)



**Personalizar elementos:**

- Trocar logo, textos, imagens

- Alterar botões (arrastar e substituir)

- **ERRO COMUM:** Se o botão não colar, cole na área do "+" (fora de container) — nunca crie container/coluna para colar dentro.



**Usar códigos prontos:**

- Remover scroll lateral horizontal

- Customizar scroll bar (cor e estilo)

- Título com degradê (usando tags `{degrade}texto{/degrade}`)

- Códigos → Avançado → Custom CSS



**Recomendação profissional:**

- **ESQUEÇA o Figma para protótipos!**

- Crie DIRETO no Elementor com Easy Builder

- Economize horas que gastaria desenhando frame

- Foco no que importa: layout bem feito, conteúdo organizado, legível

**O que você vai aprender:**



**Processo ANTES do Easy Builder (complexo):**



**Onboarding:**

- Cliente preenche briefing

- Solicita pagamento

- Emite nota fiscal

- Cria tarefa no ClickUp

- Cria grupo WhatsApp

- Cria Drive do cliente

- Revisa arquivos (tipografia, identidade, imagens)



**Desenvolvimento (DEMORADO!):**

- Cria Figma do cliente

- Cria frame no Figma

- Cria layout da primeira sessão

- Aprovação interna → Aprovação cliente

- Se reprovou: VOLTA TUDO!

- Se aprovou: Desenvolve restante do layout

- Nova aprovação → Se reprovou: VOLTA TUDO de novo!



**Implementação (TRETA!):**

- Verifica hospedagem

- Cria usuário

- Configurações iniciais WordPress

- Cria página

- Exporta arquivos do Figma

- Comprime arquivos

- **Puxa container** (trabalho manual!)

- Ajusta responsivo SESSÃO POR SESSÃO

- Anima elementos

- Revisa fidelidade com Figma

- Aprovação interna → Aprovação cliente

- Insere pendências (links, formulários)



**Finalização:**

- Instala template LiteSpeed

- Testa página

- Sobe print no Figma

- Cria política de privacidade

- Aviso de cookies

- Rodapé

- Faz backup

- Otimiza performance

- Salva depoimento

- Entrega → Pagamento → Nota fiscal



**MUITAS ETAPAS. MUITO RETRABALHO!**



---



**Processo DEPOIS do Easy Builder (enxuto):**



**Onboarding:** (Permanece igual)

- Briefing, pagamento, organização



**Desenvolvimento + Implementação (UNIFICADO!):**

1. Instala backup do Easy Builder (tudo configurado!)

2. Cria primeira sessão DIRETO no Elementor (não no Figma!)

3. Faz imagem de fundo

4. Envia para aprovação (site já implementado!)

5. Cliente aprovou? Desenvolve restante com Easy Builder

6. Copia sessões → Cola → Personaliza

7. **Design e implementação acontecem JUNTOS!**

8. Responsivo? SÓ as imagens (resto já vem pronto!)



**Finalização:**

- Backup já vem com plugins otimizados (WP Rocket, LiteSpeed, etc)

- Salva página nos [Meus Recursos](/doc/meus-recursos)

- Solicita depoimento

- Salva no portfólio

- Entrega → Pagamento



**REDUÇÃO BRUTAL DE ETAPAS!**



---



**O que mudou:**



❌ **ELIMINOU:**

- Criar protótipo no Figma

- Recriar tudo no Elementor

- Ajustar responsivo elemento por elemento

- Configurar WordPress do zero

- Instalar e configurar plugins manualmente

- Múltiplas aprovações de layout



✅ **GANHOU:**

- Aprovação com site JÁ implementado

- Cliente vê resultado real, não desenho

- Responsividade automática (só ajusta imagens)

- Velocidade absurda de entrega

- Menos retrabalho

- Mais projetos no mesmo tempo

**O que você vai aprender:**



**Workflow CORRETO:**

1. **Construa PRIMEIRO no Elementor** (não no Figma!)

   - Importa sessão do Easy Builder

   - Altera textos

   - Ajusta cores e fontes globais

   - Define altura da sessão (Layout → Altura mínima)



2. **Pega o tamanho EXATO:**

   - Ajusta altura até ficar ideal (ex: 875px)

   - Anota largura: **1920px (Desktop)** ou **1080px (Mobile)**

   - Altura: O valor que você definiu na sessão



3. **Cria imagem no tamanho certo:**

   - **Figma:** Frame 1920 x 875px (exemplo)

   - **Photoshop:** Novo arquivo com dimensões exatas

   - Cria design da imagem

   - Exporta JPEG/PNG



4. **Converte para WebP:**

   - Abre [Squoosh.app](https://squoosh.app)

   - Arrasta imagem

   - Muda formato para WebP

   - Ajusta qualidade: 60-80

   - Baixa otimizada



5. **Sobe no Elementor:**

   - Sessão → Estilo → Imagem de fundo

   - Configuração: **Posição: Topo Centro** / **Tamanho: Capa (Cover)**



**IMPORTANTE - Altura personalizada:**

- Cada sessão pode ter altura diferente!

- Não use sempre 800px genérico

- Base no conteúdo (título grande = mais altura)

- Ajuste até ficar visualmente equilibrado



**Se não souber altura exata:**

- Puxa setinha da sessão até expandir tudo

- Tira print (screenshot) da sessão inteira

- Cria novo arquivo no Photoshop/Figma

- Cola print → Pega proporções

- Ajusta largura para 1920px

- Altura se ajusta proporcionalmente



**Mobile (processo igual):**

- Largura: **1080px** (padrão mobile)

- Altura: Baseado na sessão mobile

- Orientação: Vertical (não horizontal!)

**O que você vai aprender:**



**Configurar atalho do Easy Builder:**

**Por que isso importa:**

- Sem atalho: 3 cliques para abrir (navegar até extensão → clicar → aguardar)

- Com atalho: 1 teclada (Alt + E → abre na hora!)

- **Economia:** Centenas de cliques por dia!



**Outros atalhos essenciais:**



**No Elementor:**

- `Ctrl + D` - Duplicar elemento

- `Ctrl + Shift + V` - Colar estilo (sem colar conteúdo)

- `Ctrl + E` - Salvar e sair do Elementor

- `Ctrl + S` - Salvar (sem sair)

- Botão direito → **"Colar de outro site"** (ESSENCIAL!)



**No Windows:**

- `Windows + V` - Área de transferência (histórico de cópias)

- **IMPORTANTE:** Limpe antes de copiar elementos grandes!

**O que você vai aprender:**



**Sistema de Pastas (Organização):**

**O que você pode salvar:**



**1. Sessões completas:**

- Botão direito na SESSÃO → Copiar → Salvar

- Reutiliza sessões inteiras entre projetos



**2. Elementos individuais:**

- Ícones animados

- Botões customizados

- Cards com efeitos

- Formulários configurados



**3. Páginas completas:**

- Botão direito → **Copiar todo o conteúdo**

- Salva em "Páginas" nos Meus Recursos

- Reutiliza estrutura inteira!



**4. Códigos CSS/JS:**

- Cria pasta "Códigos"

- Subpastas: "Geral", "Scroll", "Animações", etc

- Salva código → Dá nome descritivo

- Exemplo: "Glow Botão Verde Neon"



**IMPORTANTE - Limpar área de transferência:**

- Windows fica guardando TUDO que você copia

- Elementos do Elementor são PESADOS

- Área cheia = Navegador TRAVA

- **Sempre limpe antes:** Windows + V → Limpar Tudo



**Organização recomendada:**



```

📁 Meus Recursos

  ├─ 📁 Sessões

  │   ├─ 📁 Hero

  │   ├─ 📁 Benefícios

  │   ├─ 📁 Depoimentos

  │   └─ 📁 Rodapé

  ├─ 📁 Elementos

  │   ├─ 📁 Botões

  │   ├─ 📁 Ícones

  │   └─ 📁 Cards

  ├─ 📁 Páginas Completas

  └─ 📁 Códigos

      ├─ 📁 Geral

      ├─ 📁 Scroll

      └─ 📁 Animações

```

**O que você vai aprender:**



**Resposta direta: SIM, dá pra criar qualquer tipo!**



**MAS a questão é:** Nem para TODOS os tipos de sites a gente tem recursos prontos.



**Exemplos reais analisados no vídeo:**



**Site de Empresa/Institucional:**

- Hero com imagem de fundo, título, subtítulo, botão ✅

- Faixa de logos (clientes/parceiros) ✅

- Sessão de benefícios (3-4 cards) ✅

- Sobre nós (imagem + texto) ✅

- Serviços (grid de cards) ✅

- Blog (listagem de posts) ✅

- Mapa + formulário de contato ✅

- Rodapé completo ✅



**E-commerce (exemplo: Viro Plast):**

- Hero ✅

- Faixa de imagens/categorias ✅

- Listing de produtos (WooCommerce) ⚠️ (você salva nos Meus Recursos!)

- Sessão de depoimentos ✅

- Fale conosco ✅

- FAQ ✅

- Rodapé ✅



**O que SEMPRE tem no Easy Builder:**

- Hero (10+ variações)

- Benefícios/Features

- Depoimentos/Prova social

- FAQ

- Formulários

- Rodapé

- Call to action

- Sobre nós



**O que pode NÃO ter igual:**

- Layouts super específicos

- Sessões de nicho muito particular

- Elementos customizados únicos



**SOLUÇÃO quando não tem igual:**

**Mentalidade correta:**



❌ **Errado:** "Não tem exatamente igual, não vou usar"



✅ **Certo:** "Tem parecido? Pego, adapto e pronto! Economizei horas!"



**Easy Builder é:**

- ✅ Otimizador de tempo

- ✅ Base sólida responsiva

- ✅ Biblioteca em constante crescimento



**Easy Builder NÃO é:**

- ❌ Pack com tudo igual ao mockup

- ❌ Substituição do designer

- ❌ Solução automática sem personalização



**Você ainda precisa:**

- Personalizar cores, fontes, textos

- Criar/adaptar imagens de fundo

- Fazer ajustes finos

- Pensar no layout ideal para o cliente