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 mit vier weiteren Elementor Hacks:

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.

Hol dir 39 gratis Elementor Templates für deine Website!

Meld dich jetzt für den Toolkiste Newsletter an – du erhältst ca. 2 bis 3 Mal im Monat eine E-Mail mit allen neuen Tutorials, exklusiven Rabattcodes sowie Updates rund um Elementor und weitere Tools.


Als Dankeschön für deine Anmeldung erhältst du 39 Template-Blöcke für Elementor direkt nach der Anmeldung zugeschickt!

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 Container 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 Container es sich denn gerade handelt – dazu einfach einen Doppelklick auf das jeweilige Element machen und den Namen ändern!

Das ist besonders bei sehr langen Seiten praktisch, um dich besser durch die einzelnen Elemente zu navigieren.

Übrigens: Alles, was du zum neuen Flexbox Container von Elementor wissen musst, findest du hier.

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 „Finder“.

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. Auch Templates, die du im Theme Builder erstellt hast, findest du über den Finder.

Und wie du im Screenshot siehst, kannst du sogar neue Inhalte direkt über den Finder erstellen (wie hier im Beispiel ein Popup, ganz unten zu sehen).

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! Das musst du aber manuell machen, das passiert nicht automatisch.

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! Wenn du dir unsicher bist, ob die Pro-Version das Richtige ist, schau hier vorbei: Elementor Free vs. Pro – Was sind die Unterschiede?

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 Elementor Pro Tipp: Du kannst die globalen Widgets auch über Design > Widgets an anderen Stellen auf deiner Seite einfügen, die du nicht mit Elementor erstellt hast – z.B. in der Sidebar oder im Footer!

Trick #5: Dark Mode

Der fünfte Elementor Hack 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, oder einen Container – mit allen Design-Einstellungen, die du brauchst.

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

Dann bleibt der Inhalt unverändert, aber du sparst dir die Arbeit, den Container nochmal ganz neu zu stylen! Das gleiche funktioniert wie gesagt genauso gut auch für einzelne Widgets.

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!

Du bist gerade dabei, deine erste Website zu erstellen? Schau dir mein Template-Pack an, mit dem du in kürzester Zeit die Website für deine Personal Brand erstellen kannst. Enthalten sind 8 komplette Seiten und über 100 einzelne Blöcke, mit denen du die Seiten beliebig erweitern kannst.

Das Beste daran: Die Templates passen sich beim Import automatisch an deine Farben und Schriftarten an. Das spart dir viel Zeit – du musst nur noch eigene Texte und Bilder einfügen!

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 (Pro) Tipps hast, dann auch immer her damit!

 data-lazy-src=

Hi, ich bin Lea! 2017 habe ich mein erstes Online-Projekt Punktkariert an den Start gebracht und neben meiner Liebe für's Schreiben vor allem auch meine Liebe für Tools entdeckt.

Ja, es klingt komisch... aber ich könnte mich stundenlang darin verlieren, neue Tools zu entdecken. (Könnte? Okay, es passiert regelmäßig. #nerd)

Die eigene Website, das Marketing drumherum, Produkte online erstellen und verkaufen - all das ist einfacher mit den richtigen Tools. Und genau diese Tools lernst du hier kennen!

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

  3. Hallo, ich bin ein purer Anfänger und mir haben einfach alle 9 Tipps super weiter geholfen. So langsam entwickelt sich Freude an der Gesamtheit, denn hin und wieder bin ich schon verzweifelt. Super Beschreibung, super Tipps!!

  4. Hallo,

    Danke für die tollen Tipps. Was ich nicht verstehe, ist, wie ich die Verknüpfung von Mobil von den Desktop Settings trennen kann. Das Problem ist, dass wenn ich was in der Desktop-Version anpasse, in der Handy-Version das schrecklich aussiehst.

    1. Du kannst die Ansicht in Elementor auf mobil umschalten (Tablet und Smartphone jeweils auch getrennt). Alle Änderungen, die du dann in der Mobil-Ansicht machst, gelten auch nur dafür – an den Einstellungen für Desktop ändert das also nichts. Hier im Video zeig ich, wie das genau funktioniert: https://www.youtube.com/watch?v=JkiWTIbR0Qo

  5. Hey, das sind tolle Tipps und manche davon habe ich auch noch gar nicht genutzt. Leider ist der Trick nicht dabei, nachdem ich gerade suche. Beim setzen von Ankern habe ich leider etwas die Übersicht verloren und finde manche Anker einfach nicht wieder. Aber ich weiß, dass sie noch drin sind weil die Verknüpfungen noch reagieren. Gibt es irgendeine Möglichkeit, die Anker zu filtern oder sichtbar zu machen?

  6. Ich schreibe einfach mal meine Frage hie rein: hat jemand eine Idee wie ich in Elementor einen Button nur für Gäste anzeigen lassen kann? oder geht soetwas auch nur in der bezahlten Version?

    1. Ich wüsste nicht, wie das mit Elementor geht (auch nicht mit der bezahlten Version). Aber vielleicht hat ja jemand anders eine Idee 🙂

      1. Es scheint tatsächlich nicht so zu funktionieren, wie ich mir das denke. Gewollt war ein großer Button mit „Jetzt registrieren“ der verschwindet, wenn man schon registriert ist.

  7. Toller Beitrag! Ich finde den Finder super praktisch. Eine Frage habe ich: Für meine Blog-Artikel verwende ich ein abgespeicherten Template. Jetzt möchte ich gerne die Schriftgröße für alle Blog-Artikel ändern (das sind sehr viele), aber wenn ich im Template etwas ändere, hat das keine Auswirkungen auf die bereits erstellten Artikel. Muss ich jetzt alle Blog-Artikel manuell anpassen? Hast du dazu vielleicht auch einen Tipp?

    1. Das Template für Blogartikel solltest du am besten über den Theme Builder anlegen. Das wird dann automatisch auf alle Beiträge angewendet und wenn du eine Änderung vornimmst, werden alle Beiträge entsprechend aktualisiert. Wenn du ein normales Seiten-Template verwendet hast, dann musst du die Schriftgröße tatsächlich manuell anpassen.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Scroll to Top
WordPress Cookie Hinweis von Real Cookie Banner