Elementor Einstellungen

Elementor Einstellungen

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.

Inhalt

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:

FunktionElementor FreeElementor 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:

  • Über das WP-Dashboard (hier werden sozusagen die Programmeinstellungen vorgenommmen)
  • Globale Einstellungen 
  • Seiten Einstellungen (betreffen nur die einzelne Seite, Beitrag, Popup oder Template)

Programmeinstellungen

Elementor Pro Einstellungen
Pro-User haben mehrere Möglichkeiten die Integration von diversen Services zu konfigurieren. Ohne Pro kann man nur den Google Maps API-Key eingeben.
Dashboard > Elementor > Einstellungen

Dieser Pfad führt zu den Einstellungsmöglichkeiten die du für den Elementor selber vornehmen kannst.

  1. Generell: Hier ist auszuwählen, ob Elementor bei allen Beitragsarten (Seiten, Beiträge, …) angewendet werden soll. Darunter die beiden wichtigen Checkboxen für Standardfarben und Standardschriftarten deaktivieren. Diese sind anzukreuzen (der Text ist sehr mißverständlich) wenn die Einstellungen die man innerhalb des Elementor trifft wirken sollen.
  2. Stil. Dieser Reiter ist obsolet. Die Einstellungen die bis Version 2.9 hier zu finden waren werden unter Globale Einstellungen bedient.
  3. Integration. Hier kann der Google Maps API-Key eingegeben werden wenn man das enstprechende Widget verwenden will. Wer Elementor Pro aktiviert hat kann unter dem Reiter Integration folgende Dienste API-Keys hinterlegen:
    • reCAPTCHA
    • ReCAPTCHA V3
    • Facebook SDK
    • MailChimp
    • Drip
    • ActiveCampaign
    • GetResponse
    • ConvertKit
    • MailerLite
    • Adobe Fonts (TypeKit)
    • Font Awesome Pro
  4. Erweitert bietet 5 Einstellungsmöglichkeiten: 1. Ob CSS als Datei oder inline ausgegeben werden sollen, 2. Editor-Lademöglichkeiten (nur für Serverprobleme zum debuggen), 3.  Die Möglichkeit, ungefilterte Dateiuploads (auch SVG und JSON) zuzulassen. (zB. für eigene SVG-Icons wichtig), 4. Deaktivierung für optimierten DOM-Output (neu!!) und 5. Die Font-Awesome Version 4 Unterstützung. Das kann hilfreich sein, wenn man ältere Templates verwendet und die Icons plötzlich nicht mehr sichtbar sind.

Design System

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:

  1. Design System
    • Globale Farben
    • Globale Schriftart
  2. Theme-Stil
    • Typografie
    • Buttons
    • Bilder
    • Formularfelder
  3. Einstellungen
    • Site Identity
    • Hintergrund
    • Layout
    • Lightbox
    • Eigenes CSS
    • Additional Settings
Elementor Einstellungen
Links oben über das hamburger-Menü gelangt man zu den Website Einstellungen.

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:

  1. Primary
  2. Sekundäre
  3. Text
  4. Accent

beliebig viele eigene Farben zu definieren, also Beispielsweise:

  • Firmenblau
  • Aktionsrot

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. 

Elementor 3.0 Site Settings
Die neuen Site Settings fassen nun zusammen, was zusammen gehört.

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.

Header Footer Site Settings
Bei aktivem Hello Elementor Theme tauchen hier auch Einstellungen für Header und Footer auf. Diese können unter den Erweiterten Einstellungen > Experiments (siehe oben) deaktiviert werden.

Globale Farben

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. 

Elementor Farbwähler
Der Farbwähler ist groß genug und gut zu bedienen.
Die neuen Farben
Die Globalen Farben stehen überall zur Verfügung

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. 

Globale Schriften

Bei den Typographischen Vorgaben funktioniert das ganz ähnlich. 

  1. Erstellen einer Schriftdefinition bestehend aus Schriftfamilie, Größe, Schriftschnitt etc.
  2. Anwenden des Schriftformates auf einen geignetes (Text)Widget.

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. 

 

Typographie Erstellen

Theme Stil

Typographie

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. 

 

Theme Stil Typographie

Buttons

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.  

Theme Stil Buttons

Bilder

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!

Theme Stil Bilder

Formularfelder

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. 

Theme Stil Formularfelder

Einstellungen

Site Identity

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:

  1. Titel der Website (Site Name)
  2. Untertitel (Site Description)
  3. Logo (Site Logo)
  4. Website Icon (Site Favicon)

Titel und Untertitel können natürlich auch wie bisher über die WordPress eigenen Einstellungen geändert werde.

Site Identity
Auch die 4 Basics können im Elementor definiert werden.

Hintergrund

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.

Theme Stil Hintergrund

Layout

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. 

Elementor Site Settings Layout

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.

Globale Lightbox Einstellungen

Eigenes CSS

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!

Theme Stil Eigenes CSS
Elementor Nachhilfe
Noch Fragen? Harry Martin hilft dir weiter. Auch einzelne Nachhilfestunden.
Nachhilfe

Import / Export mit Site Kit

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.

Elementor Site Kit aktivieren
Die Import-Export Funktionen müssen in den Einstellungen aktivert sein.

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.

Theme Builder

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):

  1. Kopfzeile
  2. Fußzeile
  3. Single Post
  4. Single Page
  5. Archive
  6. Suchergebnisse
  7. Error 404
Elementor Theme Builder 3.0
Die 7 Template-Typen für den Theme Builder sind jetzt übersichtlicher über eine Full Page Ansicht zu zu erreichen
Theme Builder Elementor 3.0
Die Anzeigebedingungen, Exportfunktion und Namensgebung für die Templates ist jetzt einfacher zu finden.

Custom Code

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:

  1. Header
  2. Beginn des Body
  3. Ende des Body

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.

Wo steckt was - die Gestaltungshierarchie

Designhierarchie mit Elementor

Machen wir uns zuerst einmal bewußt, wo sich denn die Gestaltungsmöglichkeiten befinden. Der Aufbau ist:

  1. WordPress selber
  2. Das gewählte Theme (oft Hello Elementor)
  3. Optional: Ein Child Theme, das die notwendigen Anpassungen vom eigentlichen Theme trennt und so für Updatesicherheit sorgt
  4. Globale Einstellungen (Farben und Schriften)
  5. Theme Stil (Typographie, Buttons, Bilder, Formularfelder))
  6. CSS-Einstellungen, die ich zu jeder Seite oder zu jedem Beitrag einstellen kann
  7. Die Gestaltung des jeweiligen Widgets
  8. Die Möglichkeit, in den Erweiterten Einstellungen eigenen CSS-Code zu jedem Widget unterzubringen.

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.

Schriften lokal einbinden

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 die Unterstützung von Variablen Fonts noch fehlt. 

Schriften Lokal einbinden mit Elementor

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.

FAQs

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.

Um Google Fonts im Elementor zu deaktivieren muß 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.

Fazit

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

Letztes Update: 1. September 2022