Inhalt
- 1 Elementor Tipps & Tricks: 10 Profi-Features, die du kennen solltest
- 1.1 1. Global Fonts & Colors einrichten
- 1.2 2. Navigator für komplexe Layouts nutzen
- 1.3 3. Copy-Paste zwischen Seiten
- 1.4 4. Tastenkürzel im Editor
- 1.5 5. Responsive Mode für alle Geräte
- 1.6 6. Custom CSS pro Element (Pro)
- 1.7 7. Template-Bibliothek und eigene Blöcke speichern
- 1.8 8. Dynamische Inhalte (Pro)
- 1.9 9. PageSpeed: Elementor CSS nur für genutzte Widgets laden
- 1.10 10. Revisionsverlauf nutzen
- 1.11 Fazit
Elementor Tipps & Tricks: 10 Profi-Features, die du kennen solltest
Du verwendest Elementor schon eine Weile, aber das Gefühl, nur an der Oberfläche zu kratzen? Hier sind 10 Tipps und versteckte Features, die deinen Workflow deutlich beschleunigen.
1. Global Fonts & Colors einrichten
Bevor du loslegst: Definiere deine Schriften und Farben einmalig unter Elementor → Website-Einstellungen → Style. So kannst du Farben und Schriften später mit einem Klick sitewide ändern, ohne jedes Widget einzeln anzupassen.
Der Elementor Navigator (kleines Symbol unten links im Editor oder Alt+Z) zeigt die Elementstruktur als Baumansicht. Bei verschachtelten Layouts ist das deutlich einfacher als im Visual Editor zu klicken.
3. Copy-Paste zwischen Seiten
Klicke mit der rechten Maustaste auf ein Element → Kopieren → öffne eine andere Seite im Elementor-Editor → rechtsklick auf einen freien Bereich → Einfügen. Funktioniert auch zwischen verschiedenen WordPress-Installationen mit demselben Elementor-Account.
4. Tastenkürzel im Editor
| Kürzel | Funktion |
|---|---|
| Ctrl+Z | Rückgängig |
| Ctrl+Shift+Z | Wiederholen |
| Ctrl+D | Duplizieren |
| Ctrl+S | Speichern |
| Ctrl+P | Vorschau |
| Esc | Übergeordnetes Element auswählen |
5. Responsive Mode für alle Geräte
Der Responsive Mode (Klick auf das Bildschirm-Icon unten in der Editor-Leiste) zeigt Mobile, Tablet und Desktop. Viele Einstellungen wie Abstände und Schriftgrößen lassen sich pro Gerät separat steuern – nutze das, um mobile Ansichten sauber zu gestalten ohne den Desktop zu ändern.
6. Custom CSS pro Element (Pro)
Mit Elementor Pro kannst du unter Erweitert → Custom CSS für jedes einzelne Element eigenes CSS schreiben. Ideal für Micro-Anpassungen, die über die Elementor-UI nicht zugänglich sind.
7. Template-Bibliothek und eigene Blöcke speichern
Speichere häufig verwendete Sektionen als Meinen Vorlagen unter dem Symbol oben in der Editor-Leiste. So musst du denselben Abschnitt nicht mehrfach bauen.
8. Dynamische Inhalte (Pro)
Elementor Pro ermöglicht es, Felder aus Custom Post Types, ACF oder WooCommerce dynamisch einzubinden. Statt eines festen Textes zeigt das Widget dann automatisch den Produkttitel, Autornamen oder benutzerdefinierte Felder an.
9. PageSpeed: Elementor CSS nur für genutzte Widgets laden
Unter Elementor → Einstellungen → Erweitert → CSS Print Method die Option Externe Datei wählen. Das reduziert Inline-CSS und verbessert die Ladezeit.
10. Revisionsverlauf nutzen
Elementor speichert automatisch Revisionen deiner Seiten. Unter Einstellungen → Revisionsverlauf (unten links im Editor) kannst du ältere Versionen wiederherstellen – besonders hilfreich bei versehentlichen Änderungen.
Fazit
Elementor steckt voller versteckter Features. Die Global-Styles, der Navigator und die Tastenkürzel allein sparen schon bei jedem Projekt mehrere Stunden. Elementor Pro-Nutzer profitieren zusätzlich von Dynamic Content und Custom CSS. Schau dir auch unseren Artikel zum Elementor kaufen an, falls du noch überlegst ob Pro das richtige für dich ist.
