{"id":6787,"date":"2021-06-29T10:46:10","date_gmt":"2021-06-29T08:46:10","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/couleurs-globales-polices-globales-et-styles-du-theme-dans-elementor\/"},"modified":"2026-09-02T22:44:32","modified_gmt":"2026-09-02T20:44:32","slug":"couleurs-globales-polices-globales-et-styles-du-theme-dans-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/couleurs-globales-polices-globales-et-styles-du-theme-dans-elementor\/","title":{"rendered":"Couleurs globales, polices globales et styles du th\u00e8me dans Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vid\u00e9o pas \u00e0 pas<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Colores globales, Fuentes globales y Estilos del tema en Elementor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/o4OerQrGXrM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n<p class=\"wp-block-paragraph\">Cr\u00e9ez votre propre syst\u00e8me de conception avec des couleurs globales et des styles de texte qui peuvent \u00eatre facilement attribu\u00e9s aux \u00e9l\u00e9ments de votre site.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"colores-globales-0cbb8ef2-9815-4ade-beef-aa482c39df37\">Couleurs globales<\/h2>\n\n<p class=\"wp-block-paragraph\">D\u00e9finissez des couleurs globales pr\u00e9d\u00e9finies (couleurs primaires, secondaires, de texte et d\u2019accent), des couleurs personnalis\u00e9es en ligne ou cr\u00e9ez de nouvelles couleurs globales \u00e0 partir des <em>r\u00e9glages<\/em> globaux d\u2019Elementor<em>.<\/em><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"global-57b5cb54-aeec-4736-b687-d4ef2bba467d\">Global<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>Couleurs globales pr\u00e9d\u00e9finies<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">Par d\u00e9faut, les couleurs pr\u00e9d\u00e9finies (<em>primaire<\/em>, <em>secondaire<\/em>, t<em>exte<\/em> et <em>accent<\/em>) sont pr\u00e9remplies \u00e0 partir du CSS de votre th\u00e8me. Modifiez-les ici pour annuler les r\u00e9glages de votre th\u00e8me. Quels \u00e9l\u00e9ments sont affect\u00e9s par la palette de couleurs par d\u00e9faut :  <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Les couleurs primaires<\/strong> sont utilis\u00e9es pour les <em>titres<\/em> et les <em>ic\u00f4nes<\/em>.<\/li>\n\n\n\n<li><strong>Les couleurs secondaires<\/strong> sont utilis\u00e9es pour les <em>arri\u00e8re-plans des \u00e9l\u00e9ments de liste<\/em>, les <em>sous-titres<\/em>, les <em>en-t\u00eates anim\u00e9s<\/em> et les <em>tableaux de prix<\/em>.<\/li>\n\n\n\n<li><strong>Les couleurs de texte<\/strong> sont utilis\u00e9es pour les <em>paragraphes<\/em> et les <em>\u00e9l\u00e9ments de menu<\/em>.<\/li>\n\n\n\n<li><strong>Les couleurs d\u2019accent<\/strong> sont utilis\u00e9es pour les <em>liens<\/em>, les <em>arri\u00e8re-plans des boutons<\/em>, les <em>en-t\u00eates d\u2019onglets et d\u2019accord\u00e9ons<\/em> et les <em>badges<\/em>.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Chacune des couleurs sera utilis\u00e9e dans divers widgets de mani\u00e8re similaire aux exemples ci-dessus. Voici quelques exemples de couleurs pour aider \u00e0 visualiser les zones o\u00f9 chaque couleur est utilis\u00e9e. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"nuevos-colores-globales-1b835ea9-00bf-42f4-abdf-bbd9f01dcd0b\">Nouvelles couleurs globales<\/h3>\n\n<p class=\"wp-block-paragraph\">En plus des 4 couleurs globales pr\u00e9d\u00e9finies (primaire, secondaire, texte et accent), vous pouvez ajouter n\u2019importe quelle couleur de votre choix \u00e0 la palette globale, pour l\u2019utiliser dans n\u2019importe quelle option de couleur d\u2019Elementor.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"colores-personalizados-en-linea-a5b54e4d-9204-4ba2-a965-47932c988a2f\">Couleurs personnalis\u00e9es en ligne<\/h3>\n\n<p class=\"wp-block-paragraph\">Vous pouvez \u00e9galement s\u00e9lectionner n\u2019importe quelle couleur personnalis\u00e9e \u00e0 utiliser en ligne sans l\u2019ajouter \u00e0 la palette de couleurs globales.<\/p>\n\n<p class=\"wp-block-paragraph\">Depuis n\u2019importe quelle page ou publication Elementor, cliquez sur le <strong>menu hamburger<\/strong> dans le coin sup\u00e9rieur gauche du panneau des widgets, puis cliquez sur <em>R\u00e9glages du site &gt; <\/em>dans la section <em>SYST\u00c8ME DE CONCEPTION &gt; <\/em>cliquez sur <em>Couleurs globales<\/em>.<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>Modifier la couleur<\/strong> : cliquez sur l\u2019<strong>\u00e9chantillon de couleur<\/strong> pour s\u00e9lectionner une nouvelle couleur pour toute couleur existante. Les noms peuvent \u00e9galement \u00eatre modifi\u00e9s. Cliquez sur le <strong>nom de la couleur<\/strong> pour le modifier. Par exemple, vous pouvez changer Principal en Titres, Accent en Surlignage, etc.   <\/li>\n\n\n\n<li><strong>Ajouter une couleur<\/strong> : cliquez sur le <strong>bouton Ajouter une couleur<\/strong> pour ajouter une nouvelle couleur personnalis\u00e9e globale ou en ligne<\/li>\n\n\n\n<li><strong>Supprimer une couleur<\/strong> : passez le curseur sur l\u2019\u00e9chantillon de couleur et cliquez sur l\u2019<strong>ic\u00f4ne de<\/strong> la <strong>corbeille<\/strong> qui appara\u00eet.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"sistema-de-colores-hexadecimal-3d86b3de-d2b5-4a1a-b88f-c603c7157447\">Syst\u00e8me de couleurs Hexad\u00e9cimal<\/h2>\n\n<p class=\"wp-block-paragraph\">En HTML, le code Hex ou hexad\u00e9cimal est utilis\u00e9 pour d\u00e9finir les couleurs. Pour mieux comprendre comment ce code est transcrit, voyons ce graphique : <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Colores-Hex.png\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"105\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Colores-Hex.png\" alt=\"Syst&#xE8;me de couleurs Hexad&#xE9;cimal\" class=\"wp-image-5050\"\/><\/a><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Comme nous pouvons le voir sur l\u2019image, apr\u00e8s le symbole di\u00e8se ou croisillon <strong>#<\/strong>, les codes Hex pour d\u00e9finir une couleur comportent 6 chiffres suppl\u00e9mentaires, qui d\u00e9finissent une couleur <strong>RVB<\/strong> (Rouge Vert Bleu). Toutes les couleurs du spectre sont compos\u00e9es du m\u00e9lange de ces trois couleurs de base. Dans le code Hex, les deux premiers chiffres correspondent au <strong>Rouge<\/strong>, les deux du milieu au <strong>Vert<\/strong> et les deux derniers au <strong>Bleu.<\/strong>  <\/p>\n\n<p class=\"wp-block-paragraph\">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\u00e9langiez ces couleurs dans un r\u00e9cipient en ajoutant une certaine quantit\u00e9 de chacune, le r\u00e9sultat sera une couleur d\u00e9termin\u00e9e. Eh bien, dans ce cas, c\u2019est exactement pareil, selon la quantit\u00e9 de chaque couleur que nous ajoutons, nous obtiendrons une couleur concr\u00e8te. <\/p>\n\n<p class=\"wp-block-paragraph\">Jusque-l\u00e0, tout va bien, mais&#8230; dans les codes Hex, il n\u2019y a pas que des chiffres, il y a aussi des lettres, voyons pourquoi. Nous avons l\u2019habitude de travailler avec le syst\u00e8me d\u00e9cimal, c\u2019est-\u00e0-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\u2019importe quelle quantit\u00e9 num\u00e9rique. Dans le cas des codes de couleurs Hex, nous travaillons avec une base hexad\u00e9cimale, c\u2019est-\u00e0-dire qu\u2019au lieu de 10, nous utilisons 16 chiffres (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F).  <\/p>\n<div class=\"wp-block-image is-resized\">\n<figure class=\"alignright size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/paleta-de-colores.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"484\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/paleta-de-colores.jpg\" alt=\"Palette de couleurs de Photoshop\" class=\"wp-image-5049\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/paleta-de-colores.jpg 674w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/paleta-de-colores-500x359.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/paleta-de-colores-600x431.jpg 600w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/a><figcaption class=\"wp-element-caption\">Palette de couleurs de Photoshop<\/figcaption><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">En utilisant seulement deux chiffres, la valeur hexad\u00e9cimale la plus basse est <strong>00<\/strong> (\u00e9quivalent \u00e0 0 en d\u00e9cimal) et la plus \u00e9lev\u00e9e <strong>FF<\/strong> (\u00e9quivalent \u00e0 255 en d\u00e9cimal), c\u2019est-\u00e0-dire que nous pouvons ajouter au m\u00e9lange de chaque couleur entre 0 et 255. Voyons quelques exemples repr\u00e9sent\u00e9s sous forme hexad\u00e9cimale : <\/p>\n\n<ul class=\"wp-block-list\">\n<li><span class=\"has-inline-color has-black-color\"><strong>#000000<\/strong><\/span> (Noir : en d\u00e9cimal 0 unit\u00e9 de rouge, 0 de vert et 0 de bleu)<\/li>\n\n\n\n<li><strong><span class=\"has-inline-color has-white-color\">#FFFFFF<\/span><\/strong> (Blanc : en d\u00e9cimal 255 unit\u00e9s de rouge, 255 de vert et 255 de bleu)<\/li>\n\n\n\n<li><span style=\"color:#ff0000\" class=\"has-inline-color\"><strong>#FF0000<\/strong><\/span> (Rouge : en d\u00e9cimal 255 unit\u00e9s de rouge, 0 de vert et 0 de bleu)<\/li>\n\n\n\n<li><strong><span style=\"color:#00fa1f\" class=\"has-inline-color\">#00FF00<\/span><\/strong> (Vert : en d\u00e9cimal 0 unit\u00e9 de rouge, 255 de vert et 0 de bleu)<\/li>\n\n\n\n<li><strong><span style=\"color:#0000ff\" class=\"has-inline-color\">#0000FF<\/span><\/strong> (Bleu : en d\u00e9cimal 0 unit\u00e9 de rouge, 0 de vert et 255 de bleu)<\/li>\n\n\n\n<li><strong><span style=\"color:#999999\" class=\"has-inline-color\">#999999<\/span><\/strong> (Gris : en d\u00e9cimal 153 unit\u00e9s de rouge, 153 de vert et 153 de bleu)<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Avec ce syst\u00e8me, un ordinateur 24 bits peut reproduire jusqu\u2019\u00e0 16 777 216 couleurs diff\u00e9rentes, une quantit\u00e9 plus que suffisante, \u00e9tant donn\u00e9 que l\u2019\u0153il humain ne peut distinguer que 10 millions de couleurs.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-de-interes-3e2d43e7-82ee-47a4-ade0-f9d954b1753a\">Liens d\u2019int\u00e9r\u00eat<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/unayta.es\/teoria-del-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">Th\u00e9orie des couleurs : Guide de base des couleurs<\/a><\/li>\n\n\n\n<li>Extension de navigateur avec laquelle vous pourrez capturer la couleur Hex de n\u2019importe quelle partie d\u2019une page web :\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/colorzilla\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla : Obtenez l\u2019extension pour Firefox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla : Obtenez l\u2019extension pour Google Chrome<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/apps.apple.com\/co\/app\/colorzilla-a-color-picker\/id1201207838\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla : Obtenez l\u2019extension pour Mac<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vid\u00e9o pas \u00e0 pas Introduction Cr\u00e9ez votre propre syst\u00e8me de conception avec des couleurs globales et des styles de texte qui peuvent \u00eatre facilement attribu\u00e9s aux \u00e9l\u00e9ments de votre site. Couleurs globales D\u00e9finissez des couleurs globales pr\u00e9d\u00e9finies (couleurs primaires, secondaires, de texte et d\u2019accent), des couleurs personnalis\u00e9es en ligne ou cr\u00e9ez de nouvelles couleurs globales [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Elementor : ma\u00eetrisez couleurs, polices et styles","_seopress_titles_desc":"Cr\u00e9ez votre propre syst\u00e8me de conception avec des couleurs globales et des styles de texte qui peuvent \u00eatre facilement attribu\u00e9s aux \u00e9l\u00e9ments de votre site. Couleurs globales D\u00e9finissez\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[400],"tags":[431,428],"class_list":["post-6787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-conception-web","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6787"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6787\/revisions"}],"predecessor-version":[{"id":6789,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6787\/revisions\/6789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6788"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}