9 Elementor Tricks und Tipps, die die dir deine Arbeit extrem erleichtern werden

Wenn ich das eine Tool nennen müsste, das meine Arbeit in den letzten Jahren am meisten verändert und beeinflusst hat, dann wäre das vermutlich Elementor!

Die eigene Website war für mich bei allen meinen Projekten immer der Hauptbestandteil, der Kern von allem.

Und da mir Elementor (Pro) einfach die größtmögliche Flexibilität gibt, um meine Websites zu gestalten, würde ich darauf nicht mehr verzichten wollen!

Mehr Details über das WordPress Plugin kannst du in der Elementor Review nachlesen.

In diesem Artikel jetzt möchte ich dir einige Elementor Tricks und Tipps zeigen, die du vielleicht noch nicht kanntest – die dir deine Arbeit mit dem Pagebuilder aber sehr erleichtern können!

Die Tricks kannst du dir hier auch in den Videos anschauen:

Und Teil 2:

Trick #1: Der Navigator

Starten wir mit dem sogenannten Navigator! Dieser ermöglicht es dir, super schnell zwischen einzelnen Bereichen auf deiner Seite hin und her zu springen.

Das ist besonders dann sehr praktisch, wenn du sehr lange Seiten mit Elementor erstellst, z.B. Sales Pages für deine Produkte.

Den Navigator findest du links unten in der Leiste neben dem Speichern Button, es ist das zweite Icon von links.

Alternativ kannst du auch den Shortcode Cmd + I bei Macs bzw. Ctrl + I bei Windows nutzen!

Im Screenshot siehst du schon, wie der Navigator dann erstmal aussieht: Du siehst hier quasi die Struktur deiner erstellten Seite abgebildet.

Die einzelnen Abschnitte wiederum kannst du jetzt einzeln aufklappen, bis du die Widgets aufgelistet siehst, und dann mit einem Klick direkt an die jeweilige Stelle springen.

Es öffnen sich dann auch immer direkt die Bearbeitungsoptionen für das jeweilige Element, auf das du draufklickst. Wirklich praktisch!

Wenn du das Feld per Drag&Drop an die rechte Bildschirmseite ziehst, kannst du den Navigator dort auch fixieren.

Über den Navigator kannst du auch die Position einzelner Elemente verändern, indem du sie einfach an eine andere Stelle ziehst.

Die einzelnen Punkte im Navigator kannst du übrigens auch umbenennen, sodass du z.B. direkt weißt, um welchen Abschnitt es sich denn gerade handelt – dazu einfach einen Doppelklick auf das jeweilige Element machen und den Namen ändern!

Trick #2: Der Finder

Der zweite Elementor Trick ist auch ein Feature, das dir unheimlich viel Zeit sparen kann. Und ich weiß ja nicht, wie's dir geht, aber alles was Zeit spart, nehm ich immer gerne!

Und zwar handelt es sich hierbei um den Finder. Dieser öffnet sich entweder über den Shortcut Cmd / Ctrl + E oder du gehst über das Menü, dort gibt es einen extra Menüpunkt „Find Anything“.

Dann öffnet sich ein Suchfeld, über das – und ich bin immer noch begeistert davon – du blitzschnell zwischen einzelnen Elementor Seiten hin und her switchen kannst!

So sieht diese Auswahl dann aus:

Heißt im Klartext: Du musst nicht umständlich Elementor schließen, nach der jeweiligen Seite öffnen und dann Elementor wieder öffnen, sondern kannst wirklich direkt zur anderen Seite springen.

Finde ich persönlich wirklich super praktisch und ich kann dir nur empfehlen, den Finder einfach mal auszuprobieren!

Trick #3: Mit Global Colors arbeiten

Als nächstes widmen wir uns mal dem Thema Farben. Dieser Trick ist wahrscheinlich vor allem dann für dich relevant, wenn du gerade erst anfängst, mit Elementor zu arbeiten!

Dann kannst du nämlich die sogenannten Global Colors einrichten – quasi eine Farbpalette, die alle Farben deines Brandings enthält bzw. alle, die du auf deiner Website eben so verwendest.

Dazu gehst du vom Editor aus auf das Menü, auf Website-Einstellungen und dann auf Globale Farben:

Wenn du jetzt irgendwo eine Farbe benötigst, z.B. bei einem Widget, klickst du auf das Global-Icon und kannst die Farbe auswählen. Das Icon wird dann blau angezeigt – so siehst du direkt, wann du eine globale Farbe verwendet hast.

Der Clou hierbei ist nämlich: Wenn du diese Farben später mal ändern möchtest, dann machst du das nur an der einen zentralen Stelle – und überall, wo diese Farbe verknüpft ist, wird sie automatisch ebenfalls geändert!

Das ist also super praktisch und ermöglicht es dir natürlich, deine Website wirklich einheitlich zu gestalten.

Wenn deine Seite schon steht, kannst du die globalen Farben übrigens natürlich auch noch nachträglich speichern und an den gewünschten Stellen verknüpfen!

Trick #4: Globale Widgets

Der vierte Elementor Trick, den ich dir vorstellen möchte, ist die Nutzung sogenannter globaler Widgets.

Achtung: Diese Funktion ist nur in Elementor Pro enthalten!

Die globalen Widgets sind dann interessant, wenn du Elemente auf deiner Website hast, die du an ganz vielen verschiedenen Stellen immer wieder brauchst – Kundenstimmen zum Beispiel.

Diese bindest du wahrscheinlich an mehreren Stellen auf deiner Seite ein, möchtest sie dabei einheitlich haben.

Es wäre eine ziemlich nervige Arbeit, jedes Testimonial einzeln zu bearbeiten, wenn du es wieder auf einer Seite einfügen möchtest.

Und hier kommen die globalen Widgets ins Spiel.

Das Widget, um das es geht – z.B. eben ein Testimonial – erstellst du einmal so, wie du es gerne überall angezeigt hättest. Dann machst du einen Rechtsklick und hast dort die Option „Als global speichern“. 

Auf dem Fenster, das dann erscheint, wird es dir nochmal angezeigt: Du kannst das Widget dann an beliebig vielen Stellen auf deiner Website einfügen, und wenn du es an einer Stelle änderst, wird das automatisch auch überall anders geändert!

Du kannst dem Widget dann einen Namen geben und es wird ab sofort in der Widget Übersicht unter „Global“ angezeigt. Du kannst es wie normale Widgets per Drag&Drop überall einfügen!

Im Editor selber wird dann ein gelber Rahmen um das Widget angezeigt, der dir sofort signalisiert, dass es sich um ein globales Widget handelt.

Wenn du draufklickst, hast du zum einen die Option, das Widget zu bearbeiten, sodass die Änderungen übertragen werden, oder du hebst die Verknüpfung auf, dann wird es wieder zu einem „normalen“ Widget.

Das ist wie ich finde wirklich eine super praktische Funktion, und auch hier ist der Faktor Zeitersparnis wieder ganz vorne mit dabei! Außerdem sorgst du damit auch viel leichter dafür, dass deine Website schön einheitlich aussieht.

Besonders gut geeignet sind die globalen Widgets natürlich für Elemente deiner Website, deren Inhalt sich nicht ändert.

Ich nutze sie aber auch gerne als eine Art Template für Widgets, z.B. bei Buttons. So habe ich das Design schon fertig, hebe nach dem Einfügen die Verknüpfung auf und muss dann nur noch Buttontext + Link austauschen!

Noch ein Tipp: Du kannst die globalen Widgets auch über Design > Widgets an anderen Stellen auf deiner Seite einfügen!

Trick #5: Dark Mode

Der fünfte Elementor Trick ist ein Feature, das ich selber nicht nutze, aber das ist einfach eine persönliche Präferenz.

So wie bei iPhones oder MacBooks kannst du nämlich auch in Elementor einen Dark Mode einrichten!

Dafür gehst du ins Menü und dann auf den Punkt Vorlieben. Dort findest du das sogenannte „Oberflächen Theme“, wo du dann den dunklen Modus auswählen kannst.

Und dann wird Elementor eben dunkel angezeigt:

Wenn du also ein Dark Mode Fan bist, ist das sicher interessant für dich!

Trick #6: Style kopieren

Als nächstes schauen wir uns eine Funktion, die bei mir wirklich ständig zum Einsatz kommt, und zwar das Kopieren des Styles. Heißt: Du erstellst einmal ein Widget, z.B. eine Icon-Liste, mit allen Design-Einstellungen, die du brauchst.

Wenn du dann eine weitere Icon-Liste brauchst, kannst du bei der bereits fertigen einen Rechtsklick machen, gehst auf „Kopieren“ und dann bei der neuen Liste wieder mit einem Rechtsklick auf „Stil einfügen“:

Dann bleibt der Inhalt unverändert, aber du sparst dir die Arbeit, das Widget nochmal ganz neu zu stylen! Das gleiche funktioniert übrigens auch für Spalten und Abschnitte.

Besonders praktisch ist diese Funktion, wenn du bereits deine komplette Seite erstellt hast und dann z.B. merkst: Okay, meine Überschriften sind mir noch zu klein.

Dann passt du eine Überschrift an und kopierst den Style für alle anderen – so sind die Änderungen schnell gemacht!

Trick #7: Eigene Templates speichern

Dass Elementor selber zahlreiche Templates zur Verfügung stellt, mit denen du deine Website gestalten kannst, wusstest du wahrscheinlich schon.

Aber hast du auch schon deine eigenen Templates erstellt? Das geht sowohl für einzelne Abschnitte als auch für ganze Seiten! Und auch so kannst du natürlich wieder viel Zeit sparen.

Um einen Abschnitt zu speichern, machst du einen Rechtsklick und gehst auf „Als Template speichern“. Dann vergibst du einen Namen – achte hier darauf, dass du direkt am Namen erkennst, worum es sich handelt.

Deine Liste mit allen eigenen gespeicherten Templates sieht nämlich so aus:

Du kannst dir zwar noch extra eine Vorschau anzeigen lassen, aber es ist einfacher, wenn du direkt am Namen erkennst, um was für ein Template es sich handelt!

Übrigens: Wenn du über 100 weitere Template-Blöcke für deine Website haben möchtest, schau dir gerne die Toolkiste-Templates an!

Trick #8: Shortcuts

Bei dem ein oder anderen Trick habe ich dir ja schon verraten, mit welchen Tastatur-Shortcuts du die Funktionen erreichst! Es gibt da aber noch eine ganze Reihe weiterer Shortcuts, die besonders bei der Erstellung der Seiten hilfreich sind.

Das hier sind die Elementor Shortcuts, die dir besonders die Arbeit im Editor erleichtern werden:

  • rückgängig: Cmd / Ctrl + Z
  • kopieren: Cmd / Ctrl + C
  • einfügen: Cmd / Ctrl + V
  • Seite speichern: Cmd / Ctrl + S
  • Ansicht wechseln zwischen den einzelnen Geräten (Desktop, Tablet, Smartphone): Cmd / Ctrl + Shift + M
  • Bearbeitungsleiste ausblenden: Cmd / Ctrl + P

Alle weiteren Tastatur-Shortcuts, die es bei Elementor so gibt, findest du hier in der Übersicht!

Trick #9: Das richtige Seitenlayout

Als letztes kommen wir zu einem sehr nützlichen Feature, das darüber entscheidet, welchen Teil einer Seite du mit Elementor erstellen kannst bzw. was drumherum noch angezeigt wird.

Denn wenn deine Seiten und Blogartikel z.B. eine Sidebar haben, kannst du diese in Elementor auch ausblenden und so die gesamte Breite nutzen und im Editor bearbeiten!

Dazu gehst du auf die Einstellungen und wählst dann bei Seitenlayout „Elementor Volle Breite“.

Hier findest du auch noch eine zweite Option, und zwar „Elementor Canvas“. Wenn du diese auswählst, werden auch Header und Footer ausgeblendet!

Das ist dann nützlich, wenn du z.B. Landing Pages für die Newsletter-Anmeldung mit Elementor erstellst – in dem Fall möchtest du ja wirklich keinerlei Ablenkung auf deiner Seite haben.

Fazit: 9 praktische Elementor Tricks

Das sind 9 praktische Elementor Tricks, Tipps und Features, die dir deine Arbeit echt erleichtern und einiges an Zeit sparen können!

Schreib gerne mal in die Kommentare, welches Feature dir davon am besten gefällt – und wenn du weitere Elementor Tricks hast, dann auch immer her damit!

 data-lazy-src=

4 Kommentare zu „9 Elementor Tricks und Tipps, die die dir deine Arbeit extrem erleichtern werden“

  1. Hallo Lea,
    danke für den Tip mit dem Finder und dem Shortcut dazu. So ist der Seitenwechsel im Elementor wirklich viel einfacher und schneller!
    Top!
    Grüße, Susan

  2. Der Finder ist ja klasse. Den hatte ich bisher übersehen bzw. konnte mir nichts darunter vorstellen.
    Deswegen waren dann gerne mal 4 Tabs gleichzeitig offen, um an dieser und jener Seite auch etwas anzupassen.

    Vielen Dank für diesen und die anderen Tipps. Damit werde ich im Laufe der Zeit bestimmt sehr viele Sekunden einsparen (die sich aufsummieren) und die Nerven schonen.

Kommentar verfassen

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

WordPress Cookie Hinweis von Real Cookie Banner

Kostenlose 5-Tage-Elementor Challenge

Lern in der kostenlosen 5-Tage-Challenge, wie du mit Elementor Seiten und Beiträge erstellen kannst (und was es sonst noch Wichtiges zu wissen gibt).

Nach der Challenge erhältst du alle zwei Wochen den Toolkiste-Newsletter. Kein Spam, versprochen! Alle Infos zur Speicherung und Verarbeitung deiner Daten erhältst du in der Datenschutzerklärung.