Vidéo pas à pas
Introduction
Créez votre propre système de conception avec des couleurs globales et des styles de texte qui peuvent être facilement attribués aux éléments de votre site.
Couleurs globales
Définissez des couleurs globales prédéfinies (couleurs primaires, secondaires, de texte et d’accent), des couleurs personnalisées en ligne ou créez de nouvelles couleurs globales à partir des réglages globaux d’Elementor.
Global
Couleurs globales prédéfinies
Par défaut, les couleurs prédéfinies (primaire, secondaire, texte et accent) sont préremplies à partir du CSS de votre thème. Modifiez-les ici pour annuler les réglages de votre thème. Quels éléments sont affectés par la palette de couleurs par défaut :
- Les couleurs primaires sont utilisées pour les titres et les icônes.
- Les couleurs secondaires sont utilisées pour les arrière-plans des éléments de liste, les sous-titres, les en-têtes animés et les tableaux de prix.
- Les couleurs de texte sont utilisées pour les paragraphes et les éléments de menu.
- Les couleurs d’accent sont utilisées pour les liens, les arrière-plans des boutons, les en-têtes d’onglets et d’accordéons et les badges.
Chacune des couleurs sera utilisée dans divers widgets de manière similaire aux exemples ci-dessus. Voici quelques exemples de couleurs pour aider à visualiser les zones où chaque couleur est utilisée.
Nouvelles couleurs globales
En plus des 4 couleurs globales prédéfinies (primaire, secondaire, texte et accent), vous pouvez ajouter n’importe quelle couleur de votre choix à la palette globale, pour l’utiliser dans n’importe quelle option de couleur d’Elementor.
Couleurs personnalisées en ligne
Vous pouvez également sélectionner n’importe quelle couleur personnalisée à utiliser en ligne sans l’ajouter à la palette de couleurs globales.
Depuis n’importe quelle page ou publication Elementor, cliquez sur le menu hamburger dans le coin supérieur gauche du panneau des widgets, puis cliquez sur Réglages du site > dans la section SYSTÈME DE CONCEPTION > cliquez sur Couleurs globales.
- Modifier la couleur : cliquez sur l’échantillon de couleur pour sélectionner une nouvelle couleur pour toute couleur existante. Les noms peuvent également être modifiés. Cliquez sur le nom de la couleur pour le modifier. Par exemple, vous pouvez changer Principal en Titres, Accent en Surlignage, etc.
- Ajouter une couleur : cliquez sur le bouton Ajouter une couleur pour ajouter une nouvelle couleur personnalisée globale ou en ligne
- Supprimer une couleur : passez le curseur sur l’échantillon de couleur et cliquez sur l’icône de la corbeille qui apparaît.
Système de couleurs Hexadécimal
En HTML, le code Hex ou hexadécimal est utilisé pour définir les couleurs. Pour mieux comprendre comment ce code est transcrit, voyons ce graphique :
Comme nous pouvons le voir sur l’image, après le symbole dièse ou croisillon #, les codes Hex pour définir une couleur comportent 6 chiffres supplémentaires, qui définissent une couleur RVB (Rouge Vert Bleu). Toutes les couleurs du spectre sont composées du mélange de ces trois couleurs de base. Dans le code Hex, les deux premiers chiffres correspondent au Rouge, les deux du milieu au Vert et les deux derniers au Bleu.
Imaginez que vous ayez trois pots de peinture, un de couleur rouge, un de couleur verte et un de couleur bleue, et que vous mélangiez ces couleurs dans un récipient en ajoutant une certaine quantité de chacune, le résultat sera une couleur déterminée. Eh bien, dans ce cas, c’est exactement pareil, selon la quantité de chaque couleur que nous ajoutons, nous obtiendrons une couleur concrète.
Jusque-là, tout va bien, mais… dans les codes Hex, il n’y a pas que des chiffres, il y a aussi des lettres, voyons pourquoi. Nous avons l’habitude de travailler avec le système décimal, c’est-à-dire avec une base de 10 chiffres (0, 1, 2, 3, 4, 5, 6, 7, 8 et 9) ; en utilisant ces chiffres, nous composons n’importe quelle quantité numérique. Dans le cas des codes de couleurs Hex, nous travaillons avec une base hexadécimale, c’est-à-dire qu’au lieu de 10, nous utilisons 16 chiffres (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F).
En utilisant seulement deux chiffres, la valeur hexadécimale la plus basse est 00 (équivalent à 0 en décimal) et la plus élevée FF (équivalent à 255 en décimal), c’est-à-dire que nous pouvons ajouter au mélange de chaque couleur entre 0 et 255. Voyons quelques exemples représentés sous forme hexadécimale :
- #000000 (Noir : en décimal 0 unité de rouge, 0 de vert et 0 de bleu)
- #FFFFFF (Blanc : en décimal 255 unités de rouge, 255 de vert et 255 de bleu)
- #FF0000 (Rouge : en décimal 255 unités de rouge, 0 de vert et 0 de bleu)
- #00FF00 (Vert : en décimal 0 unité de rouge, 255 de vert et 0 de bleu)
- #0000FF (Bleu : en décimal 0 unité de rouge, 0 de vert et 255 de bleu)
- #999999 (Gris : en décimal 153 unités de rouge, 153 de vert et 153 de bleu)
Avec ce système, un ordinateur 24 bits peut reproduire jusqu’à 16 777 216 couleurs différentes, une quantité plus que suffisante, étant donné que l’œil humain ne peut distinguer que 10 millions de couleurs.
Liens d’intérêt
- Théorie des couleurs : Guide de base des couleurs
- Extension de navigateur avec laquelle vous pourrez capturer la couleur Hex de n’importe quelle partie d’une page web :