fbpx
Divi d’Elegant Themes et les palettes de couleurs

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%.

Licence Divi
.

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.

Les codes des couleurs du web

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.

Thinkific one month free

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.

Palette des couleurs Divi

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.

Presto Player lecteur vidéo WordPress
MailerLite free-trial

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.

Palette de couleurs  module Divi par défaut
Divi palettes couleurs globales

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).

Licence Divi
Palette Divi pourcentage d'intensité et de tranparence
Presto Player lecteur vidéo WordPress

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 %.

Thinkific un mois gratuit
Dégradé de couleurs
Semrush le meilleur outil SEO

Vous serez peut-être intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet
👉
Jesper Nielsen : Accédez gratuitement au club VIP et obtenez 15% de réduction sur tous vos achats à venir !

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *