Suche
Suche
Close this search box.
Elementor Container verstehen

Elementor Container

tl;dr: Der Container ist das grundlegende Strukturelement im Elementor, das immer zum Einsatz kommt. Kein Widget kann nicht in einem Container stecken. Dieses Konzept erlaubt vielfältige Layouts, das Verschachteln von Containern bringt eine nahezu unendliche Flexibilität. Ein Container ist immer ein Layoutelement, kann aber auch gut als Designelement genutzt werden.

  • Rückwärtskompatibilität – Seiten die mit Abschnitten, Spalten und Innere Abschnitte können weiter bearbeitet werden, neue Seiten sollten nur mehr mit Containern erstellt werden. Mehr über die veraltetet Abschnitte hier: Elementor mit Abstand ausgerichtet
  • Es gibt eine Funktion „Convert to Container“ um einzelne Abschnitte zu Containern umzuwandeln. Wir gut das funktioniert hängt stark vom Design ab. Diese Funktion kopiert den Abschnitt und setzt ihn als Container unterhalb neu ein. 
  • Grid kann als Experiment (beta, Status 1/2024) aktiviert werden unter
Dashboard > Elementor > Einstellungen > Eigenschaften | Grid Container

Flexbox?! Was ist das und warum interessiert mich das?

Die Idee der Flexbox (Das ist der CSS-technische Hintergrund) entstand aus dem Bedarf des responsive Designs. Es geht darum, in welcher Weise Dinge (also Widgets, Elemente) in einem bestimmten Bereich (dem Container) angeordnet werden und welche Abstände sie zu- und voneinander haben.

Flexbox – und damit auch das neue Widget Container –  ist eindimensional (während CSS Grid zweidimensional ist). Das bedeutet, dass man entweder eine Zeile (Row) oder eine Spalte (Column) definiert. 

Container können ineinander verschachtelt werden, die gestalterischen Möglichkeiten sind also größer als beim Konzept des Inneren Abschnittes.

Wähle deine Struktur

Elementor Flexbox oder Grid
Bei aktiviertem Grid muss man beim Anlegen zwischen einem Flexbox oder Grid Conatiner wählen
Elementor Flexbox Strukturen
Die Vorauswahl an Strukturen deckt 90% aller Anwendungen ab. Änderungen sind jederzeit möglich.

Der einfache Container

Beim Anlegen eines Containers (werden die Möglichkeiten sichtbar: Je nachdem, welche Auswahl man getroffen hat, bekommt man eine mehrspaltige oder verschachtelte Containerstruktur angelegt. Jeder Dieser Container kann einzeln verändert und gestaltet werden. 

Schauen wir uns die Möglichkeiten des einzelnen Containers an. Im Beispiel wurden 3 Bilder in verschiedenen Größen mittels Bild-Widget in Originalgrößen platziert. Wenn man in der Arbeitsfläche auf das + klickt bekommt man die Auswahlmöglichkeiten, wenn man einfach ein Widget in den strichliert umrandeten Bereich zieht wird automatisch ein Container erstellt.

Elementor Container default
In diesem Container (weisser Hintergrund) wurden 3 Bilder platziert. In der Standardeinstellung werden diese horizontal zentriert und vertikal angeordnet.

Container

Container Layout: hier kann zwischen Flexbox und Grid gewechselt werden, was große Auswirkungen auf die Anordnung der Elemente im Container hat. Beginnen wir mit dem Flexbox Container.

Inhaltsbreite: Boxed oder volle Breite sorgen dafür, dass die Inhalte entweder die in den Einstellungen getroffene Inhaltsbreite verwenden oder über die ganze Fensterbreite angezeigt werden.

Breite (Width):  die Breite des Containers. Auch wenn zuvor volle Breite gewählt wurde kann hier keine Einstellung (entspricht 100%) oder eben ein Wert eingetragen werden. Hat man Boxed gewählt kann hier der in den Einstellungen vorhandene Wert überschrieben werden, also die Breite nur für diesen einen Container geändert werden. 

Minimale Höhe (Min Height):hier kann die Mindesthöhe angegeben werden. Grundsätzlich (weil HTML) wirkt der Wert nur, wenn die Inhalte im Container niedriger sind als dieser Wert. 

Elemente

Richtung (Direction): gibt an, wie die darin befindlichen Elemente angeordnet werden. Vorgabe, Reihe (von links nach rechts), Spalte (von oben nach unten), Umgekehrte Reihe (von rechts nach links) und Umgekehrte Spalte (von unten nach oben) stehen zur Auswahl.

Verteilung (Justify Content): gibt an wie die Elemente innerhalb des Containers ausgerichtet werden. Man kann keine Angabe machen oder auswählen: Beginn, Zentriert, Ende, Zwischenraum, Abstand im Umkreis und gleichmäßiger Abstand.

Ausrichtung (Align): Die Elemente können am Beginn, Zentriert, Ende oder Dehnen verteilt werden. Letze Option wirkst sich zB. dann aus, wenn durch Setzen dieser Option zB. das Textwidget oder Überschriften auf volle Höhe/Breite gedehnt werden statt nur die Höhe zu bekommen die aus dem Inhalt entsteht. 

Lücken. Diese (auch responsive) zu verändernde Einstellungsmöglichkeit erlaubt das Verändern des in den Einstellungen gesetzten Standard-Widget-Abstands. und zwar getrennt für Spalten und Reihen. 

Umbruch (Wrap): hier kann man festlegen, ob einzelnen Widgets hintereinander ähnlich wie Text umbrechen soll oder ob kein Umbruch erfolgen soll. 

Zusätzliche Optionen

Dort  sind noch folgende Optionen zu finden:

Overflow: soll im Falle eines überlaufenden Inhalt das Elemente gestreckt werden (default) oder der überlaufende Inhalt versteckt (hidden).

HTML-Tag: ein Tag kann gewählt werden, voreingestellt ist DIV.

Elementor Container Einstellungen
Bei aktiviertem Grid sehen so die Container Layout Einstellungen aus

Richtung

Die erste und wichtigste Einstellung ist die Direction (Richtung), in der die Inhalte eines Containers angeordnet werden können. 

Verteilung (Justify Content)

Das Beispiel zeigt die 6 Möglichkeiten der Verteilung innerhalb einer Reihe, wobei kein Alignment ausgewählt wurde, die Elemente also an der Oberkante ausgerichtet werden (=default). Während die erst 3 Optionen Beginn, Zentriert und Ende einfach zu verstehen sind muss man die folgenden 3 ein wenig durchdenken:

Zwischenraum bedeutet, dass (im Falle der Richtung Reihe) das erste Element Links im Container und das letzte Rechts im Container angeordnet wird. 

Abstand im Umkreis bedeutet, dass um jedes Element ein gleichmässiger Abstand gehalten wird. Dadurch wird der tatsächliche Abstand zwischen den Elementen doppelt so breit wie der Abstand links vom ersten bzw rechts vom letzten Element.

Gleichmäßiger Abstand führt dazu dass zwischen dem Rand des Containers und dem ersten Element links, den einzelnen Elementen und zischen dem letzen Element em Ende und de rechten Rand des Containers der selbe Abstand erstellt wird.

Das ganze funktioniert natürlich nur, wenn die Summe aller Breiten oder Höhen der Elemente innerhalb eines Conainers kleiner als die Dimension (Breite oder Höhe) des Containers ist. 

Und da man vier verschiedene Richtungen einstellen kann gibt es neben dem Beispiel oben 3 weitere Anordnungen analog dazu, die hier nicht gezeigt werden. (also 4 x 6 = 24 Möglichkeiten)

Ausrichtung (Align Items)

Innerhalb eines Containers kann man die Elemente nun an Achsen Ausrichten. Im Beispiel der Reihe bedeutet das: Beginn, die Elemente werden oben ausgerichtet. Zentriert führt zu einer Ausrichtung einer Vertikalen Mittelachse, Ende richtet die Elemente unten aus.

Dehnen wiederum führt dazu, dass – soferne das Widget das zuläßt, deswegen habe ich im Beispiel eine Überschrift auf schwarzen Hintergrund eingesetzt – das Element auf die volle Dimension (in dem Fall die Höhe) gestreckt wird. 

Zu den bereits beschriebenen 24 Möglichkeiten kommen also noch 4 weitere, 24 x 4 = 96 Möglichkeiten. Jetzt ist. klar, warum dieses Modell Flexbox genannt wurde. 

Abstände

Zwischen den Widgets

Um nun den Abstand der Widgets zueinander zu definieren hat Elementor die Option Lücken eingeführt. (Der unglückliche Begriff deutet auf einen Maschinenübersetzung). Diese können für Reihen und Spalten getrennt gesetzt werden. Der voreingestellte Wert 20 stammt aus den Website Einstellungen, wenn man also keinen Wert setzt wird dieser Wert wieder verwendet. 

Zum Rand des Containers

Der Abstand zum Rand des Containers ist davon nicht betroffen. Um diesen zu verändern muß man bei aktivierte, Container bei

...Container > Erweitert > Layout > Padding

eine Einstellung vornehmen. 

Elementor Container Padding
Um den Abstand zum Rand des Containers einzustellen wird der Innenabstand unter > Erweitert verändert.

Im Container manipulieren

Was aber, wenn das alles nicht ausreicht? Besonders wenn man Container ineinander verschachtelt (zB um mehrspaltige Layouts zu erstellen) kann es notwendig sein, einzelne Inhalte in eine, Container (das können eben wieder Container sein oder auch einzelne Widgets) zu manipulieren. 

Diese Einstellungen macht man hier:

…Widget > Erweitert | Layout (2ter Abschnitt) 

Align Self. Damit kann man die Ausrichtung des einzelnen Elementes gegenüber der Ausrichtung aller anderen Elemente im Container verändern. Das Beispiel zeigt ein Icon, das im Unterschied zu den Bildern (die oben bündig sind) unten (also Ende) ausgerichtet wurde.

Elementor Align self
Ein einzelnes Element wird im Unterschied zu den anderen am Ende ausgerichtet

Order. Im HTML werden die Elemente in der Ladereihenfolge angezeigt. Im Elementor kann man diese Ladereihenfolge, die ja dann zur Anzeige kommt, auch im Navigator überprüfen (Zuvor geladenes ist weiter oben). Mit der Funktion kann man nun die Anzeige eines Elementes innerhalb eines Containers unabhängig von der Ladereihung (und also auch der Position des Quellcodes) ändern. Und zwar an den Anfang, das Ende oder auch Individuell, was die Eingabe einer Ordnungszahl bedeutet.

Elementor ORder
Das einzelne Element wird innerhalb des Containers umgereiht

Größe (Size). Manchmal will man die Größe eines Elementes so ändern, dass es einfach „den Rest des Platzes“ einnimmt. Genau das bewirkt die Einstellung Grow (auch grow to fit genannt). Shrink wiederrum macht das Gegenteil, es miminiert die Größe auf das mögliche Minimum. Die Individuellen Einstellungen ermöglichen Flex Grow bzw. Flex Shrink. Ein Beispiel auch hier

Flex Size im Elementor Container
Mit der Größe (Size) Einstellung wurde hier die Breite des Raumes des Icons (rosa Rahmen) auf den Rest des zur Verfügung stehenden Platzes eingestellt.

Gestaltung eines Containers

Container dienen nicht nur im Layout sondern auch im Design der Gestaltung der Website. Im Stil Tab jedes Containers gibt es 4 Abschnitte.

  1. Hintergrund und Hintergrund Überlagerung. Dazu gibt es einen eigenen Blogbeitrag: Hintergund mit Elementor
  2. Rahmen. Können wie bei allen anderen Widgets auch gesetzt werden
  3. Trennline Form. Ist die Idee, um unteren/oberen Rand eines Containers eine SVG-Grafik einzusetzen. Beispiele dazu gibt es im Beitrag Bessere Footer mit Elementor.

Grid Container

Noch als Experiment aber schon in einem praxistauglichen Zustand ist die Option der Gridcontainer, die unter 

Dashboard > Elementor > Einstellungen > Experimente

aktiviert werden kann. Während der Flexboxcontainer sich als universelles Layouttool etabliert hat (man kann einfach nicht ohne) kann man beim Grid entscheiden, ob man es benötigt. Was ist nun ein Grid? Was ist der Unterschied zur Flexbox?

Während man Flexbox als Inhaltsbasiertes Werkzeug sehen kann ist das Grid ein Layoutbasiertes Werkzeug. Beide Tools sind mächtig, Grid bieten mehr Möglichkeiten Zeilen und Spalten zu manipulieren. Flexboxen sind eindimensional (Reihe oder Spalte), Grids sind Zweidiemensional (Reihen und Spalte).  

In einem Grid werden alle Zellen gleich hoch/breit, auch wenn der Inhalt das nicht unbedingt erfordert. Grids werden immer von Anfang an gefüllt, während man bei Flexboxen in jeder Zelle etwas platzieren kann. Sind mehr Inhalte als definierte Gridzellen da wird das Layout entsprechend der Griddefinition verändert.

Die beste Nachricht ist aber: diese beiden Systeme sind kombinierbar. Man kann also einen Gridcontainer als Teil eines FlexboxConainers einsetzen und umgekehrt. 

Einschränkung: CSS als Auszeichnungsprache ist mächtig, mit Elementor kann man ohne diese Sprache zu beherrschen Grids anwenden. Allerdings eben nur so weit, wie es Elementor durch Optionen und Schalter ermöglicht. Oder aber: CSS kann noch deutlich mehr, als über Elementor eingestellt werden kann.

Elementor Grid Struktur
Wählt man Grid beim hinzufügen eines Containers kann man aus regelmäßigen Strukturen wählen, die nachträglich leicht angepasst werden können

Während die Einstellungen unter Container ident mit denen des Flexbox-Container sind (siehe oben) ist unter Elemente alles anders.

Grid Outline ist ein Hilfstool dass im Editor Hilfslinen enblendet, damit man sich seine Einstellungen besser vorstellen kann, auch wenn keine Inhalte eingepflegt wurden. 

Spalten und Zeilen wiederum (responsive einstellbar) legt fest, wie viele davon erstellt werden sollen. Und  zwar mit der Einheit fr (fraction). Ein Wert 3 bedeutet hier, dass der zur Verfügung stehenen Platz in 3 gleiche Anteile zerlegt wird, also 3 Spalten entstehen. Detto bei den Zeilen. 

Alternativ lassen sich aber auch händisch andere Dinge Eintragen, dazu den Bleistift bei den Einheiten wählen. 

1fr 2fr 1fr 

als Beispiel führt dazu, dass die 3 Spalten 1:2:1 aufgeteilt werden. 

10% 2fr 1fr 150px

wäre ein etwas unorthodoxes Beispiel: die 4 Spalten (weil 4 Werte) werden so aufgeteilt, dass die erste 10% und die letzte 150 px breit ist während sich die beiden mittleren den Platz 2:1 Teilen.  Diese Kombinationsmöglichkeit kann besonders bei Tabellarischen Inhalten (also zb. Bilder, Icons und Texte in einer Zeile) auf einfache zu sehr guten Layouts führen. 

Auto Flow gibt an, ob Widgets in einer Reihe oder Spalte hinzugefügt werden , also ob das Grid horizontal oder vertikal läuft.

Die anderen Optionen sind ident mit dem Flexbox Container.

Elementor Grid Panel
Das Panel unterscheidet sich im Abschnitt > Elemente < von den Flexbox Containern
Grid Example
Im Grid ist jede Zelle gleich bei Defaulteinstellung gleich groß. Ausserdem wird es von Vorne nach Hinten ausgefüllt, es gibt also nur eine Einfügemarke auch wenn mehrere Felder angezeigt werden.

Das Beispiel zeigt die wesentlichen Unterschiede zur Flexbox: die Zellen sind gleich groß, und zwar horizontal und vertikal (2 dimensional). In dem Beispiel bestimmt das blaue Bild durch seine Höhe die Zellenhöhe aller Zellen, die Breite wird durch die Einstellung 3 fr festgelegt. 

Hat man nun mehr Widgets als in der Griddefinition festgelegt wurde platziert so wird die Logik des Grids fortgeführt, also ein dem Fall würde eine weitere Zeile angefügt werden.

Grids eignen sich also hervorragend zur automatisierten Ausgabe großer Datenmengen.

FAQ & Fazit

Im Elementor sind Container eine (rechteckige) Struktur, innerhalb dieser werden die einzelnen Widgets angeordnet. Container können verschachtelt werden. Technisch betrachtet sind Elementor Container die Anwendung von CSS Flexbos.

Während Flexbox Container Inhaltsbasiert arbeiten und eindimensional wirken (Reihe oder Spalte) sind Grids Layout basierte, zweidimensionale Strukturen. Beide Techniken haben viele gemeinsame Fähigkeiten.  Es gibt keine bessere oder schlechtere Lösung sondern Anwendungen, die für das eine oder das andere besser geeignet sind.

Ja. Container können ein Element innerhalb eines anderen Containers sein. Ganz unabhängig davon, ob es ein Flexbox Container oder ein Grid Container ist. 

Ja, die beiden Container lassen sich ineinander umwandeln, allerdings gehen dadurch die für die jeweigen Arten typischen Gestaltungsmerkmale verloren, der Inhalt bleibt erhalten.

Abschnitte benötigen mindestens eine Spalte, in der die Elemente platziert werden. Man hat also immer drei hierarchische Ebenen: Abschnitt > Spalte > Widget.  Ein Container hat keine Spalten, dafür kann man Container (beliebig) verschachteln. Also Container > Widget. Container haben dadurch deutlich mehr Gestaltungsmöglichkeiten und benötigen weniger Code als Abschnitte.

Jain. Wenn man Container aktiviert hat bestehen Abschnitte weiter, können jedoch nicht mehr angelegt werden. Sie können also gleichzeitig auf einer Seite vorkommen und auch weiterhin bearbeitet werden. Man kann jedoch nicht auswählen, entweder einen Abschnitt oder einen Container anzulegen.

Ja. Man kann jeden Abschnitt mittels Knopfdruck in einen Container verwandeln. Elementor legt dazu eine  Kopie des Abschnittes an den man ggf. korrigieren kann/muß.  Danach muß man das (Abschnitt)Original löschen. 

Ja. Jedoch sollte man überlegen ob es nicht besser ist, eine  möglichst einheitliche Technik zu verwenden. Eventuell ist es sinnvoller, alte Templates in Container umzuwandeln und erst danach einzusetzen.

Fazit

Container haben Abschnitte innerhalb von Elementor nach zwei Jahren vollständig als Layout Struktur abgelöst. Die große Flexibilität und der modere Code ermöglichen bestes responsive Design umzusetzen. Die neuen Grid-Container erweitern die Möglichkeiten noch um eine wertvolles Tool auch für große Datenmengen. Container entsprechen in etwa den Gruppen im Block-Editor, sind aber deutlich besser anzupassen. 

Veröffentlich am: 13. Dezember 2021
Letztes Update: 14. Januar 2024