Lovable, c'est génial pour créer la première version de ton site : un prompt, une image d'inspiration, et l'IA fait tout le travail. Mais au bout d'un moment, ça coince : ajouter une page, modifier ton pied de page, écrire un article de blog… tout passe par un prompt. Dans ce tuto, je te montre la migration Lovable WordPress pas à pas : cloner tes pages avec ClonewebX, les importer dans WordPress avec Elementor, puis recréer ton en-tête et ton pied de page. Avec les ajustements à prévoir, parce que ce n'est pas un copier-coller parfait.
Le tuto en vidéo
Je convertis en direct un site créé avec Lovable en site WordPress, de l'export jusqu'au pied de page.
Migration Lovable WordPress : pourquoi passer à WordPress ?
Parce que Lovable est parfait pour démarrer vite, et WordPress pour durer. Avec Lovable, tu n'as pas besoin de choisir un thème ni de passer des heures sur la première version de ton site : un prompt et une image d'exemple suffisent pour obtenir un design pro.
Mais une fois le site créé, tu es coincé :
- ajouter une page ? Prompt ;
- modifier le pied de page ? Prompt ;
- écrire un article de blog ? Prompt, et c'est vite la galère pour modifier ton contenu ;
- optimiser ton SEO ? WordPress reste l'outil de référence.
Au final, tu n'es plus vraiment propriétaire de ton site : tu es locataire de l'IA. Et côté budget, les outils d'IA comme Lovable tournaient autour de 25 $ par mois au moment de la vidéo (mars 2026), sans toujours inclure l'hébergement. Avec WordPress, tu paies seulement ton hébergement : moins de 10 € par mois, et parfois moins de 3 € par mois les premières années.
Exception : pour un simple site vitrine ou une landing page, sans blog ni SEO, l'IA seule peut très bien suffire. Pas besoin de migrer.
Le workflow gagnant, c'est donc les deux ensemble : l'IA pour générer un design qui t'aurait pris des heures sur WordPress, puis WordPress pour reprendre le contrôle (contenu, SEO, blog).
Les outils pour convertir ton site Lovable
Pour cette migration, il te faut :
- ton site Lovable publié, avec son adresse ;
- ClonewebX, qui clone chaque page de ton site (extension Chrome) et l'importe dans WordPress (extension WordPress) ;
- un site WordPress chez un hébergeur, avec l'extension Elementor (la version gratuite suffit) ;
- un thème WordPress pour l'en-tête et le pied de page : je te recommande Kadence ou Blocksy, gratuits.
Hébergement WordPress rapide, simple à prendre en main.
🎁 -10 % avec ce code
Certains liens sont affiliés : ça ne te coûte rien de plus et ça soutient mes tutos gratuits.
Ce n'est pas un copier-coller parfait : compte des ajustements. Mais c'est bien moins de travail que de repartir de zéro.
Étape 1 : cloner ton site Lovable avec ClonewebX
ClonewebX copie une page web et la transforme en page modifiable dans WordPress. On l'utilise pour exporter chaque page de ton site Lovable.
Plan gratuit ou payant ?
Tu peux commencer gratuitement, mais le plan gratuit ne convertit qu'en blocs Gutenberg (l'éditeur de base de WordPress). Je l'ai testé : le résultat n'est pas top au niveau du code. Ce que je te recommande vraiment, c'est de convertir pour Elementor, et pour ça il faut au moins le premier plan payant, à 10 $ par mois (prix inchangé en octobre 2026, sites illimités en pages).
Crée ton projet
Sur ton tableau de bord ClonewebX, clique sur Add new project. Entre le nom de ton projet et l'adresse de ton site Lovable : vérifie dans Lovable que ton site est bien publié, puis copie son URL. Clique sur Créer un projet.
Installe l'extension Chrome et exporte ta page
- Installe l'extension Chrome de ClonewebX depuis ton tableau de bord.
- Retourne sur ton site Lovable, rafraîchis la page et attends que tout soit bien chargé.
- Clique sur l'extension, puis sur Add page.
- Type d'export : choisis Page entière (tu peux aussi sélectionner seulement certains éléments).
- Format : garde Elementor, et laisse les options recommandées activées. Si l'import pose problème dans WordPress, tu pourras refaire l'export en les désactivant.
- Clique sur Export, puis Copy to clipboard.
Ta page est copiée : garde-la de côté, on va la coller dans WordPress.
Étape 2 : importer ta page dans WordPress avec Elementor
Dans la vidéo, je pars d'un site WordPress tout neuf, vide. Avant l'import, installe deux extensions.
Installe ClonewebX et Elementor
- ClonewebX (de l'éditeur Softlite) : télécharge l'extension au format ZIP depuis ClonewebX, puis dans WordPress, va dans Extensions › Ajouter une extension › Téléverser une extension. Choisis ton fichier, clique sur Installer maintenant, puis Activer.
- Elementor : dans Extensions › Ajouter une extension, cherche « Elementor », installe-la et active-la. Elementor te propose de créer un compte ou de suivre un assistant : tu peux continuer en invité et fermer la fenêtre, puisqu'on clone le site.
Colle ta page clonée
- Va dans Pages › Ajouter une page et nomme-la « Accueil » (c'est la page qu'on vient de cloner).
- Enregistre le brouillon, puis clique sur Modifier avec Elementor.
- Très important : dans les réglages de la page, choisis le modèle Elementor pleine largeur.
- Fais un clic droit dans la page, puis Coller depuis un autre site, et colle avec Cmd + V (Mac) ou Ctrl + V (Windows).
Ta page Lovable est maintenant dans Elementor, sur ton site WordPress.
Étape 3 : les ajustements après l'import
Ouvre l'aperçu de ta page dans un nouvel onglet et mets ton site Lovable à côté, pour repérer les différences. Le résultat n'est pas parfait : il y a toujours des ajustements à faire. Fais-les directement dans Elementor, puis clique sur Publier.
Trois ajustements sont presque toujours nécessaires.
Supprime le badge « Edit with Lovable »
Le badge « Edit with Lovable » peut être copié avec ta page. Clique dessus, puis clic droit › Supprimer.
Récupère les couleurs de ton site Lovable
Sur ton site Lovable, fais un clic droit sur le texte ou le bouton qui a la couleur que tu veux, puis Inspecter : tu retrouves ses couleurs. Note les codes hexadécimaux (du type #FF6A2B) : ils te serviront à harmoniser ton site et à créer de nouvelles pages ou de nouveaux articles avec les mêmes couleurs.
Supprime l'en-tête et le pied de page collés
L'en-tête de ton site Lovable a été collé dans ta page d'accueil, mais il n'a pas de menu qui fonctionne. Clique sur son conteneur, puis clic droit › Supprimer. Fais de même avec le pied de page, en bas de la page. On va les recréer pour tout le site à l'étape suivante.
Étape 4 : recréer l'en-tête et le pied de page avec Kadence
L'en-tête et le pied de page sont communs à toutes les pages de ton site : on les crée avec ton thème WordPress, le modèle qui définit le design global de ton site et ses options de personnalisation. Tu peux garder ton thème si tu as l'habitude d'en utiliser un. Sinon, je te recommande Kadence ou Blocksy ; dans la vidéo, j'utilise Kadence. Je te montre aussi comment créer un site WordPress de A à Z avec Blocksy et un modèle de site.
Installe Kadence et définis ta page d'accueil
Va dans Apparence › Thèmes, cherche Kadence, clique sur Installer, puis Activer. Ensuite, réglage important : dans Réglages › Lecture, choisis Une page statique et sélectionne ta page « Accueil ». Enregistre.
Crée ton en-tête
Va dans Apparence › Personnaliser › En-tête. Tu as trois lignes de personnalisation ; mets ton site Lovable à côté et recrée son en-tête :
- le logo : clique sur l'élément pour téléverser le même logo que sur ton site Lovable ;
- le menu : crée un nouveau menu (par exemple « Menu principal »), coche-le comme menu principal et ajoutes-y tes pages. Place la navigation au même endroit que sur Lovable (au centre, dans mon exemple) ;
- le bouton : clique sur le + pour ajouter un bouton, avec son libellé (« Réserver un appel ») et son lien.
Clique sur Publier.
Harmonise tes couleurs, tes polices et tes boutons
Dans Couleurs et police, remplace la palette par les codes hexadécimaux de ton site Lovable, et choisis la même typographie. Personnalise aussi tes boutons : chaque nouveau bouton respectera automatiquement le design de ton site.
Crée ton pied de page
Dans l'onglet Pied de page, tu retrouves trois lignes de personnalisation.
- La ligne du bas : garde le copyright proposé. L'année se met à jour automatiquement chaque année, suivie du titre de ton site.
- La ligne du milieu : règle-la sur 4 colonnes (comme mon pied de page Lovable) et ajoute un widget dans chacune avec le +. Publie, puis va dans Apparence › Widgets pour les remplir : dans « Pied de page 1 », ajoute par exemple ton logo (image) et un paragraphe de présentation.
- Le fond : pour un pied de page noir comme sur Lovable, va dans l'apparence de la ligne du milieu, choisis un arrière-plan noir et passe les titres et le contenu des widgets en blanc.
Clique sur Publier : ton site Lovable est maintenant un site WordPress.
Les prompts et guides de mes tutos IA et WordPress, dans le Kit vibe coding.
Ce qui a changé depuis la vidéo
La vidéo date de mars 2026. La méthode fonctionne toujours, mais voici ce qui a bougé depuis.
Combien coûte la migration ?
Une fois ton site migré, ton budget se résume surtout à ton hébergement WordPress.
| Poste | Prix | Remarque |
|---|---|---|
| ClonewebX | Gratuit, ou 10 $/mois pour l'export Elementor | Prix d'octobre 2026, 30 sites par mois, pages illimitées |
| Elementor | Gratuit | La version gratuite suffit pour cette méthode |
| Kadence ou Blocksy | Gratuit | En-tête et pied de page inclus |
| Hébergement WordPress | Moins de 10 €/mois, moins de 3 €/mois les premières années | Avec Hostinger et le code NOMADICSTEPH (prix de mars 2026) |
| Pour comparer : Lovable | Autour de 25 $/mois | Prix de mars 2026, hébergement pas toujours inclus |
Lovable ou WordPress : lequel garder ?
Tout dépend de ton site. Garde Lovable si c'est un simple site vitrine ou une landing page, sans blog ni stratégie SEO : l'IA seule peut très bien suffire, pas besoin de migrer.
Passe à WordPress si tu veux ajouter du contenu régulièrement, publier des articles de blog, optimiser ton SEO ou modifier ton site toi-même, sans repasser par un prompt. WordPress reste l'outil numéro 1 pour maintenir un site, l'optimiser et ajouter du contenu sur le long terme. Les outils d'IA évoluent vite et certaines de leurs limites disparaîtront, mais en 2026, c'est encore la réalité du quotidien.
Et si ton projet Lovable n'est pas un site mais un logiciel, avec comptes utilisateurs et abonnements, garde-le sur Lovable : je te montre comment créer un SaaS avec l'IA de A à Z.
C'est la même logique pour les autres outils de vibe coding, comme Emergent AI ou Hostinger Horizons : parfaits pour créer vite, à compléter par WordPress quand ton site doit grandir.
Les erreurs à éviter
- Cloner un site non publié : ClonewebX part de l'adresse de ton site. Publie-le dans Lovable avant de commencer.
- Exporter en Gutenberg avec le plan gratuit : le résultat est moins propre. Pour une migration sérieuse, choisis l'export Elementor.
- Oublier le modèle « Elementor pleine largeur » : ta page clonée s'afficherait dans le cadre de ton thème, avec un rendu différent.
- Garder l'en-tête et le pied de page collés : ils n'ont pas de menu qui fonctionne. Supprime-les et recrée-les avec ton thème.
- Oublier la page d'accueil statique : sans ce réglage dans Réglages › Lecture, WordPress n'affiche pas ta page « Accueil » à la racine de ton site.
- Croire que tout sera identique : compare toujours ton site WordPress à ton site Lovable, côte à côte, avant de publier.
Et après ?
Ton site est sur WordPress : tu peux enfin ajouter tes pages et tes articles toi-même, et travailler ton référencement. Commence par mon plan pour optimiser le SEO d'un site neuf. Et si tu as besoin d'une fonctionnalité sur mesure, tu peux créer un plugin WordPress avec l'IA. Tu préfères qu'on s'occupe de ta migration ?
Tu veux passer ton site Lovable sur WordPress sans y passer tes soirées ? Je m'en occupe.
Questions fréquentes
Écrit par
Stéphanie Canovas
Je crée des tutos et formations pour aider les entrepreneurs à créer et optimiser leur site web. +8 000 entrepreneurs formés.