Pour créer un site Elementor avec l’IA, il faut connecter Elementor à votre IA grâce au MCP, puis lui envoyer quelques prompts : le contexte technique, la page d’accueil, les autres pages, l’en-tête et le pied de page. Dans ce guide, on construit un site complet de restaurant de sushi avec Claude Code, des widgets Elementor gratuits et des images libres de droit, puis on corrige à la main les petits défauts.
À la fin de ce guide, vous savez construire un site complet avec Elementor et une IA. L’exemple utilisé est un restaurant de sushi fictif, mais la méthode est la même pour n’importe quelle activité.
| Élément | Détail |
|---|---|
| Pages créées | Accueil, à propos, carte, contact |
| Éléments globaux | En-tête fixe, pied de page, couleurs et polices du site |
| Version d’Elementor | Gratuite : uniquement les widgets de base, pas besoin d’Elementor Pro |
| Images | Libres de droit (Pexels, Unsplash), recherchées par l’IA elle-même |
| IA utilisable | Claude Code dans l’exemple, mais aussi Claude Desktop, Codex, Cursor ou l’IA de votre choix |
| Modification ensuite | Tout reste modifiable dans l’éditeur Elementor, comme sur un site classique |
Si vous préférez confier la création à une agence, voici notre page création de site vitrine, ou vous pouvez directement demander un devis pour votre site internet.
| Étape | Action | Résultat |
|---|---|---|
| 1 | Prendre un hébergement et un nom de domaine | Un espace pour accueillir le site |
| 2 | Installer WordPress | Un tableau de bord WordPress opérationnel |
| 3 | Nettoyer WordPress, installer Elementor et Hello Elementor | Une base propre pour l’IA |
| 4 | Connecter Elementor à l’IA avec le MCP | L’IA peut créer des pages dans Elementor |
| 5 | Envoyer le prompt de contexte technique | Couleurs, polices et responsive enregistrés |
| 6 | Envoyer les prompts des pages | Accueil, à propos, carte et contact créés |
| 7 | Envoyer le prompt de l’en-tête et du pied de page | Navigation et footer en place |
| 8 | Faire vérifier l’IA, puis corriger à la main | Un site propre sur ordinateur, tablette et mobile |
Pour publier le site sur internet, il faut un hébergement et un nom de domaine. L’exemple utilise Hostinger, qui permet aussi d’installer WordPress gratuitement. Voici le lien vers Hostinger utilisé dans la vidéo. Rendez-vous dans la rubrique hébergement, puis gérer l’hébergement web, pour choisir votre formule.
| Formule | Pour qui |
|---|---|
| Premium | Un seul site à créer |
| Formule à 3,99 € par mois | Plusieurs sites et plus de stockage |
Plus la durée d’engagement est longue, moins le prix mensuel est élevé. Au moment du tournage de la vidéo :
Choisissez ensuite votre nom de domaine en minuscules, par exemple le nom de votre établissement suivi de la ville. Hostinger vous indique s’il est disponible : dans l’exemple, sushibar-paris l’était. Validez, payez, puis passez à l’installation.
Une fois l’hébergement et le domaine pris, saisissez votre nom de domaine dans l’assistant. Il vous demande les informations de connexion :
Choisissez de créer le site de A à Z, et l’hébergeur installe WordPress sur votre domaine. Vous arrivez ensuite sur votre tableau de bord WordPress.
Avant de connecter l’IA, on prépare une base propre :
Si votre site existe déjà, ne le refaites pas à zéro : voyez plutôt notre page refonte de site internet.
Le MCP est la connexion qui permet à votre IA de créer et de modifier des pages directement dans Elementor. Le principe :
Une fois connecté, l’IA peut créer des pages et des designs, gérer les classes globales et lister les ressources du site. Pour le détail technique et les autres méthodes de connexion, suivez mon guide pour connecter Claude Code à WordPress.
Tous les prompts utilisés dans la vidéo sont à télécharger gratuitement via le formulaire au début de cet article. Voici l’ordre dans lequel les envoyer à l’IA :
| Ordre | Prompt | Ce que l’IA fait |
|---|---|---|
| 1 | Contexte technique | Enregistre les informations du client, les couleurs globales, les polices, les tailles ordinateur et tablette, sans transition animée |
| 2 | Page d’accueil | Construit les sections une par une (14 dans l’exemple) |
| 3 | Pages à propos, carte et contact | Crée les trois pages et installe Contact Form 7 pour le formulaire |
| 4 | En-tête et pied de page | Crée un en-tête fixe avec bouton de réservation et un footer |
| 5 | Vérification finale | Contrôle les boutons, le responsive et liste ce qu’il reste à faire |
Quelques points à respecter pendant la génération :
Pour bien choisir les pages à demander à l’IA selon votre activité, lisez aussi mon article sur quel type de site internet il vous faut.
Le retour de l’IA est un bon point de départ, mais il y a presque toujours des défauts. Dans l’exemple, l’IA avait elle-même corrigé les marges parasites de l’en-tête, les images pixelisées de la carte, l’affichage des prix sur mobile et les liens d’ancrage. Il restait des défauts visibles sur la page d’accueil, que l’on corrige directement dans Elementor, ce qui est très rapide :
| Problème constaté | Correction dans Elementor |
|---|---|
| Section pas en pleine largeur | Mettre la largeur du conteneur à 100 % |
| Section trop haute | Revoir la hauteur : elle était réglée sur 100 VH |
| Texte et image qui ne s’alignent pas côte à côte | Sélectionner le conteneur principal qui contient texte et image, vérifier qu’il est en direction horizontale et centrer le contenu |
| Deux colonnes de 50 % qui débordent | Le conteneur a un écart de 64 entre colonnes : réduire l’écart (par exemple 20) et passer la colonne de texte à 48 % |
| Bouton ou image décentrés | Centrer l’élément ou le conteneur principal |
| Compteur avec séparateur de milliers parasite | Décocher l’option séparateur de milliers dans le widget |
| Pied de page qui ne rentre pas | Réduire les écarts (15 dans l’exemple) et aligner les colonnes sur la gauche |
Une fois la correction faite, cliquez sur publier et rechargez la page pour contrôler le résultat. Reprenez ensuite les mêmes réglages sur les autres sections et les autres pages, car le même défaut revient souvent sur chacune.
Avant de livrer ou de publier, demandez à l’IA un dernier contrôle, puis faites le vôtre. Dans l’exemple, voici ce que l’IA a signalé comme restant à faire :
Ce que l’IA avait déjà validé : un seul H1 par page, aucun élément atomique, les 19 images, les liens, les contrastes et l’absence de débordement. Testez enfin le clic sur le logo, qui doit ramener à la page d’accueil, et le menu sur mobile.
Une fois le site en ligne, pensez à sa sécurité et à ses mises à jour : voyez notre offre de maintenance WordPress.
Avec cette méthode, les frais directs se limitent à l’hébergement et au nom de domaine, soit quelques dizaines d’euros la première année, plus l’abonnement à votre IA. Le temps à investir reste réel : cadrage, contrôle du rendu, textes, photos et référencement. Pour comparer avec un projet confié à un professionnel, consultez notre guide sur le prix de création d’un site internet ou utilisez notre outil pour estimer le prix de votre site internet.
| Votre situation | Le plus adapté |
|---|---|
| Site de démonstration, projet perso, test | Créer avec l’IA en suivant ce guide |
| Petit site vitrine à faible enjeu | Créer avec l’IA, puis retravailler contenu et images |
| Site qui doit générer des clients et ressortir sur Google | Faire appel à une agence pour la stratégie, le contenu et le SEO |
Non. L’exemple de ce guide utilise la version gratuite d’Elementor et uniquement les widgets de base. Seul le formulaire de contact nécessite une extension complémentaire, Contact Form 7.
Oui. Elementor propose la connexion MCP pour plusieurs outils : Claude Code, Claude Desktop, Codex, Cursor ou l’IA que vous préférez. La méthode reste la même : générer le prompt de connexion, le coller dans l’IA et relancer la session.
Oui. Tout est modifiable directement dans l’éditeur Elementor, comme sur un site classique : textes, images, couleurs, marges et colonnes. C’est d’ailleurs ce qu’on fait à l’étape de correction.
Non, il faut toujours relire et corriger. L’IA produit un très bon point de départ, mais des défauts d’alignement, de centrage ou d’espacement subsistent presque toujours, et les textes comme les images sont à personnaliser.
La génération des pages par l’IA ne prend que quelques minutes par prompt. Il faut ensuite prévoir du temps pour les corrections manuelles, les textes, les photos et les vérifications sur ordinateur, tablette et mobile.
La méthode tient en peu d’étapes : un hébergement, WordPress, Elementor avec Hello Elementor, la connexion MCP, puis des prompts envoyés dans le bon ordre. L’IA fait le gros du travail de construction, et vous gardez la main pour les finitions dans l’éditeur. Si vous voulez un site qui ressort sur Google et attire des clients, notre accompagnement SEO WordPress prend le relais une fois le site en ligne.
Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.
