Menü
tl;dr: Im Februar 2020 erreichte Elementor die 4 Mio. Marke an Installationen. Erst jetzt, mit der Version 2.9, spendierte der Entwickler eine brauchbare Einstellungen-Option. Warum das gut ist und wie man damit umgeht steht in diesem Artikel.
Viele Einsteiger wunderten sich, warum es im Elementor keine zentralen Einstellungen gab, so wie man sie von den Setting-Panelen aus den Themes kennt. Der Grund dafür liegt wohl in der Entstehung von Elementor: er ist als Pagebuilder konzipiert worden. Erst durch die konsequente Weiterentwicklung der Template-Technologie übernahm und übernimmt Elementor immer mehr die Aufgaben, die früher den Themes vorbehalten waren.
In Kombination mit dem “Hello Elementor” Theme (das kostenlos verfügbar ist und ohnehin nur rudimentäre Konfigurationsmöglichkeiten enthält) werden die neuen Settings, die Elementor ein wenig – sagen wir mal kreativ – Theme Style nennt, bekommen wir nun endlich jene logische Ebene serviert, die gefehlt hat.
Machen wir uns zuerst einmal bewußt, wo sich denn die Gestaltungsmöglichkeiten befinden. Der Aufbau war bisher (von unten nach oben):
Neu ist jetzt, dass durch die Theme Styles die in klassischer WordPress-Umgebungen üblichen Grundeinstellungen übernimmt und dort Farben und Schriften und einige weitere grundsätzliche Stildefinitionen durchgeführt werden können. Somit entfällt oft die Notwendigkeit ein Child Theme einzusetzen.
Da die hier definierten Styles zwischen dem Theme und den eigentlichen Seiten und Beiträgen angesiedelt sind entsteht ganz automatisch eine gute Konsistenz in der Gestaltung. Gerade bei Elementor-Sites immer wieder ein Problem, da es eben so einfach ist an der Gestaltung etwas zu ändern.
Damit wir die neuen Funktionen verwenden können ist es wichtig, dass wir dem System mitteilen, die Themeeigenen Schriften und Farben nicht zu verwenden. Dies geschieht im Dashboard unter Elementor > Einstellungen, die beiden Checkboxen sind auszuwählen
Wer keine Standardfont verwendet sondern auf Schriften von Drittherstelleren zurückgreift sollte diese lokal speichern. Grund dafür ist wieder einmal die Fa. Google, die aufgrund ihrer Datenpolitik keine DSGO-konforme Schrifteneinbindung von Google-Servern ermöglicht. Ob die anderen Schriftenanbieter rechtlich besser aufgestellt sind kann und will ich nicht beurteilen. Die Faustregel lautet also: nur legal erworbene Schriften (egal ob gekauft oder frei verfügbar) einbinden, und zwar durch Einbindung auf den eigenen Server. Elementor unterstützt das recht gut, wobei jedoch im Augenblick (Februar 2020) die Unterstützung von Variablen Fonts noch fehlt.
Bei obigem Beispiel wurden die Schnitte Regular, Bold und kursiv der Schrift “Worksans” eingebunden. Die zur Verfügung stehenden Formate sind hier woff, woff2 und ttf. In Summe also 3 x 3 = 9 Dateien die einzeln hochgeladen und eigebunden werden müssen.
Dazu im Dashboard > Elementor > Benutzerdefinierte Schriftarten wählen und zb die Schrift WorkSans anlegen, die drei Schnitte (hier “Schriftart Varianten”) hinzufügen.
Der neue Punkt Theme Style ist unter den bekannten Standardfarben und Standardschriftarten angekommen. Diese beiden funktionieren übrigens nicht mehr, die Menüführung ist hier also ein wenig verwirrend.
Elementor wechselt nun auf blau, wir sehen hier nun die Möglichkeiten die wir ab Elementor 2.9 zur Verfügung haben:
Für jeden dieser Bereiche können wir nun die Vorgaben wir gewohnt einstellen. Wichtig ist jetzt zu wissen, dass wir hier Grundeinstellungen vornehmen. Wenn wir also zB die Gestaltung der Buttons definieren so werden alle Buttons auf der ganzen Site dieses Aussehen erhalten – ausser wir haben dem einzelnen Button andere Definitionen gegeben. Wir können also immer jedes einzelne Element wie bisher gestalten, unabhängig von den Theme Style Einstellungen.
Wenn wir – wie in Step 2 vorgeschlagen – eigene Schriften angelegt haben tauchen die nun zwischen Vorgabe und System im Menu Schriftfamilie auf. Im Abschnitt Typographie können wir Body, Link und H1 – H6 definieren.
Es wird langsam. Viel besser, aber noch nicht gut genug. Was ich besonders vermisse ist genau auf dieser Ebene eine Möglichkeit, eigene CSS-Definitionen einzubinden. Hier würde ich sie benötigen. Ausserdem wirkt das Ganze noch ein wenig unrund, wie ein Feature das ein wenig zu schnell freigegeben wurde. Aber: Wenn es in dem Tempo weitergeht stimmt alles, die Richtung und auch der Weg!
Update 15.3.2020: mit der Version 2.9.0 kann man nun die vermissten CSS für die ganze Seite auch angeben. Sehr super!