Utiliser un champ couleur ou icône

Les champs Couleur et Icône associent un repère visuel à une fiche : une couleur pour une catégorie, une feuille pour un contenu nature, par exemple. Ils enregistrent une valeur. Ils ne changent pas automatiquement la présentation de votre site : un élément du design doit utiliser ce champ pour que le visiteur le voie.

1. Préparer les champs de la collection

Dans Données, ouvrez votre collection, puis Modifier colonnes et collection. Ajoutez un champ Couleur et un champ Icône, avec des noms compréhensibles pour la personne qui saisira les fiches. Enregistrez la structure de la collection avant de saisir ses contenus.

Un champ Texte nommé Couleur reste un champ Texte. Choisissez le type approprié pour disposer de la palette ou de la bibliothèque d’icônes. Les deux démonstrations utilisent une collection où ces champs sont déjà créés.

2. Choisir une couleur

Ajoutez une fiche ou ouvrez une fiche existante. Dans le champ Couleur, cliquez sur Sélectionner une couleur…, puis choisissez une couleur de la palette.

La démonstration choisit primary-500, une teinte de la couleur principale du thème. Le formulaire reste ouvert et son titre est conservé. Le libellé du champ vous permet de contrôler la valeur choisie avant de sauvegarder.

Une couleur du thème facilite la cohérence avec votre identité visuelle. Elle doit être utilisée par le design pour produire un effet sur le site. Ce champ ne colore pas tous les éléments de la fiche à lui seul.

3. Choisir une icône

Dans le champ Icône, ouvrez la bibliothèque. Recherchez un mot court, puis choisissez le pictogramme qui correspond à votre contenu. Certains noms d’icônes sont en anglais : dans la vidéo, leaf permet de trouver une feuille.

Après sélection, le champ indique tabler:leaf. Il s’agit de l’identifiant de l’icône choisie, pas d’un code à écrire. Vous pouvez rouvrir la bibliothèque pour choisir une autre icône.

Privilégiez un symbole simple et reconnaissable. Une icône seule ne remplace pas un titre explicite, notamment pour les personnes qui utilisent un lecteur d’écran.

4. Enregistrer et retrouver les valeurs

Enregistrez la fiche avec Ajouter une ligne pour une nouvelle fiche, ou la commande d’enregistrement de la fiche existante. Rechargez la collection, puis ouvrez la fiche pour contrôler la couleur et l’icône.

Les deux vidéos vérifient séparément la valeur enregistrée et sa présence après rechargement. Elles retirent ensuite leur fiche de démonstration, après la fin de l’enregistrement.

Un choix dans la palette ou dans la bibliothèque ne remplace pas l’enregistrement de la fiche. Avant de quitter une saisie, utilisez la commande d’enregistrement prévue.

5. Utiliser ces repères sur le site

Le modèle de votre liste ou de votre page doit lire le champ correspondant. Une icône fixe dans le design restera identique pour toutes les fiches ; un élément relié au champ Icône pourra afficher leur propre pictogramme.

Comparez plusieurs fiches et prévoyez le cas où le champ est vide. Pour les couleurs, vérifiez aussi le contraste du texte et des boutons. Les vidéos de cet article expliquent la saisie CMS ; elles ne présentent pas la création d’un design dynamique complet.