Die globalen Farben und Schriftarten richtig einzustellen, ist keine einfache Angelegenheit für uns Elementor User. Viele moderne Themes haben eigene globale Settings, die nicht immer optimal mit den Elementor Einstellungen zusammenpassen. Dieser Beitrag hilft dir, die globalen Styles bei Elementor so einzustellen, dass du das Design deiner Elementor Seite von einer zentralen Stelle aus steuern kannst.
Video: Elementor Globale Farben & Schriften richtig einstellen – 2023 Tutorial
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Elementor globale Standard-Einstellungen vs. Theme Stil vs. Global Styles vom WordPress Theme – Fällt es dir auch schwer, die globalen Farben und Schriften auf deiner Elementor Seite richtig einzustellen?
Elementor Design System (Globale Farben und Schriftarten) einstellen
Im Elementor Design System kannst du die Farben und Schriftarten für die gesamte Website festlegen. Vorausgesetzt, du erstellst alle deine Unterseiten mit Elementor. Diese globalen Einstellungen beziehen sich auf CSS Klassen. Mehrere CSS Klassen verwenden das gleiche Styling wie z. B. das Überschriften-Widget und die Überschrift des Icon-Box Widgets.
Design System bezieht sich nur auf Elementor Seiten!
Es ist wichtig zu wissen, dass die globalen Farben und Schriften, die im Design System eingestellt werden, sich nur auf mit Elementor erstellte Seiten beziehen! Es gibt aber auch Themes, deren Einstellungen die globalen Einstellungen von Elementor überschreiben (siehe unten Beispiele).
Elementor Theme Stil einstellen
Um den Theme Stil von Elementor zu benutzen, müssen zuerst die Standardfarben und Standardschriftarten unter Elementor > Einstellungen deaktiviert werden.
Wann soll ich Elementor Theme Stil verwenden?
Den Theme Stil von Elementor verwendest du am besten mit dem Hello Elementor Theme. Andere WordPress Themes verwenden in der Regel eigene Stylings, die den Theme Stil überschreiben. Bei der Verwendung von anderen Themes gilt der Theme Stil nur als „Fallback“, d. h. die Theme Stil Einstellungen werden nur sichtbar, wenn keine andere Settings definiert wurden.
Theme Stil vs. Design System (Globale Farben & Schriftarten)
Wie bereits erwähnt beziehen sich die globalen Farben und Schriften auf CSS Klassen. Im Gegensatz dazu, bezieht sich der Theme Stil auf HTML-Tags wie body, h1, h2, h3 etc. Gemäß der Reihenfolge der CSS Anweisungen (CSS Specificity) beschreiben die HTML-Tags den untersten Layer und können deshalb leicht durch andere CSS Anweisungen überschrieben werden. Deshalb definiert auch der Theme Stil die Default-Einstellungen, die nur zum Einsatz kommen, wenn sonst keine Styles (durch Themes und Plugins) festgelegt wurden.
Ein weiterer Unterschied ist, das sich das Design System nur auf Elementor erstellte Seiten bezieht, während sich der Theme Stil auf alle Seiten (auch nicht Elementor Seitn) auswirkt. Diese Aussage gilt jedoch nur für das Hello Theme.
Elementor Globale Einstellungen vs. WordPress Theme Einstellungen
Die meisten modernen WordPress Themes heutzutage haben eigene globale Einstellungen. Allerdings gibt es Unterschiede, wie die Themes die globale Stylings umsetzen. Während Themes wie Astra, Blocksy oder Kadence die globalen Farben und Schriften bereits schon bei der Aktivierung des Themes definiert haben, sind die globalen Settings bei Neve und GeneratePress noch nicht gesetzt. Diese vordefinierten Einstellungen überschreiben die globalen Elementor Theme Stil.
Beispiele für WordPress Themes und Elementor Globale Einstellungen:
Elementor Globale Einstellungen & Hello Theme
Hier auf dem WPC Blog findest du einen Vergleich zwischen dem Astra und dem Hello Theme bei dem Astra ziemlich gut abschneidet. Aus der Sicht der globalen Einstellungen hat natürlich das Hello Theme in Verbindung mit Elementor ganz klar die Nase vorne.
Hier gibt es keine Konflikte mit irgendwelchen Theme Settings. Du kannst wählen, ob du lieber das Design System oder den Theme Stil verwenden möchtest (oder die globalen Einstellungen des Design Systems innerhalb des Theme Stils). Ich würde dir den Theme Stil empfehlen, weil du auch mit dem Hello Theme deine Beiträge mit dem Standard WordPress Editor (Gutenberg) schreiben solltest. Auf diese Weise würde sich der Theme Stil auch auf die HTML Tags des Beitragsinhalts auswirken.
Elementor Globale Einstellungen & moderne Themes wie Astra, Blocksy, Neve etc.
Variante 1:
Solltest du eines der beliebten WordPress Themes wie Astra, Blocksy, Neve, Kadence etc. mit Elementor verwenden, gibt es eine Aussage, die immer zutrifft: Deaktiviere die Elementor Standardfarben und die Standardschriftarten, verwende die globalen Einstellungen des WordPress Themes im Customizer und optional kannst du diese WordPress Theme Customizer Einstellungen auch im Elementor Theme Stil hinterlegen (als Fallback).
Bei diesem Setup musst du allerdings wissen, welche Theme Einstellungen sich auf welche Website Elemente beziehen. Weiterführende Informationen zu den globalen Einstellungen der beliebten Themes findest du hier:
Variante 2:
Es gibt aber auch Themes wie z. B. Neve oder GeneratePress*, die zwar globale Einstellungen anbieten, die aber nicht direkt nach der Installation aktiviert sind. Damit lassen sich auch die globalen Farben und Schriftarten von Elementor Design System verwenden, zumindest für die Elementor Seiten.
Ich hoffe, dieser Artikel hilft dir, die globalen Einstellungen auf deiner WordPress und Elementor Seite richtig einzustellen. Denke daran dir auch das Video zu diesem Thema anzusehen. Falls du fragen hast, hinterlasse bitte unten einen Kommentar.
