Elementor WordPress: Was sind die Vor- und Nachteile?

Elementor ist das weltweit beliebteste Page-Builder-Plugin für WordPress. Es wird weltweit über 7 Millionen mal eingesetzt.^[1] Auch drweb.de ist auf Elementor unterwegs. Ferner hat sich Elementor zum WordPress Hoster gemausert, das ist meiner Ansicht nach aber schon zuviel des Guten. Kern bleibt der Pagebuilder für WordPress. 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.

Ja, ich möchte professionellen Support für meine WordPress-Website

Vorname*

Nachname*

E-Mail-Adresse*

Website-URL*

Telefon*

Nachricht*

Unverbindlich anfragen

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.

Ja, ich möchte professionellen Support für meine WordPress-Website

Vorname*

Nachname*

E-Mail-Adresse*

Website-URL*

Telefon*

Nachricht*

Unverbindlich anfragen

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 Aktion hingegen wiederholen.

Nachteil: Was passiert, wenn du Elementor deaktivierst?

Page-Builder gehören zu denjenigen Plugins, die nicht einfach mal eben wieder deinstalliert werden können. Natürlich hindert dich nichts an dieser Maßnahme, nur wirst du dich danach ganz sicher wundern, was mit der Gestaltung deiner Website passiert ist.

Die meisten am Markt befindlichen Page-Builder arbeiten mit Shortcodes, die sie in die Inhalte einbetten. Deinstallierst du ein solches Plugin, bleiben alle Shortcodes erhalten, ergeben aber für WordPress keinen Sinn mehr und zerstören so deine Inhalte. Wieder andere Plugins lassen zwar ihre Shortcodes nicht stehen, nehmen dafür aber alle Inhalte, die innerhalb des Builders entstanden sind, mit in den Orkus.

Elementor ist da ein regelrecht vorbildlicher Vertreter seiner Zunft. Zwar verlierst du auch nach der Deaktivierung von Elementor das gesamte Layout, die Inhalte jedoch bleiben als reines HTML erhalten. Das sieht nicht mehr ganz so schick aus, funktioniert aber noch.

Nachteile von Page-Buildern

Solltest du glauben, dass ein Page-Builder ein Layout generiert, das danach unabhängig von diesem Page-Builder fort existiert, so täuscht du dich. Deshalb ist die Entscheidung für einen Page-Builder weitreichend, denn auch ein Wechsel ist nicht ganz trivial.

Das liegt daran, dass Page-Builder eben keine Themes, sondern Plugins sind. Hier wird zur Laufzeit ein Gerüst aufrechterhalten, das keinen statischen Unterbau hat, so wie es etwa ein Theme hätte. Auch die Aussage, Page-Builder würden generell mit jedem Theme arbeiten, ist mit Vorsicht zu genießen. Natürlich soll eine solche Aussage lediglich die Hemmschwelle senken und so suggerieren, dass man sich eben gerade nicht bindet, so man sich für ein Produkt entscheidet. Stimmen tut das nicht uneingeschränkt. Du musst es einfach ausprobieren.

Immer mehr Theme-Entwickler bündeln ihre Themes mit einem Page-Builder. Das wirkt auf den ersten Blick natürlich höchst komfortabel, hat aber neben den genannten Nachteilen auch jenen, dass die Nutzer solcher Kombinationen sich außerhalb des WordPress-Standards bewegen, was sie weniger flexibel im weiteren Umgang mit dem System werden lässt.

Designer werden sich zu Recht daran stören, dass Page-Builder stets mit ihrer eigenen Designphilosophie aufwarten. Die Bedienung dieser Aufsätze hat mit der Bedienung von WordPress ansonsten nicht mehr viel zu tun. Konsistent ist das nicht. Designentscheidungen des WordPress-Teams, die sicherlich aus guten Gründen erfolgen, werden über den Haufen geworfen. Als Verwender sind wir darauf angewiesen, dem Plugin-Hersteller zuzutrauen, eine gute Usability zu entwerfen. Dieses Vertrauen ist zumindest bei Elementor durchaus berechtigt.

Glücklicherweise ist das Risiko, nach einer Weile der Nutzung auf irgendwelche Dealbreaker zu stoßen, bei Elementor gering, denn das Plugin ist in seiner Grundversion kostenlos verfügbar. So kannst du es auf Herz und Nieren testen, bevor du dich endgültig entscheidest. Teste es bitte nicht auf deiner Live-Website, sondern setze zum Beispiel WP-Staging ein, um eine Testumgebung zu schaffen.

Erweiterte Funktionalität mit Elementor Pro

Neben der kostenlosen Variante gibt es Elementor Pro*, das mit exklusiven Features auf potenzielle Poweruser abzielt. Elementor Pro ist eine Erweiterung des kostenlosen Plugins und kann einfach ergänzend installiert werden. Danach arbeitest du nahtlos an deinen Designs weiter, aber mit erweiterten Features.

Mit der Pro-Version erhältst du komfortable Möglichkeiten, WooCommerce-Elemente in Elementor-Layouts zu integrieren. Das geht in der kostenfreien Variante nicht. Zudem hast du Zugriff auf die stetig wachsende Zahl an Widgets, die sich funktional auf die komplette Seite auswirken, wie etwa das Search Widget* oder das Menu Widget*. Auch das Widget Animated Headline*, mit dem du den populären Text-Flip-Effekt, bei dem sich eigentlich feste Textbestandteile austauschen lassen, sowie der Live-Formular-Editor, ist den Pro-Nutzern vorbehalten. Wenn du dich im Detail über die Unterschiede zwischen Free und Pro unterrichten willst, solltest du diese Übersicht* besuchen.

Was kostet Elementor Pro?

Die Kosten für die Pro-Version* beginnen bei 49 US-Dollar im Personal-Tarif für eine Jahres-Lizenz auf einer Domain. Für 99 USD schaltest du die Pro-Version für drei Domains frei und für 199 US-Dollar kannst du Elementor auf bis zu 25 Domains einsetzen. Das Feature-Set ansonsten ist bei allen Plänen identisch. Die Jahres-Lizenz versteht sich dabei so, dass du ein Jahr lang alle Updates nebst Support in Anspruch nehmen kannst. Nach Ablauf des Jahres könntest du nur eine langsam veraltende Version weiter verwenden, aber immerhin das.

Elementor Pro und der Theme Builder

Was besonders an Elementor auffällt, neben den bereits genannten Aspekten, ist die hohe Innovationsgeschwindigkeit der Entwicklung. Es vergeht kaum eine Woche, in der es nicht neue Features, neue Templates oder sonstige Neuheiten gibt.

So haben die Entwickler den Elementor Theme Builder* am Start. Dieser hebt die Limitierung des Page-Builders auf rein statischen Content auf und erlaubt es dir, auch Bereiche zu gestalten, auf die du bisher ohne Coding nicht zugreifen konntest.

Mit dem Theme Builder erstellt du vollkommen visuell auch Header*, Footer*, Archiv- und andere Übersichtsseiten, die Suchergebnisse, die 404 und vor allem auch die dynamischen Beiträge deines eigentlichen Blog-Bereichs.

Dabei arbeitet Elementor mit sogenannten Blocks*. Blocks sind vorgefertigte Inhaltselemente, die du an deine persönlichen Wünsche designerisch anpassen kannst. Das Konzept hat ein bisschen was von Lego. Deine angepassten Blocks kannst du dann wiederum als eigene Blocks oder Widgets sichern, so dass du dir langsam, aber sicher eine eigene Baustein-Sammlung aufbaust, die deinen Workflow massiv beschleunigen wird. Im Lieferzustand findest du derzeit bereits 235 fertig einsetzbare Blocks, die sich über die gesamte Anwendungspalette verteilen.

Mich begeistert vor allem die Möglichkeit der Gestaltung der dynamischen Inhalte aus dem Blog. Hierzu bietet Elementor Zugriff auf die WordPress-Hooks, die du auch im Wege des Coding einsetzen würdest. Sehr praktisch ist die dynamische Preview, die du mit beliebigem vorhandenem Content füttern kannst, so dass sichergestellt ist, dass deine Beiträge wirklich gut im neuen Design liegen. Anhand eines einzelnen Beitrags beurteilt sich das doch eher schwer.

Einmal fertiggestellt, entscheidest du anhand fein regelbarer Bedingungskaskaden, wo dein frisch gestaltetes Element, etwa dein neuer Header, genau erscheinen soll. Du kannst Designs sogar auf einzelne Seiten oder Beiträge oder andere Taxonomien beschränken. Damit bist du in der Lage, deine Website vollkommen individuell zu gestalten, ohne ein Schnipselchen Code schreiben zu müssen.

Das folgende Video gibt dir einen guten ersten Eindruck in die Fähigkeiten des Theme Builder, wenn auch die Vorführung der Bedienung etwas rasant vonstatten geht:

Was mit dem Theme Builder nicht geht, ist, ein vollständiges Theme zu erstellen, dass du dann als solches exportieren könntest, um es etwa zu verkaufen. Du brauchst also stets ein Basis-Template auf dessen Grundlage du dann arbeitest.

Inzwischen stellt Elementor WordPress eine komplette Code-Referenz für Elementor zur Verfügung und erleichtert Entwicklern so die Arbeit. Mehr als 70 Plugins, die in der ein oder anderen Form auf Elementor aufsetzen, zeugen vom Erfolg dieser Maßnahme. Elementor ist, anders als andere Page-Builder kein geschlossenes System mehr, sondern entwickelt sich zu einem offenen Standard, auf den sich viele einigen können. Das ist immer gut. Denn auf diese Weise wird ein Projekt langfristig stabiler und ausgereifter.

Elementor kaufen oder nicht kaufen?

Ich sage es mal so, ich habe Elementor Pro gekauft. Ich kann damit Kundenseiten erstellen, bei denen das Budget nicht zum Anspruch passt. Elementor wird auf diese Weise zu meinem internen Homepage-Baukasten. Die Lizenz erlaubt ausdrücklich die Erstellung von Websites für Dritte. Somit sind auch Webdesign-Agenturen auf der sicheren Seite. Die Alternative bestünde darin, einen dedizierten Website-Builder zu verwenden. Dann müsste ich jedoch verschiedene Skillsets pflegen. So verwende ich einfach WordPress, das ich ohnehin kenne und schätze, und setze ein visuelles Tool zur Beschleunigung des Workflows oben drauf.

Vorteile von Elementor Pro

Vor allem die Arbeitsgeschwindigkeit, die Kompatibilität zu bestehenden WordPress-Themes, die Vielfalt an fertigen Templates und das flexible Editing sprechen für Elementor:*

• Integrierte Pop-Ups: Auch Pop-Ups kannst du mit Elementor selber erstellen. So kannst du z.B. deine Besucher um ihre Email-Adresse bitten, bevor sie deine Seite verlassen. Ein wichtiges Marketing-Tool!
• Integrierte Animationen: Über Elementor kannst du eine Vielzahl an Animationen erstellen, die die Nutzererfahrung verbessern. Du kannst Animationen z.B. zeitgesteuert oder über Scrollen mit der Maus definieren werden. So fühlt sich eine Website noch interaktiver an.
• Integration mit Drittanbietern: Elementor bietet ferner eine Vielzahl an Integrationen mit Drittanbietern an, sei es Yoast, Mailchimp, Sendinblue usw.
• Viele wichtige Widgets: Elementor Pro bietet fast alles, was du für eine Website brauchst: Zitate, Slider, Kommentare, Bewertungen, Akkordeons usw. Es bleiben kaum Wünsche offen.
• Das Ökosystem von Elementor: Eine Vielzahl an kleinen Add-ons und Extensions für Elementor machen den Einsatz von Elementor noch mächtiger und intuitiver.
• Website-Vorlagen: Nach nur wenigen Klicks kannst du bereits mit einer Vorlage arbeiten und sie deinen Bedürfnissen anpassen. So kannst du Elementor schnell kennenlernen und verstehen und später routiniert deine ganz eigenen Seiten und Templates erstellen.
• Keine Shortcodes für Inhalte: Entfernst du Elementor, bleiben die Inhalte trotzdem erhalten. Nur das Layout (CSS) verschwindet.

Fazit: Wenn Page-Builder, dann Elementor

Im Vergleich zu anderen Vertretern der Zunft der Page-Builder ist Elementor eines der sanftesten Exemplare, was den Eingriff in den WordPress-Standard betrifft. Bedenken musst du, dass das Wechseln zwischen verschiedenen Page-Buildern mit hohem Aufwand verbunden ist. So verlierst du etwa das Layout, wenn du dich irgendwann gegen Elementor entscheiden solltest. Das gilt natürlich für sämtliche am Markt befindlichen Wettbewerber.

Die Erwägungen sind also grundsätzlicher Natur. Wenn du dich entschieden hast, einen Page-Builder verwenden zu wollen, dann ist Elementor das Plugin deiner Wahl.

Quellen

[1] Über 7 Millionen Websites haben Elementor im Einsatz | Builtwith

Dieser Beitrag wurde im Januar 2018 von Dieter Petereit geschrieben und im April 2022 grundlegend überarbeitet.

(Quellennachweis Artikelbild: Depositphotos)