Der Flexbox Container von Elementor: Schritt-für-Schritt-Anleitung (inkl. Video-Tutorial)

Noch hat Elementor den Container nur als sogenanntes Beta-Experiment verfügbar gemacht: Um den Flexbox Container zu benutzen, musst du ihn erst aktivieren.

Fakt ist aber auch, dass der Container kommen und die bisherigen Abschnitte und Spalten ersetzen wird!

Das ist auch ganz unabhängig davon, ob du Elementor in der kostenlosen oder der Pro-Version benutzt. Früher oder später wirst du dich mit dem Container auseinandersetzen müssen.

In diesem Artikel findest du alles, was du dazu wissen musst – inkl. Video-Tutorial und Praxisbeispiel!

Elementor Container-Widget: Video-Tutorial (inkl. Praxisbeispielen)

Wenn du lieber Videos anschaust, als zu lesen, kannst du dir gerne mein ausführliches Tutorial anschauen! Darum geht’s im Video:

• Wie du den Flexbox Container aktivierst und bestehende Abschnitte und Spalten umwandelst
• Die einzelnen Einstellungen des Container-Widgets
• Wie du einen Container anklickbar machst
• Wie du Seiten, die mit dem Container gebaut sind, responsive machst

Außerdem gibt es drei Praxisbeispiele, damit du das Container-Widget direkt im Einsatz kennenlernst!

Und wenn du doch lieber liest oder später etwas nochmal nachlesen willst, findest du all diese Dinge jetzt auch hier in schriftlicher Form!

Was ist der neue Flexbox Container überhaupt?

Der Flexbox Container ist der neue Weg, um Layouts in Elementor zu erstellen. Das, was vorher Abschnitten und Spalten gemacht haben, macht jetzt der Container. Nur – so der Plan – besser!

Wie der Name schon sagt, bildet der Container quasi den „Rahmen“ für deine Inhalte, d.h. für die einzelnen Widgets.

Zum einen kannst du die Widgets flexibel im Container anordnen (z.B. untereinander oder nebeneinander, vom rechten Rand beginnend oder vom linken Rand), zum anderen kannst du auch mehrere Container ineinander „verschachteln“, wenn du komplexere Layouts erstellen möchtest.

Insgesamt ermöglicht der Container dir also flexiblere Layouts, während du gleichzeitig weniger Elemente verwenden musst – z.B. nur einen Container statt einem Abschnitt und zwei Spalten.

Das kann die Ladezeit deiner Website verbessern.

Wo finde ich den Container?

Mit der Version 3.8 von Elementor ging der Container offiziell in den Beta-Status. Unter Elementor > Einstellungen > Experimente kannst du den Container auf bestehenden Websites aktivieren:

Wenn der Container aktiv ist, ändert das erstmal nichts an deinen bisherigen Inhalten. Alle Abschnitte und Spalten bleiben bestehen und du kannst sie wie gewohnt bearbeiten.

Neue Inhalte kannst du jetzt allerdings nur noch im Container erstellen!

Das erkennst du daran, dass im Editor nicht mehr das Widget „Innerer Abschnitt“ zu sehen ist, sondern nur noch der Container, der ja sowohl Abschnitte und Spalten als auch den inneren Abschnitt ersetzt:

Bestehende Abschnitte kannst du mit einem Klick zu Containern umwandeln. Dadurch wird der Abschnitt dupliziert und als Container direkt darunter nochmal eingefügt.

Bei allen Abschnitten, bei denen ich die Umwandlung bisher getestet habe, hat das sehr zuverlässig funktioniert und das Design wurde 1:1 übernommen.

Achtung: Wenn du Inhalte mit dem Container erstellst und das Feature in den Einstellungen danach wieder deaktivierst, werden alle Container-Inhalte wieder gelöscht! Behalte das auf jeden Fall im Hinterkopf.

Wenn du Elementor auf neuen Websites zum ersten Mal installierst, ist der Container eventuell bereits automatisch aktiv und du musst nichts weiter einstellen.

Wie genau funktioniert der Container?

Bisher war es in Elementor ja so:

• Für neue Inhalte auf einer Seite brauchtest du einen Abschnitt
• Jeder Abschnitt hatte mindestens eine Spalte.
• In dieser Spalte wiederum konntest du die Widgets ausschließlich untereinander einfügen.

Für mehr Flexibilität innerhalb einer Spalte konntest du noch den inneren Abschnitt nutzen.

Einen neuen Container erstellen

Mit Abschnitten und Spalten ist jetzt aber bald Schluss. Stattdessen wird es nur noch den Container geben, der dir von Haus aus mehr Flexibilität ermöglicht. Hier kannst du zum Beispiel Widgets direkt nebeneinander anordnen, ohne extra Spalten anlegen zu müssen.

Diese Flexibilität siehst du auch direkt, wenn du einen neuen Container erstellen möchtest:

Du kannst also komplexere Strukturen auswählen und erhältst je nachdem einen oder mehrere Container, die ineinander verschachtelt sind.

Die Einstellungsmöglichkeiten des Containers

Schauen wir uns zuerst die Einstellungen an, die du für den Container als ganzes treffen kannst. Was du hier einstellst, betrifft also alle Elemente innerhalb eines Containers.

Du findest die Einstellungen unter „Layout“.

Wichtig: Wenn du nur diesen Artikel liest, verstehst du jetzt gleich wahrscheinlich nur Bahnhof – so würd’s mir zumindest gehen 🙂 Am schnellsten lernst du den Container kennen, wenn du wirklich im Elementor Editor damit arbeitest, mal was ausprobierst und dich durchklickst!

Layout > Container

Der erste Abschnitt hat die Überschrift „Container“. Hier hast du drei Optionen:

• Inhaltsbreite: Boxed oder Volle Breite – wie beim Abschnitt vorher: hier gibst du an, wie breit der Inhalt innerhalb des Containers angezeigt werden soll.
• Breite: Hier kannst du die Inhaltsbreite genauer definieren.
• Min. Höhe: Die Mindesthöhe des Containers.

Diese Einstellungen kennst du vermutlich schon vom Abschnitt!

Layout > Elemente

Hier wird’s jetzt interessant, denn das sind die Einstellungen, die beim Container neu sind.

Direction: Die Richtung, in der die Elemente innerhalb des Containers angeordnet werden sollen. Vertikal oder horizontal ist beides möglich, und du entscheidest jeweils ob du von rechts oder von links bzw. von oben oder von unten starten möchtest.

Justify Content: Hier legst du den Abstand zwischen den einzelnen Elementen und den Abstand vom Rand fest. Die Optionen hier sind davon abhängig, ob du bei Direction horizontal oder vertikal ausgewählt hast (das gleiche gilt auch für die nächste Option, Align Items).

Align Items: Die Ausrichtung der Elemente innerhalb des Containers.

Gap between elements: Legt fest, wie viel Abstand zwischen den einzelnen Elementen ist. Standardmäßig sind es 0px, du kannst den Abstand z.B. auch in Prozent angeben.

Wrap: Je nachdem, welche Einstellungen du getroffen hast, kann es sein, dass die Elemente nicht mehr alle in eine Spalte bzw. Zeile passen. Hier legst du fest, was in dem Fall passieren soll – ob die Elemente „überlappen“ oder ob sie automatisch in die nächste Spalte bzw. Zeile übergehen.

Vor allem bei diesen neuen container-spezifischen Einstellungen gilt: Durch Ausprobieren wirst du am schnellsten lernen, was bei den unterschiedlichen Optionen passiert und welche Auswirkungen das auf dein Layout hat!

Einstellungsmöglichkeiten für einzelne Widgets

Das waren jetzt wie gesagt die Optionen für den gesamten Container – wenn du es also bspw. so einstellst, dass die Widgets alle am oberen Rand angezeigt werden, betrifft das auch wirklich alle Widgets.

Du hast aber auch die Option, einzelne Widgets innerhalb des Containers anders zu positionieren. Dazu kommen wir jetzt.

Bei jedem Widget findest du jetzt im Tab Erweitert drei neue Einstellungen: Align Self, Order und Size. Schauen wir uns diese Optionen auch wieder anhand des Beispiels an.

Für den Container selbst habe ich dabei folgende Einstellungen getroffen:

• Mindesthöhe: 50px
• Direction: Reihe – horizontal
• Justify Content: Start
• Align Items: Center

Das ist also die Ausgangslage, mit der wir starten. Die Einstellungen für die einzelnen Widgets innerhalb des Containers schauen wir uns jetzt anhand des grünen Kreises an.

Wähle das Widget aus und gehe zu Erweitert > Layout, um diese Einstellungen zu finden!

Align Self

Wie bei Align Items auf Container-Ebene bestimmst du hiermit die Ausrichtung des Widgets. Wenn die Widgets grundsätzlich zentriert angezeigt werden, so wie bei mir, kann ich den Kreis hiermit z.B. am oberen Rand des Containers anzeigen:

Order

Mit dieser Einstellung kannst du das Widget an einer anderen Stelle anzeigen lassen – ich könnte den Kreis also so an Position 1 anzeigen statt ganz am Ende, d.h. vor dem Stern:

Neben Start und Ende kannst du auch eine eigene Reihenfolge für die Widgets festlegen. Das funktioniert aber nur, wenn du dann allen Widgets eine Position verpasst.

Diese Option ist vor allem relevant wenn es darum geht, die Seiten für Mobilgeräte zu optimieren. In der Tablet- oder Smartphone-Ansicht möchtest du vielleicht Widgets in einer anderen Reihenfolge anzeigen als am Desktop.

Ein Beispiel dafür findest du im Video für das Praxisbeispiel, zu dem wir gleich kommen!

Size

Unter Size kannst du die Größe eines Widgets einstellen, und zwar im Verhältnis zu den anderen Widgets innerhalb des Containers.

Wenn ich beim grünen Kreis z.B. Grow auswähle, dehnt sich das Widget über den restlichen „freien Raum“ im Container aus:

Diese Einstellung funktioniert nur, wenn du dem Widget vorher keine fest definierte Breite gegeben hast!

Container anklickbar machen

Du hast die Möglichkeit, den Flexbox Container anklickbar zu machen – etwas, das mit Abschnitten und Spalten vorher nicht ging!

Glücklicherweise ist das ganze auch denkbar einfach. In den Container-Einstellungen unter Layout > Zusätzliche Optionen findest du den HTML-Tag. Hier wählst du a (link) aus:

Dann öffnet sich das Feld, in das du die gewünschte URL einfügen kannst. Und das war’s schon!

Wichtig zu beachten: Wenn du dem Container einen Link verpasst, sind alle Elemente, die sich darin befinden, ebenfalls verlinkt. Du kannst hier also keine eigenen Links einfügen – sonst funktioniert’s nicht.

Praxisbeispiel: Header mit dem Container erstellen

Das Beispiel mit den Icons war jetzt natürlich sehr abstrakt, damit du generell erstmal eine Vorstellung hast, was mit dem Container möglich ist im Vergleich zu Abschnitten und Spalten.

Um es etwas praktischer zu machen, kannst du dir im Video anschauen, wie ich einen Header mit dem Container erstelle! Hier kommen sowohl die Einstellungen für den gesamten Container als auch für die einzelnen Widgets zum Einsatz.

Um deinen Header mit Elementor zu erstellen, benötigst du den Theme Builder, der in Elementor Pro enthalten ist.

Jetzt schon umsteigen – oder später?

Das ist also der neue Container – und wie anfangs erwähnt, befindet sich das ganze mit der Version 3.8 von Elementor noch im Beta-Status. Stellt sich die Frage: Sollte man jetzt schon umsteigen?

Mittlerweile ist der Container so stabil, dass er auf ganz neuen Websites, wo Elementor zum ersten Mal installiert wird, standardmäßig aktiviert sein sollte. Wer jetzt anfängt mit Elementor zu arbeiten, sollte also definitiv direkt damit loslegen und sich gar nicht erst an Abschnitte und Spalten gewöhnen!

Ansonsten kann ich dir nur empfehlen, dich erstmal auf einer eigenen Testseite mit dem Container vertraut zu machen. Meiner Erfahrung nach braucht es hier nämlich definitiv etwas Einarbeitungszeit!

Ich selber nutze dafür eine Subdomain, auf der ich WordPress installiert habe. Das läuft komplett separat von der bestehenden Website. Hier kannst du erstmal testen und ausprobieren, ganz ohne Risiko!

Wenn du dann mit dem Container vertraut bist, kannst du auch deine tatsächliche Website umstellen.

Technisch scheint hier alles wirklich sehr stabil zu laufen. Wann du umsteigen solltest, hängt also meiner Meinung nach vor allem davon ab, wie sicher du selber dich mit dem Container schon fühlst!

FAQ zum Elementor Container

Hier nochmal für dich auf einen Blick kurz und knapp die wichtigsten Fragen und Antworten rund um den neuen Container: