{"id":41017,"date":"2021-06-29T10:46:10","date_gmt":"2021-06-29T08:46:10","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/global-colors-global-fonts-and-theme-styles-in-elementor\/"},"modified":"2023-08-29T17:56:37","modified_gmt":"2023-08-29T15:56:37","slug":"global-colors-global-fonts-and-theme-styles-in-elementor","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/global-colors-global-fonts-and-theme-styles-in-elementor\/","title":{"rendered":"Global Colors, Global Fonts and Theme Styles in Elementor"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#colores-globales-0cbb8ef2-9815-4ade-beef-aa482c39df37\">Global colors<\/a><\/li><li class=\"toc-level-1\"><a href=\"#global-57b5cb54-aeec-4736-b687-d4ef2bba467d\">Global<\/a><\/li><li class=\"toc-level-2\"><a href=\"#nuevos-colores-globales-1b835ea9-00bf-42f4-abdf-bbd9f01dcd0b\">New global colors<\/a><\/li><li class=\"toc-level-2\"><a href=\"#colores-personalizados-en-linea-a5b54e4d-9204-4ba2-a965-47932c988a2f\">Online custom colors<\/a><\/li><li class=\"toc-level-1\"><a href=\"#sistema-de-colores-hexadecimal-3d86b3de-d2b5-4a1a-b88f-c603c7157447\">Hexadecimal color system<\/a><\/li><li class=\"toc-level-1\"><a href=\"#enlaces-de-interes-3e2d43e7-82ee-47a4-ade0-f9d954b1753a\">Links of interest<\/a><\/li><\/ul>\n<p>Create your own design system with global colors and text styles that can be easily assigned to elements of your site.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"colores-globales-0cbb8ef2-9815-4ade-beef-aa482c39df37\">Global colors<\/h2>\n\n<p>Set predefined global colors (primary, secondary, text and accent colors), custom colors inline or create new global colors from Elementor&#8217;s global <em>settings<\/em>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"global-57b5cb54-aeec-4736-b687-d4ef2bba467d\">Global<\/h2>\n\n<p><strong>Predefined global colors<\/strong><\/p>\n\n<p>By default, the 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 settings. Which elements are affected by the default color palette:<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Primary colors<\/strong> are used for <em>titles<\/em> and <em>icons<\/em>.<\/li><li><strong>Secondary colors<\/strong> are used for <em>list item backgrounds<\/em>, <em>subtitles<\/em>, <em>animated headings<\/em> and <em>price tables<\/em>.<\/li><li><strong>Text colors<\/strong> are used for <em>paragraphs<\/em> and <em>menu items<\/em>.<\/li><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><\/ul>\n<p>Each of the colors will be used in several widgets similar to the previous examples. Below are some color examples to help visualize the areas in which each color is used.<\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"nuevos-colores-globales-1b835ea9-00bf-42f4-abdf-bbd9f01dcd0b\">New global colors<\/h3>\n\n<p>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\">Online custom colors<\/h3>\n\n<p>You can also select any custom color to use online without adding it to the global color palette.<\/p>\n\n<p>From any Elementor page or post, click on the <strong>hamburger menu<\/strong> in the upper left corner of the Widgets Panel, then click on <em>Site Settings &gt; <\/em>in the <em>SYSTEM DESIGN <\/em>section <em> &gt; click on <\/em> <em>Global Colors<\/em>.<\/p>\n\n<ol class=\"wp-block-list\"><li><strong>Edit color<\/strong>: click on the <strong>color swatch<\/strong> to select a new color for any existing color. Names can also be changed. Click on the <strong>color name<\/strong> to change the name. For example, you can change Main to Titles, Accent to Highlight, etc.<\/li><li><strong>Add Color<\/strong>: click on the <strong>Add Color button<\/strong> to add a new global or inline custom color<\/li><li><strong>Delete color<\/strong>: place the cursor over the color swatch and click on the <strong>trash can<\/strong> <strong>icon<\/strong> that appears.<\/li><\/ol>\n<h2 class=\"wp-block-heading\" id=\"sistema-de-colores-hexadecimal-3d86b3de-d2b5-4a1a-b88f-c603c7157447\">Hexadecimal color system<\/h2>\n\n<p>In HTML, Hex or hexadecimal code is used to define colors. To better understand how this code is transcribed, let&#8217;s take a look at this graphic:<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"350\" height=\"105\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Hex Colors\" class=\"wp-image-15951\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 350w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex-300x90.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=70 70w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=140 140w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-Hex.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=210 210w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/a><\/figure><\/div>\n\n<p>As we can see in the image followed by the numeral symbol or hash mark  <strong>#<\/strong>  Hex codes to define a color have 6 more digits, which define a color.  <strong>RGB<\/strong>  (Red Green Blue or Red Green Blue) all the colors of the spectrum are composed of the mixture of these three base colors. In the Hex code the first two digits correspond to the color <strong>Red<\/strong>, the middle two to <strong>Green<\/strong> and the last two to <strong>Blue<\/strong>. <\/p>\n\n<p>Imagine that you have three cans of paint, one red, one green and one blue, and you mix these colors in a container by adding a certain amount of each one, the result will be a certain color. Well, in this case it is exactly the same, depending on the amount of each color we add, we will obtain a specific color.<\/p>\n\n<p>So far so good, but &#8230; in Hex codes there are not only numbers, but also letters, let&#8217;s see why. We are used to work with the decimal system, i.e. 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 hexadecimal base, that is, 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\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"\" class=\"wp-image-15956\" width=\"506\" height=\"363\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 674w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores-300x215.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores-400x287.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 400w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=134 134w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=539 539w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/paleta-de-colores.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/a><figcaption>Photoshop color palette<\/figcaption><\/figure><\/div>\n\n<p>Using only two digits the smallest hexadecimal value is <strong>00<\/strong> (equivalent in decimal to 0) and the largest <strong>FF<\/strong> (equivalent in decimal to 255), i.e. we can add to the mixture of each color between 0 and 255. Let&#8217;s see some examples represented in hexadecimal form:<\/p>\n\n<ul class=\"wp-block-list\"><li><span class=\"has-inline-color has-black-color\">\n  <strong>#000000<\/strong>\n<\/span> (Black: in decimal 0 units of red, 0 of green and 0 of blue)<\/li><li><strong>\n  <span class=\"has-inline-color has-white-color\">#FFFFFFFF<\/span>\n<\/strong> (White: in decimal 255 units of red, 255 units of green and 255 units of blue)<\/li><li><span style=\"color:#ff0000\" class=\"has-inline-color\">\n  <strong>#FF0000<\/strong>\n<\/span> (Red: in decimal 255 units of red, 0 of green and 0 of blue)<\/li><li><strong>\n  <span style=\"color:#00fa1f\" class=\"has-inline-color\">#00FF00<\/span>\n<\/strong> (Green: in decimal 0 units of red, 255 units of green and 0 units of blue)<\/li><li><strong>\n  <span style=\"color:#0000ff\" class=\"has-inline-color\">#0000FF<\/span>\n<\/strong> (Blue: in decimal 0 units of red, 0 of green and 255 of blue)<\/li><li><strong>\n  <span style=\"color:#999999\" class=\"has-inline-color\">#999999<\/span>\n<\/strong> (Gray: in decimal 153 units of red, 153 of green and 153 of blue)<\/li><\/ul>\n<p>With this system, a 24-bit computer can reproduce up to 16,777,216 different colors, which is more than enough, 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\"><li><a href=\"https:\/\/unayta.es\/teoria-del-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Theory: Basic Guide to Color<\/a><\/li><li>Browser extension with which you can capture the Hex color of any part of a web page:<ul><li><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/colorzilla\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Get the extension for Firefox<\/a><\/li><li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Get the extension for Google Chrome<\/a><\/li><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><\/ul><\/li><\/ul>\n<p><\/p>\n","protected":false},"featured_media":30720,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-41017","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/06\/Colores-globales-Fuentes-globales-y-Estilos-del-tema-en-Elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Create your own design system with global colors and text styles that can be easily assigned to elements of your site. Global colors Set predefined global colors (primary, secondary, text and accent colors), custom colors inline or create new global colors from Elementor&#8217;s global settings. Global Predefined global colors By default, the predefined colors(primary, secondary,text&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/41017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/30720"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=41017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}