Easy Builder
Assinar Easy Builder

Fluxos de trabalho avançados para criar páginas mais rápido

Técnicas avançadas e fluxos de trabalho que economizam dias de trabalho

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:

Onboarding

Cliente preenche briefing e paga. Igual ao processo tradicional.

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

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.

Cliente aprovou?

Continua montando direto no Elementor usando sessões do Easy Builder:

  • Benefícios

  • Comparações

  • Depoimentos

  • FAQ

Só copiar e colar!

Responsivo?

Só ajusta imagens.

O resto já vem pronto:

  • ✅ Margens configuradas

  • ✅ Espaçamentos afinados

  • ✅ Fontes escaladas

  • ✅ Tudo responsivo

Finalização

  1. Salva o projeto nos seus recursos do Easy Builder

  2. Coleta depoimento

  3. Tira print

  4. Joga no portfólio

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:

Menu Lateral

Quando você abre o Easy Builder, tem:

  • 🏠 Home - Início

  • ⭐ Favoritos - Seus favoritos salvos

  • ❓ Tire suas dúvidas - Guias, erros comuns, configs

  • 👨‍💻 Easy Coder - IA que escreve código

  • 🐞 Reportar Bug - Feedback direto

  • 💬 Suporte - Contato com equipe

Personalizações

HTML/CSS Sem Pirar

Quer deixar uma palavra colorida ou destacada?



Use: `<span style="color:#FF0000">Texto</span>`



**Não sabe HTML?**

- Vai no **Easy Coder**

- Pede: "coloca esse trecho em amarelo"

- Ele gera o código pronto!

Muitos efeitos vêm com classes CSS prontas. Quer personalizar? Vai em Avançado > CSS Personalizado.

DOM Otimizado

Menos Elementos = Site Mais Leve

Tem sessões com várias caixas separadas e outras com tudo agrupado.



**Versões otimizadas:**

- Usam menos elementos

- Carregamento mais rápido

- Melhor performance

Se o texto "bugar" e não editar: clica fora, volta e edita de novo. Elementor é birrento às vezes.

Organização em Camadas

Abrir Navegador

Clica com botão direito > Navegador

Ver Árvore de Containers

Vai abrir tudo organizado em containers

Te ajuda a:

  • Mover elementos

  • Saber onde colocar cada coisa

  • Ver o que tá por cima ou por baixo (z-index)

Reorganizar

  • Imagem "em cima" do texto? Muda direção do container

  • Quer imagem à direita? Troca ordem dos elementos

Responsivo e Visibilidade

Ocultar em Dispositivos

Quer que uma sessão apareça só no mobile?

Avançado > Responsivo → Marca "ocultar no desktop"

Simples assim!

Customizar Scrollbar

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

Exemplo de scrollbar customizada:

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
Efeitos Visuais

Quer que algo "entre na tela" com fade, zoom ou slide?

Avançado > Efeitos de Movimento

Escolhe o efeito. Pode aplicar em:

  • Uma imagem só

  • Sessão inteira

  • Qualquer elemento

As 3 Abas Essenciais

Layout

Estrutura da página:

  • Altura

  • Direção

  • Alinhamento

  • Espaçamento

Estilo

Aparência visual:

  • Cores

  • Fundo

  • Borda

  • Gradiente

  • Efeito de rolagem

Avançado

Detalhes técnicos:

  • Margin e Padding

  • Z-index

  • Responsivo

  • Custom CSS

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.

Como Funciona?

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.

Tipos de Sites

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.

Biblioteca Crescente

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:

Criar Página

WordPress: Páginas > Adicionar Nova

Dá um nome e clica em Editar com Elementor

Configurar Layout

Canto inferior esquerdo ⚙️ → Layout da Página → Elementor Canvas

Isso remove cabeçalho e rodapé

Abrir Easy Builder

Clica no ícone do Easy Builder no navegador

Você vai ver:

  • Meus Recursos

  • Páginas

  • Sessões

  • Botões

  • Carrosséis

  • Códigos

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 🧱

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

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

Botão não cola?

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!

Scroll lateral bugado?

  1. Easy Builder > Códigos

  2. Pega o código que remove scroll

  3. Cola no CSS da página

Simples assim!

Customizar scrollbar, degradê, efeitos?

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!

Atalho de Teclado

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:

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

Descubra o tamanho

Clica na seção → Layout > Altura mínima

Ex: Se está em 875px, esse é o valor da altura

Crie a imagem

Photoshop ou Figma:

  • Largura: 1920px

  • Altura: 875px (ou o valor que descobriu)

Formato: Sempre .webp para melhor performance

Converta para WebP

Use Squoosh.app

Configuração:

  • Formato: WebP

  • Qualidade: 64-80

  • Tamanho: Até 100KB

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.

Use extensão de print

Instala Lightshot no PC

Dá print só da área que interessa

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)

Adicione elementos

Com imagem no tamanho certo:

  • Cole personagem

  • Adicione fundos extras

  • Aplique sombras

  • Use máscaras e guias

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

Configure no Elementor

Seção > Estilo > Fundo

Configuração:

  • Posição: Top Center

  • Repetição: No Repeat

  • Tamanho: Capa (Cover)

Fundos Emendados (Layouts Contínuos)

Técnica de Fundos Contínuos:

Mesma altura nas seções

Crítico: Duas seções com MESMA largura e altura

Ex: Primeira = 614px, Segunda = 614px

Sem um pixel a mais ou a menos!

Criar arquivo no Photoshop

  • Largura: 1920px

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

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)

Fatiar por Guias

Ferramenta de corte → "Fatiar por Guias"

Photoshop divide exatamente onde você colocou a guia!

Exportar separadamente

Arquivo > Exportar > Salvar para Web

  • Seleciona cada imagem individualmente

  • Qualidade: Muito Alta

  • Converte pra WebP (Squoosh)

  • Mantém: 60-100KB

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

Como Usar IA para Criar Imagens

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!

Easy Image - IA Completo

Tutorial completo do Easy Image - como criar imagens com IA Grátis e Pago:

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 imagens

Acessar ImageFX

Easy Image

IA embutida no Easy Builder

Disponível na área de membros

Processo Completo:

1. Busque referências

Vai no Pinterest ou Google Imagens

Busca por referências visuais do tema da página

Ex: "tribunal", "advogado escritório", "consultório moderno"

2. Use Easy Image

Copia uma das imagens de referência

Vai 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. Traduza para inglês

Peça para a IA traduzir o prompt

Por quê? ImageFX (Google) entende melhor comandos em inglês

4. Gere no ImageFX

Acesse: ImageFX

Cole o prompt traduzido

Selecione formato: Paisagem (Landscape)

Pronto! A IA gera imagens lindas que servem como base

5. Edite a imagem

Pode fazer em: Canva, Figma, Photoshop ou até Paint

Ajustes:

  • 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. Adicione contraste

Quer destacar o texto?

Adiciona degradê preto com transparência do lado esquerdo

Assim o texto ganha destaque e o fundo não briga

Adicionar Foto de Pessoa:

Remover Fundo

Busque a foto

Freepik.com - Baixe a imagem da pessoa

Ou clica botão direito > copiar imagem

Remova o fundo

Acesse: Remove.bg

Cole lá e remove o fundo automaticamente

Adicione ao layout

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

Efeito de Luz

Quer adicionar efeito de luz profissional?

Busque overlay

Google: "light overlay png"

Adicione à imagem

Joga por cima da sua composição

Configure mesclagem

Modo de mesclagem: Lighten ou Screen

Isso dá um toque profissional e atmosfera única!

Otimização Final:

Salve como JPEG ou WebP

Exporte a imagem finalizada

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

Suba no Elementor

Seção > Estilo > Fundo

Configuração:

  • Posição: Top Center

  • Repetição: No Repeat

  • Tamanho: Capa (Cover)

Para mobile: Mesma lógica, mas formato vertical

Exemplo: 1080 x 1300px

Degradê 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