Tutoriels

Changez les couleurs de tout votre site en discutant

Les couleurs déterminent la première impression d'un site. Beaucoup de designs commencent en noir, blanc et gris, ce qui est net mais peut sembler froid pour un café, un studio ou une boutique. Dans WordPress, vous ouvririez le Site Editor, trouveriez Styles, modifieriez la palette, puis corrigeriez chaque élément à la main. Dans ShipPress, vous décrivez les couleurs souhaitées dans le chat et l'IA change tout le site d'un seul coup. Dans ce tutoriel, je donne à Pier 7 Coffee une chaude palette de port : crème, bleu marine profond et cuivre.

1. Commencez par regarder vos couleurs actuelles

   Ouvrez votre site dans ShipPress et faites défiler l'aperçu jusqu'à une partie contenant des boutons, des liens et de petites étiquettes. Sur Pier 7 Coffee, tout est blanc, noir et gris : l'arrière-plan de la page, les étiquettes sur les cartes de café et les liens. Décidez de l'ambiance que vous voulez et de l'endroit où chaque couleur doit aller.

   

2. Décrivez la palette en un seul message

   Écrivez dans le chat ce que vous voulez et où va chaque couleur. Vous n'avez pas besoin de codes couleur. Des mots comme « crème douce », « bleu marine profond » et « cuivre » suffisent. Précisez aussi ce qui doit rester identique, par exemple que tout le texte reste facile à lire. J'ai envoyé :

   Donne à tout le site une chaude palette de couleurs de port : un arrière-plan de page crème doux, un bleu marine profond pour l'en-tête, le pied de page et les sections sombres, et un accent cuivré pour les boutons, les liens et les petites étiquettes sur les cartes de café. Garde tout le texte facile à lire.

   

3. Laissez l'IA changer les couleurs

   Appuyez sur Entrée. L'IA explique ce qu'elle va faire, puis met à jour la palette de couleurs du design, qui contrôle l'en-tête, le pied de page, les sections sombres, les boutons et les liens de chaque page. Sur Pier 7 Coffee, cela a pris environ une minute et demie. Vous pouvez continuer à écrire pendant qu'elle travaille ; les nouveaux messages attendent qu'elle ait terminé.

   

4. Lisez ce qui a changé

   Quand c'est terminé, l'IA liste chaque changement : l'arrière-plan de la page, l'en-tête et le pied de page, les boutons et les liens, les étiquettes des cartes de café et la couleur du texte. Elle vous explique aussi comment elle a gardé le texte lisible, par exemple avec du texte crème sur les boutons cuivrés.

   

5. Comparez avant et après

   Cliquez sur Refresh au-dessus de l'aperçu et faites défiler jusqu'au même endroit. La page a maintenant un chaud arrière-plan crème, et les étiquettes des cartes de café ainsi que le lien « All lots and past lots » sont cuivrés. Descendez tout en bas : le pied de page est bleu marine profond avec du texte crème.

   

   

6. Affinez avec un court message de suivi

   Ce n'est pas tout à fait ça ? Dites-le en quelques mots. Sous la réponse, ShipPress propose les étapes suivantes ; j'ai cliqué sur Make the copper a bit lighter. L'IA a rendu le cuivre plus chaud et plus lumineux, et a expliqué pourquoi elle n'est pas allée plus loin : un cuivre plus clair rendrait le texte crème sur les boutons plus difficile à lire. Si vous changez d'avis, Undo this change est juste là.

   

7. Vérifiez sur Phone

   Cliquez sur Phone en haut à droite de l'aperçu et faites défiler la page. Les couleurs sont définies pour tout le site, donc la version téléphone utilise le même arrière-plan crème, les mêmes étiquettes cuivrées et les mêmes titres bleu marine.

   

8. Découvrez la palette dans Colors and fonts

   Vous voulez voir ou ajuster les couleurs vous-même ? Cliquez sur Colors and fonts au-dessus de l'aperçu. Cela ouvre le panneau Styles de WordPress pour tout le site. Sous Colors, vous voyez la nouvelle palette et les couleurs de Link, Captions, Button et Heading. Vous pouvez en modifier n'importe laquelle à la main, mais vous n'y êtes jamais obligé.

   

9. Revenez en arrière à tout moment avec History

   ShipPress enregistre un point de restauration après chaque tour de l'IA. Cliquez sur History en haut à droite pour en voir un pour la nouvelle palette et un pour le cuivre plus clair. Cliquez sur Restore à côté de l'un d'eux pour revenir exactement à l'apparence du site à ce moment-là.

   

10. Conseils

    • Trois couleurs suffisent généralement : un arrière-plan, une couleur foncée pour les en-têtes et le texte, et un accent pour les boutons et les liens.
    • Dites où va chaque couleur, pas seulement quelles couleurs vous aimez.
    • Demandez à l'IA de garder le texte facile à lire ; elle choisira une teinte un peu plus foncée ou plus claire si nécessaire.
    • Les photos gardent leurs propres couleurs. Choisissez une palette qui leur convient.
    • Vérifiez quelques pages et Phone avant de cliquer sur Go live.