{"id":6486,"date":"2021-06-29T10:46:10","date_gmt":"2021-06-29T08:46:10","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/global-colors-global-fonts-and-theme-styles-in-elementor\/"},"modified":"2026-09-02T19:35:00","modified_gmt":"2026-09-02T17:35:00","slug":"global-colors-global-fonts-and-theme-styles-in-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/global-colors-global-fonts-and-theme-styles-in-elementor\/","title":{"rendered":"Global Colors, Global Fonts, and Theme Styles in Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/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\">Create your own design system with global colors and text styles that can be easily assigned to your site&#8217;s elements.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"colores-globales-0cbb8ef2-9815-4ade-beef-aa482c39df37\">Global Colors<\/h2>\n\n<p class=\"wp-block-paragraph\">Set predefined global colors (primary, secondary, text, and accent colors), custom inline colors, or create new global colors from Elementor&#8217;s global <em>settings<\/em><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>Predefined Global Colors<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">By default, predefined colors (<em>primary<\/em>, <em>secondary<\/em>, <em>text<\/em>, and <em>accent<\/em>) are pre-filled from your theme&#8217;s CSS. Change them here to override your theme&#8217;s settings. Elements affected by the default color palette:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Primary colors<\/strong> are used for <em>titles<\/em> and <em>icons<\/em>.<\/li>\n\n\n\n<li><strong>Secondary colors<\/strong> are used for <em>list item backgrounds<\/em>, <em>subheadings<\/em>, <em>animated headlines<\/em>, and <em>pricing tables<\/em>.<\/li>\n\n\n\n<li><strong>Text colors<\/strong> are used for <em>paragraphs<\/em> and <em>menu items<\/em>.<\/li>\n\n\n\n<li><strong>Accent colors<\/strong> are used for <em>links<\/em>, <em>button backgrounds<\/em>, <em>tab and accordion headers<\/em>, and <em>badges<\/em>.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Each of the colors will be used in various widgets similar to the examples above. Below are some color examples to help visualize the areas where each color is used. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"nuevos-colores-globales-1b835ea9-00bf-42f4-abdf-bbd9f01dcd0b\">New Global Colors<\/h3>\n\n<p class=\"wp-block-paragraph\">In addition to the 4 predefined global colors (primary, secondary, text, and accent), you can add any color you choose to the global palette, for use in any Elementor color option.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"colores-personalizados-en-linea-a5b54e4d-9204-4ba2-a965-47932c988a2f\">Custom Inline Colors<\/h3>\n\n<p class=\"wp-block-paragraph\">You can also select any custom color for inline use without adding it to the global color palette.<\/p>\n\n<p class=\"wp-block-paragraph\">From any Elementor page or post, click the <strong>hamburger menu<\/strong> in the top left corner of the Widget Panel, then click <em>Site Settings &gt;<\/em> in the <em>DESIGN SYSTEM &gt;<\/em> section, click <em>Global Colors<\/em>.<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>Edit Color<\/strong>: Click the <strong>color swatch<\/strong> to select a new color for any existing color. Names can also be changed. Click the <strong>color name<\/strong> to rename it. For example, you can change Primary to Titles, Accent to Highlight, etc.   <\/li>\n\n\n\n<li><strong>Add Color<\/strong>: Click the <strong>Add Color button<\/strong> to add a new global or inline custom color.<\/li>\n\n\n\n<li><strong>Delete Color<\/strong>: Hover over the color swatch and click the <strong>trash<\/strong> <strong>icon<\/strong> that appears.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"sistema-de-colores-hexadecimal-3d86b3de-d2b5-4a1a-b88f-c603c7157447\">Hexadecimal Color System<\/h2>\n\n<p class=\"wp-block-paragraph\">In HTML, the Hex code or hexadecimal code is used to define colors. To better understand how this code is transcribed, let&#8217;s look at this chart: <\/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=\"Hexadecimal Color System\" class=\"wp-image-5050\"\/><\/a><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">As we can see in the image, after the hash symbol or pound sign <strong>#<\/strong>, Hex codes for defining a color have 6 more digits, which define an <strong>RGB<\/strong> (Red Green Blue) color. All colors in the spectrum are composed of a mixture of these three base colors. In the Hex code, the first two digits correspond to <strong>Red<\/strong>, the middle two to <strong>Green<\/strong>, and the last two to <strong>Blue.<\/strong>  <\/p>\n\n<p class=\"wp-block-paragraph\">Imagine you have three cans of paint: one red, one green, and one blue. If you mix these colors in a container, adding a certain amount of each, the result will be a specific color. In this case, it&#8217;s exactly the same; depending on the amount of each color we add, we will obtain a specific color. <\/p>\n\n<p class=\"wp-block-paragraph\">So far so good, but&#8230; Hex codes don&#8217;t just have numbers, but also letters. Let&#8217;s see why. We are used to working with the decimal system, meaning with a base of 10 digits (0, 1, 2, 3, 4, 5, 6, 7, 8, and 9). Using these digits, we compose any numerical quantity. In the case of Hex color codes, we work with a hexadecimal base, meaning instead of 10, we use 16 digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and 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=\"Photoshop Color Palette\" 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\">Photoshop Color Palette<\/figcaption><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Using only two digits, the lowest hexadecimal value is <strong>00<\/strong> (equivalent to 0 in decimal) and the highest is <strong>FF<\/strong> (equivalent to 255 in decimal), meaning we can add between 0 and 255 to the mixture of each color. Let&#8217;s look at some examples represented in hexadecimal form: <\/p>\n\n<ul class=\"wp-block-list\">\n<li><span class=\"has-inline-color has-black-color\"><strong>#000000<\/strong><\/span> (Black: in decimal, 0 units of red, 0 of green, and 0 of blue)<\/li>\n\n\n\n<li><strong><span class=\"has-inline-color has-white-color\">#FFFFFF<\/span><\/strong> (White: in decimal, 255 units of red, 255 of green, and 255 of blue)<\/li>\n\n\n\n<li><span style=\"color:#ff0000\" class=\"has-inline-color\"><strong>#FF0000<\/strong><\/span> (Red: in decimal, 255 units of red, 0 of green, and 0 of blue)<\/li>\n\n\n\n<li><strong><span style=\"color:#00fa1f\" class=\"has-inline-color\">#00FF00<\/span><\/strong> (Green: in decimal, 0 units of red, 255 of green, and 0 of blue)<\/li>\n\n\n\n<li><strong><span style=\"color:#0000ff\" class=\"has-inline-color\">#0000FF<\/span><\/strong> (Blue: in decimal, 0 units of red, 0 of green, and 255 of blue)<\/li>\n\n\n\n<li><strong><span style=\"color:#999999\" class=\"has-inline-color\">#999999<\/span><\/strong> (Gray: in decimal, 153 units of red, 153 of green, and 153 of blue)<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">With this system, a 24-bit computer can reproduce up to 16,777,216 different colors, a more than sufficient amount, considering that the human eye can only distinguish 10 million colors.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-de-interes-3e2d43e7-82ee-47a4-ade0-f9d954b1753a\">Links of Interest<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/unayta.es\/teoria-del-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Theory: Basic Color Guide<\/a><\/li>\n\n\n\n<li>Browser extension with which you can capture the Hex color of any part of a web page:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/colorzilla\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Get the Firefox extension<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Get the Google Chrome extension<\/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: Get the Mac extension<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video Introduction Create your own design system with global colors and text styles that can be easily assigned to your site&#8217;s elements. Global Colors Set predefined global colors (primary, secondary, text, and accent colors), custom inline colors, or create new global colors from Elementor&#8217;s global settings. Global Predefined Global Colors By default, predefined colors [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Elementor Global Colors, Fonts and Theme Styles Guide","_seopress_titles_desc":"Create your own design system with global colors and text styles that can be easily assigned to your site's elements. Global Colors Set...","_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":[374],"tags":[385,386],"class_list":["post-6486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6486"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6486\/revisions"}],"predecessor-version":[{"id":6488,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6486\/revisions\/6488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6487"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}