Es gibt einen Moment in fast jedem Website-Projekt, der sich zuverlässig wiederholt: Das Blau soll ein wenig dunkler werden. Was in einer sauber aufgesetzten Website eine Minute dauert, wird in einer gewachsenen zur Suchaktion über vierzig Seiten. Der Unterschied entsteht ganz am Anfang.
Wo die zentralen Vorgaben liegen
Im Elementor-Editor klicken Sie oben links auf das Hamburger-Menü und wählen Website-Einstellungen. Dort finden Sie unter anderem Globale Farben und Globale Schriftarten.
Was Sie hier hinterlegen, steht anschließend in jedem Farbwähler und in jeder Typografie-Einstellung als benannte Vorgabe zur Auswahl. Wählen Sie ein Widget diese Vorgabe statt eines festen Werts, ist es dauerhaft mit ihr verbunden. Ändern Sie später die Vorgabe, ändert sich das Widget mit.
Das ist der ganze Trick. Und er wird trotzdem meistens übersprungen, weil es am Anfang schneller geht, einfach einen Farbwert einzutippen.
Wie viele Farben sinnvoll sind
Elementor legt vier Standardfarben an. In meinen Projekten arbeite ich mit sechs bis acht — mehr braucht es fast nie, und weniger wird eng.
Eine Aufteilung, die sich bewährt hat:
- Primär — Ihre Hauptfarbe, für Buttons und Hervorhebungen.
- Sekundär — die zweite Markenfarbe, sparsam eingesetzt.
- Text — die Schriftfarbe für Fließtext. Selten reines Schwarz; ein sehr dunkles Grau ist angenehmer zu lesen.
- Überschrift — oft dieselbe wie Text, manchmal einen Ton dunkler.
- Hintergrund — der Seitenhintergrund.
- Fläche — ein leicht abgesetzter Ton für Karten und hervorgehobene Bereiche.
- Rahmen — für Linien und Trenner.
- Akzent — für Hinweise oder Warnungen, falls gebraucht.
Vergeben Sie sprechende Namen. „Primär“ und „Fläche hell“ sagen Ihnen in einem Jahr etwas; „Farbe 5″ nicht.
Ein Wort zum Kontrast
Prüfen Sie Textfarbe gegen Hintergrundfarbe auf ausreichenden Kontrast, bevor Sie sie festschreiben. Für normalen Text gilt ein Verhältnis von mindestens 4,5 zu 1 als Untergrenze. Es gibt kostenlose Prüfwerkzeuge dafür, die Sekunden brauchen.
Das ist keine Formalie. Hellgrauer Text auf weißem Grund sieht auf Ihrem kalibrierten Monitor elegant aus und ist auf einem Handy bei Sonnenlicht schlicht nicht lesbar. Und da Barrierefreiheits-Anforderungen für Websites zunehmend verbindlich werden, ist es auch die Seite, auf der Sie stehen wollen.
Typografie zentral festlegen
Unter Globale Schriftarten definieren Sie Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe und Laufweite für die wiederkehrenden Textrollen — Primär, Sekundär, Text, Akzent — und unter Theme-Stil zusätzlich die Standardwerte für H1 bis H6 und Fließtext.
Zwei Empfehlungen aus der Praxis:
Zwei Schriftfamilien reichen. Eine für Überschriften, eine für Fließtext. Jede weitere kostet Ladezeit und macht das Bild unruhig. Oft genügt sogar eine einzige Familie in zwei Schnitten.
Zeilenhöhe nicht vergessen. Für Fließtext liegt ein Wert um 1,6 meist gut; Überschriften vertragen deutlich weniger, etwa 1,2. Der Zeilenabstand entscheidet mehr über die Lesbarkeit als die Schriftgröße — dazu im Detail: Zeilenabstand in Elementor richtig einstellen.
Der häufigste Fehler
Er sieht so aus: Jemand legt globale Farben an — und tippt dann trotzdem im Widget den Farbwert von Hand ein, weil der Farbwähler gerade offen ist.
Die Farbe stimmt, das Ergebnis sieht identisch aus, und die Verbindung fehlt. Beim nächsten Farbwechsel bleibt genau dieses Widget zurück.
Achten Sie darauf, im Farbwähler den globalen Wert zu wählen, erkennbar am kleinen Globus-Symbol, nicht den freien Farbwert daneben. Dieselbe Unterscheidung gilt bei der Typografie.
Wenn die Website schon steht
Nachträglich umzustellen ist Fleißarbeit, aber sie lohnt sich. Gehen Sie nicht Seite für Seite vor, sondern nach Element-Typ: erst alle Buttons, dann alle Überschriften, dann die Flächen. So bleibt der Blick beim selben Muster, und Sie kommen deutlich schneller voran.
Nutzen Sie die Gelegenheit zum Aufräumen. Meist stellt sich heraus, dass eine Website mit vermeintlich vier Farben in Wirklichkeit elf leicht unterschiedliche Blautöne enthält.
Elementor Pro: Globale Farben und Schriften gibt es in beiden Versionen. Pro erweitert das auf Kopfbereich, Footer, Popups und Beitrags-Layouts — dort greifen dieselben Vorgaben dann ebenfalls. Elementor Pro ansehen
Warum sich der Aufwand rechnet
Eine Stunde am Anfang spart Ihnen später Tage. Ich habe Kundenprojekte übernommen, in denen ein Farbwechsel drei Tage gedauert hätte, weil jede Farbe an jedem Widget einzeln klebte. In einem sauber aufgesetzten Projekt ist derselbe Wechsel eine Änderung an einer Stelle.
Wie Sie eine Website von Beginn an so strukturieren, dass sie änderbar bleibt, ist einer der Schwerpunkte meiner Elementor-Schulung.
Tags