Utiliser les couleurs de votre marque.
Appliquez les couleurs de votre marque aux sections, au texte et aux boutons pour que chaque page semble appartenir au même site. Chaque champ de couleur de DXPR Builder montre la palette de votre thème en échantillons, pour choisir des couleurs de marque au lieu de deviner des codes. L’exemple donne à une section votre couleur de marque primaire avec du texte blanc.
La vidéo suit les étapes ci-dessous : elle colore une section avec votre échantillon de marque et met son texte en blanc.
Avant de commencer
- Vos couleurs de marque vivent dans le thème. Avec DXPR Theme, définissez-les sous Appearance > Settings > DXPR Theme (
/admin/appearance/settings/dxpr_theme), dans le panneau Colors. - DXPR Builder montre les dix premières couleurs différentes de cette palette en échantillons.
Colorer une section
- Survolez la section, ouvrez More et choisissez Settings.
- Ouvrez le panneau Style.
- Cliquez sur le bouton de couleur de Background. Le sélecteur de couleur s’ouvre avec vos échantillons.
- Cliquez sur votre échantillon de marque primaire.
- Cliquez sur le bouton de couleur de Font color et choisissez le blanc.
- Cliquez sur Save. Le texte du paragraphe devient blanc ; les titres gardent la couleur de titre du thème.
- Pour mettre aussi un titre en blanc, ouvrez les Settings de son élément Text, choisissez le blanc pour Font color dans son panneau Style et cliquez sur Save.
Ce que vous voyez
La section se remplit de votre couleur de marque, et son texte de paragraphe et son titre deviennent blancs. Les mêmes échantillons figurent dans chaque champ de couleur. Cela comprend les panneaux Style et Hover style, et le Start color et End color de l’arrière-plan Gradient d’une section.
Pour utiliser une couleur hors palette, saisissez son code dans le champ de texte du sélecteur, par exemple #2196F3. Bougez le curseur d’opacité pour une couleur translucide. Clear retire la couleur.
Garder les couleurs liées au thème
Un échantillon copie le code de la couleur dans l’élément. Si vous changez la palette du thème plus tard, cet élément garde l’ancienne couleur.
Pour qu’un élément suive la palette, utilisez plutôt une classe de couleur. Ouvrez les Settings de l’élément et choisissez une pastille sous HTML classes :
| Pastille | Rôle |
|---|---|
| Primary background, Secondary background et autres | Couleurs Bootstrap de votre thème |
| Primary text color, Secondary text color et autres | Couleurs de texte Bootstrap de votre thème |
| Background color: DXPR Theme primary | La couleur Primary de DXPR Theme, avec sa couleur de texte assortie |
| Text color: DXPR Theme accent1 | La couleur Secondary de DXPR Theme pour le texte |
Les pastilles DXPR Theme n’apparaissent que quand DXPR Theme est activé.
Champs de couleur par élément
| Où | Ce qu’elle colore |
|---|---|
| Style, panneau : Font color, Border color, Background | L’élément lui-même |
| Hover style, panneau : les mêmes champs | L’élément pendant que le pointeur est dessus |
| Button : Type | Un jeu de couleurs de bouton prêt à l’emploi |
| Card : Type | Le fond et le texte de toute la carte |
| Alert : Type | Success, Info, Warning ou Danger |
| Section : Background effects > Gradient | Un fondu de deux couleurs |
Couleur lisible
- Gardez assez de contraste entre texte et arrière-plan. WCAG 2.1 niveau AA exige au moins 4,5 sur 1 pour le texte normal.
- N’utilisez pas la couleur seule pour porter un sens ; associez-la à un libellé ou une icône.
- Alternez les arrière-plans de section, comme blanc, gris clair et votre couleur de marque, pour donner un rythme aux longues pages.
Si vous ne voyez pas vos couleurs
- Le sélecteur de couleur ne montre aucun échantillon. Le thème par défaut de votre site ne fournit aucune palette de couleurs. Saisissez vos codes de couleur, ou utilisez un thème avec une palette, comme DXPR Theme.
- Un élément garde son ancienne couleur après changement de la palette du thème. Un échantillon stocke un code de couleur fixe. Choisissez le nouvel échantillon, ou passez à une pastille de couleur sous HTML classes, qui suit la palette.
- Background ou Font color est sans effet sur une carte. Un Type de carte autre que Default définit ses couleurs avec des classes du thème qui gagnent. Réglez d’abord Type sur Default.
Et ensuite ?
- Faire réagir les éléments au survol : changer les couleurs quand les visiteurs pointent un élément.
- Styliser vos cartes : appliquer vos couleurs aux cartes.
- CSS personnalisé : définir des règles de marque non couvertes par les panneaux.