BLOGPOST

Elementor-Flexbox aktivieren und nutzen

Picture of Claudia Frank
Claudia Frank

Autorin // Lovely Webdesign

In diesem Video und Blogpost finden Sie eine Schritt-für-Schritt-Anleitung zur Verwendung des Elementor Flexbox-Containers – angefangen von der Aktivierung des Flexbox-Containers über die Erstellung neuer Inhalte mit der Flexbox bis hin zur Umwandlung bestehender Abschnitte. Aber Achtung: Ein Zurück in das alte System ist nur bedingt möglich.

Themen

Schritt 1: Flexbox-Container aktivieren

Gehen Sie zu Ihrem WordPress-Dashboard. Navigieren Sie zu Elementor –> Einstellungen –> Eigenschaften – Laufende Experimente.
Scrollen Sie die Seite nach unten, um den Flexbox-Container zu finden. Aktivieren Sie den Flexbox-Container. Vergessen Sie nicht, die Änderungen zu speichern.

Elementor-Flexbox aktivieren unter Einstellungen
Abbildung: Elementor-Flexbox aktivieren unter Einstellungen

Schritt 2: Verwenden des Elementor-Flexbox-Containers

Erstellen Sie einen neue Seite. Sie finden den Flexbox-Container dann links oben im Elementor-Panel. Sie können ihn per Drag & Drop auf die Elementor-Leinwand ziehen, wie Sie es vom Arbeiten mit den Widgets gewohnt sind.
Elementor-Flexbox einfügen per Drag and Drop
Abbildung: Elementor-Flexbox einfügen (Option 1)

Alternativ können Sie ein Layout erstellen, indem Sie auf das Plus (+) Symbol auf der Elementor-Seite klicken.
Sie erhalten zwei Optionen: Flexbox und Grid. Wählen Sie Flexbox. 

Elementor-Flexbox Container einfügen
Abbildung: Elementor-Flexbox einfügen (Option 2)

Durch Klicken auf die Flexbox-Option können Sie dann einen Bereich mit der Flexbox erstellen. Die ersten beiden Möglichkeiten, die Ihnen angezeigt werden, werden als Richtungsspalten bezeichnet. Mit der ersten Alternative können Sie die Inhalte vertikal ausrichten. Mit der zweiten horizontal. 

Elementor-Flexbox einfügen
Abbildung: Elementor-Flexbox Richtungsspalten und Struktur-Auswahl

Keine Sorge – Wenn Sie sich hier vertan haben, können Sie die Inhaltsrichtung im Elementor-Panel ändern. Klicken Sie dazu den betreffenden Container an. Unter Container bearbeiten -> Layout -> Richtung, können Sie die Richtung ändern. Sie haben die Optionen Row – horizontal, Column – vertikal, Row reversed, Column reversed.

Elementor-Flexbox Richtung (Direction)
Abbildung: Elementor-Flexbox Richtung bei Container festlegen

Schritt 3: Bestehende Abschnitte umwandeln

Wählen Sie den Abschnitt aus, den Sie mit dem Elementor gestaltet haben, indem Sie auf das Sechspunkte-Icon klicken. Sie sehen die Schaltfläche „Konvertieren“ im Layout-Abschnitt des Elementor-Panels. Klicken Sie darauf. Die Umwandlung dauert nur wenige Sekunden. Sobald die Konvertierung abgeschlossen ist, sehen Sie eine weitere Kopie des Abschnitts. Der zweite (kopierte) Abschnitt ist der konvertierte Abschnitt. Behalten Sie ihn und löschen Sie den ersten Abschnitt, indem Sie auf das Kreuz (x) klicken. Wiederholen Sie diesen Vorgang, um alle anderen Abschnitte auf der Seite nacheinander zu konvertieren.
Elementor-Flexbox-Abschnitt umwandeln
Abbildung: Elementor-Flexbox bestehenden Abschnitt umwandeln
ACHTUNG: Beim Konvertieren sind oft Nacharbeiten notwendig – sei es, dass das Layout nicht ganz passt, zu viele Container beim Konvertieren entstanden sind oder etwas bei den responsiven Layouts nicht ganz richtig ist. Kontrollieren Sie deshalb auch in den responsiven Modi die Ergebnisse.

Warnung

Ein Zurückgehen zum alten Abschnitte-und-Spalten-Modell ist schwierig, wenn Sie bereits Inhalte mit dem Flexbox-Modell erstellt haben. Sie können zwar die Elementor-Flexbox-Funktionalität in den Einstellungen 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
Abbildung: Elementor-Flexbox Warnung
Elementor-Flexbox-Warnung - Rückkehr schwierig
Abbildung: Elementor-Flexbox Warnung bei Deaktivierung der Flexbox-Container

Zusammenfassung

Die Aktivierung der Elementor-Flexbox erfolgt unter den Einstellungen von Elementor. Neue Inhalte werden dann ganz automatisch mit der Flexbox erzeugt. Alte Abschnitte lassen sich mittels „Umwandeln“ umwandeln. Achtung: Eine Rückkehr in das alte System ist nur bedingt möglich. Deshalb prüfen Sie sorgfältig, ob Sie den Umstieg machen wollen.
Nach oben scrollen