Comparaison des cueilleurs de couleurs Divi 4 et Divi 5

La couleur donne le ton avant qu'un seul mot ne soit lu, mais les cueilleurs de couleurs traditionnels rendent difficile l'obtention de la véritable cohérence de la marque. Au lieu de la précision, vous obtenez souvent des conjectures et des approximations de près.

C'est pourquoi Divi 5 repensait complètement son système de couleurs. Dans cet article, nous le comparerons directement au sélecteur de couleurs de Divi 4 et montrerons à quel point il est devenu plus puissant et flexible.

Les cueilleurs de couleurs ont comparé

Mettez-les côte à côte et vous verrez immédiatement à quel point la nouvelle interface est puissante. Le cueilleur de couleurs de Divi 4 nous a bien servi avec son spectre arc-en-ciel familier et son approche de traînée à sélection.

Vous faites glisser ce blanc encerclant pour choisir les couleurs, travailler avec des codes hexadécimaux et organiser les choses à travers les onglets enregistrés, globaux et récents. Ces petits triangles blancs sur les échantillons de couleurs vous ont dit lesquels étaient des couleurs mondiales.

Au-delà des looks, le cueilleur de couleurs de Divi 4 avait une excellente base. L'outil de couleur magique était assez intelligent, tirant des couleurs de votre page et des choix récents pour suggérer des palettes qui fonctionnaient réellement ensemble. Ce rythme commence à partir de zéro à chaque fois.

Où divi 4 s'est limité

Cependant, tout n'était pas parfait. Tout a utilisé uniquement des codes Hex ou RGBA. Obtenir une version plus légère de votre bleu signifiait deviner ou utiliser une autre application pour le comprendre. Si votre marque a souvent besoin de 20% plus sombres ou 40% de couleurs plus claires que la couleur principale de la marque, Divi 4 n'a pas pu le faire pour vous.

Chaque couleur vivait d'elle-même. Vous ne pouviez pas construire des systèmes de couleurs intelligents où les couleurs sont liées les unes aux autres à l'intérieur de Divi elle-même. La construction de rapports de contraste appropriés a pris un travail manuel en dehors de Divi.

Quels sont les 5 changements visuels de Divi

Divi 5 conserve le sélecteur de couleurs visuels mais ajoute des curseurs précis avec beaucoup plus d'options (nous en discuterons davantage). L'onglet global est devenu une icône de variable dynamique qui se connecte directement au système variable de Divi, qui comprend des couleurs.

Les échantillons de couleur eux-mêmes sont devenus plus intelligents; Ils vous montrent en fait avec quel type de couleur vous travaillez et comment il se connecte à votre système.

Ce que vous voyez, c'est Divi passer de la cueillette de couleurs individuelle à un système de couleurs. Divi 4 a été construit pour «J'ai besoin de ce bleu spécifique». Divi 5 a été construit pour «J'ai besoin d'un bleu qui est 20% plus léger que ma couleur principale et les mises à jour automatiquement lorsque je change complètement les couleurs de ma marque.»

L'interface a dû changer car ce qu'elle a changé.

Le nouveau cueilleur de couleurs de Divi 5

Notre équipe a reconstruit le système couleur car l'ancienne approche n'a pas pu gérer les workflows de conception modernes. Ce nouveau sélecteur se concentre sur la teinte, la saturation et la légèreté (HSL), les relations de couleur relative et l'intégration profonde avec le système variable de Divi 5.

Au lieu de travailler avec des codes hexagonaux isolés, vous pouvez désormais créer des familles de couleurs connectées où la modification d'une couleur met automatiquement à jour toutes les variations connexes. Il existe des curseurs séparés pour les teintes, la saturation, la légèreté et l'opacité, ce qui vous permet de faire des ajustements précis. L'interface vous montre exactement avec quel type de couleur vous travaillez via des indicateurs visuels.

Les échantillons de couleur affichent désormais des informations sur eux-mêmes. Vous pouvez voir si une couleur est une valeur statique, une variable ou une couleur relative avec des modifications HSL appliquées. Le système montre tous les détails des couleurs que vous devez connaître.

Comment fonctionne réellement le nouveau système

Les couleurs relatives commencent par une variable de couleur de base et vous permettent d'appliquer des variations. Choisissez votre variable bleu primaire, réduisez la légèreté de 20% et économisez comme la variable «Royal Deep Blue».

Picker de couleur HSL de Divi 5 Vs Divi 4's Color Picker

Les deux systèmes vous aident à gérer les couleurs sur votre site, mais fonctionnent de manière complètement différente. Comprendre cette différence explique pourquoi l'interface a dû changer de façon si spectaculaire et pourquoi la nouvelle approche accélère le bâtiment.

Comment fonctionnent les couleurs mondiales de Divi 4

Les couleurs mondiales de Divi 4 fonctionnaient comme un système de palette de base. Enregistrez votre marque en bleu une fois, puis cliquez dessus chaque fois que vous avez besoin de cette teinte exacte. Plus tard, échangez ce bleu contre un autre et regardez chaque bouton, en-tête et mise à jour d'arrière-plan sur l'ensemble de votre site.

La plupart des gens ont mis en place trois ou quatre couleurs de marque principales de cette façon. Il bat la chasse à travers des codes hexadécimaux ou essayant de vous rappeler si vous avez utilisé # 2E86C1 ou # 3498DB pour vos liens.

Le problème est venu plus tard lorsque vous aviez huit couleurs mondiales et que vous ne vous souvenez pas pourquoi vous avez sauvé cette nuance de gris particulière. Était-ce pour le texte? Borders? Représentations de fond? Les couleurs globales n'avaient pas d'étiquettes ou de descriptions pour faire du jogging.

Pourquoi Divi 5 a été déplacé vers des variables de conception

Les variables de conception gèrent désormais plus que les couleurs. Les polices, les nombres d'espacement, les images et les chaînes de texte obtiennent tous le même traitement. Tout vit dans un gestionnaire variable au lieu de flotter autour de différents panneaux.

Chaque variable obtient un nom et une description propres. Au lieu de «Global Color 3», vous pouvez l'appeler «en tête de gris textuel» ou «superposition de fond subtile». Six mois plus tard, vous saurez exactement à quoi cela sert.

Mais c'est là que les choses deviennent intéressantes. Les variables peuvent se référer mutuellement et former des relations. Réglez votre vert primaire comme fondation. Créez une «mousse brûlée» qui prend ce vert et réduit sa luminosité. Ensuite, construisez une «ombre (mousse brûlée)» qui apporte cette couleur de mousse brûlée et laisse tomber l'opacité à 15%.

Et, bien sûr, les trois variations mettent à jour automatiquement si vous modifiez votre vert primaire en orange. La version brûlée reste moins lumineuse que la couleur que vous choisissez, et l'ombre s'adapte en conséquence. Les relations collent.

La principale différence de pratique

Les couleurs mondiales signifiaient avoir la même couleur à plusieurs endroits. Les variables signifient avoir des relations de couleur qui s'adaptent ensemble. Les états de survol restent connectés aux couleurs de base. Les couleurs de l'ombre se rapportent à la palette de votre marque au lieu de vivre comme des gris aléatoires. Le système maintient ces connexions sans que vous ayez à faire du travail supplémentaire.

Configuration de votre système de couleurs dans Divi 4 vs Divi 5

La création d'un système de couleurs approprié détermine si votre site Web a l'air professionnel ou comme un patchwork de choix aléatoires. Les deux versions Divi offrent des moyens d'organiser vos couleurs, mais leurs approches ne pourraient pas être plus différentes. Voici comment créer des systèmes de couleurs dans chaque version et pourquoi le processus est important pour votre flux de travail de conception:

Configuration des couleurs en divi 4

Vos choix de couleurs façonnent la façon dont les visiteurs vivent votre site Web. Jetez un œil à l'approche de la gestion des couleurs divi 4 prend:

1. Ajoutez vos couleurs globales

La configuration des couleurs de Divi 4 reposait sur le système de couleurs mondiales et l'organisation manuelle. Vous commencerez par vous naviguer vers les options de couleurs de n'importe quel élément, puis créez des couleurs globales en accédant à l'onglet «global», en cliquant sur l'icône Plus à côté du sélecteur de couleurs, ou en modifiant une couleur globale existante en cliquant dessus. L'interface vous permet de saisir directement les codes hexadécimaux ou d'utiliser le sélecteur visuel pour sélectionner les couleurs.

Avez-vous déjà une couleur appliquée que vous souhaitez convertir? Cliquez avec le bouton droit sur lui et choisissez «Convertir en global». Cela ajoute cette couleur exacte à votre palette globale et change le module pour utiliser la version globale. C'est super utile lorsque vous réalisez que vous auriez dû rendre quelque chose de mondial dès le début.

Suggestions de couleurs magiques

La fonction de couleur magique de Divi 4 construit des palettes coordonnées à partir de vos choix de conception existants. Au lieu de deviner quelles couleurs fonctionnent ensemble, cet outil crée des suggestions en fonction de ce que vous avez déjà utilisé.

Recherchez les trois points (ellipses) sous la pipette de votre couleur active. Cliquez sur ces points pour obtenir un tas de suggestions de palettes de couleurs. Divi regarde les couleurs que vous avez déjà utilisées sur votre page et dans les projets récents et montre vos combinaisons qui devraient fonctionner ensemble.

2. Appliquer vos couleurs globales

Les utiliser est assez simple une fois que vous avez mis en place des couleurs globales. Cliquez sur n'importe quel module où vous souhaitez appliquer une couleur. Ensuite, dirigez-vous vers l'onglet Design et trouvez le paramètre de couleur que vous souhaitez modifier.

Cliquez sur Global pour voir votre palette de couleurs globale. Cliquez sur n'importe quel échantillon de couleur globale et il s'applique immédiatement à votre module.

3. Modification de vos couleurs globales

Voici où les choses deviennent intéressantes. Lorsque vous voulez changer une couleur globale, vous n'avez pas besoin de chasser à travers chaque module qui l'utilise. Accédez simplement à n'importe quel paramètre de couleur, cliquez sur l'onglet global et trouvez la couleur que vous souhaitez modifier.

Configurer vos couleurs dans Divi 5

La construction d'un système de couleurs approprié en Divi 5 prend quatre étapes. Suivre cette approche bat l'ancienne méthode de devine des codes de couleur chaque fois que vous avez besoin d'une teinte légèrement différente:

1. Créez votre variable de couleur de base

Ouvrez le gestionnaire de variables de conception et ajoutez les couleurs de votre marque principale en tant que variables de couleur primaire et secondaire existantes. Vous pouvez également ajouter plus de couleurs, telles que les couleurs tertiaires ou accentuées. Ceux-ci deviennent vos couleurs de fond de teint. Vos couleurs de base doivent représenter votre palette de marque principale, qui définit votre identité visuelle.

2. Construisez des couleurs relatives de votre base

Vous pouvez maintenant créer des variations de couleur liées à vos couleurs de base. Ajoutez une nouvelle couleur dans le gestionnaire de variables de design et choisissez votre couleur de base.

Utilisez les curseurs HSL pour l'ajuster: inférieure à 25% pour le texte de la cap, 20% pour le texte du corps; Augmentez la légèreté de 20% pour les états de survol ou modifiez la saturation pour les arrière-plans en sourdine. Donnez à ces variations des noms clairs comme «Orange Deep» et «Crimson brillant» ou «État de volage (couleur primaire)» »,« fond en sourdine (couleur secondaire) ».

Toutes les variables de conception peuvent être empilées, vous pouvez donc créer plus de couleurs à partir de vos créées. Ils restent tous connectés au système.

Si vous modifiez votre couleur de base plus tard, ces couleurs connexes se mettent à jour automatiquement, en gardant les relations intactes.

3. Appliquez des variables à vos éléments

Utilisez l'icône de contenu dynamique dans n'importe quel champ de couleur pour accéder à vos variables. L'interface montre si chaque couleur est statique, une variable ou une couleur relative avec des modifications HSL.

Choisissez parmi votre système de couleurs organisé au lieu de créer des couleurs ponctuelles aléatoires qui brisent la consistance.

Lorsque vous modifiez les propriétés de l'une de vos couleurs de base ou de votre base, tout ce qui est hérité de ceux-ci s'adaptera automatiquement aux nouvelles modifications. Pas besoin de frotter et de remplacer manuellement les couleurs lorsque vous décidez d'un rafraîchissement de marque.

4. Construire des préréglages qui font référence aux variables de couleur HSL

Créez votre stratégie à l'aide de préréglages de groupe d'options pour des pièces de conception spécifiques. Ces préréglages diffèrent des préréglages des éléments. Le groupe d'options préfère les groupes de style cible comme les couleurs d'arrière-plan, de bordure ou de texte à l'aide de vos variables.

Enregistrez une ombre en tant que groupe de groupe d'options à l'aide d'une variable de couleur d'ombre en fonction de votre couleur principale.

Utilisez ce préréglage sur des colonnes, des sections, des lignes et des modules.

Créez des préréglages de groupe d'options séparés pour différentes couleurs: une pour les bordures avec votre couleur d'accent, une autre pour le texte avec votre couleur secondaire, etc. Mélangez ces préréglages sur des éléments sans changer d'autres styles.

Les préréglages d'éléments enregistrent les configurations complètes du module, y compris le contenu et tous les styles. Faire un élément préréglé pour un bouton stylé verrouille les préréglages et variables de couleur du groupe d'options utilisées. L'appliquer instantanément vous donne exactement le même bouton.

5. Déploiement des couleurs sur votre site

La fonction d'attributs Extend va plus loin en vous permettant de copier des propriétés de conception entre les éléments. Lorsque vous avez perfectionné le schéma de couleurs d'une icône en utilisant vos variables, vous pouvez étendre ces attributs à d'autres icônes sur votre ligne, votre page ou votre site entier.

Cela maintient vos relations couleur tout en répartissant un style cohérent sans travail manuel.

La fonction de recherche et de remplacement de Divi 5 accélère le processus de conversion pour les sites existants par des couleurs statiques dispersées. Cliquez avec le bouton droit sur n'importe quel champ de couleur et sélectionnez «Rechercher et remplacer».

Définissez votre portée pour cibler des éléments spécifiques, des sections entières ou toute la page. Sous «Remplacez par», choisissez votre nouvelle variable dans l'onglet global. Vérifiez «Remplacer toutes les valeurs trouvées» pour échanger chaque instance de cette couleur par votre variable.

Cela fonctionne parfaitement lors de la migration des conceptions plus anciennes vers le nouveau système de couleurs. Vous pouvez remplacer des dizaines d'oranges similaires mais non identiques en secondes par une variable cohérente.

Tous les aspects fonctionnent ensemble: établissez vos variables de couleur, utilisez la recherche et remplacez pour nettoyer les incohérences existantes, puis utilisez des attributs d'étendue pour maintenir les normes de conception lorsque vous construisez de nouvelles sections. Ensuite, créez des pages normalement, car les styles peuvent être facilement appliqués à l'aide de groupes d'options et de préréglages d'élément.

Le nouveau sélecteur de couleurs s'adaptera à votre workflow

Le système couleur de Divi 5 résout les problèmes de flux de travail qui ralentissent les projets depuis des années. Vous n'avez plus à utiliser des outils externes pour trouver la bonne teinte. Les curseurs HSL vous donnent un contrôle précis sans quitter le constructeur.

Vos décisions de couleur restent connectées grâce aux variables de conception. Lorsque vous modifiez la couleur de votre marque principale, les couleurs connexes se mettent à jour automatiquement tout en gardant leurs relations. Cela bat manuellement chasser chaque variation bleue que vous avez créée à l'œil.

Essayez le nouveau système de couleurs dans Divi 5 aujourd'hui!