Pour vous donner un peu de contexte, je m’appelle Alexandre Moussier et je suis freelance spécialisé dans le webmarketing depuis 2010. N’étant pas developpeur web, je me suis rapidement intéressé à WordPress pour communiquer de manière simple et efficace. Depuis, je me suis spécialisé dans la création de sites avec Elementor car c’est pour moi un page builder ultra intuitif avec une énorme communauté et de nombreux tutoriels. Si cela vous intéresse de voir mes références, n’hésitez pas à consulter ma page dédiée : agence elementor. Ainsi, dans cet article, je vais vous partager ma méthodologie pour arriver à la création de ce site : https://www.presquileweb.fr/ un site site full Elementor et chatgpt. Aussi, je n’ai pas écris cet article avec l’IA. Il est 100% rédigé à la mano.
Table des matières
La vidéo est vraiment là pour illustrer mes propos plus que pour vous expliquer concrètement comment le faire, cet article s’en chargera.
1) Installer WordPress et Elementor
Je ne vais pas vous faire un tutoriel sur comment installer WordPress et Elementor comme il en existe des centaines sur Internet. Par contre, si je devais vous recommander un hébergeur, je vous conseillerai O2switch qui a un service support de qualité et qui possède d’excellents produits. Pour le meilleur rapport qualité prix, je vous recommande hostinger. Ces 2 hébergeurs permettent de créer un site wordpress avec leurs modules d’installation en un clic. Vous installez ensuite le theme d’Elementor : hello et le plugin elementor pour aller avec.
Normalement, vous vous retrouvez avec un site comme ça :
2) Paramétrez les réglages du site
Vous ouvrez une page avec elementor et vous cliquez sur le logo Elementor puis sur réglages du site. C’est la partie un peu relou. Là, il vous faudra partir sur le remplissage de : « Couleurs globales », « Polices globales », « Typographie » et « Boutons ».
Avant ça, je ne l’ai pas fait lors de ma création, mais il peut être intéressant de le faire via un GPT dédié (c’est un chatbot qui a été pré-paramétré spécialement pour la création, d’un logo, la création d’une charte graphique etc.) Depuis, chatgpt a aussi créé un outil dédié à la création de sites.
Ensuite, vous lui demandé de faire un prompt pour lui même pour confectionner la maquette du site. Vous relisez et améliorez ce prompt et vous lui demandez de générer la maquette du site. Vous interagissez jusqu’à ce que vous appréciez sa proposition :
Une fois que vous appréciez sa proposition, rebelote, vous lui demandez de vous rédiger un prompt pour lui pour qu’il vous aide à remplir au mieux ces éléments : « Couleurs globales », « Polices globales », « Typographie » et « Boutons ». Attention à bien préciser que vous souhaitez une charte graphique responsive, sans surtitre, et faites au plus simple : 2 polices uniquement (1 pour les titres) et une pour le texte. Vous n’aurez pas la possibilité de vérifier visuellement. Une fois tout rempli vous laissez ça de côté.
3) Création du logo
Là encore ce sera plus simple de passer par un gpts et utiliser toujours la même méthodologie. En premier un prompt pour lui, puis ensuite amélioration et relecture de son prompt avant de lui demander de créer. Utilisez un gpt dédié à la création de logo et demandez la création du logo en 350 × 100 pixels et le favicon en 512 x 512 pixels. Un bon logo c’est un logo visible de loin et qui reprend bien votre charte graphique (police des titres et couleurs validées précédemment)
Une fois créé, vous allez dans les paramétrages du site > identité du site et vous lui donnez le logo du site et et le favicon.
4) Création via le constructeur du site
Franchement, je ne demanderai pas à chatGPT de créer ces parties en .json à partir de rien… Je prendrai son exemple de header, son exemple de footer et je lui dirai de me proposer un .json à partir de son exemple gratuit ou version pro si vous avez.
Dans les prompts, je lui demandais de générer à partir de la bibliothèque initiale Elementor :
Prends ce JSON Elementor fonctionnel comme référence technique obligatoire. Ne crée aucune structure Elementor qui n'existe pas déjà dans le fichier source sauf nécessité absolue. Réutilise les mêmes globals, containers, widgets, propriétés responsive et conventions de settings. Crée une nouvelle page avec les sections suivantes. N'utilise ni HTML widget, ni shortcode, ni widget tiers. Valide ensuite le JSON, l'unicité des IDs et la hiérarchie Elementor avant de me fournir le fichier.Vous itérez, jusqu’à vous générer un header / footer et article unique qui vous conviennent.
5) Création de la page d’accueil
Je ne vais pas vous mentir, j’avais quand même commencé à créer des éléments à la mano avant de les envoyer à ChatGPT.
Et à partir de ça, il m’a créé la page ci-dessous :
Là vraiment le plus important c’est de lui donner un .json fonctionnel, parce que sinon, il n’y arrive pas. Attention à bien lui montrer la maquette qu’il aura créé au préalable et que vous souhaitez. Prenez bien le temps de lui dire responsive, page speed insight friendly etc. en répétant bien de ne rien inventer (mon paragraphe ci-dessus)
Une fois le .json créé vous n’aurez plus qu’à l’intégrer dans la page. Si ce n’est pas fonctionnel, Elementor vous le dira directement.
6) Ajustement
Là c’est le gros du travail et franchement si vous n’avez jamais fait de sites sur elementor, demander à chatGPT peut être une excellente idée.
Avant de passer à la mise en page, il est primordial de ré-éditer les « paramétrages du site » car cela vous fera gagner énormément de temps. Pensez à bien vérifier la taille et graisse des polices (Desktop, tablette et mobile) par défaut. Cela vous fera gagner un temps fou quand vous allez créer une nouvelle page.
Aussi, pour avoir un site webperformant, vous pouvez passer votre site à la moulinette avec page speed insight (pensez à bien mettre la taille qui sera utilisée pour éviter de charger une image trop grand qu’on ne verra pas, n’oubliez pas de transformer vos images au format webp pour gagner en performance. Pensez à bien tout optimiser et notamment via un cache (wprocket) pour ensuite partir de ce que vous avez créé et le dupliquer. Aussi, si le référencement WordPress est un sujet pour vous, n’hésitez pas à nous contacter car nous sommes une agence de référencement WordPress.
7) Conclusion
J’espère que ce mini tutorial, vous aura plu ? N’hésitez pas à me faire part de vos avis dans les commentaires ou de mettre des plus sur la vidéo.
