Elementor ist das weltweit beliebteste Page-Builder-Plugin für WordPress. Es wird weltweit über 7 Millionen mal eingesetzt.[1] Im deutschsprachigen Raum haben Portale wie Xing, Bund.de und Heise.de Elementor im Einsatz. Auch drweb.de ist auf Elementor unterwegs. Auch als WordPress Hoster sind die Elementoren nun unterwegs, wie ihr in unserer Marktübersicht erfahren könnt. In diesem Elementor-Leitfaden werde ich dir einen Überblick verschaffen über alle wichtigen Funktionalitäten, die Elementor bietet, sowie zum Schluss ein Resumé mit Vor- und Nachteilen von Elementor ziehen.
Was ist Elementor?
Elementor ist ein Plugin für WordPress, das dir erlaubt, Seiten und Templates visuell erstellen. Wie in einem Homepage-Baukasten klickst du Seiten Element für Element zusammen und befüllst die Elemente danach mit Inhalten. Dafür sind keine Code-Kenntnisse und ebenso wenig Designkenntnisse erforderlich. Beides ist allerdings hilfreich.
Elementor wird als Page-Builder bezeichnet, obwohl er mehr als nur das ist. Mit Page-Buildern kannst du WordPress-Pages, zu Deutsch „Seiten“ bauen, aber keine „Posts“, also Beiträge. Eine wichtige Unterscheidung in der WordPress-Welt.
Normale Page-Builder sind somit nur für die statischen Bereiche deiner Website zu gebrauchen. Hier kommt das Potential von Elementor voll zur Geltung: Mit Elementor kannst du auch Templates erstellen, die dann auf allen Beiträgen ausgespielt werden. Weiter unten mehr dazu.
Damit nicht genug. In der Elementor Library kannst du aus über 300 vorgefertigten Seiten-„Kits“ und Templates auswählen, die die Entwickler speziell für die Verwendung in Elementor erstellt haben. Das sind Design-Vorlagen, die du deinen eigenen Wünschen anpassen kannst.
Wo Elementor brilliert
Elementor ist durch die Drag-and-Drop-Funktionalität im sogenannten „Live-Editing“ besonders einfach und intuitiv zu bedienen. Auch gibt es ein eingebautes „Responsive Editing“, mit dem du das Aussehen von einer Seite auf verschiedenen Auflösungen steuern kannst. Das erklärt die hohe Verbreitung sowie die durchweg sehr guten Bewertungen von Elementor. Das Responsive Editing ist in folgendem Video gut zu sehen:
Was ist der Unterschied zwischen Elementor und einem WordPress-Theme?
Elementor selbst ist kein Theme. Ein WordPress-Theme ist wie eine Schablone, die du nur eingeschränkt über den WordPress-Customizer verändern kannst. Mit dem Page-Builder-Plugin Elementor hingegen kannst du sowohl statische Seiten erstellen wie auch eigene Templates und Loops zusammenbauen. Elementor bietet also eine weitaus höhere Flexibilität als ein reines WordPress-Theme, was die Gestaltung und Präsentation deiner Inhalte betrifft.
Elementor ersetzt aber kein WordPress-Theme. Du musst also noch ein WordPress-Theme installieren. Hierfür bietet sich das kostenlose Hello Theme an, mit welchem du quasi von Null anfängst. Durch die hohe Beliebtheit von Elementor sind auch viele andere Minimal WordPress-Themes. Das bedeutet, wenn dir ein bestimmtes WordPress-Theme gut gefällt, kannst du dieses bei vorhandener Kompatibilität nach deinen Bedürfnissen in Elementor anpassen.
Was ist der Unterschied zwischen Elementor und dem WordPress Block-Editor?
Der Unterschied zum Block Editor ist zum einen, dass Elementor von Haus aus deutlich mehr Funktionen mitbringt. Elementor richtet sich an UX- und Webdesigner, die keine PHP- oder JavaScript-Kenntnisse besitzen. Selbst Web- und UX-Designer, die sich noch keine CSS- oder HTML-Kenntnisse angeeignet haben, können mit Elementor ganze WordPress-Websites erstellen.
Der WordPress Block-Editor hingegen verortet sich zum Teil als Nachfolger des WYSIWYG (What you see is what you get) – Editors in WordPress. Du kannst mit dem Block-Editor von WordPress einzelne Artikel wie auch Seiten erstellen und bearbeiten.
Willst du hingegen ein Theme erstellen oder diverse Templates und Module erstellen und bearbeiten, fährst du nach wie vor besser mit Elementor. (Es sei denn, du bist in der WordPress Theme-Entwicklung bewandert.)
Elementor ist also kein reiner Page-Builder, sondern auch in der Lage Templates und Loops zu erstellen und Bereiche deiner Site zu designen, die du sonst ohne Coding nicht erreichen kannst. Insofern ist es gerechtfertigt, von einem waschechten Theme-Builder zu sprechen.
Was ist der Unterschied zwischen Elementor und Full-Site-Editing?
WordPress arbeitet zur Zeit am Full-Site-Editing („FSE“, derzeit in Beta). Wie der Name suggeriert, kannst du mit Full-Site-Editing nicht nur eine Seite oder einen Beitrag bearbeiten, sondern auch die Kopf- und die Fußzeile, und zwar über den Block-Editor. Der Block-Editor selbst wird also immer mehr zum Page-Builder, der bereits nativ in WordPress eingebaut ist.
Das Full-Site-Editing richtet sich allerdings an WordPress- und Theme-Entwickler. Und auch der derzeitige Entwicklungsstand wie auch die Entwicklungsgeschwindigkeit vom Full-Site-Editing bzw. Block Editor kann mit Elementor nicht mithalten: Der Block-Editor (auch unter dem Name Gutenberg-Editor oder Gutenberg-Project bekannt) und Elementor sind ungefähr gleich alt, Elementor hat sich aber in derselben Zeit weitaus besser und schneller entwickelt!
Elementor: Von Null auf über 7.000.000 Installationen in sechs Jahren
Elementor startete im Jahr 2016 unter der Open-Source-Lizenz, was für ein Plugin dieser Art überaus ungewöhnlich war. So verwundert es nicht, dass Elementor vom Start weg eine hohe Aufmerksamkeit und ein entsprechendes Wohlwollen entgegengebracht wurde. Die Entwicklung von Elementor schritt rasant voran. Im wöchentlichen Rhythmus wurden neue Features implementiert.
Der Funktionsumfang lässt heutzutage kaum Wünsche offen. Da, wo es Features gibt, die noch nicht vorhanden sind, springen andere Anbieter ein, und bieten eigene Plugins an, über die sich diese Features Elementor-freundlich einbinden lassen. Als Beispiel seien hier die Widgets Mega-Menü und Toggle-Element genannt, welche beide noch nicht nativ in Elementor vorhanden sind, aber über Extensions für Elementor.
Durch den Open-Source-Ansatz hat es Elementor ähnlich wie WordPress geschafft, ein eigenes Ökosystem mit vielen kleinen Zusatz-Plugins von verschiedenen Anbietern um sich herum aufzubauen. Es gibt also kaum einen Bedarf oder Spezialfall, der nicht schon von jemand anders vorher gelöst wurde und dessen Lösungsansatz für alle zugänglich wäre.
Elementor: Installation und Inbetriebnahme
Elementor wird wie jedes andere Plugin installiert. Da es in der WordPress Plugin-Repository bereit steht, kannst du es es sogar direkt aus dem WordPress-Backend installieren und aktivieren. Einmal in Aktion, erkennst du die Verfügbarkeit des Page-Builders am blauen Button im oder oberhalb des Text-Editorfensters.
Elementors eingängiges Bedienkonzept
Betätigst du in Seiten den bereits genannten Button, so öffnet sich bildschirmfüllend ein Bearbeitungsfenster. Im Bearbeitungsfenster kannst du Widgets aus der linken Leiste hineinziehen („Drag & Drop“) in die zu bearbeitende Seite:
Ist das Widget einmal eingebaut, kannst du a) die Inhalte einfügen (Reiter „Inhalt“) und b) deren Erscheinungsbild verändern (Reiter „Stil“) sowie c) Rahmen, Abstände u.v.a.m. im Reiter „Erweitert“ anpassen:
Globale Einstellungen in Elementor
Willst du nicht für jeden Abschnitt und jede Überschrift die Textgröße oder die Schriftart neu einstellen, kannst (und solltest) du diese Eigenschaften global definieren. Weiterhin kannst du über die globalen Einstellungen auch eigene Schriftarten hochladen, etwa um Google Fonts datenschutzkonform einzubinden.
Elementor-Templates anlegen und verwalten
Links in der Seitennavigation findest du einen Hauptmenüpunkt namens Elementor. An dieser Stelle setzt du globale Einstellungen und hast Zugriff auf alle von dir angelegten Templates. Werkzeuge zu Wartungszwecken und eine System-Information der wichtigsten Parameter unserer WordPress-Umgebung runden den Leistungsumfang ab.
Elementor-Vorlagen verwenden
Legst du eine neue Seite an oder ein neues Template (z.B. eine neue Kopfzeile oder einen neuen Footer), bekommst du von Elementor eine große Auswahl an verschiedenen Vorlagen vorgeschlagen. Diese Vorlagen sind zum Teil unabhängig vom Theme und können nur auf eine bestimmte Seite angewendet werden. So könntest du individuelle Seiten in einer Art und Weise aufwerten, wie man es sonst nur von Printmagazinen kennt.
Wenn dir die eigenen Ideen fehlen, entscheidest du dich für eine der bereits erwähnten über 300 vorgefertigten Vorlagen aus der Bibliothek. Diese Vorgehensweise empfiehlt sich auch für Einsteiger, denn die einmal eingefügte Vorlage bleibt ja voll bearbeitbar. Auf diese Weise lernst du am lebenden Objekt, wie welches Ergebnis erzielt werden kann. Einen Überblick über alle verfügbaren Vorlagen verschaffst du dir in der Template-Bibliothek.
Widgets in Elementor
Neben den Standard-Features, wie dem Einfügen von Texten, Bildern oder Videos, liefert Elementor Pro eine breite Palette weiterer Elemente, genannt Widgets, mit. Darunter befinden sich:
- Akkordeons
- Bewertungen
- Bilder- und Video-Widgets
- Bilder-Galerien
- Buttons
- Login-Formulare
- Kontaktformulare
- Slider und Karusselle
- auch Lottie-Files (SVG-basierte Animationen) werden unterstützt
…und vieles andere mehr. Ebenfalls kannst du WordPress-Standards, wie neueste Beiträge, neueste Kommentare und so weiter, zugreifen.
Breakpoints in Elementor: So testest du für Mobile & Co
Erscheint ein Design zufriedenstellend, so kannst du es über ein kleines Screen-Icon unten rechts in verschiedenen Auflösungen testen. Zur Verfügung stehen Desktop, Tablet und Smartphone, wobei sich Elementor an die hergebrachten Breakpoints, so etwa 320 Pixel für Smartphones und 768 Pixel für Tablet sowie 1024 Pixel für Desktop-Auflösungen hält. Diese Standard-Breakpoints kannst du aber alle anpassen.
Revisionen und „Undo“-Funktion in Elementor
Mich begeistern besonders zwei Neuheiten, die die Bedienung des Page-Builders schon fast revolutionieren. Die eine Neuerung hört auf den Namen History und stellt eine vollwertige Undo-/Redo- und Revisionshistorie bereit. Das ist besonders dann praktisch, wenn du einem Zeitpunkt X merkst, dass du schon zu einem Zeitpunkt P einen Fehler gemacht hast. Anstatt von vorn zu beginnen, greifst du einfach zu Elementors Undo und setzt den Bearbeitungsstand auf die letzte Version vor dem Fehler zurück. Mit Redo kannst du eine