{"id":6790,"date":"2021-06-29T10:46:10","date_gmt":"2021-06-29T08:46:10","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/globale-farben-globale-schriftarten-und-theme-stile-in-elementor\/"},"modified":"2026-09-02T22:45:15","modified_gmt":"2026-09-02T20:45:15","slug":"globale-farben-globale-schriftarten-und-theme-stile-in-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/de\/globale-farben-globale-schriftarten-und-theme-stile-in-elementor\/","title":{"rendered":"Globale Farben, globale Schriftarten und Theme-Stile in Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Schritt-f\u00fcr-Schritt-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\">Einleitung<\/h2>\n\n<p class=\"wp-block-paragraph\">Erstellen Sie Ihr eigenes Designsystem mit globalen Farben und Textstilen, die sich einfach Elementen Ihrer Website zuweisen lassen.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"colores-globales-0cbb8ef2-9815-4ade-beef-aa482c39df37\">Globale Farben<\/h2>\n\n<p class=\"wp-block-paragraph\">Legen Sie vordefinierte globale Farben (Prim\u00e4r-, Sekund\u00e4r-, Text- und Akzentfarben) fest, w\u00e4hlen Sie benutzerdefinierte Inline-Farben oder erstellen Sie neue globale Farben \u00fcber die globalen Elementor-<em>Einstellungen<\/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>Vordefinierte globale Farben<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">Standardm\u00e4\u00dfig werden die vordefinierten Farben (<em>Prim\u00e4r<\/em>, <em>Sekund\u00e4r<\/em>, <em>Text<\/em> und <em>Akzent<\/em>) vorab aus dem CSS Ihres Themes \u00fcbernommen. \u00c4ndern Sie sie hier, um die Einstellungen Ihres Themes zu \u00fcberschreiben. Welche Elemente von der Standard-Farbpalette betroffen sind:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Prim\u00e4rfarben<\/strong> werden f\u00fcr <em>\u00dcberschriften<\/em> und <em>Icons<\/em> verwendet.<\/li>\n\n\n\n<li><strong>Sekund\u00e4rfarben<\/strong> werden f\u00fcr <em>Hintergr\u00fcnde von Listenelementen<\/em>, <em>Untertitel<\/em>, <em>animierte \u00dcberschriften<\/em> und <em>Preistabellen<\/em> verwendet.<\/li>\n\n\n\n<li><strong>Textfarben<\/strong> werden f\u00fcr <em>Abs\u00e4tze<\/em> und <em>Men\u00fcelemente<\/em> verwendet.<\/li>\n\n\n\n<li><strong>Akzentfarben<\/strong> werden f\u00fcr <em>Links<\/em>, <em>Button-Hintergr\u00fcnde<\/em>, <em>Tabs- und Akkordeon-\u00dcberschriften<\/em> sowie <em>Badges<\/em> verwendet.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Jede dieser Farben wird in verschiedenen Widgets \u00e4hnlich wie in den obigen Beispielen verwendet. Nachfolgend sehen Sie einige Farb-Beispiele, um zu veranschaulichen, in welchen Bereichen jede Farbe eingesetzt wird. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"nuevos-colores-globales-1b835ea9-00bf-42f4-abdf-bbd9f01dcd0b\">Neue globale Farben<\/h3>\n\n<p class=\"wp-block-paragraph\">Zus\u00e4tzlich zu den 4 vordefinierten globalen Farben (Prim\u00e4r, Sekund\u00e4r, Text und Akzent) k\u00f6nnen Sie der globalen Palette jede beliebige Farbe hinzuf\u00fcgen, um sie in jeder Farboption von Elementor zu verwenden.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"colores-personalizados-en-linea-a5b54e4d-9204-4ba2-a965-47932c988a2f\">Benutzerdefinierte Inline-Farben<\/h3>\n\n<p class=\"wp-block-paragraph\">Sie k\u00f6nnen au\u00dferdem jede beliebige benutzerdefinierte Farbe als Inline-Farbe verwenden, ohne sie der Palette der globalen Farben hinzuzuf\u00fcgen.<\/p>\n\n<p class=\"wp-block-paragraph\">Klicken Sie auf einer beliebigen Elementor-Seite oder -Beitrag auf das <strong>Hamburger-Men\u00fc<\/strong> in der oberen linken Ecke des Widget-Panels, klicken Sie dann auf <em>Website-Einstellungen &gt; <\/em>und klicken Sie im Bereich <em>SYSTEMDESIGN &gt; <\/em>auf <em>Globale Farben<\/em>.<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>Farbe bearbeiten<\/strong>: Klicken Sie auf das <strong>Farbfeld<\/strong>, um f\u00fcr eine vorhandene Farbe eine neue Farbe auszuw\u00e4hlen. Auch die Namen k\u00f6nnen ge\u00e4ndert werden. Klicken Sie auf den <strong>Farbnamen<\/strong>, um ihn umzubenennen. Sie k\u00f6nnen z. B. \u201ePrim\u00e4r\u201c in \u201e\u00dcberschriften\u201c, \u201eAkzent\u201c in \u201eHervorhebung\u201c usw. \u00e4ndern.   <\/li>\n\n\n\n<li><strong>Farbe hinzuf\u00fcgen<\/strong>: Klicken Sie auf den <strong>Button \u201eFarbe hinzuf\u00fcgen\u201c<\/strong>, um eine neue globale oder Inline-benutzerdefinierte Farbe hinzuzuf\u00fcgen.<\/li>\n\n\n\n<li><strong>Farbe l\u00f6schen<\/strong>: Bewegen Sie den Mauszeiger \u00fcber das Farbfeld und klicken Sie auf das angezeigte <strong>Papierkorb-<\/strong><strong>Icon<\/strong>.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"sistema-de-colores-hexadecimal-3d86b3de-d2b5-4a1a-b88f-c603c7157447\">Hexadezimales Farbsystem<\/h2>\n\n<p class=\"wp-block-paragraph\">In HTML wird der Hex- bzw. Hexadezimalcode verwendet, um Farben zu definieren. Um besser zu verstehen, wie dieser Code aufgebaut ist, sehen wir uns diese Grafik an: <\/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=\"Hexadezimales Farbsystem\" class=\"wp-image-5050\"\/><\/a><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Wie wir in der Abbildung sehen, stehen nach dem Nummernzeichen bzw. der Raute <strong>#<\/strong> bei Hex-Codes zur Farbdefinition 6 weitere Ziffern, die eine <strong>RGB<\/strong>-Farbe (Red Green Blue bzw. Rot Gr\u00fcn Blau) definieren. Alle Farben des Spektrums setzen sich aus der Mischung dieser drei Grundfarben zusammen. Im Hex-Code entsprechen die ersten beiden Ziffern dem <strong>Rot<\/strong>, die beiden mittleren dem <strong>Gr\u00fcn<\/strong> und die letzten beiden dem <strong>Blau<\/strong>.  <\/p>\n\n<p class=\"wp-block-paragraph\">Stellen Sie sich vor, Sie haben drei Farbdosen: eine rote, eine gr\u00fcne und eine blaue, und Sie mischen diese Farben in einem Beh\u00e4lter, indem Sie jeweils eine bestimmte Menge hinzuf\u00fcgen. Das Ergebnis ist eine bestimmte Farbe. In diesem Fall ist es genau gleich: Je nach Menge jeder hinzugef\u00fcgten Farbe erhalten wir eine konkrete Farbe. <\/p>\n\n<p class=\"wp-block-paragraph\">Soweit so gut, aber &#8230; in Hex-Codes gibt es nicht nur Zahlen, sondern auch Buchstaben. Lassen Sie uns den Grund daf\u00fcr betrachten. Wir sind es gewohnt, mit dem Dezimalsystem zu arbeiten, d.h. mit einer Basis von 10 Ziffern (0, 1, 2, 3, 4, 5, 6, 7, 8 und 9). Mit diesen Ziffern bilden wir jede beliebige numerische Menge. Im Fall von Hex-Farbcodes arbeiten wir mit einer hexadezimalen Basis, d.h. anstelle von 10 verwenden wir 16 Ziffern (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E und 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=\"Farbpalette von 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\">Farbpalette von Photoshop<\/figcaption><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Mit nur zwei Zeichen ist der kleinste Hexadezimalwert <strong>00<\/strong> (entspricht dezimal 0) und der gr\u00f6\u00dfte <strong>FF<\/strong> (entspricht dezimal 255). Das hei\u00dft, wir k\u00f6nnen der Mischung jeder Farbe einen Wert zwischen 0 und 255 hinzuf\u00fcgen. Sehen wir uns einige Beispiele in hexadezimaler Darstellung an: <\/p>\n\n<ul class=\"wp-block-list\">\n<li><span class=\"has-inline-color has-black-color\"><strong>#000000<\/strong><\/span> (Schwarz: in Dezimal 0 Einheiten Rot, 0 Gr\u00fcn und 0 Blau)<\/li>\n\n\n\n<li><strong><span class=\"has-inline-color has-white-color\">#FFFFFF<\/span><\/strong> (Wei\u00df: in Dezimal 255 Einheiten Rot, 255 Gr\u00fcn und 255 Blau)<\/li>\n\n\n\n<li><span style=\"color:#ff0000\" class=\"has-inline-color\"><strong>#FF0000<\/strong><\/span> (Rot: in Dezimal 255 Einheiten Rot, 0 Gr\u00fcn und 0 Blau)<\/li>\n\n\n\n<li><strong><span style=\"color:#00fa1f\" class=\"has-inline-color\">#00FF00<\/span><\/strong> (Gr\u00fcn: in Dezimal 0 Einheiten Rot, 255 Gr\u00fcn und 0 Blau)<\/li>\n\n\n\n<li><strong><span style=\"color:#0000ff\" class=\"has-inline-color\">#0000FF<\/span><\/strong> (Blau: in Dezimal 0 Einheiten Rot, 0 Gr\u00fcn und 255 Blau)<\/li>\n\n\n\n<li><strong><span style=\"color:#999999\" class=\"has-inline-color\">#999999<\/span><\/strong> (Grau: in Dezimal 153 Einheiten Rot, 153 Gr\u00fcn und 153 Blau)<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Mit diesem System kann ein 24-Bit-Computer bis zu 16.777.216 verschiedene Farben darstellen \u2013 mehr als genug, wenn man bedenkt, dass das menschliche Auge nur 10 Millionen Farben unterscheiden kann.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-de-interes-3e2d43e7-82ee-47a4-ade0-f9d954b1753a\">Interessante Links<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/unayta.es\/teoria-del-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">Farbtheorie: Grundlegender Leitfaden zur Farbe<\/a><\/li>\n\n\n\n<li>Browser-Erweiterung, mit der Sie die Hex-Farbe von jeder Stelle einer Webseite erfassen k\u00f6nnen:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/colorzilla\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Holen Sie sich die Erweiterung f\u00fcr Firefox<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\" target=\"_blank\" rel=\"noreferrer noopener\">Colorzilla: Holen Sie sich die Erweiterung f\u00fcr 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: Holen Sie sich die Erweiterung f\u00fcr Mac<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Schritt-f\u00fcr-Schritt-Video Einleitung Erstellen Sie Ihr eigenes Designsystem mit globalen Farben und Textstilen, die sich einfach Elementen Ihrer Website zuweisen lassen. Globale Farben Legen Sie vordefinierte globale Farben (Prim\u00e4r-, Sekund\u00e4r-, Text- und Akzentfarben) fest, w\u00e4hlen Sie benutzerdefinierte Inline-Farben oder erstellen Sie neue globale Farben \u00fcber die globalen Elementor-Einstellungen. Global Vordefinierte globale Farben Standardm\u00e4\u00dfig werden die vordefinierten [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Elementor: Globale Farben, Schriften und Stile nutzen","_seopress_titles_desc":"Erstellen Sie Ihr eigenes Designsystem mit globalen Farben und Textstilen, die sich einfach Elementen Ihrer Website zuweisen lassen. Globale Farben Festlegen\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":[402],"tags":[433,404],"class_list":["post-6790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-webdesign","tag-wordpress-personalisierung"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/comments?post=6790"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6790\/revisions"}],"predecessor-version":[{"id":6792,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6790\/revisions\/6792"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media\/6791"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media?parent=6790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/categories?post=6790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/tags?post=6790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}