Como migrar do Lovable para o Elementor sem perder o tracking

Resposta rápida: para migrar uma landing page do Lovable para o Elementor sem perder o tracking, conecte o Claude Code ao seu WordPress pelo Elementor MCP, dê a ele acesso ao código do projeto Lovable e siga cinco etapas: (1) inventariar a página de origem, (2) auditar a página de destino no Elementor, (3) documentar GTM, GA4, pixels e formulários, (4) reconstruir a página com widgets e código compatíveis e (5) testar a jornada de conversão de ponta a ponta antes de publicar. O MCP não converte React em widgets automaticamente: ele dá ao agente acesso controlado ao Elementor para executar a migração com supervisão humana.

Criar uma landing page com inteligência artificial ficou mais rápido. Com o Lovable, dá para transformar uma ideia em uma página funcional, com design responsivo, componentes interativos e recursos visuais, sem desenvolver cada elemento manualmente.

Mas existe uma diferença importante entre criar uma página e integrá-la a uma operação de marketing que já está funcionando.

O que acontece quando essa landing page precisa ser publicada em um WordPress existente? Como preservar formulários, imagens, vídeos, integrações, eventos de conversão e configurações de tracking? E como fazer isso sem reconstruir a página inteira manualmente no Elementor?

Foram essas as perguntas que enfrentamos em um projeto da Maha 3D, cliente da Enableurs. Nossa abordagem foi usar o Claude Code como orquestrador da migração, conectando o código da página ao WordPress por meio do Model Context Protocol (MCP).

Neste playbook, mostramos a arquitetura, a configuração das ferramentas, o processo de migração e os cuidados para preservar a mensuração. O objetivo não é só replicar um layout: é levar uma experiência digital para outro ambiente sem comprometer o que sustenta a operação de marketing.

Por que migrar uma landing page do Lovable para o Elementor?

O Lovable ampliou a autonomia de profissionais de marketing para criar landing pages, dashboards e experiências interativas com comandos em linguagem natural. Já exploramos essas possibilidades no nosso guia sobre o Lovable.

Só que muitas empresas já têm uma infraestrutura consolidada em WordPress: domínio, estrutura de URLs, identidade visual, formulários, Google Tag Manager, Google Analytics 4, pixels, SEO e rotinas de manutenção.

Nesse cenário, criar a página no Lovable resolve apenas parte do problema. O passo seguinte é integrá-la ao ambiente existente sem quebrar nada do que já funciona.

Na prática, existem três caminhos para levar uma página do Lovable para o ar:

• Publicar no próprio Lovable, com domínio ou subdomínio próprio. É o mais rápido, mas a página fica fora do WordPress, com tracking, formulários e SEO gerenciados à parte.
• Incorporar a página no WordPress via iframe. Funciona visualmente, mas prejudica SEO, mensuração e a experiência em mobile.
• Reconstruir a página no Elementor. Dá mais trabalho, mas mantém tudo no mesmo domínio, com os mesmos componentes globais, formulários e tags. É esse o caminho deste playbook, e é aqui que o Claude Code com MCP faz diferença.

O cenário da Maha 3D

A Maha 3D usa WordPress e Elementor na sua infraestrutura digital. No projeto, o Lovable ficou como ambiente de criação e atualização das experiências, e o WordPress continuou como ambiente de publicação e gestão.

O escopo envolveu páginas de soluções, apresentação institucional e landing pages comerciais. Era importante trabalhar sobre as páginas existentes, evitar URLs duplicadas e preservar cabeçalho, rodapé e formulário de orçamento.

A migração precisava tratar design, conteúdo, funcionalidade e dados como partes de um mesmo projeto.

Quais ferramentas usar: Lovable, Claude Code, MCP e Elementor

Lovable — ambiente de criação. Estrutura de seções, textos, componentes, imagens, vídeos e comportamento responsivo, com velocidade para testar layouts.

Claude Code — agente de execução. Ferramenta de desenvolvimento assistido por IA da Anthropic que consulta código, arquivos e integrações autorizadas, propõe adaptações e executa as alterações aprovadas. Se quiser entender como usamos o Claude de forma estruturada, veja Claude como sistema.

MCP — ponte entre ferramentas. O Model Context Protocol é um padrão aberto de conexão entre aplicações de IA e sistemas externos. Cada servidor MCP disponibiliza ferramentas específicas: conectar não significa ter acesso a todas as operações da plataforma.

Elementor — ambiente de destino. Construtor visual do WordPress. Pelo MCP do Elementor, o Claude Code consegue consultar páginas e, conforme as permissões e ferramentas disponíveis, modificá-las.

⚠️ Importante: MCP não é um conversor automático de React para widgets nativos do Elementor. Alguns componentes vão exigir reconstrução com widgets, HTML, CSS e JavaScript compatíveis.

Como as peças se conectam

1. Origem: projeto Lovable (código, assets e comportamento da página).
2. Orquestração: Claude Code lê a origem, audita o destino, planeja e executa.
3. Destino: WordPress/Elementor, acessado via Elementor MCP.
4. Camada transversal: tracking, QA e governança acompanham todas as etapas.

Como conectar o Claude Code ao Elementor via MCP

Pré-requisitos

• Projeto Lovable com acesso autorizado ao código ou aos arquivos.
• Claude Code instalado e autenticado.
• WordPress com Elementor e integração MCP disponível.
• Permissões para consultar e editar a página de destino.
• Acesso às configurações e ferramentas de validação de tracking.
• Backup recuperável e estratégia de rollback, de preferência com ambiente de homologação.

Passo 1 — Conectar o Claude Code ao Elementor

No painel do WordPress, acesse Elementor → Elementor MCP. Selecione Claude Code, gere uma senha de aplicativo exclusiva, clique em Generate Prompt e copie o prompt oficial. Execute-o no Claude Code depois de revisar o plano de configuração que ele propuser.

🔐 O prompt gerado contém credenciais. Não compartilhe em chats ou documentos abertos e use uma senha de aplicativo própria para cada pessoa ou dispositivo. A senha de login do WordPress não é a mesma senha de aplicativo usada pelo MCP.

Passo 2 — Configurar no Windows ou no Mac

Os caminhos mais comuns do arquivo de configuração global do Claude Code são:

• Windows: %USERPROFILE%\.claude.json
• macOS: ~/.claude.json

Confirme o mecanismo usado na sua instalação e preserve os servidores MCP que já estiverem configurados.

Prompt auxiliar:

Preciso configurar uma conexão MCP com o Elementor deste site WordPress.
Utilize as informações de conexão geradas oficialmente pelo Elementor MCP.

1. Identifique o sistema operacional e a configuração MCP utilizada.
2. Preserve todos os servidores e configurações existentes.
3. Adicione somente o servidor necessário.
4. Não exponha credenciais ou tokens.
5. Valide a configuração e teste a conexão somente em leitura.
6. Liste as ferramentas MCP disponíveis.
Não crie, edite, exclua ou publique páginas nesta etapa.

Passo 3 — Validar a conexão

Execute /mcp no Claude Code para confirmar que o servidor aparece conectado. Depois, peça:

Consulte as páginas disponíveis no WordPress por meio do Elementor MCP.
Identifique título, ID, URL e status, conforme os recursos disponíveis.
Não altere nenhum conteúdo.
Confirme quais ferramentas podem consultar e editar páginas existentes.

A conexão só está validada depois de uma consulta real bem-sucedida.

Passo 4 — Disponibilizar o projeto Lovable

Dê ao Claude Code acesso ao código da página, seja por repositório Git, cópia local autorizada ou integração compatível. Ele precisa identificar seções, textos, CTAs, componentes, assets, estilos, responsividade e dependências.

Uma captura de tela não basta: migração funcional exige entender como a página se comporta, não só como ela parece.

Passo a passo: como migrar a landing page do Lovable para o Elementor

Etapa 1 — Inventário da origem

Mapeie a hierarquia das seções, os conteúdos, os arquivos, as interações e as bibliotecas que podem exigir adaptação.

Etapa 2 — Auditoria do destino

Identifique a página e a URL existentes, a estrutura no Elementor, componentes globais, formulários, pop-ups, scripts, tracking e configurações de SEO.

Regra: preservar o que já funciona e alterar apenas o necessário.

Etapa 3 — Plano de adaptação

Decida como reconstruir cada seção. Elementos simples podem usar widgets nativos; componentes interativos podem exigir código específico. Defina também onde imagens e vídeos ficarão hospedados.

Etapa 4 — Execução controlada

Quando o objetivo é atualizar uma página, edite a página existente em vez de criar uma duplicata.

Prompt reutilizável de migração:

Atue como especialista em migração de landing pages, WordPress,
Elementor, integrações MCP e tracking.

ORIGEM: [PROJETO OU REPOSITÓRIO LOVABLE]
DESTINO: [URL DA PÁGINA WORDPRESS]

1. Inventarie todas as seções, componentes e assets da origem.
2. Consulte a página existente no Elementor antes de qualquer edição.
3. Não crie uma nova página se a página de destino já existir.
4. Preserve URL e componentes globais fora do escopo.
5. Reconstrua o layout com recursos compatíveis com Elementor.
6. Migre ou referencie corretamente imagens, vídeos, ícones e arquivos.
7. Preserve textos, CTAs, links e comportamentos.
8. Identifique formulários, pop-ups e integrações existentes.
9. Não modifique tracking sem autorização.
10. Apresente plano, riscos e dependências antes de executar.
11. Faça backup e prefira homologação.
12. Após autorização, implemente e teste.
13. Não publique em produção sem aprovação explícita.

ENTREGA: inventário, diagnóstico do destino, plano, elementos
preservados e reconstruídos, limitações, testes e pendências.

Como preservar o tracking (GTM, GA4 e pixels) na migração

Uma página pode parecer perfeita e, ainda assim, parar de registrar conversões. O CTA abre o formulário, mas não dispara o evento. O GA4 não recebe os parâmetros. Um pixel carrega duas vezes. As UTMs se perdem na submissão.

Na Enableurs, tratamos tracking como parte da arquitetura da página, não como um ajuste de última hora. Se a sua base de mensuração ainda não está organizada, comece pelo nosso guia de como estruturar tracking com GA4 do zero.

1. Documente o estado anterior

Inventarie o GTM (container, tags, acionadores e variáveis), os eventos e parâmetros do GA4, os pixels de mídia, os formulários, os CTAs e o tratamento de UTMs.

2. Preserve os pontos de integração

No case Maha 3D, o formulário de orçamento é um pop-up do Elementor associado aos CTAs, com instrumentação de abertura pelo evento contact_popup_open. Não basta recriar o botão visualmente: é preciso manter o acionamento correto e comprovar que o evento continua disparando.

Preserve também componentes compartilhados e scripts globais, sem criar cópias desnecessárias.

3. Teste a jornada completa

1. Acesse a página com UTMs de teste.
2. Verifique o carregamento das tags.
3. Clique no CTA e confirme a abertura do formulário.
4. Confirme o evento correspondente.
5. Faça uma submissão de teste.
6. Confirme o evento de sucesso e seus parâmetros.
7. Verifique o recebimento do lead nos sistemas de destino.

Use o Tag Assistant, o DebugView do GA4 e as ferramentas de teste das plataformas de mídia.

4. Evite duplicações

Se o GTM ou outros scripts já estão instalados globalmente, copiá-los para a página pode duplicar eventos. O objetivo é preservar a lógica de mensuração e comprovar a equivalência funcional.

Migrar tracking não significa copiar todas as tags. Significa preservar a mensuração e demonstrar que ela continua funcionando.

Checklist de QA antes de publicar a página migrada

Design e experiência

• Seções, textos, imagens e vídeos corretos.
• Layout responsivo e identidade visual revisados.
• CTAs funcionando em desktop e mobile.

WordPress e Elementor

• Página e URL de destino corretas, sem duplicações.
• Header, footer, pop-ups e formulários preservados.
• Links revisados, backup e rollback disponíveis.

Tracking e integrações

• GTM e GA4 verificados.
• Pixels e eventos testados, sem duplicação indevida.
• Formulários e conversões testados de ponta a ponta.
• UTMs e integrações comerciais validadas.

SEO e performance

• URL, redirecionamentos, canonical e indexação revisados.
• Title, description, headings e textos alternativos conferidos.
• Performance e experiência mobile avaliadas.

Case Maha 3D: migração com IA em uma operação existente

A Maha 3D atua com soluções de impressão 3D para diferentes aplicações e segmentos. No projeto conduzido pela Enableurs, usamos o Lovable para criar e atualizar experiências, o Claude Code para apoiar a análise e a migração e o WordPress/Elementor como ambiente de gestão e publicação.

Não partimos de um site vazio. Já existiam páginas, componentes globais, formulários, integrações e tracking. A tarefa era adaptar a experiência criada com IA a uma infraestrutura que precisava continuar operando.

A landing page de Brindes Corporativos faz parte desse trabalho de evolução digital, que também envolveu páginas institucionais e de soluções.

Entre os cuidados do projeto estavam: editar páginas existentes, preservar componentes globais, manter o fluxo de orçamento, proteger os eventos de mensuração e revisar cada alteração antes da publicação.

Principal aprendizado: uma página não é só um conjunto de seções visuais. Ela faz parte de processos comerciais, campanhas, formulários e jornadas de conversão. Migrá-la é um projeto de integração, não apenas de design.

Resumo: o playbook de migração em 7 etapas

1. Diagnóstico: identifique origem, destino e dependências.
2. Conexões: valide o acesso ao projeto Lovable e ao Elementor MCP.
3. Inventário: mapeie layout, assets, funcionalidades e integrações.
4. Proteção: documente o tracking, faça backup e delimite os componentes que não podem ser alterados.
5. Migração: reconstrua a página com recursos compatíveis.
6. Validação: teste design, funcionalidade, tracking, SEO e performance.
7. Publicação: obtenha aprovação, publique, valide em produção e mantenha o rollback disponível.

Erros comuns

• Copiar a página inteira sem auditar o destino.
• Confundir equivalência visual com equivalência funcional.
• Duplicar scripts e eventos de tracking.
• Publicar sem testar os formulários.
• Supor que o MCP garante conversão automática entre plataformas.

Perguntas frequentes sobre migrar do Lovable para o Elementor

Dá para publicar uma página do Lovable direto no WordPress?

Não de forma nativa. O Lovable gera uma aplicação em React, que o WordPress e o Elementor não executam diretamente. As opções são manter a página publicada no Lovable com domínio próprio, incorporá-la por iframe (com perdas de SEO e mensuração) ou reconstruí-la no Elementor, como mostramos neste playbook.

O que é o Elementor MCP?

É a integração que permite conectar ferramentas de IA, como o Claude Code, ao Elementor de um site WordPress. Ela é configurada no painel do WordPress, em Elementor → Elementor MCP, com uma senha de aplicativo, e libera ferramentas para consultar e, conforme as permissões, editar páginas.

É possível migrar qualquer landing page do Lovable para o Elementor?

Muitas páginas podem ser reconstruídas, mas a complexidade depende das bibliotecas, componentes e integrações usados no projeto original.

Preciso saber programar?

O Claude Code reduz bastante a escrita manual de código, mas conhecimento técnico ajuda a revisar e validar o resultado.

Imagens e vídeos podem ser migrados?

Sim, conforme o acesso aos arquivos e as ferramentas disponíveis. Depois da migração, valide carregamento e hospedagem.

O MCP preserva o tracking automaticamente?

Não. A preservação depende da implementação e dos testes de ponta a ponta com Tag Assistant, DebugView do GA4 e as ferramentas de teste das plataformas de mídia.

Qual a diferença entre exportar o código do Lovable e migrar para o Elementor?

Exportar o código entrega os arquivos da aplicação, que precisam ser hospedados em algum lugar. Migrar para o Elementor significa reconstruir a página dentro do WordPress, usando os widgets, componentes globais, formulários e tags que o site já tem.

Funciona no Windows e no Mac?

Sim, com pequenas diferenças de instalação e de caminho do arquivo de configuração.

Preciso criar outra página no WordPress?

Não necessariamente. Dá para atualizar a página existente, conforme as permissões e capacidades da integração.

Conclusão: IA acelera a execução. Governança sustenta o resultado.

A IA amplia a autonomia dos times de marketing. Mas autonomia não elimina a necessidade de método.

Migrar uma landing page do Lovable para o Elementor é, antes de tudo, um projeto de integração. No projeto da Maha 3D, combinamos a velocidade de criação do Lovable, a execução assistida do Claude Code e a estrutura de gestão do WordPress/Elementor, tratando funcionalidades, integrações e mensuração como partes essenciais da migração.

O objetivo não é entregar uma página visualmente correta. É manter uma operação de marketing integrada, mensurável e preparada para evoluir.

Escrito por Suzana de Miranda, fundadora da Enableurs, a partir do projeto de migração conduzido para a Maha 3D. Atualizado em novembro de 2026.