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

Mit der Version 3.8 hat Elementor eine sehr große Änderung eingeführt: Die bisherigen Abschnitten und Spalten werden durch den Flexbox Container ersetzt! Mittlerweile ist der Container standardmäßig auf neuen Websites bereits aktiviert.

Das ganze ist also 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 und ich kann dir das auch nur empfehlen, denn wenn du erstmal reingefunden hast, ist die Arbeit in Elementor damit deutlich leichter.

In diesem Artikel findest du alles, was du zum Flexbox Container wissen musst – inkl. Video-Tutorials 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 flexible Layouts, während du gleichzeitig möglichst wenig 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 > Eigenschaften 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 an sich wurde 1:1 übernommen. Allerdings ist die Umsetzung nicht immer optimal – teilweise werden mehr Container genutzt als nötig.

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 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 Schluss. Stattdessen gibt es nur noch den Container, 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.

Lücken: Legt fest, wie viel Abstand zwischen den einzelnen Elementen ist. Standardmäßig sind es 20px sowohl in der Spalte als auch in der Zeile, du kannst den Abstand z.B. auch in Prozent angeben und unterschiedliche Werte für Zeilen und Spalten 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: 300px
• 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!

Größe

Unter Größe kannst du logischerweise 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.

Weitere Möglichkeiten durch den Einsatz des Flexbox Containers

Sobald du dich entscheidest, den Container zu verwenden, erhältst du über das Element selbst hinaus noch weitere neue Möglichkeiten für die Gestaltung deiner Website. Die schauen wir uns jetzt an.

Nested Elements: Tabs, Akkordeons etc. flexibler gestalten

Sobald du unter Elementor > Einstellungen > Eigenschaften die sog. "Nested Elements" aktiviert hast, werden einige bestehende Widgets etwas anders aussehen als bisher. Dazu gehören z.B. das Tabs- und das Akkordeon-Widgets, die du dadurch wesentlich flexibler erstellen kannst.

Ohne den Container war es nämlich nur möglich, diese Widgets mit Text inhaltlich zu gestalten. In jeden Tab konnte also individueller Text:

Durch die Einführung des Containers sieht das anders aus. Jetzt ist in jedem Tab quasi ein eigener Container eingefügt, den du mit jedem beliebigen Elementor-Widget füllen kannst. Du kannst jetzt also auch Bilder, Buttons, Icons, Preise, ... was auch immer dort einfügen. 

In Zukunft werden sicher noch weitere Widgets entsprechend umgewandelt!

Ein Mega Menü für deine Website erstellen

Ein Mega Menü – also ein sehr "großes", visuelles Menü, wie du es z.B. von Onlineshops kennst – konnte man bei Elementor lange Zeit nur mithilfe von Drittanbieter-Plugins wie Ultimate Addons gestalten. Das hat sich durch den Container endlich geändert.

Jetzt gibt es nämlich ein neues Menü-Widget, das das Menü nicht mehr aus den WordPress-Einstellungen zieht. So war es bisher im "Navigationsmenü"-Widget der Fall (das mittlerweile WordPress Menu heißt).

Stattdessen kannst du dein Menü jetzt direkt im Elementor-Editor erstellen und hast eben auch die Möglichkeit, ein Mega Menü draus zu machen. Der Dropdown-Teil des Menüs ist auch hier ein Container, den du mit jedem beliebigen Widget füllen kannst:

Beiträge, Produkte & Co. flexibel ausspielen – mit dem Loop Builder

Elementor Pro hat es dir schon immer ermöglicht, mithilfe des Beiträge-Widgets bspw. die Blog-Seite selber zu erstellen (anstatt dich hier auf die Layout-Vorgaben deines Themes zu verlassen).

Allerdings war das Beiträge-Widget in seinen Einstellungsmöglichkeiten doch relativ eingeschränkt.

Das hat sich durch die Einführung des Loop Builders, der ebenfalls auf dem Flexbox Container basiert, geändert. Jetzt kannst du zu 100% selber entscheiden, wie ein Beitrag angezeigt werden soll, und beispielsweise auch Layouts wie dieses hier umsetzen:

Den Loop Builder kannst du aber nicht nur für Beiträge nutzen, sondern z.B. auch für die Produkte in deinem WooCommerce-Shop. Wie der Builder genau funktioniert, zeig ich dir im Video.

Jetzt umsteigen – oder später?

Das ist also der neue Container – und wie anfangs erwähnt, befindet sich das ganze mittlerweile nicht mehr im Beta-Status.

Mittlerweile ist der Container also 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!

Falls du noch nicht umgestiegen bist, kann ich dir nach wie vor 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.

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: