BLOGPOST

Vor- und Nachteile der Elementor-Flexbox

Picture of Claudia Frank
Claudia Frank

Autorin // Lovely Webdesign

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.

Content-Card-Design - Beispiel Flexbox
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.

Sauberes Layout mit Elementor-Flexbox - GIF-Animation
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. 

Elementor-Flexbox - Vor- und Nachteile - Responsive Gestaltung - GIF-Animation
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.

Elementor-Flexbox 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

Elementor-Flexbox - Bereinigungen nach Umstellung von Abschnitten zur Flexbox
Abbildung: Zu viele Container - Vor Bereinigung / Nach Bereinigung

3. 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.
Browser-Kompatibilität Flexbox
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.

Elementor-Flexbox - Warnung - Rückkehr schwer
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.

Nach oben scrollen