Skip to main content

Bem-vindo à Trilha de Aprendizado

Se você nunca fez um site ou está começando do zero, esta trilha completa vai te guiar passo a passo - desde entender o que é WordPress até criar suas primeiras páginas profissionais com Easy Builder.
Nunca fez um site? Não se preocupe! Vamos explicar TUDO: o que é domínio, hospedagem, WordPress, Elementor. Você vai entender o caminho completo antes de começar a praticar.

Antes de Começar: Entenda o Básico

O que você vai precisar (resumo rápido):

1

1. Domínio e Hospedagem

Onde seu site vai “morar” na internet
2

2. WordPress

Plataforma gratuita para criar sites
3

3. Elementor

Editor visual (arrastar e soltar)
4

4. Easy Builder

Extensão com templates prontos

Conceitos Fundamentais

Site:
  • É 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
Resumo: Site = várias funções / Landing Page = um objetivo / Institucional = vitrine / E-commerce = loja
WordPress:
  • 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!
WordPress + Elementor + Easy Builder = Criar páginas profissionais em horas ao invés de dias!
Domínio (📍 Endereço):
  • Nome do seu site na internet
  • Exemplo: www.seunome.com.br
  • Endereço digital único e personalizado
  • Custo: R30aR 30 a R 60/ano (ou grátis em alguns planos)
Hospedagem (💾 Casa):
  • Onde seu site realmente “mora”
  • Serviço que armazena arquivos do site em servidores
  • Sem hospedagem, site não fica online
  • Custo: R12aR 12 a R 27/mês
Analogia:
  • Domínio = Endereço da sua casa (Rua X, nº 123)
  • Hospedagem = A casa física onde você mora
  • WordPress = Mobília e decoração da casa
  • Easy Builder = Catálogo de móveis prontos para você usar
Recomendações:
  • StayCloud: R$ 27/mês - Servidor rápido, suporte top (Cupom: EASYBUILDER)
  • Hostinger: R$ 12/mês - Mais barata (pode exigir ajustes de PHP)
Easy Builder é:
  • Extensão de navegador (Chrome, Opera, Edge)
  • Integra com WordPress + Elementor
  • Biblioteca gigante de templates prontos
  • Sessões, páginas, botões, códigos - tudo responsivo e otimizado
Como transforma seu trabalho:Antes (método tradicional):
  • Criar wireframe no Figma
  • Implementar do zero no Elementor
  • Ajustar responsivo manualmente
  • Configurar cada elemento
  • Tempo: Dias
Com Easy Builder:
  • Copiar template pronto
  • Colar no Elementor
  • Personalizar (trocar textos, cores, imagens)
  • Tempo: Horas
Principais benefícios:
  • ⏱️ Velocidade: Monte páginas em 1-2 horas
  • ✍️ Easy Copy: IA que gera textos persuasivos
  • 🤖 Easy Coder: Códigos CSS/JS automáticos
  • 🧩 Meus Recursos: Salve e reutilize seus blocos
  • 📱 Responsivo: Tudo já funciona em mobile/tablet
Para uma landing page converter, ela precisa ter: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
Não adianta estrutura bonita se a mensagem não é certeira! Alinhe público, copy e design.

Onde Comprar Domínio

Você pode comprar domínio separado da hospedagem ou tudo junto:

Vídeos: Como Comprar Domínio

Tutorial: Como registrar domínio .com.br no Registro.br
Passo a passo:
  1. Acesse Registro.br
  2. Procure domínio disponível
  3. Adicione ao carrinho
  4. Preencha dados (CPF/CNPJ)
  5. Pague com boleto ou cartão
  6. Aguarde aprovação (1-2 dias)
  7. Configure DNS para apontar para hospedagem
Dica: Se for começar do zero, compre domínio + hospedagem juntos (Hostinger ou StayCloud). Mais fácil e rápido!

Onde Comprar Hospedagem

Vídeos: Como Instalar WordPress

Tutorial completo de instalação do WordPress na Hostinger:
Processo resumido:
  1. Comprar plano na Hostinger
  2. Escolher domínio (grátis no plano)
  3. Acessar painel hPanel
  4. Clicar em “Auto Instalador”
  5. Selecionar WordPress
  6. Preencher dados básicos
  7. Instalar
  8. Aguardar 2-3 minutos
  9. Acessar: seudominio.com.br/wp-admin
Artigo oficial: Tutorial Hostinger

Como Apontar Domínio para Hospedagem

Se você comprou o domínio separado da hospedagem, precisa “apontar” o domínio para o servidor:
Quando fazer isso: Se comprou domínio no Registro.br ou GoDaddy e hospedagem na Hostinger ou StayCloud, você precisa conectar os dois!

Vídeos: Como Apontar Domínio

Tutorial: Apontar domínio da Registro.br para Hostinger
Resumo:
  1. Acesse painel Registro.br
  2. Vá em “DNS” do seu domínio
  3. Copie nameservers da Hostinger
  4. Cole no Registro.br
  5. Salve alterações
  6. Aguarde 24-48h para propagar
Propagação de DNS demora! Após apontar o domínio, aguarde de 2 a 48 horas para funcionar completamente. É normal!
Quer evitar essa dor de cabeça? Compre domínio e hospedagem NO MESMO LUGAR (Hostinger ou StayCloud). Tudo já vem configurado automaticamente!

Siga as aulas na ordem! Cada aula prepara você para a próxima. Não pule etapas para ter melhor aproveitamento.

Trilha Completa - 14 Aulas

Por que assistir: Entenda a OPORTUNIDADE real que você tem em mãos e o caminho para começar a ganhar dinheiro criando páginas.
O que você vai aprender:
  • O tamanho da oportunidade do mercado (43% dos sites rodam WordPress)
  • Quanto você pode cobrar desde o início (R500aR 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)
Esta aula te mostra que é POSSÍVEL mesmo sendo iniciante total. Você vai ver páginas reais criadas por quem nunca tinha mexido no Elementor antes!
Por que assistir: Conheça os MERCADOS e tipos de sites que mais têm demanda e quanto cobrar em cada um.
O que você vai aprender:Mercado de Infoprodutos:
  • Link Lead (R300aR 300 a R 1.000) - Alternativa profissional ao Link Tree, todo mundo precisa
  • Página de Captura + Obrigado (R450aR 450 a R 900) - Para captar leads
  • Página de Vendas (R600aR 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 (R1.500aR 1.500 a R 7.000+) - Com várias páginas
Mercado de E-commerce:
  • Loja Virtual (R2.000aR 2.000 a R 15.000) - Mais complexo, exige plugins específicos
Comece pelo mais fácil: Link Lead! Você faz em 2-3 horas e já pode vender por R300aR 300 a R 500. É uma demanda que TODO MUNDO tem!
Por que assistir: Entenda EXATAMENTE o que você precisa ter para criar sites (explicado de forma simples, mesmo se você for leigo total).
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!
Até hoje você pode ter seu primeiro site! Mesmo como protótipo para mostrar no portfólio e já começar a captar clientes.
Sem dinheiro agora? Instale WordPress localmente no seu computador de GRAÇA e já comece a praticar!
Por que assistir: Passo a passo COMPLETO de como instalar WordPress nas 3 principais hospedagens OU no seu computador de GRAÇA.
O que você vai aprender:Hospedagem + Domínio:
  • Como funciona e quanto custa (R12aR 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
Não tem dinheiro agora? Assista o vídeo do YouTube sobre instalação LOCAL e comece a praticar HOJE sem gastar nada!
É MUITO SIMPLES! Você literalmente aperta botões e o WordPress se instala sozinho. Não precisa saber programação!
Por que assistir: PULE TODA A PARTE CHATA! Instale um WordPress JÁ CONFIGURADO com tudo que você precisa em 2 cliques.
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
Com esse backup você TEM TUDO configurado! Não precisa aprender mexer em cada plugin. É só instalar e começar a criar!
Não funcionou? Tem método alternativo com outro plugin na área de membros. Com certeza vai funcionar de uma forma ou outra!
Por que assistir: HORA DA AÇÃO! Crie sua PRIMEIRA página real com Easy Builder. Não fique só assistindo!
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!
AÇÃO OBRIGATÓRIA: Se você já instalou WordPress, PRATIQUE AGORA! Pegue um template do Easy Builder, importa e FUÇA. Experiencie ANTES da próxima aula. Você vai estar MUITO mais preparado!
Você vai ver na prática: O trabalho que daria fazer manualmente (adicionar cada elemento, configurar um por um) vs simplesmente importar pronto do Easy Builder. A diferença é ABSURDA!
Pegue papel e caneta e anote: Conteúdo (o quê) → Estilo (como fica visualmente) → Avançado (configs técnicas). Isso vale para TODOS os elementos!
Por que assistir: Entenda TUDO que você precisa ter do cliente ANTES de começar a criar + como VENDER serviços ADICIONAIS e aumentar seu ticket!
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! (+R150aR 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 +R150aR 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
Serviços Adicionais para Vender:
  • Identidade Visual (se não tem)
  • Copy profissional (use Easy Copy IA)
  • Hospedagem + Domínio (se não tem)
  • Manutenção mensal
  • Otimização de performance
Você pode transformar um serviço de R750emR 750 em R 1.100+ simplesmente oferecendo o que o cliente PRECISA e não tem!
Próximos passos no ecossistema Easy Builder:
  • Processos de gestão
  • Setup de agência
  • Estratégia de vendas
  • Mentorias sobre briefing, contratos, gestão de tarefas
Não pule etapas! Aprenda a criar site primeiro, depois aprenda a VENDER e GERIR seu negócio.
Pode parecer chato agora, mas é o caminho MAIS RÁPIDO e MAIS LÓGICO. Você vai entender a hierarquia e não ficar perdido nos painéis!
Por que assistir: A AULA MAIS IMPORTANTE! Entenda a HIERARQUIA e LÓGICA do Elementor para nunca mais ficar perdido. Esta aula pode economizar MESES de aprendizado!
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
AÇÃO OBRIGATÓRIA: Pegue PAPEL E CANETA! Anote a hierarquia. Desenhe as caixas dentro de caixas. Isso vai clarear TUDO na sua mente!Não estava prestando atenção? VOLTE E REVEJA! São 35 minutos que podem economizar MESES de aprendizado e horas quebrando cabeça no Google/GPT.
Se você entender ESTA AULA: Você nunca mais fica perdido no Elementor. Você vai SABER onde está cada configuração e como fazer qualquer personalização!
Analogia perfeita: Pense como uma casa.
  • Servidor = Terreno
  • WordPress = Casa
  • Página = Cômodo
  • Sessão = Parede do cômodo
  • Container = Móvel
  • Elemento = Objeto em cima do móvel
Mudar o terreno afeta a casa. Mudar a casa afeta o cômodo. Mas você pode personalizar cada móvel individualmente!
Com Easy Builder você PULA a parte de montar do zero!Você pega tudo pronto e só precisa entender a lógica para PERSONALIZAR. É por isso que você aprende em dias ao invés de meses!
Por que assistir: Garanta que suas páginas funcionem PERFEITAMENTE em todos os dispositivos. Aprenda a REGRA DE OURO da responsividade!
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!
Com Easy Builder: Templates JÁ VÊM responsivos! Você só ajusta pequenos detalhes SE necessário.
Facilita muito: Use PORCENTAGEM ao invés de PIXEL quando ajustar larguras. Fica responsivo automaticamente!
Uma alteração pequena no Desktop pode afetar o Mobile! SEMPRE teste nas 4 telas depois de fazer mudanças!
Por que assistir: Domine a aba AVANÇADO e desbloqueie funcionalidades que 90% não sabe usar! Margens, Paddings, Efeitos de Movimento explicados de forma SIMPLES.
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
Use porcentagem sempre que possível! É mais fácil e responsivo automaticamente.
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.
NÃO ABUSE de animações! Um ou outro efeito = legal. Tudo animado = site brega e lento!
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
Templates do Easy Builder: Tudo isso JÁ VEM configurado! Você só usa quando precisa fazer ajuste específico.
Você NÃO precisa ser expert! Com Easy Builder, raramente mexe no Avançado. Mas quando precisar, você vai saber onde está cada coisa!
Evite gambiarras: Não duplique elementos e oculte em cada tela. Aprenda a configurar CERTO usando Layout e Largura em porcentagem!
Por que assistir: Use códigos prontos para criar efeitos incríveis.
O que você vai aprender:
  • O que é CSS e como funciona
  • Biblioteca de códigos do Easy Builder
  • Como aplicar códigos em elementos
  • Scrollbar personalizada
  • Gradientes e efeitos
  • Customizações avançadas
Por que assistir: Transforme seu projeto em ferramenta de captação de clientes!
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
Parabéns! Você completou a trilha e está pronto para criar páginas profissionais e captar clientes!

Como Usar Esta Trilha

1

Assista na Ordem

Não pule aulas! Cada uma prepara você para a próxima
2

Pratique Junto

Pause o vídeo e faça junto. Não seja apenas espectador
3

Refaça se Necessário

Não tem problema rever uma aula. Fixação é importante
4

Aplique Imediatamente

Após cada aula, aplique o que aprendeu em um projeto real

Checklist de Progresso

Use este checklist para acompanhar seu progresso:
  • Aula 1 - Plano de aprendizado
  • Aula 2 - Tipos de serviços
  • Aula 3 - Requisitos necessários
  • Aula 4 - Instalar WordPress
  • Aula 5 - Configurações essenciais
Ao completar: Você terá seu ambiente pronto para trabalhar!

Tempo Estimado

Assistir Todas as Aulas

Aproximadamente 3-4 horasDe conteúdo de vídeo

Praticar Junto

Mais 4-6 horasAplicando o que aprendeu

Total

1-2 diasPara dominar completamente
Dedicação ideal: 2-3 horas por dia. Em uma semana você domina tudo e já pode começar a atender clientes!

Suporte Durante a Trilha

Consulte nossa seção de Resolução de Problemas ou entre em contato via WhatsApp
Participe da comunidade para:
  • Tirar dúvidas
  • Compartilhar projetos
  • Trocar experiências
  • Encontrar oportunidades
Ver links da comunidade

Recursos Complementares

Enquanto faz a trilha, tenha esses recursos à mão:

Depois de Completar a Trilha

1

Crie seu Primeiro Projeto Pago

Use o que aprendeu para criar sua primeira landing page profissional
2

Monte seu Portfólio

Documente seus projetos conforme ensina a Aula 14
3

Comece a Captar Clientes

Use sua página de links e portfólio para atrair oportunidades
4

Continue Aprendendo

Explore workflows avançados e as IAs do Easy Builder
5

Escale seu Negócio

Com processo definido, aumente seu ticket e número de clientes

Depoimentos de Quem Completou

Herbert Pro - Web Designer

“Primeira LP usando o Easy Builder. Valor R$ 1.800 em 2 dias. Ferramenta já me fez ganhar tempo e grana logo de cara.”

Gustavo M. - Designer

“De 3 dias pra menos de 1 dia numa landing page. No mês passado, entreguei 20 LPs com o Easy.”

Anderson - Designer

“Consegui implementar uma LP inteira em 1 dia, contando com design. Coisa que levava 2-3 dias, reduzi pra 1.”

Diogo V. - Web Designer

“Reduzi por volta de 50% do tempo de produção das páginas entregando o mesmo nível de qualidade.”

Próximos Passos

Você está no caminho certo! Siga a trilha, pratique e em breve estará criando páginas profissionais e ganhando dinheiro com isso.