Elementor Container: Der ultimative Guide

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.

Hol dir 39 gratis Elementor Templates für deine Website!

Meld dich jetzt für den Toolkiste Newsletter an – du erhältst ca. 2 bis 3 Mal im Monat eine E-Mail mit allen neuen Tutorials, exklusiven Rabattcodes sowie Updates rund um Elementor und weitere Tools.


Als Dankeschön für deine Anmeldung erhältst du 39 Template-Blöcke für Elementor direkt nach der Anmeldung zugeschickt!

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.

Reihe – horizontal: Die Widgets werden alle in einer horizontalen Reihe angezeigt, von links nach rechts.

Row – reversed: Die Widgets werden ebenfalls in einer horizontalen Reihe angezeigt, aber von rechts nach links in der umgekehrten Reihenfolge.

Column – vertical: Die Widgets werden in einer vertikalen Reihe angezeigt, von oben nach unten.

Column – reversed: Die Widgets werden ebenfalls in einer vertikalen Reihe angezeigt, aber von unten nach oben in der umgekehrten Reihenfolge.

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.

No Wrap: Das Widget, das aufgrund des Abstands nicht mehr in den Container „reinpasst“, wird außerhalb angezeigt, damit der Abstand von 230px eingehalten werden kann.

Wrap: Wenn Wrap aktiviert ist, wird das Widget in einer zweiten Zeile angezeigt. Der Abstand zur oberen Zeile ist so groß, wie der Abstand zwischen den anderen Widgets auch (im Beispiel also 150px).

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:

Was genau ist der Elementor Container?

Der Flexbox Container ist der neue Weg, um deine Layouts in Elementor zu erstellen. Die bisherigen Abschnitte und Spalten werden durch den Container ersetzt.

Wenn du den Container aktivierst, ändert das nichts an deinen bisherigen Seiten & Co. Die Abschnitte und Spalten dort bleiben so bestehen, wie sie gerade sind! Neue Inhalte kannst du dann allerdings nur noch mit dem Container erstellen.

Wofür ist der neue Container gut?

Der Container soll vor allem dafür sorgen, dass die Performance (d.h. die Ladezeit) deiner Website verbessert wird. Wofür du vorher einen Abschnitt und zwei Spalten brauchtest, brauchst du jetzt nur noch einen Container – dementsprechend gibt es weniger Elemente, die geladen werden müssen.

Generell bietet der Container dir wesentlich mehr Flexibilität bei der Erstellung deiner Layouts!

Kann ich weiterhin mit Abschnitten und Spalten arbeiten und den Container nur mal ausprobieren?

So halb. Wenn du den Container aktivierst, bleiben bestehende Abschnitte und Spalten genau so bestehen, wie sie sind und du kannst sie entsprechend weiterhin bearbeiten und anpassen.

Neue Inhalte kannst du dann aber nur noch mit dem Container erstellen. Diese Inhalte gehen verloren, wenn du den Container dann wieder deaktivierst! Du solltest dir also gut überlegen, ob du schon umsteigen möchtest.

Wenn du den Container nur mal ausprobieren und dich daran gewöhnen möchtest, empfehle ich dir, das ganze z.B. auf einer Subdomain zu testen und zu üben.

>
<span id=

Hi, ich bin Lea! 2017 habe ich mein erstes Online-Projekt Punktkariert an den Start gebracht und neben meiner Liebe für's Schreiben vor allem auch meine Liebe für Tools entdeckt.

Ja, es klingt komisch... aber ich könnte mich stundenlang darin verlieren, neue Tools zu entdecken. (Könnte? Okay, es passiert regelmäßig. #nerd)

Die eigene Website, das Marketing drumherum, Produkte online erstellen und verkaufen - all das ist einfacher mit den richtigen Tools. Und genau diese Tools lernst du hier kennen!

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Scroll to Top
WordPress Cookie Hinweis von Real Cookie Banner