Transformer les couleurs de la marque de votre client en un système de couleurs divi 5

Les couleurs de la marque commencent généralement par des codes hexadécimaux appliqués entre les en-têtes, les boutons et les arrière-plans. C'est assez simple au départ, mais à mesure que la mise en page se développe, vous avez souvent besoin de variations de couleurs plus légères, d'états de planage ou d'accents complémentaires. Gérer cela manuellement peut devenir désordonné.

Le nouveau système de couleurs de Divi 5 facilite cela en vous permettant de définir une palette une fois et de construire des nuances connectées de votre palette de couleurs initiale. Chaque couleur reste en synchronisation, même si le design évolue. Dans ce guide, vous apprendrez à créer un système de couleurs flexible et évolutif qui maintient tout cohérent sur le site de votre client.

Comprendre le système couleur de Divi 5

Si vous avez travaillé avec les couleurs mondiales dans Divi 4, vous savez déjà à quel point il est utile de définir une couleur une fois et de l'appliquer sur votre site. Divi 5 s'appuie sur cette même idée, mais cette fois, il transforme la couleur en un système complet qui évolue avec vous.

Abonnez-vous à notre chaîne YouTube

Voici les trois améliorations majeures:

Il commence par des variables de conception. Vous définissez votre palette de marque dans l'onglet Couleurs dans Variable Manager, et ces valeurs deviennent votre fond de teint. Une fois défini, ils sont prêts à l'emploi dans n'importe quel module ou section. Et lorsque la marque évolue sur toute la ligne, il vous suffit de mettre à jour les variables en un seul endroit. Tout ce qui leur est lié s'adapte à lui seul.

La deuxième mise à niveau est le filtre de couleur HSL. Les curseurs vous permettent d'ajuster la teinte, la saturation et la légèreté, vous donnant plus de contrôle lorsque vous travaillez avec le ton et le contraste.

Si votre vert primaire semble trop dur pour un fond, vous pouvez le ramollir légèrement, ajuster la luminosité et enregistrer cette version comme sa variable. Ce sera une toute nouvelle couleur, mais elle est toujours liée à la couleur d'origine.

Cela ouvre également un espace pour penser dans les relations plutôt que des valeurs isolées. Vous pouvez relier les variables ensemble afin que l'on reste toujours à une certaine distance d'un autre, comme plus sombre, plus léger, légèrement plus chaud ou plus tamisé. Ceux-ci sont appelés couleurs relatives, qui est la troisième amélioration.

Une couleur de survol, par exemple, peut être définie comme 20% plus foncée que la primaire. Si la couleur primaire change, l'état de survol conserve sa relation sans avoir besoin d'ajustements manuels.

Ce système en trois parties crée un système de couleurs de travail flexible et ancré. Vous n'appliquez pas seulement les couleurs un module à la fois; Vous construisez une palette qui peut changer au besoin tout en gardant votre conception cohérente et propre.

Apprenez tout sur le nouveau système de couleurs de Divi

Si vous comptez sur des codes hexadécimaux jusqu'à présent, c'est le point où ce flux de travail commence à se sentir limité. Et c'est votre signal pour passer à un système de couleurs prêt pour le futur.

Transformer les couleurs de la marque de votre client en un système de couleurs divi 5

Maintenant que vous savez comment fonctionne le système couleur de Divi 5, passons à quoi il ressemble dans un vrai projet. Pour cet exemple, nous avons importé la disposition de la page d'accueil de la réalité augmentée de la bibliothèque Divi.

Construisons un scénario. Supposons qu'un client souhaite ajouter une couleur complémentaire pour équilibrer le vert audacieux utilisé sur tout le site. Au lieu de l'ajouter manuellement à quelques endroits, prenons cela comme une chance de déplacer la disposition vers le système couleur de Divi 5 afin que nous n'ayons pas à apporter des modifications manuelles à l'avenir si nous le demandons à nouveau.

Si vous regardez la disposition, vous remarquerez que le même vert apparaît à plusieurs endroits, tels que des titres, des boutons et des éléments d'accent. Chacun utilise un code hexadécimal fixe. Notre objectif est de les remplacer par des variables de couleur et de construire une palette qui peut s'adapter aux changements plus tard.

Normalement, la mise à jour d'une mise en page comme celle-ci signifierait l'édition de chaque module à la main. Mais dans les étapes suivantes, nous utiliserons les variables de couleur, les filtres HSL et la logique couleur connectée pour créer quelque chose de plus stable. Vous pouvez suivre la même mise en page ou utiliser votre projet comme base.

1. Enregistrez la couleur principale de votre client en tant que variable de conception

Si votre client a partagé un nouveau code hexadécimal ou si vous vous en tenez à une couleur de marque existante, la première étape consiste à l'ajouter au gestionnaire de variables de conception. Cela devient votre couleur de base et sera le fondement des variations de couleur que vous construisez autour d'elle.

Ajout d'une couleur primaire

Pour commencer, ouvrez le gestionnaire de variables et basculez dans l'onglet Couleurs .

Le panneau peut déjà inclure des valeurs par défaut pour le texte primaire, secondaire, de cap et corporel. Dans le champ de couleur primaire, entrez le code hexadécimal pour la couleur principale de la marque et cliquez sur Variables Enregistrer.

Ajout d'une couleur secondaire

Ensuite, nous allons créer une version relative de cette couleur secondaire en utilisant le primaire comme base. De cette façon, toute modification future de la couleur de base se reproduira automatiquement.

Dans cet exemple, comme nous ajoutons une couleur complémentaire pour équilibrer le vert existant, nous attribuerons cela comme couleur secondaire. L'arrière-plan de la disposition est noir, donc ce jumelage se démarque clairement.

Si vous ne travaillez qu'avec une seule couleur pour le moment, n'hésitez pas à quitter le créneau secondaire en noir.

Cliquez sur l'échantillon de couleur secondaire pour ouvrir la fenêtre de couleur. Toutes vos valeurs enregistrées seront répertoriées sous les couleurs mondiales, avec la couleur primaire répertoriée en premier.

Sélectionnez-le. Cela apporte la couleur de base comme point de départ.

Maintenant, cliquez à nouveau sur l'échantillon pour rouvrir la fenêtre, puis ouvrez la liste déroulante des filtres de couleur . Cela révèle les curseurs HSL, où vous pouvez ajuster la teinte, la saturation et la légèreté.

Utilisez ces curseurs pour façonner la nouvelle couleur. Une fois que vous en êtes satisfait, enregistrez. Et juste comme ça, vous avez une couleur secondaire connectée au primaire.

Si vous souhaitez garder la couleur secondaire noire mais le liez toujours au primaire, tournez à la fois les curseurs de légèreté et de saturation jusqu'à -100.

Pour créer une teinte plus sombre à la place, laissez la teinte et la saturation en tant que ce qui est et ne réduisez que la légèreté.

À ce stade, vous pouvez expérimenter librement. Ajustez les valeurs jusqu'à ce que le ton convient à votre conception. Que la nouvelle couleur se mélange doucement avec la palette de marque ou que cela se démarque comme un contraste, il restera lié au primaire et évoluera avec lui.

2. Créez des couleurs de support à l'aide de réglages HSL

Avec vos couleurs primaires et secondaires en place, l'étape suivante consiste à étendre la palette. Ces couleurs de soutien donnent votre place à respirer. Ils ajoutent de la flexibilité, du contraste subtil et du rythme visuel tout au long de la disposition.

Pour créer ces variations, ouvrez le panneau HSL et ajustez les curseurs:

• Créez des nuances plus claires pour les sections ou les arrière-plans qui ont besoin de contraste sans attirer l'attention.
• Utilisez des tons légèrement plus foncés pour les boutons, les états de volants ou les titres audacieux qui doivent se démarquer.
• Démêtez légèrement la teinte ou la saturation pour former des couleurs d'accent. Cette couleur est idéale pour les diviseurs, les icônes ou d'autres petits reflets visuels.

Nous vous montrerons comment le faire une fois, et vous pouvez suivre la même approche pour définir toutes les nouvelles couleurs que vous souhaitez. Disons que nous voulons faire une version volante de la couleur secondaire. Nous allons créer une nouvelle variable de couleur , lui donner un nom clair, ajuster les curseurs pour obtenir le bon ton et l'enregistrer.

Maintenant que la variable est enregistrée, nous pouvons l'appliquer à l'état de survol d'un bouton, comme toute autre couleur.

Lorsque vous ajoutez des couleurs de support, essayez de les considérer comme des expressions tonales de la marque, des variations qui reflètent différents niveaux d'accent, de contraste ou d'humeur. Par exemple, les tons doux fonctionnent bien pour les arrière-plans, les audacieux attirent l'attention sur les appels à l'action et les tons sourds sont utiles pour les superpositions ou le texte secondaire.

Vous pouvez techniquement créer tous ces éléments manuellement à l'aide de codes hexadécimaux. Et si vous ne construisez qu'un site d'une page, cela pourrait être bien. Mais au moment où votre client veut changer une couleur de base, chaque raccourci commence à montrer ses limites. Ce que nous voulons dire, c'est que vous ne suiveriez pas le nombre d'endroits où vous avez utilisé une nuance d'arrière-plan sur un site Web. Dans ce scénario, la construction de ces variations en tant que variables connectées prend un peu plus de temps à l'avance, mais une fois qu'ils sont en place, ils garderont votre conception cohérent, peu importe la fréquence des choses.

3. Remplacer les couleurs statiques existantes par des variables

Avec vos nouvelles variables de couleur enregistrées, il est temps de remplacer les valeurs hexadécimales codées en dur utilisées tout au long de la disposition. C'est là que passer de statique à dynamique commence à faire une réelle différence, non seulement dans la cohérence, mais dans la facilité avec laquelle il devient de maintenir la conception au fil du temps.

Commencez par numériser la disposition pour tous les éléments toujours en utilisant des valeurs de couleur fixe. Cela peut inclure des boutons, des en-têtes, des arrière-plans, des icônes ou des séparateurs de section. Partout où la couleur de la marque a été appliquée manuellement est désormais l'occasion de la connecter à votre nouveau système.

Pour ce faire, Divi vous offre deux options: étendre les attributs et trouver et remplacer. Les deux vous permettent de mettre à jour plusieurs éléments rapidement, mais chacun brille dans une situation légèrement différente.

• Utilisez des attributs Extend lorsque vous avez déjà appliqué la variable correcte à un élément et que vous souhaitez faire correspondre le reste.
• Utilisez Find and Remplacez lorsque vous souhaitez échanger une valeur hexagonale spécifique partout où elle apparaît, même si elle est appliquée sur différents éléments.

Commençons par des attributs d'étendue.

Utilisation d'attributs d'étendue

Dans cet exemple, nous voulons attribuer la nouvelle couleur secondaire à tous les H2 dans la disposition. Nous allons commencer par l'appliquer à un seul d'entre eux.

Une fois cela fait, nous cliquerons avec le bouton droit sur l'élément et sélectionnerons les attributs étendus. Dans le panneau qui apparaît, nous allons définir la portée sur la page entière et le type d'élément au texte.

En un clic, chaque H2 à travers la page adopte la même couleur secondaire, qui restera en synchronisation car elle est liée à votre couleur principale si cette couleur de base change jamais.

Utilisation de trouver et de remplacer

Essayons maintenant de trouver et de remplacer, ce qui fonctionne particulièrement bien lorsque vous souhaitez échanger une valeur de couleur spécifique sur le site.

Dans ce cas, nous voulons mettre à jour la couleur du texte du corps. Pour ce faire, nous irons aux paramètres> Design> Couleur du texte du corps , cliquez avec le bouton droit et choisissez Find & Remplacer. Ensuite , nous planerons sur le champ de valeur de remplacement et sélectionnerons notre nouvelle variable.

C'est tout ce qu'il faut. Chaque instance de cette ancienne couleur est désormais mise à jour avec votre nouvelle variable.

Il n'y a pas de méthode unique que vous devez suivre ici. Extend Attributs est le moyen plus rapide de transporter ce changement sur des éléments similaires si vous avez déjà mis à jour un module manuellement. Si vous travaillez toujours avec des codes hexagonaux statiques et que vous souhaitez les changer en vrac, trouver et remplacer vous aidera à vous déplacer rapidement.

Choisissez l'approche qui facilite le nettoyage. Une fois cela fait, vous verrez le véritable avantage de ce système: comment votre conception réagit lorsque vous changez une seule couleur.

Tester votre nouveau schéma de couleurs

Tout ce que vous avez fait a été de mettre en place. C'est maintenant à ce moment que toute la configuration commence à afficher sa valeur.

Avec votre système en place, essayez de changer la couleur primaire. L'ensemble de la disposition répondra en secondes - arrière-plans, boutons, effets de survol et tous les autres éléments connectés se mettront à jour instantanément.

Les futures mises à jour sont également plus faciles que jamais. Supposons que votre client souhaite passer du vert néon à un jaune plus chaud, ce qui signifie mettre à jour le site Web entier, chaque page et chaque module manuellement.

Cela semble douloureux, mais pas pour vous. Vous faites simplement mettre à jour la couleur primaire et le reste du site suit.

Ou peut-être que c'est le Black Friday et ils ont demandé une palette de couleurs rouge-noir. Vous mettez à jour le primaire à un ton doré, puis ajustez le secondaire en un rouge plus profond. La disposition s'adapte instantanément, jusqu'au dernier détail.

Dans certains cas, la couleur de la marque peut rester la même, mais le secondaire a besoin d'un rafraîchissement. C'est juste une question d'ajustement des curseurs HSL. Pas besoin de toucher chaque bouton ou arrière-plan individuellement.

Une grande partie du travail des couleurs consiste à maintenir l'équilibre. Vous gardez les variations alignées même lorsque la couleur du noyau change. Ce système vous donne un moyen de contrôler le ton, le contraste et l'accent sur votre conception sans avoir besoin de retracer vos étapes.

Et rappelez-vous, ce que nous avons fait ici n'est qu'une seule page. Parce que les variables de conception sont globales, cette configuration s'étend à l'ensemble de votre site, y compris les en-têtes, les pieds de page, les articles de blog, les pages de destination et tout ce qui est lié à votre palette.

Cela signifie que chaque future mise à jour, que ce soit une campagne saisonnière, une rafraîchissement de marque ou une nouvelle direction couleur, commence à partir d'un seul endroit. Vous mettez à jour quelques variables et regardez tout correspondre à votre nouveau jeu de couleurs.

Divi rend votre flux de travail couleur à impterner à l'avenir

Il n'est pas difficile de choisir une nuance de bleu. Ce qui est difficile, c'est de garder ce bleu cohérent dans des dizaines de modules, de mises en page, de pages et de campagnes, et de le mettre à jour plus tard sans casser quelque chose dans le processus.

Divi 5 simplifie complètement cela. Avec des outils comme le nouveau système couleur, les filtres HSL et les variables de conception, vous pouvez gérer l'intégralité de votre identité visuelle à partir d'un seul endroit. Savoir que chaque couleur, à travers chaque mise en page, restera cohérente et facile à mettre à jour est ce que Divi 5 promet.

Et ce n'est que l'un des nombreux que nous avons fabriqués au cours des derniers mois, notamment Loop Builder, Flexbox Dayout et une interface complètement repensée pour les concepteurs de sites Web modernes. Si vous ne les avez pas encore explorés, c'est le moment idéal.