Elementor Container

Elementor Container

beta

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 gelesen:

Inhalt

  • Die Arbeit mit Containern ist noch experimentell – setze noch keine Container auf kritischen Webseiten ein.
  • Rückwärtskompatibilität – bestehende Abschnitte, Spalten und Innere Abschnitte können weiter bearbeitet werden. 
  • 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. 

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

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.

Der Abschnitt - neue Struktur

Elementor Abschnitt mit Containern
Wer jetzt einen neuen Abschnitt anlegt bekommt einen oder mehrere Container anstatt einer Anzahl von Spalten wie bisher.

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.

Der einfache Container

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.

Container Row
Der Container hat hier eine Petrol-Farbene Umrandung. Darin sind 3 Bilder in einer Reihe ausgerichtet.

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:

Richtung

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

Ausrichtung (Align Items)

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:

Verteilung (Justify Content)

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. 

Elementor Troubleshooting
Elementor Nachhilfe
Noch Fragen? Harry Martin hilft dir weiter. Auch einzelne Nachhilfestunden.
Nachhilfe

Abstände

Abstände zum Rand und der Widgets

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. 

Elementor Container Padding
Um den Abstand innerhalb eines Containers zum Rand einzustellen muß man das Padding (=Innenabstand) ändern.

Abstände einzelner Inhalte (Flex Items)

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.

 

New Elementor Advanced Options for Container Alignment
Zwei neue Optionen sind nun für jedes Widget unter Erweitert zu finden: 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.

Align Self Example 1
In dem Beispiel wurden 4 Elemente im Container untergebracht, 3 bunte Rechtecke und an der 2. Stelle eine Illustration eines Megafones.

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.

Self Align Flex End
Align Self Flex End führt dazu, dass nur diese eine Grafik unten im Container ausgerichtet wird.

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.

Align Self Order changed
Zusätzlich kann man nun auch die Position des einzelnen Elements innerhalb des Containers ändern. Hier wurde es an das Ende des Containers verschoben.

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.

Verschachtelte Container

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:

Verschachtelte Container 1
Solche Konstruktionen werden von aussen nach innen aufgebaut, der äusserste Container wurde als Reihe definiert.

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.

 

2 Container Übereinander
Ein schwarzer und ein weisser Container wurden innerhalb des blauen Containers untergebracht. Dieser hat als Richtung Column. Daher erscheinen die beiden Container untereinander.

Fazit

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.