Système de gestion de contenu (CMS) : Ajouter et connecter des champs de couleur
Temps de lecture : 14 min
Améliorez le design de votre site en ajoutant et en connectant des champs « Couleur » dans vos collections du Système de gestion de contenu (CMS). Les champs « Couleur » permettent de gérer dynamiquement les couleurs de chaque élément de votre site. Vous pouvez configurer des couleurs spécifiques par élément de collection, puis utiliser les couleurs dans les éléments de texte connectés, les boutons et les arrière-plans de sections. Ainsi, vous pouvez mettre à jour les couleurs de ces éléments à partir de vos collections, sans modifier manuellement chaque élément.
Imaginons que vous gérez une boutique en ligne. En utilisant le champ « Couleur », vous pouvez faire automatiquement correspondre la couleur d'arrière-plan des sections d'articles ou la couleur de texte des noms d'articles à la couleur désignée de chaque élément.
Cette fonctionnalité est particulièrement utile pour les partenaires qui souhaitent permettre aux collaborateurs du site de gérer les couleurs des éléments sans avoir besoin d'accéder à l'Éditeur.
Ajouter le type de champ « Couleur » dans votre collection
Accédez à la collection de votre CMS pour ajouter un champ « Couleur », puis définissez les couleurs pour chaque élément. Vous pouvez créer plusieurs de ces champs si vous souhaitez utiliser plusieurs couleurs pour chaque élément. Par exemple, vous pouvez créer un champ « Couleur » pour la couleur d'arrière-plan d'une section, et créer un autre champ « Couleur » pour la couleur du texte.
Pour ajouter le type de champ « Couleur » à votre collection :
- Accédez au CMS dans le tableau de bord de votre site. Vous pouvez également cliquer sur CMS
dans votre Éditeur, puis cliquez sur Vos collections. - Cliquez sur la collection concernée.
- Cliquez sur Gérer les champs.
- Cliquez sur + Ajouter un champ.
- Sélectionnez Couleur et cliquez sur Choisir le type de champ.
- Saisissez un nom dans le champ Nom du champ.
- (Codage uniquement) Mettez à jour l'ID du champ utilisé dans le code du site. Vous ne pourrez pas mettre à jour cet identifiant plus tard.
- (Facultatif) Saisissez un Texte d'aide si vous souhaitez qu'une infobulle apparaisse dans votre collection à côté du titre du champ.
- Cliquez sur Ajouter.
- Survolez le champ « Couleur » de l'élément concerné et cliquez sur l'icône Choisir une couleur
.
Suggestion : Si vous souhaitez coller un nombre HEX au lieu de sélectionner une couleur, cliquez sur le champ lui-même et collez le numéro HEX.
- Sélectionnez une couleur parmi les couleurs du thème de votre site ou parmi vos couleurs enregistrées.
Suggestion : Cliquez sur + Ajouter à côté de Mes couleurs pour ajouter une nouvelle couleur personnalisée. - Répétez les étapes 10 à 11 pour chaque élément de votre collection.
Suggestion :
Découvrez comment configurer des couleurs par défaut pour le champ « Couleur » de chaque élément de collection.
Connecter des éléments de texte au type de champ « Couleur »
Une fois que vous avez ajouté le champ « Couleur » à votre collection, vous pouvez y connecter des éléments de texte. Cela permet à la couleur du texte de changer en fonction du champ « Couleur » de l'élément affiché.
Remarque :
Il n'est pas encore possible de connecter les éléments de texte suivants au type de champ « Couleur » : Texte réductible, texte défilant ou masque de texte.
Éditeur Wix
Éditeur Studio
- Accédez à la page correspondante dans votre éditeur.
- Ajoutez un élément de texte à votre page :
- Cliquez sur Ajouter des éléments
sur le côté gauche de l'Éditeur.
- Cliquez sur Texte.
- Cliquez sur le type de texte que vous souhaitez ajouter : Texte assorti, Titres ou Paragraphes
- Cliquez et faites glisser le texte de votre choix pour l'ajouter à la page.
- Cliquez sur Ajouter des éléments
- Cliquez sur l'icône Connecter au CMS
sur l'élément de texte. - Cliquez sur le menu déroulant Choisir un dataset et sélectionnez un ensemble de données qui se connecte à votre collection. Vous pouvez également cliquer sur Ajouter un dataset, puis choisir la collection à laquelle vous souhaitez le connecter.
- Cliquez sur le menu déroulant Texte connecté à et sélectionnez le champ que vous souhaitez connecter.
Suggestions :
- Vous pouvez connecter des éléments de texte aux types de champs de collection : Texte, nombre, URL, booléen, date, date et heure, texte enrichi, adresse, balises et heure.
- Sélectionnez Nombre d'éléments si vous souhaitez que le texte affiche le nombre total d'éléments récupérés par l'ensemble de données.
- Cliquez sur le menu déroulant Couleur du texte connecté à et sélectionnez le champ « Couleur » que vous souhaitez connecter au texte.
- Cliquez sur Aperçu pour tester vos connexions.
- Cliquez sur Publier si vous êtes prêt à mettre en ligne les modifications.
Connecter des éléments de bouton au type de champ « Couleur »
Connectez les boutons aux champs « Couleur » pour gérer les couleurs des boutons directement à partir de vos collections du système de gestion de contenu (CMS). Vous pouvez connecter des états de bouton spécifiques (normal, survol et désactivé) à différents champs « Couleur ». Dans chaque état de bouton, vous pouvez choisir les champs « Couleur » à utiliser pour le texte du bouton, l'icône, la bordure et l'arrière-plan.
Éditeur Wix
Éditeur Studio
- Accédez à la page correspondante dans votre éditeur.
- Cliquez sur le bouton que vous souhaitez connecter au système de gestion de contenu (CMS). Découvrez comment ajouter un bouton.
- Cliquez sur l'icône Connecter au CMS. .
- Cliquez sur le menu déroulant Choisissez un dataset et sélectionnez un ensemble de données existant qui se connecte à votre collection. Vous pouvez également cliquer sur Ajouter un dataset, puis choisir la collection que vous souhaitez connecter, donner un nom à l'ensemble de données et cliquer sur Créer.
- Cliquez sur le menu déroulant L'action de cliquer connecte à et sélectionnez l'option correspondante. En savoir plus sur les actions de clic sur le bouton de connexion.
- Faites défiler la page jusqu'à Couleurs dans le panneau Bouton de connexion à droite.
- Cliquez sur l'onglet correspondant pour choisir l'état du bouton que vous souhaitez connecter : Normal, Survol, ou Désactivé.
- Cliquez sur les menus déroulants correspondants pour sélectionner le(s) champ(s) « Couleur » que vous souhaitez connecter :
- Couleur du texte connectée à : Connectez un champ « Couleur » à la couleur des caractères du texte.
- Couleur de l'icône connectée à : Connectez un champ « Couleur » à l'icône du bouton (si votre bouton a une icône).
- Couleur de bordure connectée à : Connectez un champ « Couleur » à la couleur de la bordure.
- Couleur d'arrière-plan connectée à : Connectez un champ « Couleur » à la couleur d'arrière-plan du bouton.
- Répétez les étapes 7 à 8 pour chaque état de bouton que vous souhaitez connecter à un champ de collection « Couleur ».
- Cliquez sur Aperçu pour tester vos connexions.
- Cliquez sur Publier si vous êtes prêt à mettre en ligne les modifications.
Connecter des arrière-plans de section au type de champ « Couleur »
Connectez la couleur d'arrière-plan d'une section à un champ « Couleur » dans votre collection du système de gestion de contenu (CMS). Cela permet d'apporter des modifications dynamiques à la couleur d'arrière-plan de la section, en fonction de l'élément affiché et de son champ « Couleur » connecté.
Éditeur Wix
Éditeur Studio
- Accédez à la page correspondante dans votre éditeur.
- Sélectionnez la section que vous souhaitez connecter à un champ de collection « Couleur ».
- Cliquez sur l'icône Connecter au CMS. .
- Cliquez sur le menu déroulant Choisissez un dataset et sélectionnez un ensemble de données existant qui se connecte à votre collection. Vous pouvez également cliquer sur Ajouter un dataset, puis choisir la collection que vous souhaitez connecter, donner un nom à l'ensemble de données et cliquer sur Créer.
- Sous Connexions, laissez le menu déroulant Arrière-plan de la section connectée à configuré sur Non connecté.
Suggestion : Vous pouvez également vous connecter à un type de champ « Images » qui contient des images avec des arrière-plans transparents. Cela permet à la couleur d'arrière-plan d'apparaître à travers les zones transparentes de l'image. - Sous Couleurs, cliquez sur le menu déroulant Couleur d'arrière-plan de la section connectée à et sélectionnez le champ « Couleur » que vous souhaitez connecter.
- Cliquez sur Aperçu pour tester vos connexions.
- Cliquez sur Publier si vous êtes prêt à mettre en ligne les modifications.
FAQ
Cliquez ci-dessous pour obtenir les réponses aux questions courantes sur l'utilisation du type de champ « Couleur ».
Que se passe-t-il si je paramètre des règles de point de rupture pour les couleurs dans l'Éditeur Studio ?
Comment la connexion d'un champ « couleur » affecte-t-elle un motif AB appliqué à un répéteur dans l'Éditeur Studio ?
Que se passe-t-il si des règles de couleur CSS sont appliquées dans l'Éditeur Studio ?
Que se passe-t-il si je modifie la couleur d'un champ « Couleur » dans la collection du CMS ?
Que se passe-t-il si je veux déconnecter un élément d'un champ « Couleur » ?
Puis-je demander que le champ « Couleur » soit défini pour chaque élément de ma collection ?
Puis-je ajouter une couleur par défaut à mon type de champ « Couleur » ?
Puis-je connecter le style CSS des éléments dans l'Éditeur Studio aux collections du CMS ?