Couleurs globales, polices globales et styles de thèmes dans Elementor
> Introduction à Elementor, Paramètres du site
- Couleurs globales
- Mondial
- Nouvelles couleurs mondiales
- Couleurs personnalisées en ligne
- Système de couleurs hexadécimal
- Liens utiles
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 paramètres globaux d’Elementor.
Mondial
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 remplacer les paramètres de votre thème. Quels sont les éléments concerné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 la liste, les sous-titres, les titres 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’accentuation 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 plusieurs widgets de la même manière que dans les exemples ci-dessus. Quelques exemples de couleurs sont présentés ci-dessous pour aider à visualiser les domaines dans lesquels chaque couleur est utilisée.
Nouvelles couleurs mondiales
En plus des 4 couleurs globales prédéfinies (primaire, secondaire, texte et accent), vous pouvez ajouter n’importe quelle couleur à 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 une couleur personnalisée à utiliser en ligne sans l’ajouter à la palette de couleurs globale.
À partir de n’importe quelle page ou message Elementor, cliquez sur le menu hamburger dans le coin supérieur gauche du panneau des widgets, puis cliquez sur Site Settings > dans la section SYSTEM DESIGN > cliquez sur Global Colours.
- Modifier la couleur: cliquez sur l’échantillon de couleur pour sélectionner une nouvelle couleur pour une couleur existante. Les noms peuvent également être modifiés. Cliquez sur le nom de la couleur pour modifier le nom. Par exemple, vous pouvez remplacer Main par Titles, Accent par Highlight, etc.
- Ajouter une couleur: cliquez sur le bouton Ajouter une couleur pour ajouter une nouvelle couleur globale ou une couleur personnalisée en ligne.
- Supprimer une couleur: placez 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, regardons ce graphique :
Comme on peut le voir sur l’image suivie du symbole numérique ou de la marque de hachage # Les codes hexadécimaux qui définissent une couleur comportent 6 chiffres supplémentaires qui définissent une couleur. RVB (Rouge Vert Bleu ou Rouge Vert Bleu) toutes les couleurs du spectre sont constituées d’un mélange de ces trois couleurs de base. Dans le code hexadécimal, les deux premiers chiffres correspondent à la couleur rouge, les deux du milieu à la couleur verte et les deux derniers à la couleur bleue.
Imaginez que vous ayez trois pots de peinture, un rouge, un vert et un bleu, et que vous mélangiez ces couleurs dans un récipient en ajoutant une certaine quantité de chacune d’elles, le résultat sera une certaine couleur. Eh bien, dans ce cas, c’est exactement la même chose, en fonction de la quantité de chaque couleur que nous ajoutons, nous obtiendrons une couleur spécifique.
Jusqu’ici tout va bien, mais … dans les codes Hex, il n’y a pas seulement des chiffres, mais 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 pour composer n’importe quelle quantité numérique. Dans le cas des codes de couleur hexagonaux, 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 plus petite valeur hexadécimale est 00 (équivalent décimal à 0) et la plus grande FF (équivalent décimal à 255), 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)
- #FFFFFFFF (Blanc : en décimal 255 unités de rouge, 255 unités de vert et 255 unités de bleu)
- #FF0000 (Rouge : en décimal 255 unités de rouge, 0 de vert, 0 de bleu)
- #00FF00 (Vert : en décimal 0 unité de rouge, 255 unités de vert et 0 unité 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 de 24 bits peut reproduire jusqu’à 16 777 216 couleurs différentes, ce qui est largement suffisant si l’on considère que l’œil humain ne peut distinguer que 10 millions de couleurs.
Liens utiles
- Théorie de la couleur : Guide de base de la couleur
- Extension de navigateur permettant de capturer la couleur hexagonale de n’importe quelle partie d’une page web :
Suscríbete y recibe avisos de nuevos contenidos
Temas relacionados
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
