Começando do zero: trilha completa de WordPress e Easy Builder

- É o "guarda-chuva" - estrutura maior com várias páginas

- Exemplo: Portalzão de uma empresa (Home, Quem Somos, Serviços, Blog, Contato)

- Centro de operações da marca na internet



**Landing Page:**

- Página CIRÚRGICA com UM objetivo só

- Capturar lead, vender algo, fazer visitante clicar em botão

- Sem distrações (sem menu cheio de link, sem rodapé complexo)

- Se o site é a casa, landing page é o "quarto do pânico" onde cliente entra e não sai até converter



**Site Institucional:**

- "Cartão de visita online" da empresa

- Mostra quem são, o que fazem, para quem, como contatar

- Não necessariamente vende direto, mas abre porta



**E-commerce:**

- Loja virtual completa

- Vende produtos direto no site

- Tem carrinho, checkout, pagamento, gestão de pedidos

- Sistema de gerenciamento de conteúdo (CMS)

- Plataforma GRATUITA e de código aberto

- Usado por **mais de 40% dos sites do mundo!**

- Permite criar e gerenciar sites sem programar



**Elementor:**

- Construtor visual que funciona DENTRO do WordPress

- Transforma ambiente técnico em editor intuitivo

- Sistema "arrastar e soltar" (drag and drop)

- Você vê as mudanças em tempo real



**Como funcionam juntos:**

1. Instala WordPress no domínio

2. Instala Elementor dentro do WordPress

3. Cria páginas completas sem programar

4. Easy Builder acelera TUDO com templates prontos!

**1. Headline que prende:**

- Logo de cara, título claro e direto

- Promessa forte e específica

- Benefício óbvio para o visitante



**2. Call to Action (CTA) claro:**

- Botão da ação visível e convidativo

- Texto direto: "Começar Agora", "Baixar Grátis", "Falar no WhatsApp"

- Posicionado estrategicamente



**3. Prova social real:**

- Depoimentos de clientes

- Prints de resultados

- Comentários e avaliações

- Quanto mais prova, melhor!



**4. Design responsivo:**

- Funciona bem em qualquer tela

- Mobile, tablet, desktop

- Textos legíveis, botões clicáveis

**O que você vai aprender:**

- O tamanho da oportunidade do mercado (43% dos sites rodam WordPress)

- Quanto você pode cobrar desde o início (R$ 500 a R$ 2.000+ por página)

- Tempo real para criar páginas com Easy Builder (2-4 horas vs dias no método tradicional)

- Casos reais de iniciantes que criaram suas primeiras páginas

- Por que este método é MUITO mais rápido que faculdade ou cursos tradicionais

- Mentalidade certa para ter sucesso (foco em resolver problemas do cliente)

- Quanto tempo até seu primeiro resultado (1 semana a 3 meses dependendo da dedicação)

**O que você vai aprender:**



**Mercado de Infoprodutos:**

- **Link Lead** (R$ 300 a R$ 1.000) - Alternativa profissional ao Link Tree, todo mundo precisa

- **Página de Captura + Obrigado** (R$ 450 a R$ 900) - Para captar leads

- **Página de Vendas** (R$ 600 a R$ 3.000) - Para vender produtos/cursos



**Mercado de Serviços** (advogados, engenheiros, arquitetos, designers):

- **Link Lead** - Todo profissional precisa

- **Página de Captura** - Para agendar consultas

- **Site Institucional** (R$ 1.500 a R$ 7.000+) - Com várias páginas



**Mercado de E-commerce:**

- **Loja Virtual** (R$ 2.000 a R$ 15.000) - Mais complexo, exige plugins específicos

**O que você vai aprender:**



**1. O que é WordPress:**

- WordPress = "Canva dos websites" (facilita tudo, sem código)

- Antes sites eram feitos com linhas de código complicadas

- Agora você cria visualmente (como usar um aplicativo)

- Comparação com Wix, Webflow, Framer



**2. O que você precisa ter:**

- **Servidor/Hospedagem** (onde o WordPress fica instalado)

  - Hostinger: Mais barata (R$ 12/mês)

  - StayCloud: Mais profissional (R$ 27/mês) - Recomendada

  - Ou instalação LOCAL no seu computador (GRÁTIS!)



- **Domínio** (o nome do seu site - ex: seunome.com.br)

  - Não é obrigatório para testar

  - Mas precisa para publicar online



- **WordPress** (instalado no servidor - você aperta 1 botão!)



- **Easy Builder** (a extensão com templates prontos)



**3. Como Easy Builder facilita:**

- Você NÃO precisa aprender a montar do zero

- Importa templates PRONTOS

- Só personaliza (troca textos, cores, imagens)

- Animações, efeitos, carrosséis = tudo já vem pronto!

**O que você vai aprender:**



**Hospedagem + Domínio:**

- Como funciona e quanto custa (R$ 12 a R$ 27/mês)

- Onde comprar domínio (R$ 29,99/ano ou grátis em alguns planos)

- Diferença entre as hospedagens



**Instalação na Hostinger:**

- Processo: Comprar plano → Domínio grátis incluído → Apertar botões → WordPress instalado

- Painél simples e rápido

- Suporte de qualidade



**Instalação na StayCloud:**

- Mesmo processo simplificado

- Domínio grátis no plano anual

- Servidor mais rápido e profissional

- Cupom de desconto com link de indicação



**Instalação na TurboCloud:**

- Usa cPanel (painel mais técnico)

- Precisa fazer apontamento DNS

- WordPress Manager para instalar

- Tutorial de DNS em 2-3 minutos



**Instalação LOCAL (GRÁTIS!):**

- Seu próprio computador vira servidor

- Não precisa pagar hospedagem para aprender

- Link para vídeo no YouTube explicando



**Como acessar depois de instalar:**

- Seu domínio + `/wp-admin` = Painel administrativo

- Use usuário e senha que você criou na instalação

**O que você vai aprender:**



**Para quem JÁ TEM WordPress do cliente:**

- Passar pelo onboarding (3-4 passos simples)

- Instalar plugins necessários

- Ajustes de compatibilidade

- OU substituir tudo pelo backup (mais rápido!)



**Para quem está começando DO ZERO:**

- Baixar o Backup do Easy Builder (pasta completa)

- Instalar plugin All-in-One Migration (versão antiga sem limitação)

- Importar o backup (arrastar e soltar)

- Trocar senha padrão por sua senha (SEGURANÇA!)



**O que vem PRÉ-CONFIGURADO no Backup:**

- ✅ **Elementor** - Editor visual

- ✅ **Pro Elements** - Recursos profissionais

- ✅ **Folders** - Organiza arquivos

- ✅ **LiteSpeed Cache** - Site mais rápido (JÁ configurado corretamente!)

- ✅ **SVG Support** - Evita erros com ícones

- ✅ **Otimizações avançadas** - Tudo já ajustado



**Por que usar o Backup:**

- Você NÃO precisa aprender sobre plugins

- NÃO precisa configurar tema

- NÃO precisa ajustar performance

- Já criou 150+ landing pages com essa configuração

- É tudo que você REALMENTE precisa (80/20!)



**Segurança Importante:**

- Senha padrão do backup: documentada

- VOCÊ DEVE trocar para SUA senha

- Criar seu usuário administrador

- Excluir usuários padrão

**O que você vai aprender:**



**Instalação do Easy Builder:**

- Easy Builder NÃO é plugin - É EXTENSÃO do navegador!

- Funciona em: Chrome, Opera, Edge

- NÃO funciona em: Firefox/Mozilla

- Como fixar a extensão no topo do navegador

- Easy Builder só funciona DENTRO do WordPress (não abre em outros sites!)



**Criar sua primeira página no WordPress:**

- WordPress → Páginas → Adicionar página

- Dar nome à página (ex: "Página Teste")

- Clicar em "Editar com Elementor"



**Entender o Elementor:**

- Painel lateral + Barra superior (não se assuste!)

- Adicionar elementos: Título, Imagem, Botão, Ícones

- **3 abas por elemento:** Conteúdo, Estilo e Avançado

- Por enquanto: foco em Conteúdo + Estilo



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

- Abrir extensão Easy Builder

- Ir em "Sessões"

- Procurar sessão "Hero" (primeira seção da página)

- Copiar sessão semelhante ao que quer criar

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

- Template cola pronto!



**Personalizar o template:**

- **Trocar logo:** Clicar na imagem → Enviar arquivo → Selecionar sua logo

- **Trocar texto:** Clicar no texto → Editar direto

- **Mudar botão:** Conteúdo (texto + link) → Estilo (cor, fonte, tamanho)

- **Adicionar ícone:** Biblioteca com milhares de ícones (ex: WhatsApp)



**3 Abas Fundamentais:**

- **CONTEÚDO** = O que está escrito/exibido (texto, link, imagem)

- **ESTILO** = Visual (cor, fonte, tamanho, alinhamento, sombra, efeitos)

- **AVANÇADO** = CSS e configs técnicas (vem depois)



**Publicar e visualizar:**

- Clicar em "Publicar"

- Olho no canto = Visualizar site ao vivo



**Responsividade (DIFERENCIAL!):**

- Templates do Easy Builder já vêm prontos para:

  - Desktop (computador)

  - Laptop (notebook)

  - Tablet

  - **Mobile (celular)** - MAIS IMPORTANTE!

- Você NÃO precisa reconfigurar tudo manualmente!

**O que você vai aprender:**



**Recapitulação (você JÁ SABE):**

- ✅ Como funciona servidor

- ✅ Como comprar e instalar WordPress

- ✅ Importar configurações com plugin

- ✅ Instalar Easy Builder

- ✅ Importar primeiro template



**O que você PRECISA do cliente (Briefing):**



**1. Briefing do Projeto:**

- Qual o objetivo da página?

- Para qual público?

- Como o cliente imagina o site?

- Quantas sessões tem?

- Formulários prontos disponíveis no módulo Agência



**2. Identidade Visual:**

- Logo

- Cores da marca

- Fontes

- Elementos visuais

- **Se cliente NÃO tem:** OPORTUNIDADE de vender! (+R$ 150 a R$ 500)



**3. Copy (Textos) da Página:**

- Títulos, subtítulos, textos das seções

- **Se cliente NÃO tem:** Use Easy Copy IA!

  - Cria copy profissional de alta conversão

  - Melhor que copywriters júnior do mercado

  - Cobre +R$ 150 a R$ 300 por isso

  - Leva 1 hora para fazer



**4. Elementos para Inserir:**

- Logotipo

- Depoimentos

- Foto do expert/profissional

- Imagens do produto/serviço

- Cliente envia via Drive



**5. Hospedagem e Domínio:**

- Cliente pode ter ou não

- Se tem (mesmo ruim): Trabalhe com o que tem

- Se NÃO tem: OPORTUNIDADE de vender setup completo!



**AUMENTAR SEU TICKET (MUITO IMPORTANTE!):**



**Cenário 1: Cliente tem tudo**

- Página simples: R$ 750



**Cenário 2: Cliente não tem Copy**

- Página: R$ 750

- Copy com Easy Copy IA: +R$ 200

- **Total: R$ 950** (1 hora a mais de trabalho!)



**Cenário 3: Cliente não tem Copy NEM Identidade**

- Página: R$ 750

- Copy: +R$ 200

- Identidade Visual: +R$ 150

- **Total: R$ 1.100** (apenas 2-3 dias de trabalho!)



**Por que o Visual é importante:**

- Visual APOIA o texto e a copy

- Visual APOIA o objetivo do cliente

- Site precisa levar visitante do ponto A → ponto B

- Quanto mais você ajuda cliente a vender, mais vale seu serviço



**Estrutura padrão de Landing Page:**

- Texto principal (Hero)

- Foto ao lado

- Texto centralizado

- Depoimentos

- Call to Action

**O que você vai aprender:**



**HIERARQUIA (FUNDAMENTAL!):**



A estrutura funciona como bonecas russas (uma dentro da outra):



```

🖥️ Servidor

  └─ 📦 WordPress

      └─ 📄 Página

          └─ 🎯 Sessão (Container maior)

              └─ 📦 Container Pai

                  └─ 📦 Container Filho

                      └─ 🧩 Elementos (Texto, Imagem, Botão)

```



**REGRA DE OURO:**

- Configuração de **CIMA influencia o de BAIXO**

- Servidor → WordPress → Página → Sessão → Containers → Elementos

- MAS você pode personalizar cada nível individualmente!



**4 Níveis que você VAI USAR:**



**1. PÁGINA** (Engrenagem ⚙️)

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

- Cor de fundo da página toda

- **Raramente mexe aqui depois de configurar!**



**2. SESSÃO** (Retângulo rosa maior)

- É o "bloco" principal (Hero, Benefícios, Depoimentos)

- **Layout:** Direção (vertical/horizontal), alinhamento, altura

- **Estilo:** Cor de fundo, imagem de fundo, efeitos

- Influencia TUDO que está dentro



**3. CONTAINER** (Retângulos dentro da sessão)

- **Container Pai** = O maior

- **Container Filho** = Dentro do pai

- Cada um pode ter direção diferente!

- Exemplo: Sessão vertical → Container horizontal (3 cards lado a lado)



**4. ELEMENTOS** (Texto, Imagem, Botão, Ícone)

- **Conteúdo** = O quê (texto, link, imagem)

- **Estilo** = Como (cor, fonte, tamanho, sombra)

- **Avançado** = CSS (vem depois)



**EXEMPLOS PRÁTICOS:**



**Exemplo 1: Mudar cor de um card**

- Clique no container do card (círculo pontilhado aparece)

- **Estilo** → Cor de fundo → Escolhe cor



**Exemplo 2: 3 cards lado a lado**

- Sessão: Direção vertical

- Container dentro: Direção HORIZONTAL

- 3 elementos dentro: Ficam lado a lado!



**Exemplo 3: Logo E data na mesma linha**

- Cria Container com direção HORIZONTAL

- Coloca logo + data dentro

- Ficam lado a lado automaticamente!



**3 ABAS EM CADA NÍVEL:**



**LAYOUT** (estrutura):

- Direção (vertical/horizontal)

- Alinhamento (esquerda/centro/direita)

- Largura e altura

- Espaçamentos



**ESTILO** (visual):

- Cores

- Fontes

- Tamanhos

- Sombras

- Efeitos ao passar mouse

- Imagens de fundo



**AVANÇADO** (técnico):

- CSS personalizado

- Margens e paddings

- Z-index (camadas)

- **Vem em aulas futuras!**



**AÇÕES COMUNS:**



- **Trocar texto:** Clique duplo no texto → Edita direto

- **Mudar cor ícone:** Clique no ícone → Estilo → Cor

- **Adicionar ícone WhatsApp:** Biblioteca de ícones → Digite "WhatsApp"

- **Botão abrir em nova aba:** Opções de link → Ativar "Abrir em nova janela"

- **Efeito hover:** Estilo → "Ao passar o mouse" → Escolhe animação



**NAVEGAÇÃO:**

- Botão direito em cada elemento = Menu de opções

- Duplicar, Copiar, Colar, Excluir

- 3 botões ao passar mouse: Adicionar acima / Selecionar / Excluir

**O que você vai aprender:**



**Criar a Página (Passo a Passo):**

1. Easy Builder → Abrir aba "Páginas"

2. Ir em "Links"

3. Escolher template (comece pelo mais simples)

4. Copiar

5. Elementor → Botão direito → "Colar de outro site" → Ctrl+V

6. Pronto! Estrutura colada



**Personalizar:**

- **Trocar foto:** Imagem borrada (anti-plágio) → Sua foto

- **Trocar nome:** Elemento texto → Seu nome

- **Trocar descrição:** Elemento texto → Sua descrição

- **Trocar imagens dos botões:** Criar no Canva/Figma



**TAMANHOS DE IMAGEM (IMPORTANTE!):**



**Foto de perfil (redonda):**

- Tamanho: 600x600 a 1080x1080 pixels

- Formato: PNG (se sem fundo) ou WebP



**Imagens dos botões:**

- **Largura sempre: 1080 pixels** (padrão para todas as imagens!)

- Altura: Depende (400px, 600px, 800px - você decide)

- Formato: WebP (SEMPRE!)



**Por que WebP?**

- JPEG/PNG = Pesadas (site lento)

- WebP = 96% menor (site rápido!)

- Usar [Squoosh.app](https://squoosh.app) para converter

- Processo: Sua imagem → Squoosh → Mudar para WebP → Salvar → Usar



**Criar Imagens dos Botões:**



**Opção 1 - Canva (Recomendado para iniciantes):**

- Tamanho personalizado: 1080 x 400px

- Adicionar texto, cores, elementos

- Exportar em JPEG → Converter para WebP no Squoosh



**Opção 2 - Figma/Photoshop (Se você manja):**

- 1080 x altura que quiser

- Criar layout

- Exportar PNG/JPEG → Converter para WebP



**Opção 3 - IA:**

- [ImageFX](https://labs.google/fx/pt/tools/image-fx) (Google - Grátis!)

- Prompt: "Fundo escuro tecnológico estilo cyberpunk"

- Baixar → Ajustar tamanho → Converter WebP



**Opção 4 - Page Box (Se tiver no Easy Builder):**

- 80+ templates editáveis

- Efeitos de luz (flares)

- Fundos prontos

- Fontes

- Já otimizado!



**Inspiração:**

- [Behance.net](https://behance.net) → Buscar "página de links"

- Ver exemplos de botões criativos

- **NÃO COPIE!** Use como INSPIRAÇÃO



**Adicionar Links nos Botões:**

- Clicar no elemento do botão

- **Conteúdo** → Campo "Link"

- Colocar URL (ex: seunome.com.br)

- **Link WhatsApp:** Criar link do WhatsApp → Colar



**Responsividade (REVISAR!):**

- Telinhas no topo: Desktop / Laptop / Tablet / Mobile

- **IMPORTANTE:** Às vezes vem imagem diferente para mobile

- Se imagem mobile não serve: **EXCLUIR** (volta pra imagem desktop)

- Criar imagem específica para mobile SE necessário (vertical)



**Ajustes de Fundo:**

- Sessão → **Estilo** → Imagem de fundo

- **Configuração padrão:**

  - Posição: **Superior ao centro**

  - Repetição: **Não repetir**

  - Tamanho: **Cobertura**

- Cor gradiente: Preto → Cinza (fica bonito!)

- Sobreposição: Escurecer vídeos/imagens de fundo



**Altura da Sessão:**

- Se muito espaço sobrando: Diminuir altura mínima

- Layout → Altura mínima → Ajustar

- Testar em todas as telas!



**OPORTUNIDADES REAIS:**



**Para VOCÊ:**

- Crie SUA página de links

- Coloque na BIO do Instagram

- 3 botões essenciais:

  1. Faça um orçamento

  2. Conheça meu portfólio

  3. Fale comigo no WhatsApp

- Use para CAPTAR CLIENTES!



**Para VENDER:**

- **Mínimo:** R$ 150 (site simples, poucos botões)

- **Intermediário:** R$ 500-750 (mais botões, melhor design)

- **Avançado:** R$ 1.000 (muito completo e personalizado)



**Estratégia de captação:**

- Escolha influenciador/profissional da sua região

- Crie página de links para ELE (sem pedir nada)

- Use foto, links e info dele

- Apresente: "Olha o site que criei para você! Melhor que Link Tree, mais profissional"

- **Muitos fecham na hora!**

**O que você vai aprender:**



**REGRA DE OURO da Responsividade:**

- Hierarquia funciona de **CIMA para BAIXO** (WordPress → Página → Sessão → Containers → Elementos)

- MAS de **BAIXO para CIMA** NÃO altera!

- Alterar elemento NÃO muda container

- Alterar container NÃO muda sessão

- Alterar sessão NÃO muda página



**Responsividade por Tela:**

- **Desktop** altera config → Influencia Mobile

- **MAS Mobile** altera config → NÃO influencia Desktop!

- Cada tela é INDEPENDENTE depois que você personaliza



**Exemplos práticos:**

- Fonte maior no Desktop → Fica grande no Mobile também

- MAS se você diminuir no Mobile → Desktop continua grande!

- Imagem de fundo diferente no Mobile → Desktop mantém a dele

- Alinhamento diferente no Tablet → Outras telas não mudam



**4 Telas para Testar:**

- 💻 **Desktop** (computador)

- 💻 **Laptop** (notebook)

- 📱 **Tablet**

- 📱 **Mobile** (celular - MAIS IMPORTANTE!)



**Como Ajustar:**

1. Testar em todas as 4 telas (botões no topo)

2. Se algo está desalinhado em UMA tela: Ir naquela tela

3. Fazer ajuste específico

4. Outras telas não são afetadas!



**Copiar Estilo (HACK!):**

- Editou um elemento e ficou bom?

- Botão direito → **Copiar**

- Vai no outro elemento parecido

- Botão direito → **Colar estilo**

- Pronto! Mesmo estilo aplicado em segundos!



**Largura: Pixel vs Porcentagem:**



**Pixel:**

- Tamanho FIXO (ex: 614px)

- Não se adapta ao tamanho da tela

- Pode vazar ou ficar pequeno demais



**Porcentagem (RECOMENDADO!):**

- Tamanho RELATIVO (ex: 100% da tela)

- Se adapta automaticamente

- Respeita margens da sessão

- **Melhor para iniciantes!**

**O que você vai aprender:**



**O que é a Aba Avançado:**

- Libera funcionalidades EXTRAS

- Controla espaçamentos, animações, CSS

- **Você USA, mas não tanto quanto Conteúdo/Estilo**



**1. MARGEM (Espaço EXTERNO):**



**O que faz:**

- Cria espaço PRA FORA do elemento

- Move elemento para cima/baixo/lados



**Exemplos:**

- **Margem superior NEGATIVA** (-80px) = Puxa elemento pra CIMA

- **Margem superior POSITIVA** (+50px) = Empurra elemento pra BAIXO

- **Margem direita** = Move para direita

- **Margem esquerda** = Move para esquerda



**Como usar:**

- Avançado → Margem

- **Desvincular** a chavinha (para mexer apenas um lado!)

- Ajustar valor (positivo ou negativo)



**Analogia do Caderno:**

- Lembra da margem do caderno da escola?

- Não podia escrever além da linha

- Mesma ideia aqui!



**2. PREENCHIMENTO (Espaço INTERNO):**



**O que faz:**

- Cria espaço PRA DENTRO do elemento

- Afasta conteúdo das bordas



**Exemplos:**

- Preenchimento superior 10px = Espaço em cima (interno)

- Preenchimento lateral 20px = Espaço dos lados

- Zerar preenchimento = Conteúdo cola nas bordas (feio!)



**Onde usar:**

- Sessões (para não colar nos cantos)

- Containers (espaço interno nos cards)

- Elementos (raramente)



**Valores comuns:**

- Mobile: 7 VW ou 20-50px

- Desktop: 10-20 VW ou 50-100px



**3. LARGURA (Pixel vs Porcentagem):**



**Porcentagem (Recomendado!):**

- 100% = Ocupa toda a tela disponível

- 75% = Ocupa 3/4 da tela

- 50% = Metade da tela

- **Se adapta ao tamanho da tela!**



**Pixel (Tamanho fixo):**

- 614px = Sempre 614px (não adapta)

- Pode vazar em telas menores

- Pode ficar pequeno demais em telas grandes

**4. EFEITOS DE MOVIMENTO:**



**Scrolling Effects (Rolagem):**

- Imagem move diferente ao rolar página

- Efeito parallax

- Mouse tracking (segue o mouse)



**Animação de Entrada:**

- **Fade** = Aparece suavemente

- **Zoom** = Cresce ao aparecer

- **Bounce** = "Pula" na tela

- Slide, Rotate, etc.

**5. PLANO DE FUNDO (em Elementos):**

- Adicionar cor de fundo em TEXTO direto

- Não precisa criar container só pra isso!

- Ex: Texto com fundo vermelho = Destaque



**6. BORDA:**

- Largura da borda (2px, 5px)

- Cor da borda

- Raio (arredondamento dos cantos)

- Criar cards com bordas



**7. RESPONSIVO (Evite usar!):**

- Ocultar elemento em Desktop/Mobile/Tablet

- **GAMBIARRA!** Só use se REALMENTE necessário

- Melhor: Ajustar direito usando Layout/Estilo

- Ocultar cria elementos duplicados = site pesado



**8. CSS PERSONALIZADO:**

- Vem na próxima aula!

- Para efeitos avançados

- Biblioteca de códigos do Easy Builder

**O que você vai aprender:**

- Criar portfólio profissional

- Fotografar/registrar seus projetos

- Apresentar para clientes

- Usar casos para vender mais

- Estratégias de captação