Menü
tl;dr: Mit der Version 3.0 bekam Elementor eine Einstellungs-Zentrale (Global Settings). Der Theme-Builder ist der Pro-Version vorbehalten, der jetzt auch übersichtlicher und logischer ist. Einsteiger in dieses Design-System werden sich sehr schnell zurecht finden. Welche Einstellungen wo vorgenommen werden können erfährst du in diesem Artikel.
Viele Einsteiger wunderten sich, warum es im Elementor keine zentralen Einstellungen (Global Settings) gab, so wie man sie von den Setting-Panelen aus vielen Themes kennt. Der Grund dafür liegt wohl in der Entstehung von Elementor: er wurde als Pagebuilder konzipiert. Erst durch die konsequente Weiterentwicklung der Template-Technologie übernahm und übernimmt Elementor immer mehr die Aufgaben, die früher den Themes vorbehalten waren. Die volle Kraft entfaltet Elementor aber erst in der Pro-Version. Hier die wesentlichsten Unterschiede:
| Funktion | Elementor Free | Elementor Pro |
|---|---|---|
| Templates | ✔ | ✔ |
| Theme Builder | – | ✔ |
| Popups | – | ✔ |
| Eigene Schriften | – | ✔ |
| Individuelle Icons | – | ✔ |
| Eigenes CSS | – | ✔ |
| Integration von Drittherstellern | – | ✔ |
Es gibt 3 Ebenen, wo man Einstellungen im Elementor vornehmen kann:
Dashboard > Elementor > Einstellungen
Dieser Pfad führt zu den Einstellungsmöglichkeiten die du für den Elementor selber vornehmen kannst.
Um zu den Globalen Einstellungen zu gelangen muss man den Elementor starten. Dabei ist es unerheblich über welche Seite oder welchen Beitrag, wir benötigen nur einen Weg aus WordPress hinüber in die Elementor Umgebung.
Wenn wir den Link Website-Einstellungen klicken wechselt Elementor auf blauen Hintergrund. Es stehen hier nun folgende Bereiche bereit:
Der Design System genannte Teil dient zur Grundeinstellung von Farben und Schriften, die hier Global genannt werden.
Globale Farben: Hier haben wir die Möglichkeit, neben den Systemfarben:
beliebig viele eigene Farben zu definieren, also Beispielsweise:
Auf diese Farben kann ich dann immer dann zugreifen, wo ich eine Farbauswahl treffen kann.
Globale Schriften: Funktionieren analog zu den Farben: ich habe 4 System Fonts (Primary, Secondary, Text, Accent) sowie die Möglichkeit, weitere Font-Styles zu definieren. Die 4 voreingetragenen Globalen Schiften können übrigens auch umbenannt werden.
Auch auf diese Schriftdefinitionen kann ich später zugreifen und diese auch nachträglich zentral ändern.
Auch die Fallback Font-Familie stelle ich nun hier, also jenen Stil der verwendet wird, falls die von mir aussuchte Schrift nicht geladen werden kann.
Sollten zwischen Theme Stil und Einstellungen die beiden Buttons für Header und Footer auftauchen so ist das Theme Hello Elementor installiert. Dieses bietet sehr einfache Möglichkeiten der Gestaltung auch in der freien Version an. Wer mit dem Theme Builder arbeitet (=empfohlen!) benötigt das nicht und kann es unter
Dashboard > Elementor > Einstellungen > Experimente
deaktivieren.
Und genau so einfach und schlüssig muss so eine Farbeinstellung sein: man kann eine beliebige Anzahl an Farben definieren die dann global zur Verfügung stehen. Die Farben bekommen einen Namen zur leichteren Zuordnung.
Und weil das eben eine Globale Definition ist habe ich eine zentrale Möglichkeit diese Farben auch nachträglich zu ändern – überall dort, wo sie angewendet wurden.
Bei den Typographischen Vorgaben funktioniert das ganz ähnlich.
Man kann also grundsätzliche Absatzformate erstellen, die man je nach Bedarf anwenden kann – und auch nachträglich an einer zentralen Stelle ändern.
Natürlich kann auch beides, also eine Globale Farbe und eine Globale Typographie auf ein Textwidget angewendet werden.
Überall wo Schriften ausgewählt werden können kann man zwischen den Globalen Schriften und einer – nur für diesen einen Einsatzzweck definierten – Typographie wählen.
Nochmal zur Sicherheit: die Einstellungen, die hier vorgenommen werden gelten für alle Seiten, die mit Elementor erstellt werden. Nur dann, wenn man zB. bei einem Widget eine andere Typographie gewählt hat die man unter Farben & Typographie definiert hat werden die Einstellungen hier überschrieben.
Wenn man hier also Textfarbe, Typographie und Absatzabstand einstellt ist das die Grundeinstellung für das gesamtes Projekt. Man kann aber auch bei diesen Grundeinstellungen aus den Farben und der Typographie auswählen, die man oben unter Farben & Typographie vorgenommen hat.
Nur hier unter Typographie kann man hingegen die Links (Normal und Hover) festlegen. Die Pseudoklassen a:active und a:visited können hier nicht definiert werden!
H1 bis H6 zu definieren ist auf jeden Fall zu empfehlen, auch wenn man am ersten Blick nicht vor hat alle hierarchischen Stufen der Überschrift zu verwenden. Vielleicht ist ja bei einem Widget eine Überschrift H5 voreingestellt die man selber gar nicht verwendet? Also an dieser Stelle gründlich sein.
Buttons tauchen nicht nur dann auf, wenn man das Button-Widget verwendet. Auch beim Formular oder dem Call-To-Action-Widget wird auf die Definitionen zugegriffen, die hier eingestellt werden.
Auch hier kann wieder auf die Voreinstellungen von Globalen Farben und Schriften zugegriffen werden.
Wer gerne mit abgerundeten Ecken oder Bildschatten arbeitet wird hier fündig. Einmal definieren und schon sind alle Bilder mit den gleichen Features ausgestattet. Vorsichtig einsetzen und immer das Ergebnis kontrollieren: so eine Website hat mehr Bilder als man am ersten Blick glaubt!
Die Gestaltung von Formularfeldern kann ganz schön tricky sein, besondern, wenn man auch am Mobilgerät Text eingeben können will. Schriftgößen und Abstände werden oft bei Formularen größer sein als bei anderen Textstellen. Auch Textrahmen und Hintergrundfarben werden aus ergonomischen Gründen oft eingesetzt. Hier ist der Platz, um diese Dinge grundsätzlich einzustellen.
Wer bisher über den WordPress Customizer sein Logo und das Favicon definiert hat kann jetzt auf diesen Weg verzichten. Hier können genau 4 wichtige Dinge eingestellt werden:
Titel und Untertitel können natürlich auch wie bisher über die WordPress eigenen Einstellungen geändert werde.
Neben Farben und Bildern kann man auch Verläufe als Standardhintergund einstellen. Das kann gut gehen, aber auch sehr schief. Wenn man ein Bild auswählt stehen natürlich die Möglichkeiten für Bildposition, Bildwiederholung, Größe etc. bereit.
Die Globalen Einstellung für’s Layout sind inhaltlich nicht neu.
Sehr wichtig ist hier die Einstellung für das Default Layout: Vermutlich ist Elementor Volle Breite – also jene Variante wo Elementor Footer und Header verwendet werden, die häufigste in der Praxis.
Wer sich näher für Inhaltsbreite und Breakpoints interessiert bzw. wie man ein Responsive Design mit Elementor umsetzt sei auf den eigenen Artikel dazu verwiesen.
Die Lightbox-Funktionalität ist Teil des Elementors und muss nicht extra über ein Plugin ergänzt werden. Die Einstellungen hierzu sind hier zu finden. Die häufigsten Anwendungen von Lightboxes sind Bildergalerien oder auch Einzelbilder die mit einem Link zum Medienanhang versehen sind.
Die verschiedenen Einstellungsmöglichkeiten sind selbsterklärend, natürlich kann ich auch bei den Farbeinstellungen auf die Globalen Farben (siehe oben) zurückgreifen.
Falls ich doch noch spezielles CSS für meine gesamte Webseite einbinden will ist genau hier der Platz dazu. Eigenes CSS steht auch auf Seitenebene und auch bei vielen Widgets bereit – ein Pro Feature!
Im Juli 2021 wurde mit der Version 3.3. endlich eine Im- und Exportfunktion eingefügt. Die Funktionen wurden unter dem Namen Site-Kit zusammengefasst, in der Tat geht es um ein wenig mehr als das Verschieben von .json-Files, wie wir es von den Templates kennen.
Zuerst muss sichergestellt sein, dass diese Funktionen aktiv sind:
Dashboard > Elementor > Einstellungen > Experiments > Import Export Template Kit
ein grünes Bullet signalisiert , dass die Funktion atkiv ist.
Wenn das erledigt ist stehen die Werkzeuge bereit, und zwar unter
Dashboard > Elementor > Werkzeuge > Import / Export Kit
Wenn man gute Einstellungen und Templates erstellt hat, die man auf eine andere Website übertragen will wählt man hier Template Kit exportieren. Im darauf erscheinenden Dialog kann man wählen ob man Vorlagen und/oder Inhalt und/oder Einstellungen exportieren will. Nach dem Klick auf Export wird eine Datei Namens
elementor-kit.zip
ins Downloadverzeichnis kopiert. Der Weg für einen Import ist einfach umgekehrt: die Zip-Datei hochladen, wählen welche der Bereiche Vorlagen/Ínhalt/Einstellungen man importieren will und den Knopf drücken. Zur Bestätigung erhält man eine Auflistung der Importieren Dinge.
Für eine konsistente und rationelle Arbeit an der Website ist der Theme Builder des Elementor Pro die Steuerungszentrale. Er fasst, geordnet nach Anwedungen, alle Templates der Webseite zusammen die benötigt werden.
Es gibt 7 verschiedene Template-Typen (Site Parts):
Mit diesem Tool kann man nun – wie der Name schon vermuten lässt – verschiedenen Code in unterschiedlichen Sprachen einbinden. Dafür stehen 3 Positionen zur Auswahl:
Zusätzlich kann man diesen Codesnipptes eine Priorität zuweisen und damit die Reihenfolge bestimmen, in welcher mehrer Codes hintereinander geladen werden.
In diesem kleinen Beispiel wurde ein Custom Code erstellt, der nur auf der Suchergebnisseite ganz am Ende einen Link anzeigt. Mehr Sinn ergibt sicher die wohl häufigste Anwendung dieses Features: Die direkte Einbindung des Google Tracking Code im Header. Natürlich sind auch ander Dinge möglich wie etwa ein Javascript das auf bestimmten Seiten den Cursor des Besuchers grafisch ändert.
Mit dieser Funktion lässt sich CSS-Code, HTML-Code und JavaScript einfügen. Wenn man allerdings PHP-Code einbinden will benötigt man ein Plugin wie zB. Code Snippets.
Machen wir uns zuerst einmal bewußt, wo sich denn die Gestaltungsmöglichkeiten befinden. Der Aufbau ist:
Bei allen hier nun angeführten Einstellungen gilt, dass diese über eine übergeordnete Definition overruled werden können. Ich kann also zb: eine Farbe als Hintergrundfarbe definieren, für eine einzelne Seite aber dann einmalig eine andere Farbe wählen.
Oder ich kann eine grundsätzliche Definition für alle Buttons treffen, für ein spezielles CTA aber dann eine ganz besondere Form einstellen.
Hinweis: wer immer Pixel als Größeneinheit verwendet und sich nicht sicher ist, was die anderen möglichen Einheiten bedeuten finden vielleicht hier, im Artikel über Responsive Design mit Elementor, die Antworten.
Wer keine Standardfont verwendet sondern auf Schriften von Drittherstellern 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.
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 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.
Bei Elementor sind die Einstellungen hierarchisch zweigeteilt: in die sog. Globalen Einstellungen (auch Design System) und den Theme-Stil Einstellungen. In den Globalen Farben und Globalen Schriften kann man seine persönlichen Grundfarben und -schriften anlegen, auf die man dann im Theme Stil und bei den Widget-Einstellungen zurückgreifen kann.
Man kann Systemschriften, Google Fonts, Adobe Fonts (lizenzpflichtig) und auch alle eignenen Schriften, also solche die innerhalb der Webseite angelegt wurden, als Globale Schriften einstellen. Es ist sinnvoll, nur die Schriftart (also Schriftfamilie + Schriftschnitt) global einzustellen und den Rest der Vorgaben im Theme-Stil zu definieren.
Um im Elementor die Hintergrundfarbe zu ändern gibt es in den Website-Einstellungen > Einstellungen > Hintergrund. Damit definiert man den Hintergrund für die ganze Website. Für einzelne Seiten, Beiträge und Templates kann man in den Beitrag-Einstellungen > Stil > Body Stil den Hintergrund festlegen. Bei Abschnitten, Spalten und Containern kann im Stil-Menü der Hintergrund gestaltet werden.
Unter Dashboard > Elementor > Einstellungen > Erweitert können Google Fonts ab Version Elementor 3.10 deaktiviert werden. Alternativ kann man ein Dritthersteller Plugin verwenden. Das Plugin Disable and Remove Google Fonts unterstützt u.a. auch Elementor, es ist kostenlos.
Im Zuge der Umstellung auf Container wurden die Einstellungsmöglichkeiten für die Positionierung nach … > Erweitert > Layout verschoben worden.
Es gibt in den Elementor Website-Einstellungen im Bereich Theme-Stil den Unterpunkt Typographie, in dem der Bereich Link eingerichtet ist. Dort können Farbe und Typographie (Normal und Hover) definiert werden.
Wer einmal die Hierarchie von WordPress und Elementor in Kombination verstanden hat wird bei einer guten Planung sehr konsistente und wartungsarme Sites erstellen können. Das gilt auch schon für die freie Version, für rationelles Arbeiten ist aber die Pro-Version dringend empfohlen.
Veröffentlich am: 19. Februar 2020
