Tout savoir sur Divi et les couleurs
Dans cette nouvelle vidéo WordPress Divi, je vous parle de couleurs. Savoir bien gérer les couleurs d’un site web est essentiel en webdesign
Dans ce tutoriel Divi, je passe en revues les différentes palettes de couleurs du Divi Builder (la palette par défaut de sélectionneurs de couleurs, la palette globale ainsi que la palette pourcentage), nous verrons où elles se situent et comment les utiliser. Nous parlerons également de l’option dégradé pour les fonds.
Nous utiliserons le thème Divi et son génial Divi Builder qui vous permettra de créer visuellement et facilement vos pages web sous WordPress. Si vous n’avez pas encore votre licence Divi, je vous encourage à l’acheter c’est vraiment un achat que vous ne regretterez pas ! Obtenez ici une réduction sympa de -20%.
Les codes des couleurs du web
Avant de vous parler des couleurs dans Divi, voici un petit rappel des couleurs utilisées sur le web lors de création de site web dans le code html et CSS.
Il existe plusieurs manières de nommer et de faire appel aux couleurs dans le code.
Voyez qu’ici cette couleur bleue peut être appelée de différentes manières soit en utilisant le code :
Name, rgb, hex, hsl, hwb, cmyk, Ncol. Tous ces codes sont reconnus par la plupart des navigateurs et sont l’expression de la même couleur qui est ici ce bleu.
Dans Divi, la code Hex (hexadecimal avec le #) ainsi que le RGB sont les 2 codes couleurs utilisés. Vous allez peut être vous demander pourquoi utiliser 2 codes plutôt qu’un seul ? Eh bien, la raison c’est qu’avec une couleur codée en RGB, il sera possible de lui ajouter un paramètre Alpha qui est un paramètre de transparence, on aura ainsi un code RGBA (r pour red Red rouge, g pour green vert , b pour blue bleu et a Alpha pour la transparence)
En général, le codage HEX est plus facile à utiliser car il est plus court. Toutefois, dans certains cas, il est préférable d’utiliser RGBA qui permet de définir le degré de transparence. Ce paramètre A alpa varie de 0 à 1 (de complètement transparent à complètement opaque). Ceci peut être pratique si vous voulez définir une couleur d’arrière-plan plus légère et plus subtile et faire ressortir une image qui serait sous cette couleur.
Définir la palette des couleurs par défaut de Divi
Quand vous débutez un site avec Divi, il est important de définir la palette des couleurs.
Cela se passe, dans le menu de gauche Divi puis option du thème et sur le 1er onglet dans général vous voyez « Palette par défaut de sélectionneurs de couleurs ».
Vous avez ici 8 pastilles qui vont vous servir à définir les principales couleurs de votre site.
Alors pourquoi est il important et pratique de définir ces couleurs dès maintenant ? Pour la simple raison qu’à tout moment cette palette définie ici réapparaîtra à chaque moment de la création de votre site. Que ce soit lors de la création d’une section, d’une rangée avec une couleur de fond ou lors des paramétrages des modules avec la couleur des polices de caractères, des bordures etc. Cette palette sera affichée et vous permettra de choisir toujours les mêmes couleurs pour certains éléments de votre site afin d’obtenir une unité, une harmonie générale entre vos pages.
Pour définir chacune de ces couleurs, cliquez sur la pastille et choisissez dans le nuancier la couleur qui vous convient. Vous voyez en haut que chaque couleur correspond à un code hexadécimal précédé d’un #. C’est à cet endroit qu’il faudra entrer le code couleur pour changer de couleur.
Si vous n’êtes pas inspiré dans le choix de couleurs harmonieuses, il existe des sites qui peuvent vous aider.
Pour ma part, j’utilise souvent coolors.co qui met à disposition des centaines de palettes harmonieuses qui vous aideront dans votre choix. Il vous suffira de copier le code couleur souhaité et de remplacer celui de la pastille dans Divi.
La palette globale des couleurs
La palette globale est accessible depuis la palette par défaut de Divi présente dans chaque éléments de votre page Divi que ce soit une section, une rangée ou un module.
La palette globale est une option récente du Divi Builder. Tout comme les autres palettes, vous allez pouvoir définir ici une série de couleurs. Mais ce qui rend cette fonction puissante, c’est que si vous appliquez une fois une couleur globale X à différents éléments de votre site et si plus tard vous changez cette couleur X en couleur Y. Eh bien, tous les éléments de votre site a qui la couleur X aura été appliqué en premier lieu se changeront en couleur Y, d’où ce nom de couleur globale. C’est une fonction qui peut s’avérer très pratique et c’est le moyen de relooker rapidement les couleurs d’un site en quelques cliques.
La palette pourcentage d’intensité et de transparence
La palette pourcentage est également accessible depuis la palette par défaut de Divi présente dans chaque éléments de votre page Divi que ce soit une section, une rangée ou un module.
La palette pourcentage va permettre à partir d’une couleur de générer toute une palette de nuances (de différentes intensités de cette couleur) en faisant varier la tirette de gauche. Si vous faites varier que cette tirette, les codes couleurs seront exprimé en hex #. Si vous activez la tirette de droite ce nuancier de la couleur d’origine va s’enrichir de couleurs avec de la transparence. Les codes couleurs seront alors exprimés en RGBA (avec le A allant de 1 à 0, selon le degré de transparence).
L’option « Dégradé »
Lorsque vous appliquez une couleur de fond à une section, une rangée ou à un module, il est possible de créer un dégradé de couleurs. Cette fonction est accessible via les paramètres de l’élément puis dans l’onglet « Contenu » puis « Fond ».
Vous choisissez la couleur « de départ » (ici le bleu) et la couleur « d’arrivée » (ici le vert) et votre dégradé apparaît !
Quelques réglages sont disponibles :
– Vous pouvez choisir un dégradé linéaire ou radial.
– Vous pouvez définir la direction du dégradé en degrés
– Vous pouvez aussi choisir la position de départ et de fin du dégradé en %.
