fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)