2.3Couleurs & polices globales (Site Settings)
L'essentiel en 30 secondes
- Les réglages du site (Site Settings) définissent couleurs et polices globales appliquées partout.
- Définir une palette (principale, secondaire, texte, accent) et des styles de texte types (titre, corps).
- Définir tôt, appliquer partout : changer la charte se fait en un seul endroit.
Mini-cas filé — Nadia pose la charte
Jusqu'ici Nadia réglait les couleurs au cas par cas — et des nuances de rose légèrement différentes se sont glissées partout. Elle reprend tout via les réglages du site : une palette propre, deux styles de texte. Désormais, quand le menuisier voudra ajuster « son » rose, ce sera un seul réglage, répercuté sur tout le site.
Suite de 1.4 (aperçu du global) — ici, la mise en place complète.
1. La charte globale
Les réglages du site (Site Settings) — accessibles depuis le menu de l'éditeur — centralisent le design global. On y définit une palette de couleurs (principale, secondaire, texte, accent) et des styles de texte globaux (titre principal, sous-titre, corps…). Ces valeurs deviennent réutilisables : au lieu de taper un code couleur, on choisit « Couleur principale ».
Nadia crée sa palette (rose de marque, gris foncé pour le texte, un accent) et deux styles de texte. Tout le site partage alors la même identité.
2. Cohérence et maintenance
L'intérêt est double : cohérence (tout le site harmonisé) et maintenance centralisée (un changement de palette se répercute partout automatiquement). La bonne pratique : définir sa charte dès le début, puis appliquer les couleurs/styles globaux sur chaque élément — jamais des valeurs « en dur ».
Ainsi, quand le client hésite sur « son » rose, Nadia modifie la couleur principale une fois, et boutons, titres et liens se mettent à jour d'un coup.
🔎 Exemple concret — Poser et appliquer la charte (cas Nadia)
Site Settings → Couleurs globales :
Principale = #b4005a (rose) · Texte = #333 · Accent = #e0218a
Site Settings → Styles de texte :
Titre = police A, 2.2rem · Corps = police B, 1rem, interligne 1.6
→ Appliquer « Couleur principale » sur les boutons (pas un code en dur).
→ Client change d'avis sur le rose : 1 réglage, tout se met à jour.Résultat : identité cohérente, modifiable en un clic.
Leçon : appliquer le global, jamais des valeurs en dur.
Vocabulaire de la section
- Réglages du site (Site Settings)
- Les réglages globaux appliqués à tout le site (depuis le menu de l'éditeur).
Exemple simple : Nadia y définit palette et styles de texte.
Ce que ce n'est pas : régler chaque page séparément.
Réflexe : l'identité globale se pilote ici.
- Couleurs globales
- Une palette définie au niveau du site (principale, secondaire, texte, accent).
Exemple simple : choisir « Couleur principale » plutôt qu'un code couleur.
Ce que ce n'est pas : taper un code couleur différent à chaque bouton.
Réflexe : appliquer une couleur globale, jamais en dur.
- Styles de texte globaux
- Des typographies types définies globalement (titre, sous-titre, corps).
Exemple simple : un style « Titre » réutilisé partout.
Ce que ce n'est pas : régler la police de chaque titre à la main.
Réflexe : un style de texte global par rôle.
- Cohérence / maintenance
- Tout le site partage la même charte ; un changement se répercute partout.
Exemple simple : changer le rose une fois met à jour tout le site.
Ce que ce n'est pas : des nuances divergentes faute de charte.
Réflexe : cohérence = charte centralisée.
- Définir tôt & appliquer partout
- Poser sa charte dès le début, puis l'appliquer sur chaque élément.
Exemple simple : charte créée avant de construire les pages.
Ce que ce n'est pas : inventer les couleurs au fil de l'eau.
Réflexe : charte d'abord, construction ensuite.
En pratique — Mettre en place une charte globale
- Ouvrez les réglages du site (Site Settings).
- Définissez une palette : principale, secondaire, texte, accent.
- Définissez 2-3 styles de texte globaux (titre, corps).
- Appliquez ces couleurs/styles globaux sur vos boutons et titres (pas de code en dur).
Script prêt à dire — vendre la cohérence au client (20 s)
« J'ai créé une charte pour votre site : vos couleurs et vos polices, définies une fois pour toutes. Résultat : tout est harmonieux, et si vous voulez ajuster votre rose ou changer de police, je le fais en un seul réglage, répercuté partout. Pas de retouches page par page. »
La charte = cohérence visuelle + réactivité aux demandes.
Modèle copier-coller — charte du site
COULEURS GLOBALES :
Principale #______ Secondaire #______ Texte #______ Accent #______
STYLES DE TEXTE :
Titre : police ______ taille ______
Corps : police ______ taille ______ interligne ______
APPLIQUÉES EN GLOBAL (pas en dur) : oui / non
CHARTE DÉFINIE AVANT DE CONSTRUIRE : oui / nonNouveau site
Charte dès le départ : on construit directement avec les couleurs/styles globaux.
Site à harmoniser
Reprendre les éléments « en dur » pour les relier à la charte globale.
Client indécis
Charte globale = on change « son » rose en un clic, autant de fois qu'il veut.
Équipe
Une charte partagée évite que chacun invente ses propres couleurs.
✓ Bonnes pratiques
- Définir la charte avant de construire.
- Appliquer couleurs/styles globaux, jamais en dur.
- Garder peu de couleurs et de styles, cohérents.
✗ Pièges fréquents
- Régler les couleurs au cas par cas (nuances divergentes).
- Oublier d'appliquer le global (valeurs en dur).
- Multiplier couleurs et polices.
Points clés à retenir
- Site Settings = charte globale du site.
- Palette + styles de texte réutilisables partout.
- Changement répercuté en un seul endroit.
- Définir tôt, appliquer partout.
Défi 48h — appliquez demain
Créez une palette (4 couleurs) et 2 styles de texte dans les réglages du site, puis appliquez-les sur vos boutons et titres. Changez la couleur principale et observez la mise à jour globale. 20 minutes.
- J'ai défini une palette et des styles de texte globaux.
- Je les applique partout (pas de valeurs en dur).
- Je sais changer la charte en un seul endroit.
Questions fréquentes
Où définir les couleurs globales ?
Dans les réglages du site (Site Settings), accessibles depuis le menu de l'éditeur. On y crée une palette (principale, secondaire, texte, accent) réutilisable partout.
Que gagne-t-on avec une charte globale ?
La cohérence (tout le site harmonisé) et la maintenance centralisée : un changement de couleur ou de police se répercute partout automatiquement, sans retoucher chaque page.
Puis-je encore mettre une couleur « en dur » ponctuellement ?
C'est possible mais déconseillé : cela crée des incohérences et complique les changements. Préférez toujours appliquer une couleur globale.
Le menuisier risque de changer plusieurs fois d'avis sur « son » rose. Comment Nadia s'organise-t-elle ?