Skip to main content

​
Para Quem Já Tem Experiência

Se você já conhece WordPress e Elementor, este guia vai direto ao ponto para você começar a usar o Easy Builder imediatamente e dominar workflows avançados.
Siga as aulas na ordem! Mesmo que você já conheça o básico, essas aulas trazem workflows e técnicas que vão economizar horas do seu trabalho.

​
Trilha Prática - 6 Aulas

Por que assistir: Veja NA PRÁTICA o workflow COMPLETO de criação. Do zero até página pronta, sem enrolação!
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 botão não colar direto, crie coluna vazia primeiro!
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
Você vai construir páginas SEM precisar do Figma! Tudo direto no Elementor. Mais rápido, menos retrabalho!
Erro comum ao colar botões: Se aparecer erro ao colar, crie uma COLUNA VAZIA primeiro, depois cole o botão lá dentro e arraste para onde quiser!
Por que assistir: Veja o ANTES e DEPOIS dos processos de agência. Como Easy Builder elimina 70% do trabalho manual!
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
  • 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
Desenvolvimento + Implementação + Otimização viraram UMA ETAPA SÓ! É essa a revolução do Easy Builder.
Por que aprovar primeira sessão primeiro? Se criar página inteira e cliente reprovar o estilo, você refaz TUDO. Aprovando a primeira sessão, você valida: cores, fontes, estilo visual. O resto flui!
Esqueça Figma para protótipo de landing page! Crie direto no Elementor. Figma só serve para refinamento visual SE necessário. Foco no essencial!
Por que assistir: Método EXATO para descobrir o tamanho perfeito de cada imagem de fundo. Sem chute, sem gambiarra!
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
    • 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!)
NÃO SE APEGUE a configurações primárias! Personalize com base no que fica melhor no SEU layout. Easy Builder é otimizador de tempo, não faz tudo por você!
Easy Builder não é pack de templates! É FERRAMENTA de produtividade. Você precisa PERSONALIZAR e ADAPTAR à realidade do cliente!
Por que assistir: Pare de clicar na extensão toda hora! Configure atalho de teclado e abra Easy Builder em 1 segundo.
O que você vai aprender:Configurar atalho do Easy Builder:
1

1. Abra configurações

Botão direito na extensão Easy Builder → “Gerir extensões”
2

2. Acesse atalhos

Procure: “Atalhos de teclado” (ou Keyboard Shortcuts)
3

3. Role até Easy Builder

Encontre “Easy Builder” na lista
4

4. Defina seu atalho

Clique no campo e pressione:
  • Alt + E (recomendado)
  • Ou qualquer combinação que preferir
5

5. Salve e teste

Feche configurações → Pressione Alt + EEasy Builder abre instantaneamente!
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!
Atalho Alt + E = acesso instantâneo! Configure HOJE e nunca mais perca tempo clicando em extensão.
Atalho mais usado: Júnior Lorenzi usa Alt + E há anos. Simples, rápido, não conflita com outros atalhos!
Por que assistir: A melhor funcionalidade do Easy Builder! Crie SEU PRÓPRIO banco de elementos reutilizáveis. CASH!
O que você vai aprender:Sistema de Pastas (Organização):
1

1. Criar pasta principal

Meus Recursos → Adicionar PastaExemplo: “Imagem Flutuante”
2

2. Criar subpastas

Dentro da pasta → Nova PastaExemplo: Dentro de “Imagem Flutuante” → “Ícone de Bill”
3

3. Adicionar componente

Dentro da subpasta → Adicionar Componente
4

4. Limpar área de transferência (IMPORTANTE!)

Windows + V → Limpar TudoPor quê? Área cheia = navegador trava ao copiar elementos grandes!
5

5. Copiar elemento

No Elementor: Botão direito no elemento → Copiar
6

6. Salvar no Easy Builder

  • Nome do componente: “Ícone Bill Animado”
  • Upload de thumbnail (print do elemento)
  • Ctrl + V no campo
  • Criar Componente
7

7. Reutilizar depois

Meus Recursos → Pasta → Componente → CopiarNo Elementor: Botão direito → Colar de outro site → Ctrl + VPronto! Elemento colado em qualquer projeto!
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
Meus Recursos é SEU banco de dados pessoal! Fez algo legal? SALVA. Próximo projeto vai usar de novo. Isso é escalar!
Dica profissional: Sempre que criar algo customizado que ficou bom, SALVE imediatamente! Você vai reutilizar em 90% dos próximos projetos.
SEMPRE limpe área de transferência antes de copiar! Windows + V → Limpar Tudo. Isso evita travamentos e economiza RAM do navegador!
Por que assistir: Resposta HONESTA sobre o alcance da ferramenta. Veja exemplos REAIS de sites profissionais criados com Easy Builder!
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:
1

Encontre sessão parecida

Não tem EXATAMENTE igual? Pega uma PRÓXIMA!Exemplo: Quer sessão com 4 ícones mas só tem com 3?Pega a de 3 e duplica o último!
2

Adapte à realidade

  • Precisa borda tracejada? Adiciona no Estilo → Borda
  • Precisa carrossel embaixo? Adiciona widget Carrossel
  • Precisa ícone diferente? Troca na biblioteca
Você NÃO constrói do zero! Adapta o que já tem pronto!
3

Salve nos Meus Recursos

Adaptou e ficou bom? SALVA!Próximo projeto similar = 1 clique!
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
90% dos sites profissionais cabem no Easy Builder! Sites institucionais, landing pages, e-commerce, portfólios. Tudo adaptável!
Não tem no Easy Builder? Crie uma vez, salve nos Meus Recursos, reutilize sempre! Seu banco de dados só cresce com o tempo.
Recursos em crescimento: A cada mês novos templates são adicionados. Mas você TAMBÉM alimenta seu próprio banco salvando o que cria!

​
Configuração Rápida

​
WordPress existente (não pode substituir)

1

Ajustes de compatibilidade

Instale e Atualize:
  • WordPress (atualizado)
  • Elementor (atualizado)
  • Elementor PRO ou Pro Elements
  • Tema Hello Elementor
  • Easy Builder (extensão)
2

Configure o Elementor

  1. Elementor > Configurações > Recursos
  2. Clique em “Ativar tudo” e salve
  3. Elementor > Ferramentas
  4. “Gerar arquivos e dados novamente”
  5. “Sincronizar biblioteca”
  6. Salvar alterações
3

Instale a Extensão

Easy Builder

Instale no Chrome
4

Checklist Final

✅ Regenerar CSS: Elementor > Ferramentas✅ Sincronizar biblioteca✅ Criar página com layout Elementor Canvas✅ Criar container vazio✅ Colar: Botão direito > Colar de outro site > Ctrl + V

​
Workflow Rápido

1. Criar Página

  • Nova página
  • Layout: Elementor Canvas
  • Editar com Elementor

2. Abrir Easy Builder

  • Clique na extensão
  • Escolha seção/página
  • Copie

3. Colar no Elementor

  • Crie container vazio
  • Botão direito > Colar de outro site
  • Ctrl + V

4. Personalizar

  • Edite textos
  • Ajuste cores globais
  • Troque imagens

​
Tutoriais Essenciais

Tutorial básico - Como criar com Easy Builder
Tutorial completo - Maestria total
Cores e fontes - Customização global em 2min
Tamanhos corretos - Como criar backgrounds
Landing com IA - Processo completo com ChatGPT
IA para imagens - Gerar com inteligência artificial
Ajustar mobile - Tablet e celular
Definir home - Tutorial 52s

​
Dicas Profissionais

Meus Recursos

Salve seus blocos personalizados para reutilizarSaiba mais

Easy Copy

Use IA para gerar textos persuasivosSaiba mais

Cores Globais

Configure uma vez, aplica em tudo

Containers

Sempre cole em containers vazios

Backup Regular

Faça backup antes de grandes mudanças

WebP

Sempre use imagens em formato .webp

​
Atalhos Úteis

  • Ctrl + D - Duplicar elemento
  • Ctrl + Shift + V - Colar estilo
  • Ctrl + E - Salvar e sair
  • Ctrl + Shift + L - Limpar cache

​
Recursos Avançados

Em “Meus Recursos” você pode compartilhar pastas com colaboradores.Ver tutorial completo
Use o plugin HTML to Design para exportar páginas do Elementor para o Figma.Tutorial em vídeo:
Configure atalho personalizado para abrir o Easy Builder:
  1. Chrome > Extensões > Atalhos do teclado
  2. Defina combinação (ex: Ctrl + Shift + E)

​
Área de Membros

Acesse conteúdos avançados na área de membros:
  • Design & Personalizações - Instruções avançadas
  • Mentorias Gravadas - Processo criativo e análise
  • Arsenal do Designer - Ferramentas e recursos
  • Design Easy - Curso completo com IA

Acessar Área de Membros

Ver todos os cursos e mentorias

​
Próximos Passos

Funcionalidades

Explore todas as ferramentas

FAQ

Perguntas frequentes

Resolução Problemas

Solucione erros