Da Elementor 4.0 aktuell veröffentlicht wird, habe ich mich entschieden, meinen eigenen Blick auf diese neue Version zu teilen. Da ich den V4-Editor bereits seit den ersten Test-Releases verfolge, wollte ich zusammenfassen, wie er heute auf mich wirkt, was er meiner Meinung nach mitbringt und worin ich seine größten Stärken und Schwächen sehe – auch wenn es davon aus meiner Sicht nur sehr wenige gibt.
Wofür Elementor dient
Elementor ist ein visueller Page Builder für WordPress. Er wurde 2016 veröffentlicht und gewann schnell an Beliebtheit, weil er zu den ersten Tools gehörte, die einen wirklich guten Live-Drag-and-Drop-Frontend-Editor boten. Er vereinfachte die User Experience deutlich, war kostenlos verfügbar (mit der Möglichkeit einer Pro-Version) und verbreitete sich auch dadurch sehr schnell. Über viele Jahre hinweg basierte er vor allem auf einem widgetbasierten Ansatz.
Mit dem Start von V4 geht es jedoch nicht mehr nur um neue Widgets, sondern um eine komplett neue Editor-Architektur. Der Fokus liegt nun deutlich stärker auf einem CSS-first-Ansatz, auf der Trennung von Struktur, Styling und Inhalt sowie auf einer systematischeren Art des Arbeitens über Classes, Variables und Components.
Während ältere Elementor-Versionen vor allem darin stark waren, Seiten schnell mithilfe von Widgets zusammenzubauen, bringt V4 den Editor näher an einen modernen Frontend-Ansatz: weniger einmalige Einstellungen, dafür mehr Systematik, Wiederverwendbarkeit und Ordnung.
Meine Meinung und meine Erfahrung
Eine große Veränderung auch in der Denkweise
Für Menschen, die HTML und CSS beherrschen, ist das ein Schritt nach vorn. Die ursprüngliche Idee von Elementor war es, die Webseitenerstellung für gewöhnliche Nutzer durch einfachere Mechaniken zu vereinfachen. Jetzt kommt jedoch ein Ansatz, der einem klassischen HTML- und CSS-Workflow deutlich näher ist – nur eben in visueller Form. Für mich persönlich ist das ideal, aber für Menschen, die vor allem Einfachheit und eine schnelle Lernkurve suchen, kann es anspruchsvoller sein, vor allem wegen der breiteren und komplexeren Möglichkeiten.
Weniger Widgets, mehr Raum für Kreativität
Der V4-Editor bietet bisher außer den absoluten Grundlagen nicht viele fertige Widgets. Viele Dinge müssen wir uns daher selbst zusammensetzen – zum Beispiel einen Button mit Bild, eine CTA-Sektion, ein Testimonial, eine Image Box und weitere Elemente. Natürlich ist es weiterhin möglich, auch die alten Widgets zu verwenden, aber man sollte sich auf eine komplett andere Oberfläche einstellen. In der Praxis springt man dadurch oft zwischen der neuen und der alten Umgebung hin und her, was etwas chaotisch wirken kann, da die Atomic Widgets ganz anders funktionieren und aussehen.
Dadurch, dass viele neue Möglichkeiten hinzugekommen sind, ist auch das gesamte Menü umfangreicher geworden. Das Durchklicken ist deshalb stellenweise weniger intuitiv, auch wenn alles in Kategorien unterteilt ist. Auf der anderen Seite sind die meisten Einstellungen endlich vereinheitlicht, besonders im Bereich Style, und dadurch haben die Widgets eine konsistentere Bedienung.
Im Bereich Size gibt es jetzt endlich neben Width und Height auch Min- und Max-Werte sowie ein Aspect Ratio, was bei responsiver Arbeit sehr praktisch ist.
Mögt ihr Verlaufsfarben in Überschriften? Endlich haben wir das nativ direkt in Elementor. Wenn man ein Bild direkt im Text haben möchte, ist das ebenfalls kein Problem mehr, und man kann sogar visuell weiter damit arbeiten, etwa durch Layering.
Klassen
Klassen sind ein grundlegendes Prinzip beim Arbeiten mit Styles, und jetzt kommen sie auch in Elementor an. Sie bringen viel Freiheit mit sich und eröffnen gleichzeitig neue Möglichkeiten, eine Website besser zu optimieren und ein konsistentes Design aufrechtzuerhalten. Auf der anderen Seite ist das wieder etwas Neues, das man lernen und verstehen muss, weshalb es für absolute Anfänger nicht unbedingt am einfachsten zu begreifen ist. Trotzdem denke ich, dass es sich auf jeden Fall lohnt.
Insgesamt ist das Ganze recht übersichtlich gelöst. Die einzelnen Ebenen sind farblich gekennzeichnet, und im Class Manager lassen sich Klassen bequem verwalten. In der Praxis bedeutet das, dass ich zum Beispiel einen Stil für eine Überschrift erstellen, ihm eine Klasse zuweisen und diese Klasse dann auf weitere Überschriften anwenden kann. Wenn ich diese Klasse später ändere, werden die Änderungen überall übernommen, wo sie verwendet wird. Das gilt nicht nur für Texte, sondern auch für Bilder, Sektionen und andere Elemente.
Auch Hover-Zustände werden über Klassen definiert. Das ist zwar etwas komplizierter als früher, bringt aber gleichzeitig mehr Kontrolle und Freiheit mit sich.
Komponenten
Komponenten sind meiner Meinung nach die nächste große Sache. Man muss nur eine Komponente erstellen und kann sie dann auf der gesamten Website verwenden. Gleichzeitig kann man selbst festlegen, welche Teile davon veränderbar sein sollen, was eine sehr starke Kombination aus Konsistenz und Flexibilität schafft.
In der Praxis bedeutet das, dass ich mir zum Beispiel meinen eigenen Button oder eine ganze Sektion erstellen kann, die auf der Website mehrfach wiederverwendet werden soll. Anstatt sie immer wieder neu aufzubauen, erstelle ich sie einmal, und bei den weiteren Instanzen ändere ich nur noch den Text, das Bild oder andere Inhalte, die unterschiedlich sein sollen. Wenn ich mich nicht irre, wird diese Funktion nur in der Pro-Version verfügbar sein.
Interactions (Animationen)
Diese Animationen erreichen zwar noch nicht ganz die Möglichkeiten von Webflow, trotzdem haben wir deutlich mehr Freiheit bei den Einstellungen gewonnen. Endlich lassen sich Animationen stärker nach den eigenen Vorstellungen erstellen, statt sich nur auf vordefinierte Effekte zu verlassen, die oft nicht ideal waren. Außerdem wurden verschiedene Trigger zum Auslösen von Animationen hinzugefügt, zum Beispiel page load, scroll into view, while scrolling (Pro), on hover (Pro) oder on click (Pro).
Atomic Form
Atomic Form ist eine komplett neue Art, Formulare zu erstellen. Es handelt sich nicht mehr um ein einzelnes fertiges Formular-Widget, sondern um einzelne Bausteine, aus denen wir uns ein Formular genau so zusammensetzen können, wie wir es brauchen. Dieser Ansatz gibt deutlich mehr Freiheit sowohl beim Design als auch bei der Anpassung.
Custom CSS
Auch Custom CSS hat eine große Veränderung durchgemacht. Es ist nicht mehr nötig, wie früher einen Selector für ein bestimmtes Objekt zu definieren. Es reicht, einfach den eigentlichen CSS-Code einzufügen, und ein großer Vorteil ist außerdem die bessere Arbeit mit Responsiveness. Dadurch können wir für einzelne Breakpoints eigene CSS-Einstellungen festlegen.
Die ganze Idee hinter dem neuen Elementor V4 basiert auf dem Konzept des Atomic Design, also einer Methodik zur Erstellung von Designsystemen, die dabei hilft, Konsistenz, Flexibilität und eine bessere Skalierbarkeit von Websites sicherzustellen.
Fazit
Ist das ein Schritt in die richtige Richtung? Aus meiner Sicht ja. Elementor V4 bringt mehr Freiheit, mehr Systematik und eine modernere Art zu arbeiten. Es stimmt zwar, dass noch einige Dinge fehlen und nicht jede Änderung jedem gefallen wird, aber es ist klar, dass genau das die Richtung ist, in die sich Elementor weiterentwickeln wird. Gleichzeitig ist es wichtig zu sehen, dass das erst der Anfang ist. Es liegt noch vieles vor ihnen, weitere Funktionen sind bereits geplant, und der gesamte V4-Editor wird Schritt für Schritt weiter ausgebaut und verbessert. Deshalb denke ich, dass es sich lohnt, sich schon jetzt nach und nach an diesen neuen Ansatz zu gewöhnen. Schließlich werde ich hinzufügen roadmap.
