Skip to main content

​
Como Economizar Dias de Trabalho

Antes do Easy Builder, montar uma página era quase uma saga épica. O cliente chegava, aí tinha briefing, pagamento, nota, grupo de WhatsApp, Drive, ClickUp, planilha financeira, revisão de arquivos, validação… tudo isso antes de começar o design.
O caos real do método tradicional:Cria Figma → monta layout da primeira sessão → aprova internamente → manda pro cliente → cliente aprova → aí sim faz o resto da página no Figma → aprova de novo → começa implementação no Elementor → cria páginas → exporta arquivos → implementa manualmente cada detalhe → revisa tudo → otimiza → configura plugins → ativa cache → insere formulários, cookies, políticas → faz backup → coleta depoimento → salva portfólio → atualiza financeiro → só então entrega.Resultado: Dias de trampo só pra uma página.

​
Novo Fluxo com Easy Builder

​
Processo Otimizado:

1

Onboarding

Cliente preenche briefing e paga. Igual ao processo tradicional.
2

Desenvolvimento

Instala o backup do Easy Builder no WordPress.Já vem com tudo:
  • Elementor + Pro Elements
  • Plugins essenciais
  • Pré-carregamento de pixel
  • WP Rocket
  • LiteSpeed
  • Tudo otimizado para voar
3

Nada de Figma!

Monta a primeira sessão direto no Easy Builder:
  • Logo
  • Título
  • Texto
  • Botão
  • Imagem de fundo
Envia pro cliente aprovar.
4

Cliente aprovou?

Continua montando direto no Elementor usando sessões do Easy Builder:
  • Benefícios
  • Comparações
  • Depoimentos
  • FAQ
Só copiar e colar!
5

Responsivo?

Só ajusta imagens.O resto já vem pronto:
  • ✅ Margens configuradas
  • ✅ Espaçamentos afinados
  • ✅ Fontes escaladas
  • ✅ Tudo responsivo
6

Finalização

  1. Salva o projeto nos seus recursos do Easy Builder
  2. Coleta depoimento
  3. Tira print
  4. Joga no portfólio
7

Pós-entrega

  • Recebe a grana
  • Posta no portfólio
  • Atualiza financeiro
  • Partiu próxima venda!
O que antes era 20 etapas entre design e implementação, hoje virou:Montou → Colou → Ajustou imagem → Entregou. Fim.

​
Economia Real

Antes

8-12 horas por landing page

Depois

2-3 horas por landing page

Economia

6-9 horas por projeto!
Produção mensal:
  • Antes: 4-6 páginas
  • Depois: 10-20 páginas
  • Sem aumentar equipe!

​
Usar 100% do Easy Builder

​
Recursos da Extensão:

​
Organização em Camadas

1

Abrir Navegador

Clica com botão direito > Navegador
2

Ver Árvore de Containers

Vai abrir tudo organizado em containersTe ajuda a:
  • Mover elementos
  • Saber onde colocar cada coisa
  • Ver o que tá por cima ou por baixo (z-index)
3

Reorganizar

  • Imagem “em cima” do texto? Muda direção do container
  • Quer imagem à direita? Troca ordem dos elementos

​
Responsivo e Visibilidade

Quer que uma sessão apareça só no mobile?Avançado > Responsivo → Marca “ocultar no desktop”Simples assim!
Quer mudar a cor da scrollbar?
  1. Easy Builder > Códigos
  2. Pega o código da scrollbar
  3. Cola no Custom CSS da página inteira
Quer que algo “entre na tela” com fade, zoom ou slide?Avançado > Efeitos de MovimentoEscolhe o efeito. Pode aplicar em:
  • Uma imagem só
  • Sessão inteira
  • Qualquer elemento

​
As 3 Abas Essenciais

Estrutura da página:
  • Altura
  • Direção
  • Alinhamento
  • Espaçamento
Use essas 3 abas em qualquer coisa: container, botão, imagem. São o coração da personalização.

​
Dica de Ouro

NÃO PERCA TEMPO FAZENDO PROTÓTIPO NO FIGMA!Se a página do cliente segue estrutura clássica:
  • Hero
  • Benefícios
  • Depoimentos
  • Bio
  • Oferta
  • FAQ
Monta direto com o Easy Builder!Você economiza horas de vida e ainda entrega mais rápido.

​
Criar Qualquer Tipo de Página

​
Dá pra criar qualquer tipo?

Sim! O Easy Builder não é um “template fechado”, ele é um acelerador de estrutura. O segredo está em combinar, adaptar e montar como Lego.
Imagina que você achou um site com layout top. Você pensa: “Não tem isso no Easy Builder”.Mas tem sim, só que em peças:
  • Cabeçalho com imagem + título + subtítulo + botão → ✅ Tem
  • Sessão com ícones e textos organizados → ✅ Tem
  • Sessão com mapa, formulário, rodapé → ✅ Tudo disponível
  • Carrossel? → ✅ Tem
  • Sessão com vídeo? → ✅ Tem
Processo:
  1. Importa sessão parecida
  2. Adapta: muda texto, troca botão, ajusta ícone
  3. Duplica se precisar repetir layout
  4. Troca fundo, bota borda, remove o que não quiser
  5. Pronto: ficou do seu jeito, sem construir do zero
É isso que economiza tempo e mantém o controle criativo na sua mão.
O que você pode criar:✅ Site Institucional? Sim ✅ Landing page de vendas? Óbvio ✅ Página de blog? Sim ✅ E-commerce? Dá pra estruturar o visual (catálogo com WooCommerce) ✅ Portfólio? Sim ✅ One page? Sim ✅ Qualquer projeto? Sim, desde que saiba adaptar
O Easy Builder te dá as ferramentas, os blocos e os atalhos. O resto é criatividade e bom gosto.
O Easy Builder só cresce. Cada vez mais sessões sendo adicionadas:
  • Seção de download de app
  • Ícones animados
  • Depoimentos variados
  • FAQs diferentes
  • Sessão “Sobre nós”
  • E muito mais!
Criou algo próprio?Salva nos Meus Recursos. Assim você constrói seu acervo pessoal.

​
Como Usar de Forma Eficiente

​
Workflow Passo a Passo:

1

Criar Página

WordPress: Páginas > Adicionar NovaDá um nome e clica em Editar com Elementor
2

Configurar Layout

Canto inferior esquerdo ⚙️ → Layout da Página → Elementor CanvasIsso remove cabeçalho e rodapé
3

Abrir Easy Builder

Clica no ícone do Easy Builder no navegadorVocê vai ver:
  • Meus Recursos
  • Páginas
  • Sessões
  • Botões
  • Carrosséis
  • Códigos
4

Escolher Recurso

Página completa:
  • Vai em Páginas
  • Escolhe uma que curtir
  • Clica em Visualizar (se quiser preview)
  • Clica em Copiar
Ou monte com sessões:
  • Escolhe sessões individuais
  • Hero, Benefícios, Depoimentos…
  • Monta como Lego 🧱
5

Colar no Elementor

  1. Volta pro Elementor
  2. Botão direito onde quer colar
  3. “Colar de outro site”
  4. Ctrl + V
  5. Aguarda 5 segundos
  6. BUM! Página montada
6

Personalizar

O Easy Builder não é pack de template engessado:
  • Muda a logo pro do seu cliente
  • Edita os textos direto ali
  • Quer mudar um ícone? Biblioteca de ícones do Elementor
  • Troca imagens
  • Ajusta cores globais

​
Truques Ninja

Cria uma nova coluna com o botão de ”+”Aí clica com botão direito nela:
  • Colar de outro site
  • Ctrl + V
Se colar no lugar errado, só arrastar!
  1. Easy Builder > Códigos
  2. Pega o código que remove scroll
  3. Cola no CSS da página
Simples assim!
Tudo está em Códigos:
  1. Clica
  2. Copia
  3. Cola no Avançado > CSS Personalizado
  4. Aplica
Efeitos disponíveis:
  • Scrollbar customizada
  • Título com degradê
  • Animações
  • Glow effects
  • E muito mais!
Quer abrir o Easy Builder com atalho?
Configure:
  1. Chrome > Extensões > Atalhos do teclado
  2. Defina combinação (ex: Ctrl + Shift + E)

​
Criação de Imagens de Fundo

​
Para Desktop:

1

Monte a seção primeiro

  1. Abre o Elementor
  2. Copia e cola a seção
  3. Altera textos, cores, fonte global
  4. Deixa tudo ajustado
2

Descubra o tamanho

Clica na seção → Layout > Altura mínimaEx: Se está em 875px, esse é o valor da altura
3

Crie a imagem

Photoshop ou Figma:
  • Largura: 1920px
  • Altura: 875px (ou o valor que descobriu)
Formato: Sempre .webp para melhor performance
4

Converta para WebP

Use Squoosh.appConfiguração:
  • Formato: WebP
  • Qualidade: 64-80
  • Tamanho: Até 100KB
5

Aplique no Elementor

  1. Clica na seção
  2. Estilo > Tipo de Fundo > Clássico
  3. Envia a imagem .webp
  4. Marca opção “Capa” (Cover)
  5. Posição: Top Center
  6. Repetição: No Repeat

​
Para Mobile:

Nunca use print padrão do mobile do Elementor!Tem apenas 300px de largura. Quando estica para 1080px do celular real, fica distorcida e serrilhada.
1

Use extensão de print

Instala Lightshot no PCDá print só da área que interessa
2

Redimensione no Photoshop

  1. Cola o print no Photoshop
  2. Imagem > Tamanho da imagem
  3. Muda largura para 1080px
  4. Mantém proporção ativa (pininho)
3

Adicione elementos

Com imagem no tamanho certo:
  • Cole personagem
  • Adicione fundos extras
  • Aplique sombras
  • Use máscaras e guias
4

Exporte otimizado

Arquivo > Exportar > Salvar para Web (Ctrl + Alt + Shift + S)
  • Formato: JPEG
  • Qualidade: Muito Alta
  • Tamanho: 60-100KB
Depois converte pra WebP no Squoosh
5

Configure no Elementor

Seção > Estilo > FundoConfiguração:
  • Posição: Top Center
  • Repetição: No Repeat
  • Tamanho: Capa (Cover)

​
Fundos Emendados (Layouts Contínuos)

​
Técnica de Fundos Contínuos:

1

Mesma altura nas seções

Crítico: Duas seções com MESMA largura e alturaEx: Primeira = 614px, Segunda = 614pxSem um pixel a mais ou a menos!
2

Criar arquivo no Photoshop

  • Largura: 1920px
  • Altura: Soma das duas seções (ex: 614 + 615 = 1229px)
3

Usar guia horizontal

  1. Cria guia horizontal onde a primeira seção termina (ex: 614px)
  2. Cria arte normalmente (personagem, fundo, luz, sombra)
  3. Parte de cima: primeira seção
  4. Embaixo da guia: segunda seção (continuação)
4

Fatiar por Guias

Ferramenta de corte → “Fatiar por Guias”Photoshop divide exatamente onde você colocou a guia!
5

Exportar separadamente

Arquivo > Exportar > Salvar para Web
  • Seleciona cada imagem individualmente
  • Qualidade: Muito Alta
  • Converte pra WebP (Squoosh)
  • Mantém: 60-100KB
6

Aplicar no Elementor

Primeira seção (614px):
  • Estilo > Fundo > Primeira imagem
  • Top Center / No Repeat / Cover
Segunda seção (615px):
  • Estilo > Fundo > Segunda imagem
  • Top Center / No Repeat / Cover
Pronto! Fundo parece um só, contínuo, perfeito!
No mobile: Evite emendas milimétricas. Use degradê ou sombra para suavizar transições entre dispositivos diferentes.

​
Usar IA para Criar Imagens de Fundo

Aprenda a gerar fundos de site incríveis sem depender de banco de imagem padrão e sem precisar ser mestre do Photoshop. Tudo com IA. E de forma gratuita!

​
Ferramentas de IA para Imagens:

GPT-4 com Imagens

IA do ChatGPT (plano pago)Gera imagens de alta qualidade

ImageFX (Google)

Gratuita!IA do Google para gerar imagensAcessar ImageFX

Easy Image

IA embutida no Easy BuilderDisponível na área de membros

​
Processo Completo:

1

1. Busque referências

Vai no Pinterest ou Google ImagensBusca por referências visuais do tema da páginaEx: “tribunal”, “advogado escritório”, “consultório moderno”
2

2. Use Easy Image

Copia uma das imagens de referênciaVai até a IA Easy Image (dentro da Área de Membros)Pede: “Faça um prompt para gerar uma imagem parecida com essa”Ela entrega um prompt em português
3

3. Traduza para inglês

Peça para a IA traduzir o promptPor quê? ImageFX (Google) entende melhor comandos em inglês
4

4. Gere no ImageFX

Acesse: ImageFXCole o prompt traduzidoSelecione formato: Paisagem (Landscape)Pronto! A IA gera imagens lindas que servem como base
5

5. Edite a imagem

Pode fazer em: Canva, Figma, Photoshop ou até PaintAjustes:
  • Redimensione pro tamanho da seção (1920 x altura)
  • Print da seção do Elementor como guia
  • Modo de mesclagem “Divisão” para ver layout por baixo
6

6. Adicione contraste

Quer destacar o texto?Adiciona degradê preto com transparência do lado esquerdoAssim o texto ganha destaque e o fundo não briga

​
Adicionar Foto de Pessoa:

1

Busque a foto

Freepik.com - Baixe a imagem da pessoaOu clica botão direito > copiar imagem
2

Remova o fundo

Acesse: Remove.bgCole lá e remove o fundo automaticamente
3

Adicione ao layout

Joga a imagem sobre seu fundo e ajusta posição

​
Otimização Final:

1

Salve como JPEG ou WebP

Exporte a imagem finalizada
2

Use Squoosh

Squoosh.app
  1. Arrasta sua imagem
  2. Muda formato para WebP
  3. Ajusta qualidade: 60-80
  4. Meta: 60KB a 100KB
  5. Salva
3

Suba no Elementor

Seção > Estilo > FundoConfiguração:
  • Posição: Top Center
  • Repetição: No Repeat
  • Tamanho: Capa (Cover)
Para mobile: Mesma lógica, mas formato verticalExemplo: 1080 x 1300pxDegradê de cima para baixo para manter legibilidade

​
Próximos Passos

Meus Recursos

Salve seus melhores blocos

Easy Copy

Gere textos com IA

Easy Coder

Customize com código