Elementor Einstellungen

Elementor Einstellungen

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:

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

  • Über das WP-Dashboard (hier werden sozusagen die Programmeinstellungen vorgenommmen)
  • Globale Einstellungen (neu ab 3.0, hier finden sich auch die mit Version 2.9 eingeführten Theme Stile)
  • Seiten Einstellungen (betreffen nur die einzelne Seite oder den Beitrag)

Programmeinstellungen

Elementor Einstellungen in der freien Version
Die Free Version bietet 3 Einstellungsbereiche: Generell, Stil und Erweitert
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! Die etwas unglückliche deutsche Formulierung der Erklärungen bedeutet: „Nimm nicht die Einstellungen von Elementor sondern die vom Theme. Und die vom Theme (bei Hello Elementor) sind dann wiederum jene, die über die Globalen Einstellungen eingestellt werden.”
  2. Stil. Dieser Reiter wird jetzt obsolet. Die Einstellungen die bis Version 2.9 hier zu finden sind werden in Zukunft auch unter Globale Einstellungen bedient.
  3. 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. 
Elementor Pro Einstellungen
Pro-User haben zusätzlich die Möglichkeit die Integration von diversen Services zu konfigurieren.

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

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.

Hinweis: Im Augenblick (Beta-Version) sind die Bezeichnungen nicht konsistent: ob es Site-Settings oder Global-Settings sind und wie diese dann in der endgültigen deutschen Übersetzung heissen und deren Anordnung wechseln gerade von Version zu Version.

Wenn wir den Link Site Settings klicken wechselt Elementor auf blauen Hintergrund. Es stehen hier nun folgende Bereiche bereit:

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

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.

Auch auf diese Schriftdefinionen kann ich später zugreifen und diese auch nachträglich zentral ändern. 

Auch die Fallback Font-Familie stelle ich nun hier, also ein, 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.

Globale Farben

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. 

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. Das folgende Video demonstriert die Anwendung einer Globalen Farbe und deren nachträgliche Änderung. 

Globale Schriften

Bei den Typographischen Vorgaben funktioniert das ganz ähnlich. 

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

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. 

 

Typographie Erstellen

Theme Stil

Typographie

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. 

 

Theme Stil Typographie

Buttons

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.  

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 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. 

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 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.

Theme Stil Hintergrund

Layout

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. 

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 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.

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

Theme Builder 3.0

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

  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.

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.

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 (Juli 2020) 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.

Fazit

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
Letztes Update: 20. August 2020

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.