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.
Dashboard > Elementor > Einstellungen > Eigenschaften | Grid Container
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.
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.
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.
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.
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.
Die erste und wichtigste Einstellung ist die Direction (Richtung), in der die Inhalte eines Containers angeordnet werden können.
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)
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.
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.
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.
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.
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.
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.
Container dienen nicht nur im Layout sondern auch im Design der Gestaltung der Website. Im Stil Tab jedes Containers gibt es 4 Abschnitte.
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.
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.
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.
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.
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.
