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 Page Builder 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.
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. Das ist teilweise deutlich einfacher als es direkt im Editor zu versuchen.
Per Rechtsklick auf eins der Elemente öffnet sich ein Menü, über das du sie z.B. auch duplizieren kannst!
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 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.
Die globalen Widgets sind also geeignet für alle für Elemente deiner Website, die du an unterschiedlichen Stellen einbauen möchtest – während der Inhalt überall der gleiche bleibt.
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!
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!
Meld dich jetzt für den kostenlosen Toolkiste Newsletter an! Den erhältst du jeden Donnerstag mit vielen Empfehlungen für Tools, Schritt-für-Schritt-Tutorials und exklusiven Deals und Rabattcodes.
Als Dankeschön erhältst du direkt nach der Anmeldung die Toolliste mit 78 Empfehlungen für Tools rund um Online-Business!
Kommentarfunktion geschlossen.