Hinweis: Noch sind die Elementor Container nicht standardmäßig in den Builder integriert. Sie müssen derzeit über Elementor > Einstellungen > Experiments > Flex Container aktiviert werden. Das Feature ist noch in der Alpha-Phase und sollte daher nicht auf Live-Seiten eingesetzt werden.
Mit der Version 3.6 von Elementor kamen auch die Elementor (Flexbox) Container. Diese basieren auf den schon länger genutzten Flexbox Containern und adaptieren die Möglichkeit, Elemente via CSS recht frei innerhalb eines Containers zu positionieren.
Elementor integriert alle Optionen zur Ausrichtung sehr intuitiv in den Builder und gibt dank selbsterklärender Icons nur wenig Grund zur Kritik. In diesem Artikel schauen wir uns genauer an, was das Update bringt, was sich am User Interface von Elementor verändert hat und welche neuen Möglichkeiten du dank der Elementor Container hast.
Abschnitte und Spalten fallen mit dem Elementor Flexbox Container-Update völlig weg. Darauf basierende Layouts werden allerdings beibehalten und du musst dir keine Gedanken machen, dass diese plötzlich anders aussehen oder nicht mehr funktionieren. Du hast außerdem die Möglichkeit, diese Abschnitte in Elementor Container umzuwandeln. Dafür gibt es nach dem Klick auf den Abschnitt im Elementor Builder nun einen Button mit der Bezeichnung Convert.
Ein Klick auf den Button dupliziert die Kombination aus Abschnitten und Spalten und wandelt sie in Container um. Hier und da produziert die automatische Konvertierung noch kleinere Ungereimtheiten. Im Großen und Ganzen funktioniert das Feature aber schon sehr gut. Es ist davon auszugehen, dass Elementor hier auch noch ordentlich nachliefert. Wie gesagt … Alpha-Phase.
Die Elementor Container sind übrigens Bestandteil der Free-Version von Elementor. Wenn du maximale Flexibilität, deutlich mehr Widgets und schon fertige Style-Kits haben möchtest, dann solltest du dir unbedingt Elementor Pro* anschauen, das es schon ab 49 $ pro Jahr gibt. Unserer Ansicht nach lohnt sich das Upgrade absolut, da du mit der Pro-Version zusätzlich alle notwendigen Theme-Komponenten, wie zum Beispiel den Header und Footer erstellen kannst und losgelöst von großen Multipurpose Themes bist.
Wozu die Umstellung gut ist
Wer schon länger mit Elementor arbeitet, dem ist wohl schon häufiger das Wort „Divception“ über den Weg gelaufen. Das bezeichnet die Problematik, die viele Page Builder mit sich bringen. Nämlich das Verschachteln von Divs im Quellcode. Das betraf auch Elementor nicht unwesentlich. Mit den Elementor Flexbox Containern besteht nun die Möglichkeit, diese Verschachtelung stark zu verschlanken und sogenannte DOM-Elemente einzusparen. Das bringt zwei große Vorteile mit sich.
Kürzere Ladezeiten gegenüber Abschnitten und Spalten
Ladezeiten sind nach wie vor ein großer Faktor im Webdesign. Schon in unserem Artikel WordPress schneller machen, sind wir darauf im Detail eingegangen. Ladezeiten, also die Zeit, die vergeht, bis eine Website nutzbar ist und alle Elemente zur Verfügung stehen, haben diverse Einflüsse. An erster Stelle steht natürlich die Nutzererfahrung. Denn wenn eine Seite lange zum Laden benötigt, sind Seitenbesucher:innen schnell abgeschreckt, was bis zu einem Absprung führen kann. Schnell ladende Seiten hingegen erhöhen die Zufriedenheit der Besucher:innen und können somit sogar die Conversion Rate pushen. Also die Wahrscheinlichkeit, mit der Käufe getätigt oder eine Kontaktaufnahme vollzogen wird.
Durch die Elementor Container müssen insgesamt weniger Elemente geladen werden, was zur Folge hat, dass der Browser die Seite schneller darstellen kann. Sie können also einen Einfluss auf den Erfolg und den Umsatz haben, der durch eine Website generiert wird. Ebenso haben die Ladezeiten Einfluss auf die Suchmaschinenoptimierung. Sie sind ein Faktor, den Google zur Bewertung einer Seite heranzieht und können dazu beitragen, dass eine Seite weiter oben in den Suchergebnissen ausgespielt wird.
Dank des Elementor Flexbox-Containers ein besseres HTML zu Text Verhältnis
Das DOM (Document Object Model) besteht aus diversen Elementen, die im Zusammenspiel den Quellcode der Webseite erzeugen. Braucht es nun sehr viele solcher Elemente, um nur wenig Inhalt bereitzustellen, dann kann sich das ebenfalls auf das Ranking auswirken. Denn für die Suchmaschine ist der Code qualitativ eher minderwertig. Das erschwert es den Crawlern, Inhalte zu erfassen und entsprechend einzusortieren, womit sich eine Seite oder ein Beitrag verfasst.
Die Elementor Flexbox Container reduzieren das Verhältnis von Code zu Text und erzeugen so eine für Suchmaschinen leichter zu indexierende Seitenstruktur. Das kann sich ebenfalls positiv auf die Positionierung in den Suchergebnissen auswirken.
Deutliche Vorteile in der Flexibilität
Ein kurzer Exkurs zum CSS-Flexbox-Modell.
Mit der Eigenschaft flex kann in CSS gesteuert werden, wie sich Elemente innerhalb einer Box. bzw. eines Flexbox Containers verhalten. Dazu ein kleines Codebeispiel:
<div class="wrapper">
<div class="element-01">
<p>Lorem ipsum dolor sit amet.</p>
</div
<div class="element-02">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>Als Standard werden Div-Elemente block positioniert. Sie sortieren sich daher immer untereinander an und nehmen in der Breite 100 % des zur Verfügung stehenden Platzes ein. Selbst wenn du die Breite eines Divs auf 50 % setzt, nimmt er zwar nur die Hälfte des Raums ein, das folgende Element wird allerdings dennoch darunter und nicht daneben positioniert. Du könntest jetzt mit einigen Zeilen CSS dafür sorgen, dass sich die Divs nebeneinander positionieren. Oder du nutzt für den Container, der die Divs umgibt einfach:
.wrapper {
display: flex;
}Das führt dazu, dass sich alle Elemente, die sich in diesem Wrapper befinden, nebeneinander positionieren. Und genau das ist es auch, dem sich die Elementor Container bedienen. Doch das ist lange nicht alles. Du kannst angeben, wie Elemente innerhalb eines Containers positioniert werden können und auch für jedes Element selbst bestimmen, wie bzw. wo es sich im Container platziert.
Das Builder Interface der Elementor Container
Als Erstes fällt auf, dass das Abschnitt-Widget in Elementor durch Container ersetzt wurde. Dieses findet sich nun an erster Stelle im Elementor Builder. Wie gewohnt kann es einfach in die Bearbeitungsfläche rechts gezogen werden.
Elemente innerhalb des Containers nebeneinander oder untereinander ausrichten
Der Aufbau der Bedienelemente unterscheidet sich etwas von dem, der vorher für die Abschnitte zur Verfügung stand. Dort lassen sich zunächst aber die gewohnten Einstellungen vornehmen, wenn sie auch etwas anders sortiert sind. Dazu gehören die Inhaltsbreite, die im Feld darunter noch einmal exakt vergeben werden kann. Die Mindesthöhe des Elementor Flexbox Containers, der Overflow und der HTML-Tag.
Darunter findet sich nun ein Tab mit dem Titel Elemente. In diesem steuerst du, wie Elemente innerhalb des Containers platziert werden. Im Standard ist Direction Column ausgewählt. Das sorgt dafür, dass Widgets innerhalb des Elementor Containers untereinander sortiert werden.
Ausrichtung – nebeneinander oder untereinander
Hier hast du nun die erste große Neuerung im Vergleich zu den Abschnitten und Spalten bislang. Wolltet ihr dort Widgets nebeneinander positionieren, musstet du entweder eine zweite Spalte erstellen oder die Breite des Widgets von Hand anpassen, damit zwei Elemente nebeneinander passen. Das ist nun mit nur einem Klick möglich. Stellst du im Elementor Container unter Elemente die Auswahl unter Direction auf Row um, dann stehen die Widgets automatisch nebeneinander und nehmen nur so viel Platz ein, wie sie eben benötigen.
Diese Einstellung kannst du auch in Elementor selbst für jeden Breakpoint verändern. Somit hast du die volle Kontrolle darüber, wann das Layout umbricht und die Inhalte untereinander dargestellt werden.
Ebenso kannst du mit den beiden anderen Pfeilsymbolen (Reversed Row und Reversed Column) die Reihenfolge der Widgets im Container ändern. Das ist besonders praktisch bei Layouts, die in der Desktop-Ansicht eine Reihe Bild und daneben Text und eine weitere Reihe Text und daneben Bild darstellen. Das Bild unten veranschaulicht das Beispiel. Damit entfällt auch die Notwendigkeit der Funktion des Spalten-Umkehrens, die sich bislang im Reiter Erweitert unter Responsiv befand.
Widgets vertikal ausrichten
Die Option darunter, Align Items, bietet dir die Möglichkeit festzulegen, wie bzw. wo die Widgets in deinem Elementor Flexbox Container auf der Y-Achse ausgerichtet werden. Hier kannst du zwischen oben, zentriert, unten und Stretch wählen. Wobei sich die Widgets bei der Auswahl von Stretch über die gesamte Höhe verteilen.
Inhalte horizontal positionieren
Die Option Justify Content bietet dir die gleichen Optionen auf der X-Achse. Hier gibt es eine allerdings noch weitere Optionen der Ausrichtung.
Dabei handelt es sich um die Optionen Space Between, Space Around und Space Evenly. Damit kannst du die Widgets in deinem Elementor Container horizontal verteilen.
- Space Between richtet die Elemente an der linken und rechten Außenlinie eures Containers aus
- Space Around richtet die Widgets so aus, dass sie nach links und rechts zu Außenlinie des Containers jeweils den gleichen Abstand haben
- Space Evenly führt zu einer Ausrichtung, bei der die Abstände zur Außenlinie als auch der Abstand zwischen den Widgets gleich ist.
Abstände von Elementen zueinander
Die Option Gap verhält sich ähnlich wie margin und regelt den Außenabstand der Widgets zueinander. Und zwar horizontal sowie vertikal.
Nach X Elementen die „Zeile“ umbrechen
Mit der Möglichkeit Wrap lassen sich Elemente innerhalb des Containers umbrechen. Vergibst du zum Beispiel unter Erweitert > Layout > Breite > Individuell eine prozentuale Breite des Elements, dann nimmt das Widget im Standard (No Wrap) diese Breite innerhalb der Reihe ein. Bei drei Elementen nebeneinander, die eine Breite von 50 %, 50 % und 100 % haben, ist das 100 % Breite Widget doppelt so weit wie seine beiden Vorgänger.
Stellst du die Option auf Wrap um, dann wird das Layout nach dem Element 02 umbrechen und eine neue Zeile beginnen. 01 und 02 nehmen dann die obere Reihe zu jeweils 50 % ein und 03 erstreckt sich in der neuen Reihe über die volle Breite.
Auf diese Weise lassen sich innerhalb nur eines Elementor Containers sehr vielfältige Layouts erstellen. Das spart viele der oben erwähnten DOM-Elemente ein und kann die Ladezeit drastisch reduzieren.
Der Unterschied zwischen Align Items und Align Content
Was auf den ersten Blick verwirren mag, ist eigentlich ganz einfach. Align Items richtet die Elemente selbst (rot) aus und Align Content deren Positionierung im Elementor Container (blau). Im folgenden Bild sind die Widgets also über Align Items > Center und Align Content > Flex End positioniert. Wichtig hierbei ist, dass die Kombination dieser beiden Eigenschaften nur dann eine Auswirkung hat, wenn der Elementor Container auf Wrap steht – also mehrere Reihen hat.
In der vertikalen Ausrichtung haben wir in diesem Fall also die Möglichkeit, die Widgets auf zwei horizontalen Achsen auszurichten. Du kannst also einmal wählen, wie die Widgets innerhalb einer Reihe ausgerichtet sind (Align Items), und einmal, wie alle im Container platzierten Widgets ausgerichtet werden (Align Content).
Das sind die Möglichkeiten, wie du bestimmen kannst, wie Elemente allgemein innerhalb eines Elementor Containers positioniert werden.
Einstellungen für einzelne Widgets innerhalb eines Elementor Containers
Im vorigen Teil haben wir uns angeschaut, wie du bestimmen kannst, welche Position alle in einem Elementor Container befindlichen Widgets positioniert werden können. Manchmal kann es allerdings notwendig sein, dass du ein Element aus dem Layout-Fluss nimmst und eine eigene Positionierung nur für dieses Widget bestimmst.
Für diesen Zweck hat jedes Widget im Elementor Editor unter Erweitert mehrere Optionen, die dir dabei helfen, es möglichst frei innerhalb des Layouts zu positionieren.
Margin und Padding werden dir schon ein Begriff sein. Die Breite eines Widgets ebenso. Allerdings ist die Möglichkeit, individuelle Breiten zu vergeben ebenfalls seit der Version 3.6 von Elementor nach oben gerutscht und nun direkt unter den Einstellungen für die Außen- und Innenabstände zu finden. Du musst sie also nicht mehr unter Positionierung einzeln heraussuchen.
Neu hingegen sind die Optionen Align Self, Order und Size. Alle drei sind Bestandteil der display: flex; Property, die jetzt in den Elementor Containern ihren Platz findet.
Align Self gibt dir die Möglichkeit, ein Widget auf der vertikalen Achse individuell zu positionieren. Du kannst es so aus dem Fluss nehmen, wenn zum Beispiel nur dieses Element innerhalb einer Reihe anders positioniert werden soll, als es die anderen sind. Positionierst du es zum Beispiel Flex Start, dann richtet es sich am oberen Ende von deinem Elementor Flexbox Container aus, auch wenn für diesen angegeben ist, dass die Elemente in einer Reihe zentriert angeordnet werden sollen (Align Items – Beispiel weiter oben). In unserem Bild unten haben wir das Element mit der 01 entsprechend positioniert.
Order gibt dir die Möglichkeit, die Reihenfolge der Elemente zu ändern. Das kannst du auf drei Arten für jedes Widget tun. Start, End oder Custom. Start sortiert die Widgets in der Reihenfolge, in der du sie angelegt hast. End dreht diese Reihenfolge um und bei Custom kannst du für jedes Element eine Nummer vergeben, nach der es im Frontend angezeigt wird. Bezogen auf unsere Beispielbilder könntest du der 01 die Order 3 geben, der 02 die Order 1 und der 03 die Order 2. Auf der Website werden sie dann als 02, 03, 01 angezeigt (wie auch im Bild unten).
Size bietet dir die Möglichkeit festzulegen, in welchem Verhältnis ein Element sein Größe verändert, wenn der Raum, in dem es sich befindet, größer oder kleiner wird. In der Standardeinstellung verteilen sich die Elemente im Elementor Container gleichmäßig in der Größe. Möchtest du, dass ein Widget breiter oder schmaler wird, wenn die Größe des Containers sich ändert, dann kannst du für das entsprechende Widget Grow oder Shrink wählen. Es wächst dann im Verhältnis zu den anderern Elemente entsprechend des Faktors der Zahl, die vergeben wird. Grow setzt den Standard auf 1, was dafür sorgt, dass das Element doppelt so stark wächst, wie die Widgets, die sich daneben im Elementor Container befinden. Setzt du bei drei Elementen einen eigenen Wert – zum Beispiel 1 – dann wird deren Größe gleichmäßig verteilt. Setzt du den Wert 2 auf das mittlere Element, dann wächst dieses um den Faktor 2. Es vergrößert sich also doppelt so stark, wie seine Nachbar-Elemente. Shrink folgt dem gleichen Prozedere, nur umgekehrt. Der Wert 2 besagt dabei allerdings nicht, dass das Element doppelt so groß ist. Er sorgt nur dafür, dass es doppelt so stark wächst. Wenn du zu dieser Eigenschaft mehr Informationen und Beispiele haben möchtest, dann schau doch mal bei Mediaevent vorbei. Dort wird detailliert auf die flex-shrink, -grow und -basis Eigenschaften eingegangen.
Unser Fazit
Mit der Version 3.6 hat sich massiv etwas getan im Elementor Mikrokosmos. Die Flexbox Container bringen deutlich mehr Flexibilität, als es die Abschnitte und Spalten bisher taten. Dabei wurde aber nicht nur ein Augenmerk auf das Layout und die Möglichkeiten, dieses zu erstellen gelegt, sondern auch auf die Ladezeiten, die unter Pagebuildern wie Elementor immer leiden. Die DOM-Größe wird durch die Elementor Container deutlich reduziert, was zu kürzerem Laden der Seite führt und es der Suchmaschine erleichtert, den Inhalt zu finden und zuzuordnen. Wie eingangs schon erwähnt, ist das Feature noch in der Alpha-Phase und sollte nicht produktiv eingesetzt werden. Unsere bisherigen Experimente liefen allerdings schon sehr gut. Wir sind gespannt, wann das Feature endgültig ausgerollt wird.
Möchtest du noch mehr über Elementor und die Möglichkeiten damit erfahren? Dann schau doch mal auf unserer Übersichtsseite vorbei. Dort haben wir viele weitere interessante und hilfreiche Artikel für dich zusammengestellt.
