tl;dr: Elementor goes Flexbox. Ab V 3.6 von Elementor kann unter
Dashboard > Elementor> Experiments > Flexbox Container
das Konzept der CSS Flexbox ausprobiert werden. Elementor ersetzt die Struktur Abschnitt/Spalte und Innerer Abschnitt/Spalte durch das neue Widget Container. Jeder neu angelegte Sektion hat nun einen Container als erstes Layout-Element. Egal ob freie oder Pro-Version von Elementor und welches Theme: das hat massive Auswirkungen auf die Arbeitsweise
Bisher hat die Ausrichtung von Elementen nach der klassischen Methode funktioniert: jeder Abschnitt hat mind. 1 Spalte. Damit konnte man links und rechts, oben und unten positionieren. Wenn es komplexer wurde gab es den Inneren Abschnitt, um einzelne Spalten in weitere Spalten unterteilen zu können. Mehr darüber in Elementor mit Abstand ausgerichtet.
Die Idee der Flexbox 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.
Schon beim Anlegen eines Abschnittes werden die neuen Möglichkeiten sichtbar. Anstatt nur die Anzahl von Spalten zu wählen können nun auch komplexere Strukturen vorausgewählt werden. Je nachdem, welche Auswahl man getroffen hat, bekommt man eine verschachtelte Containerstruktur angelegt. Jeder Dieser Container kann einzeln verändert und gestaltet werden. Es wird also komplexer – und auf den ersten Blick ein wenig komplizierter.
Schauen wir uns die Möglichkeiten des einzelnen Containers an. (Die Screenshots stammen aus einer Beta-Version 3.6 von Elementor, daher sind ist das Panel grau und die Beschriftungen sind in englisch. Von mir übersetzte Begriffe werden in der Live-Version anders lauten). Im Beispiel wurden 3 Bilder in verschiedenen Größen mittlels Bild-Widget in Originalgrößen platziert.
Folgende Einstellungen können getroffen werden:
Breite (Width): Responsive und in den Einheiten PX, % und VW kann die horizontale Ausdehnung des Containers angegeben werden. Wird keine Einstellung getroffen wird die in den Einstellungen getroffene Inhaltsbreite verwendet.
Minimale Höhe (Min Height): in PX und VH kann die Mindesthöhe angegeben werden. Die Option An Bildschirm anpassen gibt es nicht mehr, statt dessen kann man ja (wie bisher) 100 VH angeben.
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.
Ausrichtung (Align Items): gibt an wie die Elemente innerhalb des Containers ausgerichtet werden. Man kann keine Angabe machen oder auswählen: Flex Start (oben oder links), Center (je ob Reihe oder Spalte horizontal oder vertikal zentriert), Flex End (rechts oder unten) oder Stretch (ausgerichtet über die volle Breite oder Höhe).
Verteilung (Justify Content): Analog zur Ausrichtung kann hier Flex Start, Center und Flex End verteilt werden. Je nachdem ob man eine Reihe (horizontale Richtung) oder Spalte (vertikale Richtung) gewählt hat bedeutet das eben links oder oben, horizontal oder vertikal zentriert und rechts oder unten. Dazu kommen noch die 3 Verteilungsvarianten: Zwischenraum (Space Between), Abstand im Umkreis (Space Around) und Gleichmässiger Abstand (Space Evenly). Bei diesen 3 Varianten wird der freie Platz zwischen den Elementen eben wie benannt verteilt.
Abstand (Spacing): hier wird der Widgetabstand der Elemente zueinander eingestellt. beim Abstand 0 stossen diese direkt aneinander. Mögliche Einheiten sind PX, % und VW.
Umbruch (Wrap): hier kann man festlegen, ob einzelnen Widgets hintereinander ähnlich wie Text umbrechen soll oder ob kein Umbruch erfolgen soll.
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.
Schauen wir uns diese Einstellungen nun im Detail genauer an:
Die erste und wichtigste Einstellung ist die Direction (Richtung), in der die Inhalte eines Containers angeordnet werden können.
Innerhalb eines Containers kann man nun am Start, in der Mitte und vom Ende her die Elemente anordnen. Das sieht dann bei einer Reihe (Zeile, Row) wie folgt aus:
Die selben Anordnungen bei der Verteilung wirken sich bei einer Column, also einer Anordnung untereinander wie folgt aus:
Zusätzlich zur Ausrichtung kann man die einzelnen Elemente innerhalb eines Containers nun verteilen. Das erste 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).
Eine Verteilung kann man auch einstellen, wenn man als Richtung eine Spalte gewählt hat. Diese wird aber nur sichtbar, wenn die Höhe des Containers höher als die Summe dessen Inhalte ist (Einstellung Minimale Höhe). Das ist übrigens auch bei der Breite so, nur da sorgt normalerweise die Voreinstellung dafür, dass die Inhaltsbreite größer als der darin platzierte Inhalt ist.
Wir haben also 4 mögliche Richtungen, darin können wir 4 verschiedene Ausrichtungen vornehmen (inkl. dehnen/stretch) und danach können wir 6 unterschiedliche Verteilungen vornehmen: 4 x 4 x 6 = 96 Möglichkeiten.
Jetzt wird klar, warum dieses Modell Flexbox genannt wurde.
Wirklich brauchbar wird das Ganze aber erst, wenn ich den Abstand der Widgets zu einander bestimmen kann. Dazu wurde der Parameter Abstand (Spacing) eingeführt den man in jedem einzelnen Container (responsive!) ändern kann. Die zwei Beispiele zeigen die Auswirkung, wenn man den Abstand bei Column auf 0 gesetzt hat bzw. bei einer Reihe auf 33 px.
Wichtig: 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 treffen.
Da man Container ineinander verschachteln kann muß auch ein Container – wie jedes Widget – die Möglichkeit bekommen, individuelle Einstellungen anzunehmen. Daher gibt es jetzt unter
… Widget > Erweitert > Layout
einen neuen Abschnitt mit den 2 Optionen Align Self und Order.
Der bisherige Bereich
...Widget > Erweitert > Positionierung
entfällt. Die dort untergebrachten Attribute werden jetzt unter
... Container/Widget > Erweitert > Layout
vorgenommen.
Schauen wir uns die neuen Optionen anhand eines einfachen Beispiels an.
Dieser Contaioner wurde mit der Richtung Reihe angelegt. Die vier Bilder darin laufen von links anch rechts und sind an der Oberkante ausgerichtet. Im Navigator rechts sieht man die Reihenfolge der 4 Bilder.
Wenn man nun beim zweiten Widget, dem Megafon, bei Align Self Flex End auswählt wird nur dieses eine Element am Ende des Containers (in dem Falle also unten) ausgerichtet während die anderen 3 Elemente oben ausgerichtet bleiben.
Wenn nun bei dem Megafon noch dazu die Order geändert wird und diese Grafik auf End gesetzt wird wandert das Megafon an die letzte Stelle der 4 Bilder, immer noch unten ausgerichtet.
Im Navigator bleibt es aber an der 2. Position stehen! Dh. die Ladereihenfolge und der HTML-Code wird nicht verändert sonder nur die Darstellung über das CSS.
Da wir so flexibel innerhalb eines einzelnen Containers sind benötigen wir deutlich weniger Code für die Gestaltung, die bisherige Einteilung in einzelne Spalten entfällt. Da man nun Container ineinander setzten kann besteht die Größe Herausforderung darin, den Überblick über die eigene Gestaltung zu behalten. Jede einzelne Option hat eine Auswirkung, auch wenn man diese unter Umständen nicht gleich sieht.
Eine Konstruktion wie am nächsten Beispiel, das 3 Inhaltsbereiche hat, wird mit 5 Containern umgesetzt:
Wichtig ist hier, dass von aussen nach innen gedacht wird. Unser erster Container (hier mit dem pastellgrünen Hintergund) wurde als Reihe definiert. In diesem Container wurden 2 weitere Container platziert: der Rote und der Blaue. Diese beiden bekamen die Richtung Column (Spalte) und eine Breite von 50%.
Schauen wir und nun den Blauen Container näher an: in diesem wurden 2 weitere Container untergebracht, und zwar der Schwarze und der Weisse.
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.
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.
Die Entwicklung vom Elementor Container schreitet voran. Seit Ende März gibt es auch eine brauchbare Dokumentation. Die praktische Umstellung von Webseiten würde ich noch nicht empfehlen, wer jetzt aber ein neues Projekt startet das nicht unbedingt sehr kritisch ist (zeit- und designtolerant also) kann damit arbeiten.
