Vous avez toujours souhait r d r concevoir de belles sections de landing pages responsive sans d r ecrire une seule ligne de code? Avec le Plugin Selldone dans ChatGPT, ce r ve devient r alit .
Dans ce guide, vous apprendrez pas pas comment passer d'une image d'inspiration une section live, totalement responsive, dans le Page Builder de Selldone toute la cr ation pilot e par l'IA.
la fin, vous aurez une section au design professionnel pr te publier sur votre site Selldone.
8161; Remarque : le Page Builder de Selldone est bas sur Vuetify (Vue 3) — chaque section g n r e par le plugin est donc parfaitement compatible avec le framework front-end moderne et responsive de Selldone.
Step 1
Etape 1 Prepare Your Inspiration
Pour commencer, trouvez un design de section qui vous inspire. Dans ce tutoriel, nous utilisons une section de la page d'accueil de Cdiscount comme r f0f rence — une mise en page pur et moderne mettant en avant des produits phares avec des images marquantes et des appels l'action clairs.
Prenez une capture d' cran de cette section Cdiscount; nous l'utiliserons comme r f0rence visuelle dans ChatGPT pour g n rer notre design personnalis .
8161; Astuce : Choisissez une section avec une mise en page structur e9e et visuellement quilibr e9e. Plus le design est clair, mieux ChatGPT pourra l'analyser et le reproduire.
Avis d'utilisation raisonnable : La capture d' cran Cdiscount montr e9e ici est utilis e9e des fins ducatives et d'illustration seulement comme source d'inspiration. Toutes les marques, images et mises en page appartiennent Cdiscount — ce tutoriel n'est pas affili ou approuv par Cdiscount.
Step 2
Etape 2 Ouvrez ChatGPT avec le Plugin Selldone
Assurez-vous d'avoir activ le Plugin Selldone dans ChatGPT :
1. Allez dans ChatGPT → Param tres → Fonctions B ta → Plugins et activez les plugins. 2. Rendez-vous dans la Boutique de plugins et installez le Plugin Selldone. 3. D marrez une nouvelle conversation avec le plugin activ .
Vous devriez voir le logo Selldone c c pr s de votre zone de chat — cela signifie qu'il est pr t l'emploi
Step 3
Etape 3 Upload Your Reference Design
T versez votre capture d' cran et saisissez un prompt clair, par exemple :
Dans le menu sup rieur, assurez-vous d'utiliser la derni re version de ChatGPT.
"Je veux construire une section comme cette image, avec des tailles de police r actives, des polices et couleurs de cartes personnalisables, et des cartes pouvant tre circulaires ou carr es arrondies."
ChatGPT (avec Selldone) analysera l'image et g n rera un code bas sur Vuetify (Vue 3) pleinement compatible avec le Page Builder de Selldone.
Cr er une nouvelle landing page dans Selldone
Avant d'ajouter votre section personnalis e9e, cr ons d'abord une landing page vide dans Selldone pour l'utiliser.
Dans le menu sup rieur du store, allez dans Pages → Landing → Ajouter une nouvelle landing.
Sur cet cran, vous verrez trois mod les de landing page par d faut.
Cliquez sur l'un d'eux pour le s lectionner et entrer dans le Landing Page Designer. Dans le designer, ouvrez le panneau de gauche, trouvez l' l ment "Code" et glissez-le sur la zone du Page Builder. Cet l ment "Code" est l'endroit o vous collerez ou importerez la section g n r e par ChatGPT avec le Plugin Selldone.
Cliquez l'int rieur de la zone Code pour activer la barre d'outils—une barre d'outils appara tra en haut et nous l'utiliserons fr quemment.
-Le premier ic ne (<>) ouvre l'Editeur de code, o vous pouvez coller ou diter le code HTML et bas sur Vue g n r par ChatGPT.-Le deuxi me ic ne ouvre les Propri t s, o vous pouvez ajuster la mise en page, les espacements et les r glages visuels de la section.
Etape 4 Copy Paste the ChatGPT Initial Code into the Editor
Peut- tre mauvaise version
Vous devez maintenant copier la premi re version du code que ChatGPT vous a g n r e. Comme vous pouvez le voir dans la capture, le r sultat peut tre diff rent de votre image de r f0rence — cela signifie que ChatGPT a produit une version incorrecte de la section. C'est tout fait normal, ne vous inqui tez pas.
Pour corriger cela, renvoyez l'image de r f0rence et demandez nouveau, par exemple en disant :
"Concentre-toi sur l'image que j'ai envoy e9e ci-dessus. Je la renvoie."
Maintenant ChatGPT reprendra z ro et g n rera un nouveau code. Cette version ne sera pas n cessairement finale ; vous souhaiterez peut- tre encore ajouter des demandes et des ajustements.
Ensuite, copiez le code et collez-le dans l'éditeur de code puis cliquez sur Appliquer :
Note importante : Le mode par d faut de l'éditeur de code est HTML.Vous devez passer l'option Vue — sinon vous obtiendrez un r sultat vide.
Vous voyez maintenant la premi re version correcte de la section g n r e par ChatGPT.
Cliquez sur le deuxi me l ment de la barre d'outils (comme mentionn plus haut) pour ouvrir le menu Propri t s pour les ajustements. Vous verrez de nombreux r glages disponibles pour adapter cette section votre activit .
Option R initialiser par d faut :
Parfois, lorsque vous collez une version mise jour du code, vous ne constatez aucun changement visible. Cela peut se produire si les dites sont fondamentales. Dans ce cas, vous devrez cliquer sur l'option R initialiser par d faut. Notez que l'utilisation de cette option supprimera tous vos r glages personnalis s, y compris les nouveaux textes, couleurs, tailles de police et m mes les images import es — c'est essentiellement une remise z ro 8578;.
Utilisez cette option uniquement lorsque vos modifications ne sont pas correctement appliqu es.
Etape 5 Adjust the Section
ChatGPT, partir de ce qu'il a appris d'autres utilisateurs ayant utilis cette m thode, g n re maintenant des mises en page plus compl tes — vous n'avez donc pas demander chaque l ment un par un. C'est l'avantage r el de dialoguer : plus votre conversation est longue et claire, mieux ChatGPT comprend vos pr f0rences de design et livre des r sultats plus complets et pr cis.Le code g n r par d faut est d j assez r actif, mais vous pouvez affiner des d tails tels que les tailles de police, graisses, hauteurs ou largeurs des sections ou cartes, et autres l ments visuels selon vos pr f0rences. Par exemple, vous pouvez indiquer Selldone d'afficher 8 cartes par ligne sur grand cran, 4 cartes sur tablette, et 2 cartes sur mobile. Voyons comment ChatGPT interpr te et applique ces ajustements — il se peut que nous ayons encore quelques tapes d' dition ou de demandes faire.Dans ce cas, vous devriez modifier la Largeur max de la section 1400px pour une meilleure mise en page. Vous pouvez aussi r gler le nombre de cartes par ligne 8, 4 et 2 pour les tailles desktop, tablette et mobile respectivement. Pour affiner les espacements, essayez de r duire l' cart entre les cartes (Desktop) environ 12px. De m me, vous pouvez r duire la hauteur des cartes de 180px 160px, ou ajuster la taille des images pour mieux coller votre design.
Il est important de se rappeler que vous pouvez personnaliser l'apparence en jouant avec ces r glages — testez les valeurs et trouvez ce qui correspond le mieux votre style.
Pour mieux visualiser le r sultat, vous pouvez importer vos propres images. Nous recommandons d'utiliser des images avec fond transparent, afin que l'option Couleur de fond de la carte s'applique uniform ment toutes et donne votre section un rendu plus propre et professionnel.
Apr s avoir t l vers vos images, dit les textes et finalis le tout, cliquez sur le bouton Enregistrer — ou appuyez sur Ctrl + S sous Windows pour sauvegarder instantan ment. Il est maintenant temps d'ouvrir la page en direct et de voir votre section en action. Pour la visualiser en direct, vous pouvez utiliser l'option Aper u en direct ou cliquer sur le bouton c t qui affiche le nom de votre landing page — cela ouvrira la page en mode visiteur, tel que la verront vos visiteurs. Cependant, je ne recommande pas d'utiliser l'Aper u en direct pour v rifier la version finale, car il ne refl te pas pleinement la r activit sur tous les appareils — un point que nous aborderons plus bas.
Ceci est le r sultat du code. Nous devons maintenant le tester sur diff rentes tailles d' cran pour nous assurer que tout fonctionne correctement. Pour ouvrir les Outils de d veloppement Web dans les navigateurs Windows, appuyez sur F12. Cet outil vous permet de pr visualiser la page sur plusieurs tailles d' cran — sans avoir tester s par ment sur mobile, tablette, ordinateur portable ou autres appareils.
Maintenant, dans le menu sup rieur, s lectionnez Responsive pour voir quoi ressemble votre section sur diff rentes tailles d' cran.Comme vous pouvez le voir, la version mobile est propre et totalement r active.
En affichage tablette — plus pr cis ment sur l'iPad Pro 11 pouces — nos r glages (4 cartes par ligne sur tablette) ne sont pas appliqu s et il n'affiche que 2. Il faut demander ChatGPT de corriger ce probl me et de recoder.
Etape 6 Iterate and Refine
Ne vous arr tez pas la premi re version — c'est l o la vraie cr ativit op re. Vous pouvez continuer dialoguer avec ChatGPT pour ajuster des d tails comme :
• Rendre la section r active sur tous les crans. • Ajouter une animation au survol. • Utiliser des boutons en gradient.
Chaque it ration met jour votre section instantan ment.
8161; Astuce pro : Plus vous discutez et d crivez ce que vous voulez, mieux ChatGPT capture votre style de design. Avec le temps, il int grera vos pr f0rences et produira des r sultats plus précis et de meilleure qualit . Ici, expliquez clairement le souci pour aider ChatGPT mieux le comprendre. Rappelez-vous, il ne lit pas dans vos pens es — d crivez le probl me en d tail, comme dans cet exemple :
J'ai s lectionn 4 cartes afficher en une rang e9e en taille tablette mais il n'affiche que 2 cartes par ligne sur iPad Pro 11 pouces. Corrigez-le. J'ai s lectionn 2 par ligne pour mobile.
Quand ChatGPT r pond votre demande, il fournit parfois seulement les modifications de code sp cifiques que vous devez remplacer ou ajouter manuellement, comme sur l'image ci-dessous.
Pour faciliter les choses, demandez-lui simplement : "Envoyer le code complet."
Souvent, la fin de son message, ChatGPT recommande des r glages additionnels que vous pourriez avoir oubli s — par exemple ici, il sugg re d'ajouter des liens aux cartes, ce qui est essentiel pour notre section.
Presque fini ! Copiez-collez le code mis jour dans l'éditeur, enregistrez vos modifications et visualisez-le en mode Live pour vous assurer que tout est correct. Comme vous pouvez le voir, il affiche maintenant parfaitement 4 cartes par ligne en version tablette.
Etape 7 Finaliser le code et sauvegarder la section
Lorsque votre design est pr t, il est conseiller de fournir ChatGPT une description d taill e9e de la structure et des besoins de la section. Utilisez le prompt suivant pour g n rer le code final :
Ajoutez un bloc de description conceptuelle au-dessus du qui r sume la structure globale, le comportement et les d tails de design puis fournissez le code final complet.
ChatGPT g n rera le code final complet d butant par cette structure, que vous pourrez aussi utiliser comme base pour des sections futures.
Pour sauvegarder la section :Dans la partie gauche de la section, cliquez sur l'ic ne Enregistrer 8190;
Saisissez un titre g n ral et facile retenir afin de le retrouver plus tard. Par exemple, Type 1 - Cartes de cat gories
Cette section sauvegard e9e sera ajout e9e au menu lat ral droit du Page Builder. Si le menu dispara t, cliquez simplement sur l'option Repository dans le menu sup rieur pour le r afficher.
Pour renommer cette landing page:
Allez dans le menu de gauche et trouvez les ic nes SEO et Param tres. Si vous ne les voyez pas, d filez jusqu'en bas du menu. Ouvrez ensuite chacun et effectuez vos modifications selon vos besoins.
Etape 8 Preview the Live
Ouvrez maintenant votre site et voyez votre nouvelle section en direct et enti rement responsive. Redimensionnez la fen tre du navigateur ou regardez-la sur mobile — elle s'adapte automatiquement toutes les tailles d' cran gra ce Vuetify (Vue 3).
Desktop ViewTablet View
Mobile View
Conseils pro pour de meilleurs r sultats• Utilisez des images de r f0rence claires et de haute qualit — le plugin apprend la structure partir des visuels. • Soyez descriptif dans vos prompts ("utiliser des ombres douces", "centrer le CTA", "ajouter un l ger gradient"). • It rez souvent — chaque tour de conversation am liore le design et la qualit des r ponses. • Combinez plusieurs sections pour cr er une landing page compl te. • Rappelez-vous : Selldone utilise Vuetify (Vue 3), assurant des mises en page propres, flexibles et pr tes pour la production. • Testez toujours la r activit dans l'aper u en direct de Selldone avant de publier.
Conclusion
Avec le Plugin Selldone dans ChatGPT, cr er des sections de landing professionnelles est plus rapide et plus simple que jamais. Partez d'une image (comme notre r f0rence Cdiscount), affinez votre design par conversation, et donnez vie vos id es directement dans le Page Builder de Selldone.
C'est malin, visuel et amusant. Alors prenez votre design pr f0f r , ouvrez ChatGPT et laissez Selldone vous aider construire quelque chose d'incroyable aujourd'hui !
Add Comment
