Einstieg in Elementor 4

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.

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.

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.

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.

Natürlich machen Klassendefinitionen nur dann Sinn, wenn man auch bestimmt Werte (Farben, Schriften und Größen) zentral ablegen kann.

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.

Eine weitere Neuerung ist die Einführung von Komponenten. Diese können neben den verschiedenen Templates sich wiederholende Inhaltsgruppen aufnehmen.

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.