Formation
à Elementor

Je vous forme par téléphone + partage d’écran

Créez votre site
avec Elementor Pro

Elementor Pro = meilleur constructeur de page WordPress

Créez votre site
avec Elementor Cloud

Hébergez-le sur
Elementor Cloud

Elementor AI : génération de contenus textes, images, CSS et HTML par intelligence artificielle (IA)

Elementor AI tutoriel

Quand l’IA débarque sur Elementor

Depuis 2022, les IA génératives font beaucoup parler d’elles :

  • des IA de génération d’images comme Stable Diffusion, Dall-E, et surtout Midjourney
  • des IA de génération de texte et de code comme ChatGPT et d’autres LLMs

En 2023, ces intelligences artificielles ont débarqué sur WordPress au travers d’une floppée de plugins :

  • des plugins entièrement orientés IA, comme AI Engin et AI Power
  • ou des plugins spécialisés dans d’autres thématiques, et qui mettent en place des fonctionnalités d’intelligence artificielle

Elementor AI fait évidemment partie de cette deuxième catégorie. Son objectif est d’intégrer directement les fonctionnalités de plusieurs IA dans le constructeur de pages Elementor pour WordPress, en version gratuite comme en version Elementor Pro. Il permet donc de générer, dans des templates, des pages, des articles et des widgets, à la fois des images, des textes, et du code CSS et HTML.

Tout le monde peut l’utiliser en version « free trial » / essai gratuit, mais pour une utilisation plus soutenue il faudra acheter des crédits, et payer les créations de contenus en crédits, à ce tarif : 1 image = 33 crédits, 1 texte ou un code = 1 crédit.

Voyons maintenant comment, concrètement, on peut utiliser ces fonctionnalités IA d’Elementor.

Générer des contenus avec Elementor AI

Textes

Pour générer des textes avec Elementor AI, il suffit de passer en mode édition avec Elementor sur n’importe quel type de page ou d’article, ou d’ouvrir d’autres éléments d’interface éditables dans Elementor, comme le header / en-tête et le footer / pied de page.

A certains endroits, vous avez alors les éléments texte de l’éditeur visuel d’Elementor qui s’accompagne d’un bouton « Write with AI ».

Par exemple, on ouvre un article, on va dans les Réglages, et on trouve le bouton Write with AI près du titre de l’article et près de l’extrait.

Elementor AI Write with AI
Elementor AI Write with AI

Quand on clique ce bouton, cela ouvre une fenêtre en pop-up, qui permet d’entrer un « prompt ». Un prompt est une instruction en mode texte, qu’on envoie à l’IA qui renvoie une réponse. On peut ensuite copier-coller cette réponse pour l’utiliser, ou la modifier en changeant certains paramètres :

Par exemple, je lui donne ce prompt : Rédige un super titre d’article sur Elementor AI.

L’IA répond : Elementor AI: La nouvelle révolution de la création de sites web grâce à l’intelligence artificielle.

Avec cette réponse, Elementor AI me donne plusieurs options :

  • Simplify language : rendre le vocabulaire plus ordinaire
  • Make it longer : rallonger la taille du contenu
  • Make it shorter : raccourcir le contenu
  • Fix spelling and grammar : corriger l’orthographe et la grammaire
  • Change tone : changer la tonalité, et Elementor AI propose 12 tonalités prédéfinies (formal, inspirational etc)
  • Translate to : traduire vers… n’importe quelle langue
Prompt texte Elementor AI
Prompt texte Elementor AI

Images

Create with AI

Elementor AI peut aussi générer des images partout où il en est question : l’image à la une des articles, les galeries d’images produit, les images insérées dans tous types de pages web.

Ouvrons par exemple un article en mode Elementor, puis allons dans les réglages : là, au niveau de l’image à la une, on voit la petite icône faite de 3 étoiles et l’étiquette « Create with AI » au survol.

Elementor Create with AI
Elementor Create with AI

Edit with AI

On peut aussi partir d’images existantes et demander à l’intelligence artificielle de les modifier.

Elementor AI nous donne la possibilité de :

  • Expand image : étendre le format de l’image, en complétant les morceaux manquants de l’image
  • Generative fill : effacer une partie d’une image, puis générer la partie manquante à partir d’un prompt
  • Resize : modifier la taille de l’image
  • Variations : faire des variations visuelles pour créer des variantes qui ressemblent à l’original
  • Remove background : retirer l’arrière-plan de l’image
  • Replace background : remplacer l’arrière-plan de l’image
Générer images Elementor AI
Générer images Elementor AI

Générer du code avec Elementor AI

Elementor AI sait aussi générer du code et peut donc aider les amateurs qui ne maîtrisent pas le CSS et le HTML à en écrire.

Code HTML

Pour générer du code HTML, allez dans l’administration de WordPress, survolez Elementor dans la barre latérale, puis cliquez sur Code personnalisé.

Là, donnez un titre à votre code, sélectionnez un emplacement où injecter ce code (le header, ou le body au début ou à la fin), puis cliquez sur le bouton « Write me code ».

Par exemple, vous pouvez lui donner ce genre de prompts :

  • rédige le code pour intégrer Google Analytics avec l’id XXX-XXXX
  • ajoute telle librairie js
  • ajoute un balisage Schema.org avec telles et telles informations
  • etc

Vous pouvez ensuite automatiser l’insertion de ce code dans vos pages selon certaines conditions : sur tout le site, ou sur les articles uniquement, sur les pages d’archive de post, etc etc.

Code CSS

Pour générer du code CSS avec Elementor AI, rendez-vous sur une de vos pages web en mode Elementor, sélectionnez un élément, allez sur l’onglet Avancé dans la section CSS personnalisé. Là, vous trouvez un bouton « Edit with AI », cliquez dessus.

Vous pouvez lui demander n’importe quel effet CSS, par exemple :

  • crée un code CSS pour mettre le titre en bleu
  • crée un code CSS pour ajouter une marge de 1rem sur tous les côtés
  • crée un code CSS pour
  • etc etc

Attention, gardez à l’esprit qu’avec cette méthode vous ne créez pas du CSS global. Votre code ne s’appliquera que sur cette page. Sinon, copiez-collez-le dans la partie CSS personnalisé de votre thème WordPress.

De plus, rien ne garantit que l’IA comprenne bien ce que vous voulez et génère du code correct : parfois, souvent même, la situation en termes de CSS est trop compliquée pour qu’une IA sache l’éditer sans connaître l’état du CSS existant.

Conclusion

Elementor AI apparait comme une bonne solution pour intégrer de l’intelligence artificielle simplement sur votre site WordPress.

Avantages : il est très facile d’usage et ne nécessite aucun compte tiers. Il est aussi bon marché et, puisqu’on achète des crédits et pas un abonnement, on ne paye rien quand on ne s’en sert pas. Comparez avec le fait de payer des abonnements à Midjourney et ChatGPT Plus par exemple.

Bémols : les propositions de l’IA, quel que soit le média concerné, texte, image, code, ne sont pas toujours de qualité ni pertinentes.

Bref, Elementor AI vaut la peine d’être essayé. Testez-le et voyez s’il vous faite gagner du temps.

 

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 4.8 / 5. Nombre d'avis donnés 8

Soyez le premier à donner votre avis



Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

Besoin d'un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C'est pourquoi j'y héberge tous mes sites. Hébergement O2Switch
Panier
//
Retour en haut