La page de personnalisation Treely permet d’ajuster votre palette avec aperçu en direct à droite. L’objectif n’est pas de mettre beaucoup de couleurs, mais de créer un rendu cohérent et lisible sur les cartes, boutons, badges et textes.
Méthode simple en 3 étapes
- Choisissez une base : une couleur principale + une couleur secondaire.
- Assurez la lisibilité : réglez d’abord le fond et les textes (principal, secondaire, titres).
- Ajoutez l’accent : utilisez la couleur d’accent pour attirer l’œil sur les éléments importants.
À quoi sert chaque couleur
Couleur principale
Structure visuelle globale (cartes, zones dominantes, ambiance générale).
Couleur secondaire
Couleur de soutien pour équilibrer la palette.
Couleur d’accent
À réserver aux éléments importants (boutons, badges, liens, actions).
Couleur de fond
Fond général de la page ou des blocs.
Texte principal
Texte le plus important (titres, contenus clés).
Texte secondaire
Sous-textes, descriptions, informations complémentaires.
Couleur des titres
Permet de distinguer les titres du reste du texte.
Titre des liens
Couleur du titre affiché dans les cartes de liens.
Couleur des icônes / Fond des icônes
Permet de garder des icônes visibles sans surcharger la carte.
Fond des badges / Texte des badges
Très utile pour les badges Mis en avant.
Règle de lisibilité à respecter
Les couleurs les plus vives doivent servir à mettre en valeur, pas à tout colorer. Si tout attire l’œil, rien n’est prioritaire.
- Gardez un contraste fort entre le fond et le texte principal.
- Utilisez la couleur d’accent sur les boutons, les liens et les badges.
- Vérifiez que les textes secondaires restent lisibles (pas trop pâles).
Comment utiliser l’aperçu à droite
L’aperçu Treely simule une vraie page publique avec :
- un bouton (pour valider la couleur d’accent),
- des cartes de liens (lisibilité du titre + texte secondaire),
- des badges “Mis en avant” (fond + texte du badge),
- des icônes (couleur de l’icône + fond de l’icône).
Modifiez une couleur, observez immédiatement le rendu, puis ajustez avant de passer à la suivante.
Réglages “Divers” à ne pas oublier
- Arrondi des boutons (px) : augmentez la valeur pour un style plus doux et moderne.
- Arrondi des cartes (px) : harmonisez avec les boutons pour garder une cohérence visuelle.
- Échelle de la taille du texte : utile si votre page paraît trop compacte ou trop chargée.
1.00 puis ajustez légèrement (par exemple 0.95 ou 1.05).
Checklist avant d’enregistrer
- Le texte principal est-il lisible sur le fond ?
- Les titres ressortent-ils sans être agressifs ?
- Les boutons et badges sont-ils bien visibles ?
- Les icônes restent-elles lisibles sur leur fond ?
- L’ensemble paraît-il cohérent (pas trop de couleurs fortes) ?
Quand le rendu vous convient, cliquez sur Créer ou Enregistrer. Vous pourrez revenir modifier votre thème à tout moment.