Elementor Einstellungen 3.14

Elementor Einstellungen

tl;dr: Mit den richtigen Einstellungen im Elementor Pro gelingt es dir einfacher ein konsistentes Webdesign umzusetzen. Wenn Farben und Schriften stimmen wird der Rest einfacher.

Hinweis: dieser Artikel ist in Teilen bereits 6 Jahre alt (!). Vieles stimmt noch immer, manches nicht mehr so genau. 
Wenn du aktuelles Infos zu Schrifteinstellungen suchst: Font Settings in Elementor . Auch im Skriptum (Jänner 2025) sind aktuelle Informationen zu finden. Hinweise gibt es auch in Einstieg in Elementor 4.

Es gibt 3 Ebenen, wo man Einstellungen im Elementor vornehmen kann:
  • Über das WP-Dashboard (hier werden die „Programm“einstellungen vorgenommen)
  • 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 regelmäßig das Changelog.
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 angewendet werden soll. Die beiden wichtigen Checkboxen für Standardfarben und Standardschriftarten deaktivieren sind anzukreuzen.
  2. Integration: Hier kann der Google Maps API-Key eingegeben werden. Mit Elementor Pro können folgende Dienste hinterlegt werden: reCAPTCHA, ReCAPTCHA V3, Facebook SDK, MailChimp, Drip, ActiveCampaign, GetResponse, ConvertKit, MailerLite, Adobe Fonts (TypeKit), Font Awesome Pro, Stripe.
  3. Erweitert: 1. CSS als Datei oder inline, 2. Editor-Lademöglichkeiten, 3. Ungefilterte Dateiuploads (auch SVG und JSON), 4. Google Fonts deaktivieren (ab V3.10), 5. Font-Awesome Version 4 Unterstützung, 6. Generator Tag.
4. Eigenschaften. Im letzten Tab bündelt Elementor die Einstellungen für die nächsten Entwicklungsschritte. Elementor führt alle neuen Funktionen Schritt für Schritt ein.
Elementor teilt die Optionen in Laufende Experimente (oben) und Stabile Merkmale (unten). Unter jeder Funktion ist ein kurzer Beschreibungstext mit Link.
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.

Website Einstellungen

Um zu den Website-Einstellungen zu gelangen muss man den Elementor starten. Dabei ist es unerheblich über welche Seite oder welchen Beitrag.
Wenn man den Link Website-Einstellungen klickt wechselt Elementor in das umfangreiche Panel mit:
  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 (Primary, Sekundäre, Text, Accent) beliebig viele eigene Farben zu definieren, also Beispielsweise Firmenblau oder Aktionsrot. Auf diese Farben kann ich dann immer dann zugreifen, wo ich eine Farbauswahl treffen kann.
Globale Schriftart: Funktioniert analog zu den Farben: ich habe 4 System Fonts (Primary, Secondary, Text, Accent) sowie die Möglichkeit, weitere Font-Styles zu definieren. Auch die Fallback Font-Familie stelle ich nun hier.
Sollten zwischen Theme Stil und Einstellungen die beiden Buttons für Header und Footer auftauchen so ist das Theme Hello Elementor installiert. Wer mit dem Theme Builder arbeitet (=empfohlen!) benötigt das nicht und kann es unter:
Dashboard > Elementor > Einstellungen > Experimente
deaktivieren.
Elementor Website Einstellungen
Die Website Einstellungen bieten umfangreiche Optionen, die sorgfältig gewählt werden müssen

Design System

Globale Farben

Elementor definiert sog. System Farben: Primär, Sekundär, Text und Accent. Auf diese Farben greifen viele Widgets zurück. Eigene Farben können unter Individuelle Farbe angelegt werden.
Wer bei den Erweiterungen das Experiment Style Guide Preview aktiviert hat kann diese Farben gleich beim Anlegen in Farbfeldern ansehen.
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 zugreifen. Der Farbwähler selber hat sich auch weiterentwickelt — endlich kann man neben HEXA auch RGBA und HSLA-Werte eintragen.
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 lokal anzulegen und diese lokalen Schriften dann für die Globalen Definitionen zu verwenden.
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
Lokal eingebundene Schriften werden als Globale Schriften angewendet
Mehr über Schriften mit Elementor

Theme Stil

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

Typographie

Mehr über Formulare mit Elementor

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.

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 Grundeinstellungen
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!
Bilder Einstellungen Elementor
Grundeinstellungen für Bilder werden nur bei wenigen Projekten benötigt

Formularfelder

Die Gestaltung von Formularfeldern kann ganz schön tricky sein, besonders wenn man auch am Mobilgerät Text eingeben können will. Schriftgrößen und Abstände werden oft bei Formularen größer sein als bei anderen Textstellen.
Elementor Einstellungen Formularfelder
Für Formularfelder steht ein umfangreiches Panel für Voreinstellungen bereit

Einstellungen

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

Website-Informationen

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)
Elemenrtor Einstellungen Website Infoermationen
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 Standardhintergrund einstellen. Wenn man ein Bild auswählt stehen die Möglichkeiten für Bildposition, Bildwiederholung, Größe etc. bereit.
Elementor 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.

Lightbox

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.

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!
Eigenes 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.
Zuerst muss sichergestellt sein, dass diese Funktionen aktiv sind:
Dashboard > Elementor > Einstellungen > Experiments > Import Export Template Kit
Elementor Site Kit aktivieren
Die Import-Export Funktionen müssen in den Einstellungen aktivert sein.
Wenn das erledigt ist stehen die Werkzeuge bereit 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. Nach dem Klick auf Export wird eine Datei namens elementor-kit.zip ins Downloadverzeichnis kopiert.

FAQ

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.

Veröffentlicht am: 19. Februar 2020
Letztes Update am: 15. August 2026

6 Kommentare

  • Thorsten
    Vor 5 Jahren Antworten

    Danke, macht schon mal einiges mehr Sinn beim Verständnis:-)

    Wo ich aber noch Verzweifle, ist bei den Fonts.
    „ Checkboxen für Standardfarben und Standardschriftarten deaktivieren. Diese sind anzukreuzen!“

    Muss ich hier nun beide ankreuzen wenn Elementor die Aufgabe übernehmen soll alle Fonts zu bestimmen? Das ist wirklich etwas verwirrend, da man ja im Theme (Customiz) da auch was einstellen kann.

    Habe das Astra Theme Free Version.

    • A
      Harry Martin
      Vor 5 Jahren Antworten

      Verwirrend, ja (auch meine Formulierung, ich muss das bei Gelegenheit verbessern). Also:

    • Wenn die Checkbox Standardschriftarten aktiviert sind werden die Theme-Fonts verwendet (also die im Astra-Customizer eingestellt wurden).
    • Wenn du Elementor Pro hast, kannst du die Schriften direkt im Elementor verwalten und musst sie nicht extern (zb von Google Fonts) einbinden. Diese Einbindung passiert immer dann, wenn du (egal ob im Customizer oder Elementor) einen Google-Font auswählst.
    • Das von mir empfohlene Theme „Hello Elementor“ hat gar keine Schriftenvorgaben.
    • Normalerweise will ich weder Farben noch Schriften der Elementor-Vorgaben verwenden, daher sind die Checkboxen zu setzen, damit kommen die des Themes zur Anwendung – aber eben nur, wenn da welche sind.
  • meisterleise
    Vor 6 Jahren 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???

    • A
      Harry Martin
      Vor 6 Jahren Antworten

      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.

      • meisterleise
        Vor 6 Jahren Antworten

        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!

        • A
          Harry Martin
          Vor 3 Jahren Antworten

          2 Jahre später: über die SiteKit Funktionen lassen sich Einstellungen, Templates etc. sehr gut von einer zur nächsten Elementor-Site übertragen. Ausserdem lässt sich das jeweils letzte importierte SiteKit auch wieder löschen. Das kann helfen, um ein wenig besser Ordnung halten zu können.

    • Hinterlasse deinen Kommentar