J'ai connecté Claude à Elementor ! (je montre tout)

Si je vous disais qu'on peut maintenant connecter Cloud à Elementor afin de créer et mettre à jour des pages, plus besoin de se prendre la tête à créer des designs. Claude pourra le faire à votre

designs. Claude pourra le faire à votre place et publier directement sur votre site WordPress. Si vous avez également

site WordPress. Si vous avez également une page que vous souhaitez mettre à jour, Claude peut analyser la page actuelle et en créer une nouvelle version avec le contenu qui sera modifié selon ce que vous lui avez dit. Donc

dans cette vidéo, je vais explorer avec vous les différentes possibilités entre Cloud et Elementor. Donc je vais faire différents tests et à la fin je vous donnerai mon avis honnête si ça vaut le coup d'utiliser Cloud pour créer des pages Elémentor ou pas. La première

étape, ça va être de connecter WordPress à Cloud. Pour cela, on va utiliser le

à Cloud. Pour cela, on va utiliser le MCP officiel. Le MCP, pour faire simple,

MCP officiel. Le MCP, pour faire simple, c'est juste un connecteur entre une intelligence artificielle et un outil.

Donc là, dans notre cas, entre cloud et WordPress. Du coup, je vous ai mis le

WordPress. Du coup, je vous ai mis le lien dans la description, vous arriverez sur cette page. On va descendre un petit peu ici dans release et on va venir prendre la dernière version. Donc, je

clique ici sur la v0.

Je descends un petit peu, enfin je descends tout en bas et ici, je viens récupérer WordPress mcp.zzip. Donc, je

clique dessus et ça va me télécharger un plugin que je vais pouvoir installer sur mon site. Sur mon site, je vais donc

mon site. Sur mon site, je vais donc dans extension, ajouter une extension.

Ici, je vais venir téléverser l'extension au format ZIP et je fais installer. Maintenant, une fois qu'on

installer. Maintenant, une fois qu'on l'a installé et activé, on descend un petit peu dans réglage et ici, on a un onglet MCP. Donc, je clique dessus. Ici,

onglet MCP. Donc, je clique dessus. Ici,

on va venir activer les fonctionnalités.

On va venir ici activer ces options.

Ensuite, on va aller dans documentation et ici, ils vont nous donner du code à ajouter dans Cloud pour pouvoir le connecter à notre site WordPress. Donc,

j'ouvre l'application Cloud. C'est bien

l'application qu'il faut. Il ne faut pas être sur le navigateur web. Donc si vous avez pas encore l'application, vous tapez sur Google Cloud application et ici vous aurez un lien pour télécharger Cloud, que ce soit sur

Windows ou Mac. Une fois que c'est fait, ici euh vous allez sur votre profil, vous cliquez sur paramètres et en bas vous allez sur développeur. Ici, on va pouvoir cliquer sur modifier la config

et là on va se retrouver avec un fichier à éditer pour pouvoir ajouter le code.

Donc vous pouvez l'éditer avec un litur de texte, ça fonctionne. On se retrouve avec le code qui ressemble à ça et nous va falloir qu'on ajoute le petit code qu'on a ici. Donc je viens le sélectionner et le copier. Et là,

normalement, euh, il faut se mettre à la fin de MCP serveur et de la virgule. On

fait entrer et on vient coller le code.

Mais ici, vous voyez que MCP serveur est en doublon et il peut y avoir des fautes de syntaxe. Donc, le plus simple lorsque

de syntaxe. Donc, le plus simple lorsque vous passez par un éditeur de texte comme ceci, c'est de venir prendre le code, de venir le copier. On va aller dans cloud, on va ouvrir une nouvelle conversation et je vais lui dire, je

souhaite ajouter le MCP WordPress dans l'application Cloud. Voici le code que

l'application Cloud. Voici le code que j'ai dans la config. corrige-le s'il y a des erreurs de syntaxe. Hop, en tout, je lui mets le code et je fais envoyer. Là,

il va détecter les erreurs et il va me donner le code de manière propre pour que ça fonctionne. Cette fois, vous voyez que j'ai une bonne syntaxe. Donc,

j'ai juste à copier le code. Je retourne

dans mon éditeur de texte, je le supprime et je viens coller le bon code.

Ici, on a notre URL qui sera automatiquement remplacé puisque hop, c'était le cas ici dans le code qui nous fournisse. Par contre, il y a le token

fournisse. Par contre, il y a le token qui n'est pas fourni. Donc ça c'est à nous de venir le générer grâce au plugin MCP. Donc on remonte un petit peu, on va

MCP. Donc on remonte un petit peu, on va dans authentification token, juste ici, on descend et là vous pouvez choisir la durée. Donc soit vous pouvez prendre la

durée. Donc soit vous pouvez prendre la durée maximale pour pas avoir à changer à chaque fois euh le token dans le code parce que dès que le token est expiré, vous allez devoir revenir dans la config modifier le code. Moi là, vu que c'est

juste pour un test, je vais mettre valable 2 he je vais faire générer un nouveau token. Ici, je vais venir le

nouveau token. Ici, je vais venir le copier et je le colle. Hop, dans mon code. Je fais attention à bien préserver

code. Je fais attention à bien préserver les guillemets. Le log file ici, on peut

les guillemets. Le log file ici, on peut supprimer la ligne et du coup supprimer la virgule ici à la fin du token. Une

fois que c'est fait, on va cliquer sur enregistrer. Donc, on fait commande S ou

enregistrer. Donc, on fait commande S ou contrôle S selon si vous êtes sur Mac ou Windows. Et maintenant, hop, si je

Windows. Et maintenant, hop, si je retourne ici dans paramètres développeur, là pour l'instant, on a aucun serveur ajouté puisque il faut quitter l'application pour pouvoir

actualiser. Donc là, je vais venir

actualiser. Donc là, je vais venir quitter cloud. On relance l'application.

quitter cloud. On relance l'application.

Je retourne dans mon profil dans paramètres développeur et cette fois j'ai bien WordPress MCP.

Pour vérifier que ça fonctionne, on va ouvrir une nouvelle conversation et on va dire à Claude, liste-moi les capacités MCP qui sont disponibles via le MCP WordPress que j'ai connecté. Là,

on va faire entrer et ici va venir du coup euh checker le MCP et euh nous dire toutes les fonctionnalités, donc tout ce qu'on peut faire grâce à lui. Si jamais

ça ne fonctionne pas de votre côté, vous revenez dans paramètres développeur et vous faites afficher les journaux. Et ici, vous venez récupérer

journaux. Et ici, vous venez récupérer le code à la fin, donc les dernières lignes, euh pour venir l'envoyer à Cloud et lui demander d'où vient le problème.

OK, maintenant qu'on a euh connecté, on va pouvoir passer aux choses intéressantes avec Elémentor. Et la

première chose qui me paraît intéressante, c'est de venir modifier une page qui existe déjà. Là, on va prendre l'exemple de mon programme Elémentor Master. On va dire que je l'ai

Elémentor Master. On va dire que je l'ai mis à jour. J'ai fait une refonte du programme avec la version V4 d'Elémentor, donc le nouvel éditeur et du coup, je dois modifier la page de présentation. Mais au lieu de tout

présentation. Mais au lieu de tout modifier manuellement à la main, on va demander à Claude de le faire à notre place. Donc je vais venir récupérer

place. Donc je vais venir récupérer l'URL sur mon site. Je viens dans Cloud, je lui donne l'URL et je vais lui dire "J'ai mis à jour mon programme, j'ai ajouté un nouveau module dédié à Elémentor V4." Donc j'aimerais que tu

Elémentor V4." Donc j'aimerais que tu mettes à jour cette page, notamment que tu ajoutes un nouveau module dédié à Elémentor V4 avec en liste à plus les différentes leçons qui s'y trouvent. Et

sur la page de vente, j'aimerais également notamment dans la herosection que tu mettes en avant le fait que c'est à jour avec la dernière version d'Elémentor puisque c'est quelque chose d'important. Donc là, je lui ai fait un

d'important. Donc là, je lui ai fait un prompte très basique parce que c'est juste un test. Normalement, il aurait fallu que je lui fournisse le contenu exact à mettre ou bien les sections exactes que je veux ajouter. Là, je suis pas rentré dans les détails. Donc, il va inventer le contenu mais c'est pas

grave, c'est juste pour le test. Bon,

là, du coup, il me demande les leçons.

Je vais lui dire, c'est juste pour un exemple. donc invente les leçons et que

exemple. donc invente les leçons et que ça soit pertinent avec la version V4 d'Elémentor et pour modifier la page utilise le MCP WordPress. Et là on a une limite, c'est que pour l'instant le MCP

ne permet pas de mettre à jour des pages, il permet seulement d'en créer.

Mais vous allez voir qu'on va pouvoir contourner ça avec une petite astuce qui va fonctionner si vos pages suivent à peu près toute la même structure. Moi,

c'est le cas par exemple pour mes pages de formation. Et bien pour toutes mes

de formation. Et bien pour toutes mes formations, ça suit à peu près la même structure. On a un titre, un sous-titre,

structure. On a un titre, un sous-titre, un bouton, un peu de texte, ensuite la présentation des modules et cetera. Si

on a un site d'immobilier par exemple, on peut imaginer que pour les différents biens immobiliers, on aurait la même structure. Et donc grâce à ça, on va

structure. Et donc grâce à ça, on va pouvoir dupliquer cette structure et pouvoir créer de nouvelles pages. Et

donc au lieu de mettre à jour cette page, en fait, on va en créer une nouvelle qui reprend la même structure, sauf que le contenu sera différent. Pour

cela, ce que je vais faire, c'est je vais aller dans modifier avec Elémentor.

Je vais descendre tout en bas, je vais cliquer sur l'icône de dossier et je vais enregistrer la page en tant que modèle. Donc je clique sur l'icône de

modèle. Donc je clique sur l'icône de sauvegarde, je vais l'emmener, je vais la nommer euh modèle formation. Je

l'enregistre sur modèle de site. Je fais

enregistrer. Ici, je retrouve bien modèle formation. Je vais pouvoir

modèle formation. Je vais pouvoir cliquer sur les trois petits points et cliquer sur exportation afin de me la télécharger au format Gison. Et là, ce que je vais faire, c'est que je vais fournir à Cloud ce euh fichier Gison.

pour qu'il comprenne le code. Donc je

viens le glisser dans la conversation.

Je vais lui dire "Voici la page Elementor qui présente mon programme.

Donc analyse la structure du fichier Gison et recrée une nouvelle page qui reprend exactement la même structure, sauf que tu vas mettre à jour le contenu pour que ça soit adapté à Elémentor V4."

Donc, je veux juste que tu rajoutes un nouveau module Elémentor V4 dans la section où je liste tous les modules et je veux que tu modifies euh la Hose section pour qu'on comprenne que ça sera à jour avec la dernière version

d'Eléementor. OK, il m'a maintenant créé

d'Eléementor. OK, il m'a maintenant créé la nouvelle page. Ce que je vais faire, c'est que je vais venir cliquer sur la petite flèche et télécharger le modèle.

Ensuite, je vais dans Elémentor sur l'onglet éditeur modèle. Je viens

importer un modèle. Je fais choisir le fichier. Je sélectionne mon modèle. Je

fichier. Je sélectionne mon modèle. Je

fais importer. Maintenant, j'ai mon modèle qui est maintenant importé et si je vais le voir ici, on a bien Elémentor V4 dans l'aérosection. Et si je fais découvrir le programme que je descends

un petit peu, hop, il m'a ajouté ici le module 5 élémentor V4, les nouveautés avec à chaque fois une liste à plus. Il

a vu que à chaque fois dans mes listes à plus, je mettais des emojis. Donc il a fait pareil. Donc vous voyez qu'il a

fait pareil. Donc vous voyez qu'il a analysé en fait la page existante pour venir ajouter quelque chose de cohérent.

Pareil au niveau de la charte graphique, il l'a respecté et cetera. Et en

analysant un petit peu sa réflexion sur comment il a créé la page, je me suis dit qu'au final, il pouvait peut-être directement mettre à jour la page plutôt qu'on est à importer un template. Donc

je lui ai fait un petit prompte comme ça. Il a commencé à le faire, je lui ai

ça. Il a commencé à le faire, je lui ai dit de mettre à jour la page et cetera, mais en fait il se retrouve limité à cause du nombre de caractères. Donc en

fait le code Elémentor est trop complexe, il y a trop de lignes de code, le fichier est trop lourd et ça passe pas avec le MCP WordPress. Ça ça devrait changer avec la version V4 d'Elémentor puisque le code sera beaucoup plus

léger. Ça va fonctionner uniquement avec

léger. Ça va fonctionner uniquement avec des classes CSS donc ça sera beaucoup plus simple pour l'IA de créer, gérer et mettre à jour du code Elémentor. Dès que

ça sera dispo, je l'aborderai dans mon programme Webmaster 2.0. Pour l'instant,

les inscriptions sont fermées, mais en attendant, vous pouvez obtenir gratuitement mon kit IA en cliquant sur le premier lien en description. Vous

obtiendrez ma sélection d'outils et de prompt pour créer des sites, automatiser n'importe quelle tâche et devenir plus productif grâce à l'IA. Et vous serez également inscrit à My newsletter. Donc

vous serez prévenu dès que Webmaster 2.0 va ouvrir ses portes. Maintenant on va passer à un deuxième cas d'utilisation.

Donc je vais ouvrir une nouvelle conversation. Cette fois on va créer une

conversation. Cette fois on va créer une page de zéro. Donc je peux tout d'abord créer une nouvelle page, une page qui respecte ma charte graphique. Je vais

lui dire par exemple, ajoute-moi une page contact que tu auras créé avec Elémentor. Je veux que cette page

Elémentor. Je veux que cette page respecte ma charte graphique et les couleurs, les polices et cetera que j'utilise sur mon site. Donc je lui envoie ce message. Du coup, il a examiné mon site, il a déterminé ma charte graphique, donc couleur principale,

couleur de fond et cetera. Donc là, il y a pas d'erreur. Il a bien analysé ma charte graphique. Donc vous voyez que

charte graphique. Donc vous voyez que même avec un prompt très basique, sans lui donner d'instruction de lui-même, il arrive à retrouver les données. Donc il

allait voir ma page d'accueil pour voir euh quelles sont les couleurs qui sont utilisées. Ensuite, il me dit qu'il m'a

utilisées. Ensuite, il me dit qu'il m'a euh créé ma page d'accueil. Donc euh

hop, je pense qu'il va me donner l'URL juste après. Donc là, il m'a pas donné

juste après. Donc là, il m'a pas donné l'URL. Je pourrais aller voir moi-même

l'URL. Je pourrais aller voir moi-même dans mes pages. Sinon, je vais lui dire "Donne-moi l'URL de la page." Hop, il me donne l'URL de la page brouillon. Ici,

on a bien ma charotte graphique qui a été respectée. On a juste le tuto euh

été respectée. On a juste le tuto euh qui n'a pas été utilisé alors que j'utilise sur mon site. Et ici, en fait, on a une section vide puisque euh il me dit qu'il faut que j'intègre euh un formulaire. Donc en fait, il me dit de

formulaire. Donc en fait, il me dit de le créer avec fluent forme puisque il a vu que sur mon site, j'utilisais des formulaires fluent forme. Mais sinon, je vais tester de lui dire au lieu de mettre un formulaire fluent forme,

intègre directement un formulaire créé avec Elémentor avec le widget de la version pro. Et voilà, il a maintenant

version pro. Et voilà, il a maintenant créé le formulaire. Donc il a mis directement à jour la page et vous voyez que la mise en forme n'est pas terrible.

Donc je pourrais envoyer une capture d'écran et lui dire d'améliorer tout ça.

Mais c'est déjà plutôt impressionnant de pouvoir générer des pages Élémentor qu'il ait même réussi à paramétrer le formulaire directement dans Élémentor.

Maintenant ce qu'on va faire c'est qu'on va lui fournir une charte graphique et on va essayer de générer une page de zéro qui ressemble à ça. Donc je vais venir copier l'image, je vais venir la coller ici dans la conversation et lui

dire maintenant créer une nouvelle page qui va s'appeler page démo et je veux que tu crées un design Elémentor qui ressemble le plus fidèlement à cette page. Fais attention à ce que tout

page. Fais attention à ce que tout s'affiche correctement. J'ai testé

s'affiche correctement. J'ai testé plusieurs alternatives et à chaque fois le résultat est franchement décevant.

Donc ce qu'on va faire c'est qu'on va plutôt créer une page de zéro puisque j'ai l'impression que quand on met une image de référence vu que c'est un design un petit peu complexe et bien euh il a tendance à faire un peu n'importe quoi. Du coup euh je lui ai dit

quoi. Du coup euh je lui ai dit d'utiliser l'EMCP WordPress pour me créer une page Elémentor pour une page de vente d'un service SEO et je veux que la couleur d'accentuation soit le bleu.

Et effectivement lorsqu'on met pas d'image de référence le design est beaucoup mieux. Donc l'affichage voyez

beaucoup mieux. Donc l'affichage voyez que ça s'affiche correctement. Ici, on a même euh un petit effet de surignement qui a été ajouté. Si je descends, ici, on a nos différentes sections. Pareil

ici, les différentes étapes. On a juste la dernière section là qui s'affiche pas correctement avec les espaces blancs.

Mais franchement, pour la première partie du site, c'est vraiment pas mal.

Et là, l'avantage du coup, c'est que si je fais modifier avec Elémentor, et bien je me retrouve directement dans Elémentor et je vais pouvoir venir éditer les différents éléments très facilement. Et euh c'est ça l'avantage

facilement. Et euh c'est ça l'avantage en fait, c'est que si vous avez créé des sites avec Lia, vous êtes peut-être rendu compte que quand le euh rendu ne vous convient pas, c'est un petit peu contraignant de venir l'éditer et au final, on passe plus de temps à faire

des allers-retours, à faire des prompts et cetera que à créer le site. Et euh

là, on se retrouve directement avec une base qu'on va pouvoir facilement modifier avec Elémentor. Et donc, on aura un bon gain de temps au niveau de la personnalisation. Mais pour

la personnalisation. Mais pour l'instant, les designs restent très basiques. On a souvent des erreurs

basiques. On a souvent des erreurs d'affichage, d'espacement et cetera.

Donc selon moi, ce n'est pas vraiment très au point pour l'instant. Mais ça

présage du bon pour le futur, notamment lorsque Elémentor V4 sera dispo et que Claude aura accès à la documentation qui pourra générer des pages avec l'éditeur V4. Je mets beaucoup d'espoir là-dedans.

V4. Je mets beaucoup d'espoir là-dedans.

Je pense que ça va permettre de créer des pages avec un design beaucoup plus avancé et sans toutes ces erreurs d'affichage. Une autre alternative, ça

d'affichage. Une autre alternative, ça pourrait être de générer plutôt des pages HTML et les intégrer directement dans un bloc Elémentor. Donc là, on perd l'avantage de pouvoir modifier directement dans Elémentor, mais par contre, on reste dans l'écosystème

WordPress. Et donc si on veut ajouter

WordPress. Et donc si on veut ajouter d'autres fonctionnalités, par exle des fonctionnalités e-commerce, de réservation et cetera, ça reste beaucoup plus simple que de le créer de zéro avec l'IA. Et si vous voulez apprendre à

l'IA. Et si vous voulez apprendre à utiliser cloud pour générer des sites qui sortent du lot, des sites qui ne ressemblent pas à tous ceux qu'on voit qui ont été générés par je vous affiche cette vidéo que je vous conseille d'aller voir. Je vous dévoile un site

d'aller voir. Je vous dévoile un site gratuit pour intégrer des composants qui sont créés par de vrais designers et qui permettent d'avoir vraiment des sections originales et premium sur vos sites web.

Et vous pouvez également obtenir le kit IA en cliquant sur le premier lien en description afin d'obtenir ma sélection d'outils et de promptes pour créer des sites professionnels grâce à