Capturar o contato de quem visita o seu site é o que transforma um visitante em cliente. É isso que uma landing page de captura faz: ela oferece um material gratuito e, em troca, recebe o nome, o e-mail e o WhatsApp da pessoa interessada. No fim, você fica com uma lista de gente que já levantou a mão e quer ouvir de você.
Neste tutorial você vai criar uma landing page de captura completa do zero, com WordPress, Elementor e a ajuda do Claude para escrever a copy e gerar os blocos da página. A gente passa por tudo na ordem certa: contratar a hospedagem, instalar o WordPress, ajustar as configurações, definir cores e fontes, criar o texto que convence, montar o formulário e ainda a página de obrigado.
Para você não se perder, montei o mapa abaixo com o passo a passo inteiro. Clica em cada etapa para abrir o conteúdo, copiar os prompts prontos e ir acompanhando enquanto assiste à aula.
Landing Page de Captura Passo a Passo
WordPress, Elementor e Claude: do zero ao formulário capturando leads
Toda landing page precisa de um lugar para ficar no ar. Você contrata a hospedagem, registra o domínio e instala o WordPress, tudo dentro do painel da Hostinger.
Cupom de desconto Hostinger[SEU CUPOM] para 10% OFF
Escolha o plano, registre o domínio que já vem incluso e use o instalador automático do WordPress. Em poucos minutos o painel fica liberado.
Título e descrição do site em Configurações, Geral.
Links permanentes no formato Nome do post, em Configurações, Links permanentes.
Idioma, fuso horário e formato de data no padrão do Brasil.
Apague a página e o post de exemplo que vêm na instalação.
Confirme que o site abre com o cadeado, no https.
Com o WordPress no ar, você prepara a identidade e o conteúdo da página: cores e fontes, a copy e o banner.
No Elementor, vá em Configurações do site, Cores globais e Fontes globais. Cadastre a paleta da marca e as fontes de título e texto.
Cor e fonte definidas como globais mudam em todos os lugares de uma vez. Se um dia a marca trocar de cor, você ajusta em um único lugar.
A copy é o que faz a pessoa preencher o formulário. Em vez de escrever do zero, você pede ao Claude a copy completa da landing de captura.
Prompt 1: Copy da Landing Page
Atue como copywriter especialista em landing pages de captura de leads. Escreva a copy completa de uma LP de captura (isca gratuita) para o nicho [advogados que querem conseguir mais clientes]. A página NÃO vende nada, ela só capta nome, e-mail e WhatsApp em troca do acesso a uma aula/workshop gratuito ao vivo.
Contexto: a isca é a aula gratuita [Sua Agenda Lotada], que acontece [dia 7 de julho às 19h, ao vivo no YouTube], com bônus para quem entra na lista antes da aula. Promessa principal: [ter a agenda cheia de clientes de forma previsível, sem depender só de indicação].
Público: [advogados autônomos, recém-formados e donos de pequenos escritórios que dominam o jurídico, mas têm dificuldade de atrair clientes].
Tom de voz: profissional e confiável, à altura do público, mas próximo, direto e fácil de entender. Conclusão primeiro, depois a explicação. Não use travessão. Não use a construção “não é sobre X, é sobre Y”.
Entregue a copy nesta ordem de seções:
1. Banner (hero): headline, subheadline, texto curto acima do formulário, 3 variações de botão e selo com data e horário.
2. Seção de dores “A realidade de hoje”: título no formato “Você quer [desejo], mas…” e 6 cards curtos de dor.
3. Seção de benefícios “A aula gratuita”: título “Neste workshop você aprenderá [método]”, subtítulo e 6 cards (título curto e 1 frase cada).
4. Seção “Esse evento é para você se…”: duas colunas (é para você se / não é para você se), com 4 itens cada.
5. Seção de autoridade do professor: tag, nome, bio curta em primeira pessoa, credenciais (formação e OAB) e 3 números de prova (casos, anos, clientes).
6. FAQ: 5 perguntas e respostas curtas.
7. Fechamento: título, subtítulo com o prazo do bônus e texto de botão.
8. Página de obrigado: mensagem curta confirmando o cadastro.
Mantenha cada card e bullet curtos. Use placeholders entre colchetes para qualquer dado que eu precise preencher (nomes, números, faculdade, OAB). Não invente prova social.
Contexto: a isca é a aula gratuita [Sua Agenda Lotada], que acontece [dia 7 de julho às 19h, ao vivo no YouTube], com bônus para quem entra na lista antes da aula. Promessa principal: [ter a agenda cheia de clientes de forma previsível, sem depender só de indicação].
Público: [advogados autônomos, recém-formados e donos de pequenos escritórios que dominam o jurídico, mas têm dificuldade de atrair clientes].
Tom de voz: profissional e confiável, à altura do público, mas próximo, direto e fácil de entender. Conclusão primeiro, depois a explicação. Não use travessão. Não use a construção “não é sobre X, é sobre Y”.
Entregue a copy nesta ordem de seções:
1. Banner (hero): headline, subheadline, texto curto acima do formulário, 3 variações de botão e selo com data e horário.
2. Seção de dores “A realidade de hoje”: título no formato “Você quer [desejo], mas…” e 6 cards curtos de dor.
3. Seção de benefícios “A aula gratuita”: título “Neste workshop você aprenderá [método]”, subtítulo e 6 cards (título curto e 1 frase cada).
4. Seção “Esse evento é para você se…”: duas colunas (é para você se / não é para você se), com 4 itens cada.
5. Seção de autoridade do professor: tag, nome, bio curta em primeira pessoa, credenciais (formação e OAB) e 3 números de prova (casos, anos, clientes).
6. FAQ: 5 perguntas e respostas curtas.
7. Fechamento: título, subtítulo com o prazo do bônus e texto de botão.
8. Página de obrigado: mensagem curta confirmando o cadastro.
Mantenha cada card e bullet curtos. Use placeholders entre colchetes para qualquer dado que eu precise preencher (nomes, números, faculdade, OAB). Não invente prova social.
Troque os campos entre colchetes pelo nicho e pela oferta do seu projeto. Depois peça ajustes até a copy ficar com a sua cara.
Com a copy pronta, você pede ao Claude os blocos HTML de cada seção, já no estilo visual da página, para colar nos widgets HTML do Elementor.
Prompt 2: Blocos HTML das seções
Com base na copy acima, atue como desenvolvedor front-end. Gere os blocos HTML (para colar em widgets HTML do Elementor) das seções de uma LP de captura, no estilo visual abaixo.
Estilo visual:
– Fundo escuro: preto #0a0a0a e preto quente #100d09, alternando entre as seções para dar respiro.
– Cor de destaque dourada #f4b740 (apoios #e0a020 e #ffc94d).
– Texto branco #ffffff e cinza #bdbcb6.
– Cards normais: fundo rgba(255,255,255,0.035), borda rgba(255,255,255,0.09), cantos arredondados.
– Cards de destaque (autoridade e fechamento): fundo rgba(244,183,64,0.05), borda rgba(244,183,64,0.22), com brilho radial dourado no topo.
– Fonte Poppins (títulos peso 700, texto 400).
Regras técnicas obrigatórias (testadas no Elementor):
– Prefixo de classe único por bloco.
– Sem !important e sem reset universal, use só box-sizing.
– Wrapper transparente, sem background-color e sem border-radius no wrapper.
– SVG sempre inline, nunca base64.
– type=”button” em todo botão.
– JavaScript dentro de IIFE com guard (window.__init) para não duplicar.
– Não usar details, summary ou nav. Acordeon feito com div mais JS.
Efeitos: animação de entrada (fade up conforme rola a página), hover nos cards, FAQ acordeon que abre e fecha, contador animado nos números de prova e divisor de papel rasgado entre seções.
Gere os blocos nesta ordem, cada um pronto para um widget separado: dores, benefícios, “para você se / não é para você se”, divisor de papel rasgado, card de autoridade com contador, FAQ e fechamento. Use placeholders entre colchetes para os dados que eu preencho.
Estilo visual:
– Fundo escuro: preto #0a0a0a e preto quente #100d09, alternando entre as seções para dar respiro.
– Cor de destaque dourada #f4b740 (apoios #e0a020 e #ffc94d).
– Texto branco #ffffff e cinza #bdbcb6.
– Cards normais: fundo rgba(255,255,255,0.035), borda rgba(255,255,255,0.09), cantos arredondados.
– Cards de destaque (autoridade e fechamento): fundo rgba(244,183,64,0.05), borda rgba(244,183,64,0.22), com brilho radial dourado no topo.
– Fonte Poppins (títulos peso 700, texto 400).
Regras técnicas obrigatórias (testadas no Elementor):
– Prefixo de classe único por bloco.
– Sem !important e sem reset universal, use só box-sizing.
– Wrapper transparente, sem background-color e sem border-radius no wrapper.
– SVG sempre inline, nunca base64.
– type=”button” em todo botão.
– JavaScript dentro de IIFE com guard (window.__init) para não duplicar.
– Não usar details, summary ou nav. Acordeon feito com div mais JS.
Efeitos: animação de entrada (fade up conforme rola a página), hover nos cards, FAQ acordeon que abre e fecha, contador animado nos números de prova e divisor de papel rasgado entre seções.
Gere os blocos nesta ordem, cada um pronto para um widget separado: dores, benefícios, “para você se / não é para você se”, divisor de papel rasgado, card de autoridade com contador, FAQ e fechamento. Use placeholders entre colchetes para os dados que eu preencho.
Componente pronto: o card de notificações flutuantes, que passa sensação de movimento e resultado. É só copiar e colar em um widget HTML.
HTML: Card de notificações
<!– Notificacao rotativa – Sua Agenda Lotada –>
<div class=”dsag-noti-rot”>
<div class=”dsag-noti dsag-noti–1″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><rect x=”3″ y=”5″ width=”18″ height=”16″ rx=”3″ stroke=”#f4b740″ stroke-width=”1.8″/><path d=”M3 9.5h18″ stroke=”#f4b740″ stroke-width=”1.8″/><path d=”M8 3v4M16 3v4″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round”/><path d=”M8.5 14.5l2 2 3.5-3.5″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round” stroke-linejoin=”round”/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo agendamento de reunião</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>Reunião marcada para amanhã, 14h</span>
</span>
</div>
<div class=”dsag-noti dsag-noti–2″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><path d=”M12 3.4 20.6 12 12 20.6 3.4 12 12 3.4Z” stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M9.2 12 12 9.2 14.8 12 12 14.8 9.2 12Z” fill=”#f4b740″/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo Pix recebido</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>R$ 3.000,00 de honorários</span>
</span>
</div>
<div class=”dsag-noti dsag-noti–3″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><path d=”M6 3h7l5 5v13H6V3Z” stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M13 3v5h5″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M8.5 14.5l2 2 4-4″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round” stroke-linejoin=”round”/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo contrato assinado</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>Cliente confirmou e assinou</span>
</span>
</div>
</div>
<style>
.dsag-noti-rot{ box-sizing:border-box; position:relative; width:100%; max-width:320px; height:62px; font-family:inherit; }
.dsag-noti{ box-sizing:border-box; position:absolute; inset:0; display:flex; gap:11px; align-items:center; padding:11px 13px; background:rgba(255,255,255,0.06); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,0.14); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,0.4); opacity:0; }
.dsag-noti–1{ animation:dsag-rot 9s ease-in-out infinite; }
.dsag-noti–2{ animation:dsag-rot 9s ease-in-out infinite 3s; }
.dsag-noti–3{ animation:dsag-rot 9s ease-in-out infinite 6s; }
.dsag-noti__ic{ box-sizing:border-box; width:40px; height:40px; border-radius:11px; background:rgba(244,183,64,0.15); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dsag-noti__ic svg{ width:21px; height:21px; }
.dsag-noti__txt{ box-sizing:border-box; flex:1 1 auto; min-width:0; }
.dsag-noti__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.dsag-noti__title{ font-size:13.5px; font-weight:600; color:#ffffff; line-height:1.2; }
.dsag-noti__time{ font-size:11px; color:#94a3b8; flex:0 0 auto; }
.dsag-noti__sub{ font-size:12px; color:#cbd5e1; line-height:1.3; margin-top:2px; }
@keyframes dsag-rot{ 0%{opacity:0;transform:translateY(-12px) scale(.94);} 4%{opacity:1;transform:translateY(0) scale(1);} 29%{opacity:1;transform:translateY(0) scale(1);} 33%{opacity:0;transform:translateY(12px) scale(.94);} 100%{opacity:0;transform:translateY(12px) scale(.94);} }
@media (prefers-reduced-motion: reduce){ .dsag-noti{ animation:none; } .dsag-noti–1{ opacity:1; } }
</style>
<div class=”dsag-noti-rot”>
<div class=”dsag-noti dsag-noti–1″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><rect x=”3″ y=”5″ width=”18″ height=”16″ rx=”3″ stroke=”#f4b740″ stroke-width=”1.8″/><path d=”M3 9.5h18″ stroke=”#f4b740″ stroke-width=”1.8″/><path d=”M8 3v4M16 3v4″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round”/><path d=”M8.5 14.5l2 2 3.5-3.5″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round” stroke-linejoin=”round”/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo agendamento de reunião</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>Reunião marcada para amanhã, 14h</span>
</span>
</div>
<div class=”dsag-noti dsag-noti–2″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><path d=”M12 3.4 20.6 12 12 20.6 3.4 12 12 3.4Z” stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M9.2 12 12 9.2 14.8 12 12 14.8 9.2 12Z” fill=”#f4b740″/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo Pix recebido</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>R$ 3.000,00 de honorários</span>
</span>
</div>
<div class=”dsag-noti dsag-noti–3″>
<span class=”dsag-noti__ic”>
<svg viewBox=”0 0 24 24″ fill=”none” xmlns=”http://www.w3.org/2000/svg” aria-hidden=”true”><path d=”M6 3h7l5 5v13H6V3Z” stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M13 3v5h5″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linejoin=”round”/><path d=”M8.5 14.5l2 2 4-4″ stroke=”#f4b740″ stroke-width=”1.8″ stroke-linecap=”round” stroke-linejoin=”round”/></svg>
</span>
<span class=”dsag-noti__txt”>
<span class=”dsag-noti__top”><span class=”dsag-noti__title”>Novo contrato assinado</span><span class=”dsag-noti__time”>agora</span></span>
<span class=”dsag-noti__sub”>Cliente confirmou e assinou</span>
</span>
</div>
</div>
<style>
.dsag-noti-rot{ box-sizing:border-box; position:relative; width:100%; max-width:320px; height:62px; font-family:inherit; }
.dsag-noti{ box-sizing:border-box; position:absolute; inset:0; display:flex; gap:11px; align-items:center; padding:11px 13px; background:rgba(255,255,255,0.06); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,0.14); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,0.4); opacity:0; }
.dsag-noti–1{ animation:dsag-rot 9s ease-in-out infinite; }
.dsag-noti–2{ animation:dsag-rot 9s ease-in-out infinite 3s; }
.dsag-noti–3{ animation:dsag-rot 9s ease-in-out infinite 6s; }
.dsag-noti__ic{ box-sizing:border-box; width:40px; height:40px; border-radius:11px; background:rgba(244,183,64,0.15); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dsag-noti__ic svg{ width:21px; height:21px; }
.dsag-noti__txt{ box-sizing:border-box; flex:1 1 auto; min-width:0; }
.dsag-noti__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.dsag-noti__title{ font-size:13.5px; font-weight:600; color:#ffffff; line-height:1.2; }
.dsag-noti__time{ font-size:11px; color:#94a3b8; flex:0 0 auto; }
.dsag-noti__sub{ font-size:12px; color:#cbd5e1; line-height:1.3; margin-top:2px; }
@keyframes dsag-rot{ 0%{opacity:0;transform:translateY(-12px) scale(.94);} 4%{opacity:1;transform:translateY(0) scale(1);} 29%{opacity:1;transform:translateY(0) scale(1);} 33%{opacity:0;transform:translateY(12px) scale(.94);} 100%{opacity:0;transform:translateY(12px) scale(.94);} }
@media (prefers-reduced-motion: reduce){ .dsag-noti{ animation:none; } .dsag-noti–1{ opacity:1; } }
</style>
Agora você monta a página no Elementor: banner, headline, benefícios, prova e o formulário de captura.
O formulário você cria com o Royal Addons, usando o widget de formulário dele direto no Elementor.
Adicione os campos que quer capturar, por exemplo nome, e-mail e WhatsApp, e estilize com as cores e fontes da página.
Mantenha o formulário curto. Quanto menos campos, mais gente preenche. Nome e e-mail já bastam para começar a capturar leads.
Depois de preencher, a pessoa precisa cair em uma página de obrigado. Ela confirma que deu certo e mostra o próximo passo.
Crie uma página simples com a mensagem de confirmação e o direcionamento, por exemplo entrar no grupo, baixar o material ou conhecer a oferta.
No formulário do Royal Addons, configure o redirecionamento para a página de obrigado depois do envio.
Esta página é de captura: ela serve para pegar o contato da pessoa, não para vender direto. A diferença para uma página de vendas, além da copy, está no botão.
Para virar uma página de vendas, você troca a copy, tira o formulário e coloca um botão de compra com o link do produto.
Esse link de compra você gera na Hotmart. É onde o meu próprio curso fica hospedado e onde eu gosto de trabalhar, porque a plataforma é bem completa.
Além do checkout, a Hotmart tem várias ferramentas para quem vende, incluindo um agente de IA.
Conhecer a HotmartA plataforma onde o meu curso fica
Quando você começa a vender, precisa emitir nota fiscal. Dá para automatizar isso integrando a Hotmart com a Spedy.
A Spedy conecta na sua conta da Hotmart e emite a nota fiscal sozinha a cada venda, sem você gerar uma por uma na mão.
Nota fiscal automática na HotmartComo configurar a Spedy e emitir a cada venda.Assistir
Conhecer a SpedyNota fiscal automática nas suas vendas
Hostinger contratada, domínio registrado e WordPress instalado e configurado.
Cores e fontes definidas, copy criada com o Claude e banner pronto.
Página montada no Elementor com o formulário do Royal Addons.
Página de obrigado criada e redirecionamento configurado.
Com a captura funcionando, ainda dá para deixar a página redonda. Cada acabamento abaixo tem um vídeo dedicado.
Otimizar o site para carregar rápidoCache e imagens otimizadas para uma página veloz.Assistir
Configurar o SEO e aparecer no GoogleRank Math e o essencial para ranquear.Assistir
Proteger o site contra hackers e vírusCinco passos de segurança com o Solid Security.Assistir
Adequar o site à LGPDAviso de cookies e política de privacidade.Assistir
Se você quer dominar a criação de sites profissionais do começo ao fim, esse é o caminho do curso Sites Evolution.
Seguindo esse passo a passo, você sai com uma landing page de captura no ar, pronta para receber contatos e abastecer as suas vendas. O resultado depende de três coisas simples: manter o formulário curto para mais gente preencher, escrever uma copy que fala direto com o seu público e oferecer uma isca que a pessoa realmente queira receber.
Se você ainda não tem onde hospedar o seu site, contrata a Hostinger com o cupom Descomplicandosites e garante 10% de desconto. É onde eu coloco todos os meus sites e o que eu recomendo para começar com o pé direito. E se quiser ver cada etapa sendo feita na prática, é só assistir ao vídeo completo aqui no canal:
Quando você sentir que quer dominar a criação de sites profissionais do começo ao fim, e não apenas uma página, o curso Sites Evolution é o seu próximo passo. Lá a gente aprofunda em tudo que você precisa para criar sites que vendem e viver disso: SITES EVOLUTION.
