Schritt-für-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är-, Sekundär-, Text- und Akzentfarben) fest, wählen Sie benutzerdefinierte Inline-Farben oder erstellen Sie neue globale Farben über die globalen Elementor-Einstellungen.
Global
Vordefinierte globale Farben
Standardmäßig werden die vordefinierten Farben (Primär, Sekundär, Text und Akzent) vorab aus dem CSS Ihres Themes übernommen. Ändern Sie sie hier, um die Einstellungen Ihres Themes zu überschreiben. Welche Elemente von der Standard-Farbpalette betroffen sind:
- Primärfarben werden für Überschriften und Icons verwendet.
- Sekundärfarben werden für Hintergründe von Listenelementen, Untertitel, animierte Überschriften und Preistabellen verwendet.
- Textfarben werden für Absätze und Menüelemente verwendet.
- Akzentfarben werden für Links, Button-Hintergründe, Tabs- und Akkordeon-Überschriften sowie Badges verwendet.
Jede dieser Farben wird in verschiedenen Widgets ähnlich wie in den obigen Beispielen verwendet. Nachfolgend sehen Sie einige Farb-Beispiele, um zu veranschaulichen, in welchen Bereichen jede Farbe eingesetzt wird.
Neue globale Farben
Zusätzlich zu den 4 vordefinierten globalen Farben (Primär, Sekundär, Text und Akzent) können Sie der globalen Palette jede beliebige Farbe hinzufügen, um sie in jeder Farboption von Elementor zu verwenden.
Benutzerdefinierte Inline-Farben
Sie können außerdem jede beliebige benutzerdefinierte Farbe als Inline-Farbe verwenden, ohne sie der Palette der globalen Farben hinzuzufügen.
Klicken Sie auf einer beliebigen Elementor-Seite oder -Beitrag auf das Hamburger-Menü in der oberen linken Ecke des Widget-Panels, klicken Sie dann auf Website-Einstellungen > und klicken Sie im Bereich SYSTEMDESIGN > auf Globale Farben.
- Farbe bearbeiten: Klicken Sie auf das Farbfeld, um für eine vorhandene Farbe eine neue Farbe auszuwählen. Auch die Namen können geändert werden. Klicken Sie auf den Farbnamen, um ihn umzubenennen. Sie können z. B. „Primär“ in „Überschriften“, „Akzent“ in „Hervorhebung“ usw. ändern.
- Farbe hinzufügen: Klicken Sie auf den Button „Farbe hinzufügen“, um eine neue globale oder Inline-benutzerdefinierte Farbe hinzuzufügen.
- Farbe löschen: Bewegen Sie den Mauszeiger über das Farbfeld und klicken Sie auf das angezeigte Papierkorb-Icon.
Hexadezimales Farbsystem
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:
Wie wir in der Abbildung sehen, stehen nach dem Nummernzeichen bzw. der Raute # bei Hex-Codes zur Farbdefinition 6 weitere Ziffern, die eine RGB-Farbe (Red Green Blue bzw. Rot Grün Blau) definieren. Alle Farben des Spektrums setzen sich aus der Mischung dieser drei Grundfarben zusammen. Im Hex-Code entsprechen die ersten beiden Ziffern dem Rot, die beiden mittleren dem Grün und die letzten beiden dem Blau.
Stellen Sie sich vor, Sie haben drei Farbdosen: eine rote, eine grüne und eine blaue, und Sie mischen diese Farben in einem Behälter, indem Sie jeweils eine bestimmte Menge hinzufügen. Das Ergebnis ist eine bestimmte Farbe. In diesem Fall ist es genau gleich: Je nach Menge jeder hinzugefügten Farbe erhalten wir eine konkrete Farbe.
Soweit so gut, aber … in Hex-Codes gibt es nicht nur Zahlen, sondern auch Buchstaben. Lassen Sie uns den Grund dafür 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).
Mit nur zwei Zeichen ist der kleinste Hexadezimalwert 00 (entspricht dezimal 0) und der größte FF (entspricht dezimal 255). Das heißt, wir können der Mischung jeder Farbe einen Wert zwischen 0 und 255 hinzufügen. Sehen wir uns einige Beispiele in hexadezimaler Darstellung an:
- #000000 (Schwarz: in Dezimal 0 Einheiten Rot, 0 Grün und 0 Blau)
- #FFFFFF (Weiß: in Dezimal 255 Einheiten Rot, 255 Grün und 255 Blau)
- #FF0000 (Rot: in Dezimal 255 Einheiten Rot, 0 Grün und 0 Blau)
- #00FF00 (Grün: in Dezimal 0 Einheiten Rot, 255 Grün und 0 Blau)
- #0000FF (Blau: in Dezimal 0 Einheiten Rot, 0 Grün und 255 Blau)
- #999999 (Grau: in Dezimal 153 Einheiten Rot, 153 Grün und 153 Blau)
Mit diesem System kann ein 24-Bit-Computer bis zu 16.777.216 verschiedene Farben darstellen – mehr als genug, wenn man bedenkt, dass das menschliche Auge nur 10 Millionen Farben unterscheiden kann.
Interessante Links
- Farbtheorie: Grundlegender Leitfaden zur Farbe
- Browser-Erweiterung, mit der Sie die Hex-Farbe von jeder Stelle einer Webseite erfassen können: