In dem Video und Blogpost zeige ich Ihnen wesentliche Vor- als auch auf die Nachteile der Elementor-Flexbox auf, sodass Sie ein klares Bild darüber gewinnen, wo sich der Einsatz der Elementor-Flexbox lohnt und mit welchen Problemen Sie bei der Umstellung rechnen müssen.
Dieser Video ist der erste Teil einer fünfteiligen Video-Serie zur Elementor-Flexbox.
Themen
Vorteile der Elementor-Flexbox
1. Flexiblere Layouts
Die Flexbox ermöglicht die Erstellung von flexibleren Layouts. Ein Beispiel dafür ist ein Content Card Design, dass hier mit der Flexbox erstellt wurde. Konventionell wäre dies sehr schwierig umsetzbar, aber mit der Flexbox ist dies problemlos möglich.
Quelle: https://blog.duda.co/flexbox-examples
2. Saubereres Layout
Mit der Elementor-Flexbox kann ein deutlich akkurateres Layout erzeugt werden. Bei dem bisherigen Arbeiten mit Abschnitten und Spalten von Elementor war das Layout oft nicht sauber, insbesondere bei Verschachtelungen. Mit der Elementor-Flexbox gehören diese Probleme der Vergangenheit an.
Quelle: Demo-Website von Lovely Webdesign - hier sauberes Layout mit Elementor-Flexbox
3. Einfache und verbesserte responsive Gestaltung
Die Flexbox erleichtert die responsive Gestaltung erheblich. Die Funktion „Order“ beispielsweise ermöglicht eine flexible Anordnung von Elementen für verschiedene Bildschirmgrößen. In meinem Video zur responsiven Gestaltung gehe ich darauf näher ein. Das nachfolgend Beispiel zeigt diese Funktion in der Praxis.
Quelle: https://elementor.com/features/container
4. Verbesserte Ladegeschwindigkeit
Die Ladegeschwindigkeit profitiert von einem schlankeren DOM-Modell, da weniger DIVs zum Einsatz kommen. Tests, die ich auf der Plattform von Yellow Lab Tools mit einem Vorher-Nachher-Test gemacht habe, zeigen, dass das Elementor-Flexbox-Modell gegenüber dem herkömmlichen Abschnitten- und Spalten-Modell von Elementor weniger DOM-Elemente verwendet. Das kann zu einer effizienteren Ladegeschwindigkeit führen. Ich habe parallel auch Messungen auf Plattformen wie GTmetrix gemacht. Hier konnte ich jedoch bei zwei kleinen Demo-Websites mit dem Hello-Theme keinen signifikanten Unterschied feststellen. Wenn überhaupt, waren hier die Abweichungen nur im marginalen Bereich.
Abbildung: Performance-Messung - Elementor-Flexbox-Modell versus konventionelle Abschnitte- und Spalten
Nachteile der Elementor-Flexbox
1. Lernkurve
Ein bedeutender Nachteil ist die Lernkurve, die mit der Elementor-Flexbox einhergeht. Viele Funktionen, wie „Wrap“, „Grow“ und „Shrink“, sind nicht intuitiv. Es gibt jedoch viele Ressourcen im Web und auf YouTube, die bei der Einarbeitung helfen können, einschließlich meiner eigenen Video-Reihe zur Elementor-Flexbox und dem Elementor Playground.
Quelle: https://playground.elementor.com/demo/flexbox/
2. Umstellung bestehender Websites
Die Umstellung bestehender Websites auf das Flexbox-Modell kann problematisch sein. Absolute Positionierungen und responsives Design erfordern oft Nacharbeiten. Darüber hinaus entstehen bei der Umstellung oft zu viele Container. Zu viele Container können die Ladegeschwindigkeit negativ beeinflussen. Den ein oder anderen Container sollte man dann manuell entfernen. Wie das funktioniert, erläutere ich in den Videos Elementor-Flexbox Fallbeispiele und Elementor-Flexbox Responsive Gestaltung.
Abbildung: Zu viele Container - Vor Bereinigung / Nach Bereinigung
4. Kompatibilitätsprobleme mit älteren Browsern
Ein weiterer Nachteil ist die mangelnde Kompatibilität mit älteren Browsern. Ältere Versionen von Opera und Internet Explorer sind betroffen: Bei Apple-Geräten tritt das Problem erst ab iOS 13 nicht mehr auf.
Quelle: caniuse.com
4. Schwierige Rückkehr zum alten Modell
Ein Zurückgehen zum Abschnitte-und-Spalten-Modell ist schwierig. Sie können zwar die Elementor-Flexbox-Funktionalität in den Settings wieder deaktivieren. Elementor weist jedoch darauf hin, dass containerbasierte Inhalte dann nicht mehr sichtbar sind. Wenn man dann neue Inhalte mit Abschnitten erstellt und sichert, während die Flexbox-Container nicht mehr aktiv sind, sind die Inhalte, die mit dem Flexbox-Modell erstellt wurden, verloren.
Quelle: https://elementor.com/help/deactivate-containers/
Mein Fazit
Die Vorteile der Elementor Flexbox, wie flexible und saubere Layouts, einfache responsive Gestaltung und potenziell verbesserte Ladegeschwindigkeiten, sind beeindruckend. Allerdings sollten die Nachteile, insbesondere die Lernkurve und die Herausforderungen bei der Umstellung bestehender Websites, nicht unterschätzt werden. Ich würde die Elementor Flexbox empfehlen, wenn Sie ein neues Projekt starten oder bereit sind, in die Umstellung zu investieren. Bei bestehenden Websites ist eine sorgfältige Abwägung notwendig, um zu entscheiden, ob die Umstellung lohnenswert ist.Könnte genau das Richtige für Sie sein!
