Menü
tl;dr: Mit der Version 3.0 bekommt 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 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. 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 (unterhalb der Inhalte) 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.
Wer Elementor Pro aktiviert hat kann unter dem Reiter Integration folgende Dienste API-Keys hinterlegen:
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.
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.
Und genau so einfach und schlüssig wie jetzt (endlich!) muss so eine Farbeinstellung sein: ich kann eine beliebige Anzahl an Farben definieren die mir dann Global zur Verfügung stehen. Die Farben bekommen einfach 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. Das folgende Video demonstriert die Anwendung einer Globalen Farbe und deren nachträgliche Änderung.
Bei den Typographischen Vorgaben funktioniert das ganz ähnlich.
Ich kann also grundsätzliche Absatzformate erstellen, die ich dann 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 Farben ausgewählt werden können kann ich also zwischen meinen Globalen Farben und einer nur für diesen einen Einsatzzweck definierten Farbe wählen.
Also nochmal zur Sicherheit: die Einstellungen, die hier vorgenommen werden gelten für alle Seiten, die mit Elementor erstellt werden. Nur dann, wenn ich zB. bei einem Widget eine andere Typographie gewählt habe die ich unter Farben & Typographie definiert habe werden die Einstellungen hier überschrieben.
Wenn ich hier also Textfarbe, Typographie und Absatzabstand einstelle ist das die Grundeinstellung für mein gesamtes Projekt. Ich kann aber auch bei diesen Grundeinstellungen aus den Farben und der Typographie auswählen, die ich oben unter Farben & Typographie vorgenommen habe.
Nur hier kann ich hingegen die Links (Normal und Hover) festlegen. Die Pseudoklassen a:active und a:visited kann man hier nicht definieren!
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 ich das Button-Widget verwende. Auch beim Formular oder dem Call-To-Action-Widget wird auf die Definitionen zugegriffen, die hier eingestellt werden.
Auch hier kann wieder auf meine 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 ich 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 ich 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 Billdposition, Bildwiederholung, Größe etc. bereit.
Die Globalen Einstellung fürs 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 nun hier angekommen.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!
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. Der neue Theme Builder 3.0 macht auch nichts anderes, als diese Zusammenfassung ein wenig besser zu organisieren. Es gibt 7 verschiedene Template-Typen (Site Parts):
Im Augenblick (August 2020, Beta-Version) sind die Neuerungen des Theme Builders nur in der Bedienungsoberfläche zu finden. Das ist hilfreich, aber keine Revolution. Besser als bisher aber auf jeden Fall.
Mit der am 16.2.2021 veröffentlichten Version 3.1 von Elementor Pro wurde das Feature Custom Code eingeführt. Damit kann man nun wie der Name schon vermuten lässt verschiedener 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.
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 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 (Juli 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.
Ab Version 3.0 von Elementor ist nun endlich Ordnung im Einstellungschaos. 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
3 Antworten
Danke für den umfangreichen Artikel! Sehr gut.
Ich verzweifel gerade daran, herauszufinden, wie ich die ganzen globalen Einstellungen exportieren kann, um sie für ein anderes Projekt nutzen zu können. Geht das nicht oder finde ich das nur nicht???
Hmmmm. Eine Export/Importfunktion für die Einstellungen kenne ich auch nicht. Aber: wenn das Projekt “neu” ist würde ich das gesamte Ding einfach klonen und dann die WP-Einstellungen wie Namen, Domain etc. ändern. Und: SOOOO viel Arbeit sind die Einstellungen auch wieder nicht. Ausserdem wird es wohl auch Unterschiede in Farben und Fonts geben sollen, also ist eher Handarbeit angesagt.
Naja, wenn die weiteren Seiten zum selben Unternehmen gehören, gibt es die Unterschiede in Fonts und Farben eben genau nicht. 😉 Und ALLE Schriften mit Größen, Schriftschnitt, Dekoration und und und neu einzugeben zzgl. allen Farben kann schonmal ein ganzen Weilchen dauern. Also definitiv ein “Missing Feature”.
War mittlerweile auf die selbe Idee gekommen wie du und habe das gesamte Projekt kopiert, was natürlich nur geht, wenn das neue Projekt noch nicht angefangen wurde.
Danke für die Antwort!