tl;dr: Nach dem doch recht zügigen Launch von Elementor 4 und seit dem gefühlt täglichen Updates ist Elementor bei Version 4.1 angekommen. Also jener Zeitpunkt, wo auch weniger nerdige Zeitgenossen einen näheren Blick auf die Software werfen sollten. Das Wichtigste vorab: wenn du die neuen Funktionen nicht nutzen willst ändert sich vorab nichts. Ohne der Pro-Version macht das alles keinen Sinn, das war aber auch schon bisher so. Ob man die stark beworbene ONE-Edition wirklich benötigt muss individuell entschieden werden. Ich habe mich dagegen entschieden.
Große Versionssprünge sind selten. Kunden erwarten sich neue Funktionen und fürchten sich vor Änderungen in bestehenden Systemen und neuen Kosten. Hier kann man entwarnen: die Kosten bleiben gleich (je nach Abo), V4 bedeutet also keine Mehrkosten. Was die Änderungen an bestehenden Sites betrifft kann man auch entwarnen: das Upgrade auf 4 kann ohne Probleme durchgeführt werden. Die neuen Funktionen müssen erst aktiviert werden und auch dann beeinflussen sie bestehende Seiten, Beiträge und Templates nicht, auch nicht wenn sie im Editor geöffnet und neu gespeichert werden.
Der Umstieg auf Elementor 4 ist sicher. Das ist schon mal eine gute Nachricht.
Warum aber der ganze Marketinglärm? Elementor 3 ist in die Jahre gekommen. Obwohl WordPress mit Gutenberg stark aufgeholt hat, hat sich Elementor trotzdem gut halten können. Sie waren einfach schneller in der Umsetzung und haben manche Dinge besser im Griff – Stichworte Navigationselement (Menüs) und Flexbox-Container, die in Elementor viel besser und logischer umgesetzt wurden als in Gutenberg.
Painpoints waren immer die Geschwindigkeit und (damit zusammenhängernd) der HTML-Output, den Elementor erzeugt. Bei richtiger Serverumgebung richtig aufgesetzt funktioniert Elementor 3 sehr gut. Wirklich exzellent kann es nie werden, weil der ursprüngliche Vorteil (das alle Bestandteile durch einen umgebenden Tag vereinheitlicht werden) zu einem Nachteil wird, weil zu viel Code produziert wird und die Informationen zur Gestaltung dieser Bestandteile umständlich verwaltet werden müssen.
Hier setzt die Version 4 an: Die Einführung der Atomic-Elements soll in Verbindung des direkten Zugriffs auf CSS-Klassen den systemischen Nachteil von Version 3 aufheben und die Sites von Natur aus schneller machen. Andere hätten vielleicht ein eigenes Produkt entwickelt, Elementor will/muss aber seine Marktmacht nutzen und ihr Kernprodukt – den Editor – in eine neue Generation führen.
Man kann also die neuen Funktionen in Elementor 4 wie eine Erweiterung von Elementor begreifen, also ein Tool, das zusätzliche Dinge ermöglicht (hoffentlich) ohne das bestehende System zu zerstören. Ziel sind sicher eher professionelle Anwender. Jene User, die sich nur eine Lösung zusammen klicken und sich nicht mit der Technik auseinandersetzen wollen, sieht Elementor wohl mit den diversen KI-Produkten aus dem eigenen Haus wie zB. Angie versorgt.
Natürlich macht es Sinn für die Erforschung eines so substantiellen Teiles der Arbeit an WordPress-Sites einen eigenen Host dazu zu verwenden. Ob man eine lokale Umgebung wählt, einer Serverumgebung hat oder My WordPress verwendet sollte egal sein. Die Grundfunktionen funktionieren auch in der kostenlosen Elementor 4 -Version.
Um einen genaueren Einblick zu bekommen habe ich für meine Experimente eine aktuelle WordPress 7 Installation verwendet und dort nur die beiden Erweiterungen Elementor und Elementor Pro installiert.
Um die die neuen Funktionen zu erreichen muss man sie unter
Dashboard > Elementor > Editor > Einstellungen | Atomic Editor
aktivieren. Danach habe ich über
Dashboard > Elementor > Editor > System > Element Manager
alle Elemente deaktiviert, die nicht als Atomic-Elements zu erkennen waren. Damit bleiben nur die Teile über die uns hier interessieren. Zusätzlich – laut Elementor – bekommen wir einen Vorgeschmack darauf wie es einmal sein wird, wenn alle Widgets in der neuen Welt angekommen sind. Und die Site soooo viel schneller sein wird. Schau‘ ma mal.
Elementor ändert ja gerne die Benutzerführung und baut neue Elemente ein. So ist es auch diesmal. Grundsätzlich hat Elementor die Nutzerführung vereinheitlicht, dh. wirklich überall sind die selben Tabs und Einstellungen zu finden. Auch dann, wenn eine Einstellung keinen Sinn ergibt.
Auf den ersten Blick sind die neuen Atomic Elemente zu erkennen. In einem eigenen Tab angeordnet sind sie auch durch das Atom-Symbol gekennzeichnet. Es gibt jetzt also bei manchen Widgets 2: Überschrift, Bild, Absatz, …
Bei aktivem Widget ändern sich nun Beschriftung und Inhalt der Tabs im linken Bereich. Wenn wir uns das am Beispiel eines einfachen Absatzes anschauen:
Aus
Inhalt wird Allgemein
Stil bleibt Sil
Erweitert wird Interaktionen
In diesem neuen Allgemein benannten Bereich wird dann unterteilt in Inhalt und Einstellungen.
Und Inhalt meint Inhalt – während der Absatz in Elementor 3 eigentlich ein vollständiger RichText-Editor ist bleibt unter Atomic nur echter Text. Unter Einstellungen findet man dann alles Wichtige: den HTML-Tag, Verlinkung, ID, Attribute und auch die Conditions.
Das ist recht logisch, wenn auch hin und wieder mangelhaft übersetzt. Änderungen bei den Übersetzungen sind häufig, im Zweifelsfall die Sprache auf EN ändern, wenn das stört.
Im Tab Stil sind nun alle Optionen vereint, die Auswirkungen auf die Gestaltung haben (früher waren mache Optionen unter > Erweitert zu finden).
Auffällig ist hier die erste Option Klassen. Eine klasse lokal existiert immer, in dieser sammelt man jene Einstellungen, die nur für dieses eine Element gelten sollen. (Mehr dazu siehe weiter unten.)
Darunter findet man (eben bei allen Atomic Elements) folgende Tabs:
Interaktionen als 3. Tab wurde erst kürzlich ergänzt. Dort werden die dem Element zugeordneten Animationen eingestellt.
Die vielen Einstellungsmöglichkeiten würden es doch recht umständlich machen, bereits eingegebene Werte wieder zu finden und zu verändern. Hier bedient sich das Interface eines einfachen aber sehr hilfreichen Mittels: es markiert jene Positionen, deren Inhalt sich vom default-Wert unterscheidet.
Erfahrene Elementor-Nutzer werden alles finden, was sie auch in V3 benutzen, wenn sie ein damit erstelltes Element bearbeiten. Das Interface in V4 ist eleganter, sinnvoller geordnet und konsistenter – aber eben anders.
Beispiel:
Um einen Hintergrund eines Containers zu gestalten waren die Möglichkeiten bisher im Tab Stil auf die beiden Subtabs Hintergrund und Hintergrund-Überlagerung verteilt. Ein Bild hat man über Hintergrund > Hintergrundtyp (Icon): klassisch und die Angabe eines Bildes (mit Optionen eingestellt).
Im Vergleich dazu das Atomic-Element Flexbox hat wie alle Atomic-Elemente den Tab Stil und den Subtab Hintergrund. Dort kann die Option Überlagerung gesetzt werden die selber wiederum 3geteilt ist in Bild, Farbverlauf und Farbe. Es können mehrere Überlagerungen gesetzt werden.
Das Beispiel zeigt klar die Richtung auf: weg vom Zusammenklicken und Rumschieben beim Design hin zu mehr Verständnis und sorgfalt bei der Umsetzung. Bislang war es möglich ohne an CSS-Zeilen anzustreifen zur arbeiten – um immer wieder dann doch CSS ergänzen zu müssen. Damit war der Einstieg leichter, die Qualität aber nicht unbedingt besser.
Mit den Atomic-Elements muss man mehr Verständnis dafür haben wie HTML und CSS funktionieren damit man das volle Potential ausschöpfen kann.
Websites bestehen immer noch aus HTML, CSS, JS und in WordPress auf Basis von PHP – daran kann sich nichts ändern und wird es auch nicht.
Immer wenn man eine Designangabe macht wird – und wurde – CSS geschrieben. Neu ist jetzt, dass das nicht mehr versteckt wird sondern die Vorzüge und Möglichkeiten von CSS-Klassen aktiv genutzt werden.
Beispiel: bei einer Flexbox wird die Hintergrundfarbe auf rot gesetzt, oben und unten ein Aussenabstand eingestellt und ein Eckenradius auf allen 4 Ecken gesetzt. Diese 3 Formatierungen werden in der Klasse local gespeichert.
Jede Klasse kann neben dem Normal-Zustand noch die Zustände Hover, Focus und Active haben. Während die letzten beiden bei Formularen und Menüs sinnvoll eingesetzt werden können kann Hover, also das Verhalten bei Cursorkontakt, überall vorkommen.
Es ist einfach, die rote Hintergrundfarbe durch eine grüne zu ersetzen sobald das Event Eintritt (on Hover).
Damit kann man sich leicht vorstellen, wie man nun die Gestaltung der verschiedenen Elemente umsetzt.
Da das natürlich möglichst zentral erfolgen soll, damit man die Gestaltung mehrfach einsetzen kann, gibt es die schöne Funktion Convert to global class.
Einen sinnvollen Namen angeben und schon steht diese Klasse überall auf der Website (also global) zur Verfügung. Damit man diese Klassen bearbeiten kann gibt es einen Klassen-Manager.
Der Klassen-Manager zeigt dir alle erstellten Klassen. Du kannst deren Priorität anpassen, sie umbenennen und ungenutzte Klassen löschen, um dein CSS übersichtlich zu halten. Man findet diesen Bereich rechts in der Zeile der Überschrift Klassen (das Icon rechts oben im Screenshot).
Natürlich machen Klassendefinitionen nur dann Sinn, wenn man auch bestimmt Werte (Farben, Schriften und Größen) zentral ablegen kann.
Über dem Eingabefeld für die Farbwerte erscheint neben den Icons für Löschen und Dynamischer Inhalt auch das Icon für die Variablenverwaltung. Gleiches gilt auch für die Größen und Schriften.
Fontvariablen nehmen die Schriftart auf. Größe und Farbe dazu muss in anderen Variablen gespeichert werden. Für eine Schriftdefinition benötigt man also die Variablen für Schriftart, Größe und Farbe die in einer Klasse für diese Schrift zusammengefasst werden. Diese Klasse wird dann der Schrift zugewiesen.
Variablen und Klassen in ihrer Gesamtheit bilden das Design-System. Diesen kann Im- und Exportiert werden (als zip-Datei, das eine Reihe von .json-Dateien enthält). Damit ist eine Migration von Design zwischen Websites leicht möglich, ohne unnötige Inhalte mit übersiedeln zu müssen.
Für den schnellen Zugriff auf das Design-System hat Elementor ein neues Icon im Top-Bar eingeführt. Das Optionen-Menü erlaubt die Migration. Variablen und Klassen werden chronologisch aufgelistet, können aber einfach per Drag&Drop umsortiert werden (Ladereihenfolge!).
Meine ersten Experimente damit waren recht erfreulich. Verschiedene Schriftschnitte habe ich in eigenen Klassen angelegt, da mir das Verhalten bei Änderung der Stärke einer Instanz bei den anderen Instanzen nicht gepasst hat.
Die Schriften selber müssen über das Dashboard verwaltet werden (siehe auch hier dazu).
Eine weitere Neuerung ist die Einführung von Komponenten. Diese können neben den verschiedenen Templates sich wiederholende Inhaltsgruppen aufnehmen.
Über das Kontextmenü lässt sich aus Flexboxen und Div-Blöcken eine Komponente erstellen. Diese taucht dann im Element hinzufügen Panel auf.
Eine Komponente verhält sich ähnlich zu einem Global Widget: Komponenten werden einmal angelegt, Updates dieser Komponente betreffen dann alle Anwendungen (Instanzen). Innerhalb der Komponente können Teile als Override Property definiert werden. Dh. man kann Inhalte anpassen (Texte, Links) während das Design zentral in der Komponente verwaltet wird. Mehr dazu hier.
Elementor 4 ist da und geht nicht mehr weg. Der Weg von der ersten Public Beta bis zum Release war kurz. Das ist sicher auch dem Mitbewerb geschuldet: andere Anbieter waren schon früher mit ähnlichen Konzepten da. Niemand muss sofort umlernen, Elementor 4 bietet aber den perfekten Einstieg in moderneres, strukturiertes Webdesign.
Neben dem Hauptziel Geschwindigkeit spielt es sicher auch eine Rolle, dass Elementor viele Engagement im Bereich KI zeigt. KI’s brauchen einheitliche Strukturen dringender als Menschen – uns schaden sie aber auch nicht.
Der Umstieg von Elementor 3 wird sicher ein langsamer sein, der Einstieg kann ab sofort nur empfohlen werden.
Veröffentlicht am: 31. Mai 2026
Letztes Update: 31. Mai 2026
Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie müssen den Inhalt von reCAPTCHA laden, um das Formular abzuschicken. Bitte beachten Sie, dass dabei Daten mit Drittanbietern ausgetauscht werden.
Mehr Informationen