Elementor MCP : transformer du HTML généré par IA en pages Elementor modifiables

Elementor dispose désormais d’une méthode officielle pour transformer une page HTML conçue par une IA en véritable page Elementor modifiable : l’Elementor MCP, arrivé avec Elementor 4.3. Nous l’avons configuré sur un site WordPress vierge, nous avons reconstruit avec lui une page d’atterrissage de dix sections, et nous avons noté tout ce qui nous a fait trébucher. Voici ce compte rendu : ce que c’est, comment le connecter, la méthode de travail qui fonctionne, et les petits détails à connaître avant de commencer.

Ce qu’est l’Elementor MCP

Le MCP (Model Context Protocol) est une manière standard pour les outils d’IA d’appeler des actions dans d’autres logiciels. L’Elementor MCP met les actions de création de pages d’Elementor à la disposition de l’outil d’IA que vous utilisez déjà — Claude Code, Claude Desktop, Codex, Cursor ou tout autre client MCP —, de sorte que l’assistant peut créer des pages, ajouter et styliser des éléments, gérer vos classes et variables globales, et enregistrer le résultat dans votre propre site. Rien n’est collé ni importé à la main : l’IA construit directement dans Elementor, et tout ce qu’elle crée est un élément ordinaire que vous pouvez ensuite sélectionner et modifier dans le panneau.

Il construit avec les nouveaux éléments atomiques d’Elementor — les conteneurs Flexbox, Bloc Div et Grille, Titre, Paragraphe, Bouton, Image, SVG, Onglets, Accordéon et d’autres —, stylisés au moyen de classes et de variables globales plutôt que de réglages propres à chaque widget. C’est le point essentiel à comprendre avant de commencer, car il détermine à la fois les prérequis et la méthode de travail.

Ce qu’il vous faut

• WordPress 6.8 ou plus récent et Elementor 4.3 ou plus récent. L’extension gratuite suffit pour se connecter et construire ; Elementor Pro et l’extension gratuite Angie ajoutent des capacités, comme les formulaires, les modèles de thème et les widgets personnalisés.
• L’Atomic Editor activé. Sur les sites installés directement avec Elementor 4, il est généralement déjà actif. Sur les sites plus anciens mis à jour vers la 4.3, il est désactivé au départ, et les outils de construction du MCP restent verrouillés tant que vous ne l’activez pas dans Elementor → Settings → Atomic Editor.
• Un outil d’IA compatible MCP. Elementor ne facture pas le MCP ; ce que vous payez, c’est ce que votre outil d’IA facture pour le travail.

La connexion prend environ une minute

1. Dans WordPress, ouvrez Elementor → Elementor MCP et cliquez sur Enable MCP access.
2. Choisissez votre outil : Claude Code, Claude Desktop, Codex, Cursor ou Other.
3. Cochez la case confirmant qu’un mot de passe d’application sera créé pour le site.
4. Cliquez sur Generate Prompt, copiez-le et collez-le dans votre outil d’IA. Il configure la connexion ; certains outils doivent ensuite être redémarrés.

La connexion agit avec les droits de l’utilisateur WordPress qui l’a créée : un compte éditeur ne peut faire que ce qu’un éditeur peut faire. Vous pouvez révoquer une connexion précise dans Comptes → Profil → Mots de passe d’application, ou désactiver le MCP pour tout le site depuis le même écran Elementor.

La méthode qui fonctionne

La démonstration d’Elementor et notre test aboutissent au même ordre de travail. L’idée importante est que chaque étape donne à la suivante une référence fixe : l’IA recopie des décisions au lieu de les inventer. Si vous voulez voir le processus de bout en bout, le webinaire d’Elementor consacré à cette méthode (environ 45 minutes, sur YouTube) suit un chef de produit de l’équipe de l’éditeur qui construit une page complète de cette façon.

1. Fixez d’abord l’apparence. Explorez des pistes avec des images rapides, puis demandez à l’IA d’écrire la page en HTML et CSS simples. Le HTML coûte peu à modifier : c’est là que vous itérez sur la mise en page, les textes et les couleurs.
2. Téléversez vos images. Placez les images de la page dans la Médiathèque avant de construire, pour que l’IA puisse y faire référence au lieu d’improviser.
3. Créez le système de design. Demandez à l’IA de lire le HTML et de créer vos couleurs et vos polices sous forme de variables globales, et vos styles récurrents — boutons, titres de section, cartes — sous forme de classes globales. Restez sobre : dans la démonstration d’Elementor, le premier passage a produit plus d’une centaine de classes, réduites ensuite à une soixantaine de classes générales.
4. Construisez une section à la fois, avec une consigne courte comme « construisez la section des tarifs à partir du HTML avec nos classes ». Les petites étapes sont plus faciles à vérifier et moins chères à refaire.
5. Vérifiez chaque section dans l’éditeur et en largeur mobile avant de passer à la suivante. L’équipe d’Elementor le dit clairement : le résultat demande encore une dernière passe humaine — dans leur démonstration, une image a dû être ajustée sur mobile et une section hero à onglets a demandé des retouches.

Sept enseignements de notre test

Nous avons utilisé Elementor 4.3.5 sur une installation neuve de WordPress, sans Pro ni Angie, et reconstruit une page d’atterrissage comprenant une section hero, une bande de logos, six cartes de fonctionnalités, des chiffres clés, un témoignage, trois formules tarifaires, une FAQ, une bande d’appel à l’action et un pied de page. Le résultat était très proche de l’original. Voici les détails qui nous ont coûté du temps :

• Téléverser des icônes SVG demande un réglage. L’élément SVG n’affiche que les icônes présentes dans la Médiathèque, et WordPress refuse par défaut les fichiers SVG. Activez le réglage Enable Unfiltered File Uploads d’Elementor et téléversez les icônes depuis le sélecteur de médias d’Elementor.
• Les icônes au trait peuvent s’afficher pleines. L’élément SVG applique la couleur du texte au remplissage de l’icône : les icônes faites uniquement de traits — le style utilisé par la plupart des pages générées par IA — s’affichent alors comme des formes pleines. Donner à l’élément SVG une couleur de texte transparente a rétabli les contours.
• L’ordre des classes détermine la priorité. Quand deux classes globales définissent la même propriété, celle qui est plus haut dans la liste l’emporte. Les classes sont listées dans l’ordre de création : une classe de petit bouton créée après la classe de bouton de base perdrait sa marge intérieure réduite. Nous avons demandé à l’IA de placer les classes modificatrices au-dessus des classes de base avant de construire.
• Méfiez-vous des styles abandonnés en silence. La plupart des propriétés CSS non prises en charge sont signalées par un avertissement dans la réponse de l’outil — couleurs de bordure différentes par côté, dégradé radial avec une taille définie, écart entre les rangées distinct. Quelques styles ont pourtant disparu sans avertissement : un mot mis en valeur dans un titre a perdu sa couleur, et une règle imbriquée stylisant un span dans un prix ne s’est pas appliquée. C’est en regardant la page, et pas seulement la réponse, qu’on les repère.
• Les éléments de texte ont des balises fixes. L’élément Paragraphe n’accepte que p ou span : une citation balisée en <blockquote> devient un simple paragraphe.
• Prévoyez l’indicateur de l’accordéon. Dans notre test, l’indicateur d’ouverture et de fermeture de la FAQ n’est pas apparu, que l’emplacement d’icône soit laissé vide ou omis. D’après les instructions de l’outil lui-même, cet emplacement contient un élément SVG : donnez-lui une icône téléversée ou ajoutez l’indicateur ensuite dans l’éditeur.
• Servez-vous du lien d’aperçu pour l’autovérification. Le MCP peut créer une URL d’aperçu temporaire du brouillon en cours. Demander à l’IA de la consulter après chaque section est le moyen le moins coûteux de repérer les problèmes tôt.

Pour donner une idée de l’ampleur, la page entière a demandé une trentaine d’appels d’outils — deux ont échoué à cause de nos propres erreurs (un nom d’élément en double et une balise que l’élément Paragraphe n’accepte pas) et ont dû être renvoyés — et environ un quart d’heure de travail de l’assistant sur un serveur de test local lent. Chaque nouvelle session commence aussi par la lecture de la liste des outils proposés par le MCP, un texte assez volumineux : des sessions courtes et bien délimitées sont donc plus économiques qu’une seule longue session.

Quand une voie plus simple convient mieux

Le MCP est l’option la plus puissante si vous travaillez déjà avec un outil de codage par IA et souhaitez une page bâtie sur un vrai système de design. Si vous avez seulement besoin de coller un bloc dans une page existante, si vous n’utilisez pas d’outil d’IA, ou si le résultat doit servir sur un site encore sous l’éditeur classique, un convertisseur qui produit des widgets classiques est la voie la plus simple — c’est ce que fait le convertisseur de ce site, localement dans votre navigateur. Les deux se combinent aussi très bien : le HTML finalisé par votre outil d’IA sert d’entrée dans les deux cas.

En bref

Concevez en HTML, téléversez vos ressources, mettez en place un petit système de design, puis laissez le MCP construire section par section pendant que vous vérifiez chacune. L’Elementor MCP transforme un bon design HTML en structure Elementor native et modifiable, et c’est le temps consacré à la préparation qui rend le résultat propre.

Ce guide est indépendant et n’est pas affilié à Elementor. Il porte sur Elementor 4.3.5, testé en octobre 2026 ; certains détails peuvent changer dans les versions suivantes.