Comment créer un système de couleurs avec divi 5

Les choix de couleurs aléatoires conduisent rarement à une conception cohérente. Si vous créez des sites Web professionnellement, vous avez besoin d'un système intentionnel. Vous pouvez construire un véritable système de couleurs à l'intérieur de Divi 5 en utilisant les variables de gestion des couleurs et de conception. Ce sont des couleurs que vous définissez directement dans l'éditeur visuel, peut accéder dans n'importe quel champ de couleurs et venir avec de nombreuses autres commodités (que nous vous montrerons ci-dessous).

Ce message vous montrera comment configurer un système de couleurs flexible et évolutif dans Divi 5.

Qu'est-ce qu'un système de couleurs?

Un système de couleurs est essentiellement une palette de couleurs pré-planifiée utilisée de manière cohérente sur votre site. Il aide tout à paraître intentionnellement de style plutôt que jeté au hasard. Pour un bon système, vous avez généralement besoin:

• Couleur primaire : couleur de marque principale.
• Couleur secondaire : supports et contrastes avec le primaire.
• Couleur du texte : clair et lisible pour les titres et les paragraphes.
• Accent : Autres couleurs pour les alertes, les avis et autres éléments importants (facultatif).
• Couleurs d'arrière-plan : généralement neutres ou teintes subtiles.

La règle 60-30-10 s'applique à la couleur dans la conception Web. Généralement, les couleurs neutres (comme les arrière-plans de section et l'espace négatif) seraient utilisés pour 60% de la conception, une couleur primaire pour 30% et des couleurs secondaires / accentuer pour les 10% restants.

Comment choisir les couleurs du site Web

Les couleurs de la marque et les couleurs utilisées sur votre site Web ne sont pas des décisions à prendre à la légère. La création d'une palette de couleurs utile dépend des compétences de votre créateur, de la psychologie des couleurs, de l'industrie et de la différenciation de marque. Mais une fois que vous avez vos couleurs de base et vos actifs de marque (comme les variations de logo), vous pouvez commencer à créer un système de conception.

Vous pouvez effectuer quelques tâches rapides pour vous préparer à la création de votre site Web si vous avez des ressources de conception limitées. Tout d'abord, faites une lecture superficielle de la psychologie des couleurs. Recherchez les valeurs de la marque que vous souhaitez transmettre (confiance, jeunesse, innovation, etc.) et essayez de faire correspondre les couleurs en fonction de ces valeurs. Ensuite, regardez certaines marques reconnaissables au ménage qui, selon vous, correspondent aux valeurs de votre marque. Quelles couleurs utilisent-ils? Comment les utilisent-ils sur leur site Web, leurs publicités et leurs publications sociales?

Les valeurs de votre entreprise peuvent même être déterminées par le type de travail que vous effectuez. Les serruriers et les plombiers doivent être fiables, donc le bleu est un excellent moyen de transmettre cela. Les planificateurs financiers et les paysagistes traitent de la croissance et de la durabilité (dans leurs domaines respectifs), donc Green est une bonne ancre là-bas. Les producteurs de fleurs, les garderies et les restaurants peuvent s'appuyer sur les rouges et les jaunes pour relier l'énergie et la vitalité à leurs marques. Une fois que vous avez une idée générale, utilisez quelque chose comme des refroidisseurs pour créer une palette simple.

Construire votre système de couleurs dans Divi 5

Divi 5 est livré avec le gestionnaire de variables de design, qui est le moyen le plus simple de gérer les couleurs mondiales. Dans ce document, vous avez quatre couleurs mondiales pré-assignées pour que vous puissiez travailler avec la boîte. Ils sont:

1. Couleur primaire
2. Couleur secondaire
3. Couleur de texte en tête
4. Couleur de texte du corps

Étape 1: Définissez vos couleurs de base comme des variables

Dans la barre latérale de la main gauche de Divi, ouvrez le gestionnaire de variables de conception. Trouvez la section des couleurs et vous devriez voir ces quatre valeurs par défaut différentes.

Ces quatre étiquettes ne peuvent pas être supprimés, mais vous pouvez choisir la couleur à définir chacun. En plus de ces quatre, vous pouvez ajouter autant de couleurs que vous le souhaitez en cliquant sur le bouton Ajouter une couleur globale . Allez-y et entrez les valeurs hexadécimales des couleurs du générateur de couleurs.

Ces variables deviennent instantanément disponibles partout dans le constructeur visuel de Divi, qui est super pratique. Mais assurez-vous de les sauver!

Étape 2: Créez des nuances et des teintes avec des couleurs HSL

En utilisant les filtres HSL de Divi, nous pouvons créer des teintes (versions plus claires de nos couleurs) et des nuances (versions plus sombres de nos couleurs). Pour ce projet, nous ne ferons que des variations pour les couleurs primaires et secondaires. Vous pouvez utiliser un générateur de palettes de couleurs pour créer ces variations de couleurs.

La première étape ici est de créer une autre couleur mondiale. Cependant, au lieu de coller une valeur hexagonale, sélectionnez une couleur existante pour créer des variations (nuances et teintes).

Maintenant, nous devons appliquer un filtre à cette couleur de base pour créer une variation. Cliquez sur la puce de couleur, puis sélectionnez «Filtrez la couleur» ou cliquez sur l'échantillon de couleur pour votre nouvelle variable de couleur relative.

Faites cela pour chacune de vos variations de couleur. Assurez-vous de donner à vos variations de couleur des noms reconnaissables et d'économiser.

Par exemple, comme la couleur primaire est assez sombre, nous pouvons ajouter quelques teintes plus claires et quelques nuances plus sombres. Cela devrait me donner beaucoup d'options lorsque nous appliquons mon système de couleurs à une conception de page.

Répétez les étapes ci-dessus pour vos couleurs secondaires et / ou accentuées. Lors de la création de ces variations, sélectionnez toujours une couleur de base, puis appliquez des filtres dessus. De cette façon, si jamais vous modifiez votre couleur primaire, ces variations suivront le pas.

Appliquer vos couleurs en designs avec divi

Vos variables existent maintenant. Temps pour les utiliser. Nous allons commencer par une page Divi vierge et travailler séquentiellement vers une disposition bien conçue.

Étape 1. Créez un wireframe de votre page

Vous pouvez commencer à partir d'un wireframe au lieu d'une page vierge, ce qui peut vous aider à mieux comprendre votre système de couleurs. Une fois que vous comprenez la structure et le flux généraux d'une page, vous pouvez commencer à faire vos choix de conception. Vous pouvez également utiliser l'un des nombreux packs de mise en page ou sites de démarrage de Divi. Peu importe s'ils ont déjà des couleurs définies; Nous pouvons facilement les changer.

Pour cet exemple, nous avons choisi de modifier le pack de mise en page de conseil et d'utiliser sa disposition de page d'accueil. Si vous faites quelque chose de similaire, vous pouvez importer les préréglages. Cependant, vous voudrez modifier les couleurs de ces préréglages. Par souci de simplicité, nous modifierons les styles directement au niveau du module / élément.

Étape 2. Typographie et couleur

Par défaut, Divi utilise vos couleurs globales de cap et de texte du corps, ce qui rend votre texte propre et lisible. Vous pouvez toujours remplacer ces choix de couleurs prédéterminés en modifiant la couleur du texte sur les modules ou les préréglages, mais vous ne devriez pas avoir à le faire trop souvent.

Remarquez comment la couleur de cap ne se définit pas dans le module. Divi attribue automatiquement la couleur globale aux en-têtes et au texte du corps pour vous. Bien sûr, vous pouvez le remplacer en sélectionnant une couleur différente.

Vous pouvez personnaliser la couleur que les liens peuvent les rendre plus visibles et attirer des clics.

Il peut y avoir d'autres modules (à part les modules de cap et de texte) avec du texte que vous souhaitez styliser. Des modules comme le formulaire de contact, le compte à rebours et le module de blog peuvent tous exiger que les couleurs soient appliquées de manière unique.

Étape 3. Boutons de style

Les boutons de Divi sont simples par défaut et prennent votre couleur principale. Mais vous n'êtes pas obligé de prendre cette décision si vous voulez quelque chose de différent. Ouvrez le panneau Paramètres du module, accédez à l'onglet Design et sélectionnez le bouton . Sous les paramètres de bouton, activez «Utilisez des styles personnalisés pour le bouton». Définissez votre arrière-plan sur votre couleur globale de choix et votre texte de bouton sur une couleur lisible, comme le blanc.

Si vous avez deux boutons côte à côte ou plusieurs boutons sur la page, vous pouvez créer un préréglage de bouton séparé pour un style de bouton secondaire en utilisant votre couleur secondaire ou un autre accent.

Créer des états de survol avec des teintes et / ou des nuances

Les états de survol ajoutent l'interaction et un sens de l'objectif. Utilisez vos teintes et nuances antérieures avec les styles de survol. Il est évident de mettre en œuvre sur les boutons, mais il peut également être utilisé subtilement ailleurs.

Cliquez sur l'icône du curseur à côté de l'option de couleur d'arrière-plan pour activer les états de survol. Définissez votre couleur d'arrière-plan de survol. Lorsque les utilisateurs planent sur le bouton, il répond visuellement, guidant naturellement l'interaction.

Étape 4. Création de sections avec des préréglages et gradients en couleur

Les sections de Divi ont des arrière-plans transparents par défaut. Cela signifie que s'ils sont restés non set, ils se présenteront généralement comme blancs. Vous pouvez ajouter de l'intrigue en créant des variations de couleurs neutres en fonction de la teinte de l'une de vos couleurs principales.

Cette couleur d'arrière-plan est proche du noir, mais partage la même teinte de base que la couleur principale pour lui donner une subtile cohésion du thème.

Vous pouvez également expérimenter des gradients en utilisant vos variantes de couleur. L'astuce ici n'est pas d'utiliser trop de combinaisons de couleurs. Vous voulez un design discipliné et cohésif basé sur des accords de couleurs et une hiérarchie.

Un rappel est en ordre à ce stade. Vous souhaitez enregistrer la plupart de ces accords et décisions de couleurs en préréglages (groupes d'options ou préréglages élément). Une fois que vous avez créé et mis en œuvre vos variables de conception dans votre conception via des préréglages, vous pouvez utiliser votre système de conception pour créer des pages ultérieures beaucoup plus rapidement. Cela garantit également que vous travaillez avec des modèles de conception cohérents sur tout votre site.

Et si vous déterminez plus tard qu'une couleur est légèrement éteinte, vous pouvez ajuster les valeurs HSL de la couleur de base, et toutes les instances de cette couleur (et toutes les couleurs relativement créées en fonction de cette couleur) changera pour vous.

Envelopper votre système de couleurs divi 5

Un système de couleurs réfléchi est l'une des victoires les plus faciles de la conception Web, et Divi 5 vous donne les outils pour le faire fonctionner pour vous. En quelques étapes, vous pouvez:

• Définissez les couleurs de votre marque de base comme des variables de conception réutilisables
• Les étendez-les dans des nuances et des teintes utiles avec des filtres HSL
• Appliquez-les de manière cohérente sur le texte, les boutons, les formulaires et les sections
• Enregistrez vos choix en tant que préréglages afin que chaque nouvelle page suit les mêmes règles

Le gain est plus grand que l'esthétique. Un système de couleurs solides crée de la clarté, dirige les visiteurs vers l'action et rend votre marque cohérente dans tous les coins de votre site. Et parce que tout en divi est axé sur la variable, un ajustement à une couleur de base peut s'onduler instantanément sur un site entier. Cela signifie moins de bricolage et plus de confiance que votre conception tiendra ensemble à mesure que vous évoluez.