Suche
Suche
Close this search box.
Elementor Einstellungen 3.14

Elementor Einstellungen

tl;dr: Mit den richtigen Einstellungen im Elementor Pro gelingt es dir einfacher ein konsistenten Webdesign umzusetzen. Wenn Farben und Schriften stimmen wird der Rest einfacher. Die gute Vorbereitung hilft beim schnellen Umsetzen deines Webdesigns.

Inhalt

Es gibt 3 Ebenen, wo man Einstellungen im Elementor vornehmen kann:

  • Über das WP-Dashboard (hier werden die „Programm“einstellungen vorgenommmen)
  • Website-Einstellungen 
  • Seiten Einstellungen (betreffen nur die einzelne Seite, Beitrag, Popup oder Template)

Programmeinstellungen

Als ersten Schritt sollten immer bevor die ersten Inhalte eines Webprojektes bearbeitet werden die grundsätzlichen Dinge konfiguriert werden. Arbeite die einzelnen Tabs Schritt für Schritt durch. Oft führen Updates zu Änderungen in diesem Bereich, überprüfe auch regegelmäßig das Changelog.  

Elementor Einstellungen 3.14
Im Dashboard unter Elementor > Einstellungen sind dich wichtigsten Optionen zu konfigurieren
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  um die Standardeinstellungen zu deaktivieren – damit können die später im Theme-Stil eingestellten Typographischen Vorgaben wirken. Die Empfehlung lautet mit dem Theme Hello Elementor und Elementor Pro zu arbeiten, um das beste Ergebnis zu erreichen.
  2. Integration. Hier kann der Google Maps API-Key eingegeben werden wenn man das entsprechende 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
    • Stripe
  3. Erweitert bietet folgende 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. Die Möglichkeit (ab Version 3.10) Google Fonts zu deaktivieren,  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. 6. Der Generator Tag baut eine Information auf der Webseite ein, mit Welcher Software (Version) diese erstellt wurde. Kann helfen – kann aber auch zu viel verraten.
Elementor Erweiterte Einstellungen
Unter Erweitert sollten die Google Fonts deaktiviert und der ungefilterte Dateiupload aktiviert werden.

4. Eigenschaften.  Im letzten Tab bündelt Elementor die Einstellungen für die nächsten Entwicklungsschritte. Dazu muss man wissen, dass Elementor alle neuen Funktionen Schritt für Schritt einführt um allem Entwicklern und Anwendern die Möglichkeit zu geben in Sicherer Umgebung in Ruhe alles auszuprobieren. 

Elementor teilt die Optionen in Laufende Experimente (oben) und Stabile Merkmale (unten). Unter jeder Funktion ist ein kurzer Beschreibungstext mit Link, wer mehr darüber lernen will. 

Aktuell (V3.14, Juni 2023) ist die Aktivierung von Containern dringend angeraten. Weiters empfehle ich Nested Elements und Global Style Guide zu nutzen. 

Bei den Stabilen Merkmalen empfehle ich die Nutzung aller Dinge welche die Performance erhöhen. Die Optionen für Default to New Theme Builder, Hello Theme Header & Footer, Startseiten und Page Transitions sind bei mir immer deaktiviert – weil ich sie nicht mag oder benötige.

Elementor Eigenschaften aktivieren
Flexbox und Nested Elements sind wichtige Gestaltungshilfen für alle künftigen Projekte.

Website Einstellungen

Um zu den Website-Einstellungen zu gelangen muss man den Elementor starten. Dabei ist es unerheblich über welche Seite oder welchen Beitrag, man benötigt nur einen Weg aus WordPress hinüber in die Elementor Umgebung.

Wenn man den Link Website-Einstellungen klickt wechselt Elementor in das umfangreiche Panel

  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

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 Schriftart: 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 Website Einstellungen
Die Website Einstellungen bieten umfangreiche Optionen, die sorgfältig gewählt werden müssen

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.

Design System

Globale Farben

Elementor definiert sog. System Farben. Diese heissen  Primär, Sekundär, Text und Accent. Auf diese Farben greifen viele Widgets zurück, es ist also eine gute Idee diese Farben zu definieren. 

Ganz schlüssig ist es aber nicht (wenn diese Farben verwendet werden). Auch wenn man diese Systemfarben umbennenen kann – es geht nicht über wirklich eigene Definitionen der Farben. Dieser können unter Individuelle Farbe angelegt (also benannt und definiert) werden. 

Wer bei den Erweiterungen (s.o.) das Experiment Style Guide Preview aktiviert hat kann nun diese Farben gleich beim Anlegen in Farbfeldern ansehen. 

Globakle Farben 1
Globale Farben und Schriften können nun mit der neuen Option Style Guide Preview schnell überprüft werden

Überall, wo Farben ausgewählt werden können, kann man auf diese definierten Globalen Farben zu greifen. Der Farbwähler selber hat sich auch leicht weiter entwickelt. Endlich kann man neben HEXA auch RGBA und HSLA-Werte eintragen.

Farbwähler
Der aktuelle Farbwähler hat neben dem Pipettenwerkzeug (das eine Farbauswahl aus zb einem Bild generiert) auch endlich die Möglichkeit, neben HEXA auch RGBA und HSLA als Einheiten auszuwählen

Globale Schriften

Analog zu den Farben werden auch die Globalen Schriften definiert. Es wird dringend empfohlen, die Schriften (Voraussetzung Elementor Pro) lokal anzulegen und diese lokalen Schriften dann für die Globalen Definition zu verwenden. 

Auch hier gibt es wieder die sog. System-Schriften die sinnvoller Weise durch Individuelle Schriften ergänzt werden. Die Style Guide Preview hilft bei der Abstimmung. Die Empfehlung lautet immer, so wenig Angaben wie möglich zu jeder einzelnen Schrift zu machen. Oft wird nur die Schriftfamilie und der Schriftschnitt festgelegt, die Größen werden dann im Theme-Stil unter Typographie definiert.

Globale Schriften in Elementor anlegen
Lokal eingebundene Schriften werden als Globale Schriften angewendet

Theme Stil

Im zweiten Einstellungsbereich Theme-Stil können Einstellungen für 4 Bereiche vorgenommen werden: Typographie, Buttons, Bilder und Formularfelder.

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.  Natürlich wird man sich nun bei den Einstellungen der typographischen Details an den Globalen Einstellungen bedienen, die man zuvor vorgenommen hat,

Unter Body wird als erstes die grundlegende Typography der Website eingestellt. Alles, was nicht irgendwie anders definiert wurde, wird in der Schrift und der Farbe gezeigt, die hier eingestellt wird. Ein Absatzabstand kann hier also für alle Texte gesetzt werden.

Nur hier unter Typographie kann man die Links definieren. Da Links sehr unterschiedlich auftauchen werden (In Menüs, Überschriften, in Absätzen etc.) wird es sinnvoll sein, hier nur eine Linkfarbe (Normal), eine Hover-Farbe und ggf. noch eine Auszeichnung (unterstrichen) zu definieren. Zu viele Definitionen führen dazu, dass man dann im Detailfall ggf. wieder auf „keine“ Auszeichnung zurückwechseln muss um zB. eine Unterstreichung im Menü zu verhindern.

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. 

Praxistip: die Überschriften H5 und H6 in der selben Typographie wie den normalen Text definieren, die H5 fett. H1 – H4 wird man vmtl. hierarchisch einsetzen, während man mit H5/H6 dann flexibel bleibt sollte man eine Überschrift benötigen die nicht sofort als solche erkennbar sein soll.

Typographische Einstellungen
Die Typographischen Einstellungen sind die Basis für alle Inhalte eines Projektes

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.  

Buttons Einstellungen
Grundeinstellungen für Buttons wirken auf mehrere Widgets

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!

Bilder
Grundeinstellungen für Bilder werden nur bei wenigen Projekten benötigt

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. 

Formularfelder
Für Formularfelder steht ein umfangreiches Panel für Voreinstellungen bereit

Einstellungen

Im 3. Bereich der Website-Einstellungen mit dem sinnigen Namen Einstellungen stehen die Bereiche Website-Informationen, Hintergrund, Layout, Lightbox, Seitenübergänge und Individuelles CSS bereit.

Website-Informationen

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.

website Informationen Elementor
Hier werden Logo und Favicon definiert, Namen und Untertitel der Seite können auch hier eingestellt 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.

Hintergrund
Farben, Bilder und Verläufe können als Standardhintergrund im Elementor definiert werden

Layout

Die erste Einstellungen Inhaltsbreite legt die Blockbreite für den Content fest. Der Container-Innenabstand und der Abstand zwischen den Elementen sollte auf den voreingestellten Werten belassen werden.

Sehr wichtig ist hier die Einstellung für das Standard-Seitenlayout: Vermutlich ist Elementor Volle Breite – also jene Variante wo Elementor Footer und Header verwendet werden, die häufigste in der Praxis. Die Voreinstellung Theme führt oft zum selben Resultat – aufpassen muß man hier immer mit der Anzeige des Beitragtitels.

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. 

Layout
Layout Einstellungen gehören zu den grundsätzlichsten Dingen mit den größten Auswirkungen auf das Design. Die Voreinstellungen sind gut.

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.

Elementor Lightbox
Die Lightbox-Einstellungen werden immer benötigt, wenn Galerien eingesetzt werden oder Bilder mit Link auf die Medien-Dateien definiert werden.

Eigenes CSS

CSS für die gesamte Webseite wird hier platziert. Ein guter Platz, um zB. die Silbentrennung einzubauen. Eigenes CSS steht auch auf Seitenebene und auch bei vielen Widgets bereit – ein Pro Feature!

Eignes CSS
Eigenes CSS auf der Einstellungsebene eignet sich hervorragend, um zB. die Anweisungen für automatische Silbentrennung aufzunehmen.

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.

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.

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.

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: 4. Januar 2024