Wer Elementor vor ein paar Jahren gelernt hat, denkt in Sections und Columns: ein Abschnitt über die volle Breite, darin Spalten, in den Spalten die Widgets. Wer heute anfängt, sieht stattdessen Container. Beide Systeme existieren nebeneinander, und das sorgt für Verwirrung. Hier die Einordnung.
Der Unterschied in einem Satz
Das alte System hatte drei feste Ebenen — Section, Column, Widget. Der Container ist eine Ebene, die sich beliebig verschachteln lässt und intern mit Flexbox arbeitet, dem Layout-Modell, mit dem heute praktisch jede moderne Website gebaut wird.
Was dadurch besser wird
Weniger Verschachtelung, weniger Markup. Ein einspaltiger Abschnitt brauchte früher Section und Column, also zwei Ebenen für einen Inhaltsblock. Mit Containern ist es eine. Über eine ganze Seite summiert sich das zu spürbar weniger HTML — was der Ladezeit zugutekommt und die Struktur lesbarer macht.
Ausrichtung, die tatsächlich funktioniert. Drei Boxen unterschiedlicher Texthöhe unten bündig auszurichten, war mit Columns eine Bastelei mit gleichen Mindesthöhen und Handarbeit. Mit Flexbox sind das zwei Klicks: Richtung, Ausrichtung, fertig.
Verhalten statt Zahlenraten. Sie legen fest, ob Elemente in einer Reihe oder untereinander liegen, wie sie sich verteilen, ob sie umbrechen, wenn der Platz eng wird. Das Layout reagiert auf den verfügbaren Raum, statt an feste Prozentwerte gebunden zu sein — was gerade auf Tablets den Unterschied macht.
Reihenfolge frei änderbar. Auf dem Desktop soll das Bild links stehen, auf dem Handy aber über dem Text? Mit Flexbox ist das eine Einstellung, kein doppelter Aufbau.
Die vier Einstellungen, die Sie wirklich brauchen
Der Container hat viele Optionen. In der Praxis arbeiten Sie fast ausschließlich mit vieren:
Richtung — nebeneinander (Zeile) oder untereinander (Spalte). Der wichtigste Schalter überhaupt.
Ausrichtung — wie die Elemente quer zur Richtung sitzen. Bei einer Zeile: oben, mittig, unten.
Verteilung — wie der Platz entlang der Richtung aufgeteilt wird. „Abstand dazwischen“ ist der Wert, den Sie für Kopfzeilen mit Logo links und Menü rechts brauchen.
Lücke — der Abstand zwischen den Elementen. Ersetzt die früher üblichen Innenabstände an jeder einzelnen Spalte, und zwar zuverlässiger.
Wenn Sie diese vier verstanden haben, bauen Sie neunzig Prozent aller Layouts. Der Rest ist Feinschliff.
Ein Aufbau, der sich bewährt hat
Für einen normalen Inhaltsabschnitt nehme ich einen äußeren Container, Richtung Spalte, über die volle Breite mit Hintergrund. Darin ein innerer Container, in der Breite begrenzt und zentriert — das ist Ihr Textbereich. Und darin, wo nötig, ein Container in Zeilen-Richtung für nebeneinanderliegende Elemente.
Dieses Muster — außen der Rahmen, innen die Breitenbegrenzung, darin die Inhalte — trägt sehr weit und bleibt auch nach Monaten verständlich.
Sollten Sie bestehende Seiten umbauen?
Nein. Jedenfalls nicht ohne Anlass.
Elementor bietet eine Umwandlung von Sections in Container an. Sie funktioniert oft gut, aber nicht immer verlustfrei — besonders bei Seiten mit vielen individuellen Abständen, negativen Rändern oder eigenem CSS. Eine Seite, die gut aussieht und funktioniert, umzubauen, bringt Ihnen keinen Besucher mehr und kann einen halben Tag Nacharbeit kosten.
Mein Vorgehen: Neues wird mit Containern gebaut, Bestehendes bleibt. Wenn eine alte Seite ohnehin inhaltlich überarbeitet wird, bauen Sie sie bei der Gelegenheit neu auf. So wandert die Website nach und nach über, ohne dass Sie ein Umbauprojekt daraus machen.
Falls Sie doch umwandeln: vorher ein Backup, und danach jede Seite auf Handy und Tablet prüfen. Was dabei sonst noch schiefgehen kann, steht in Elementor-Update ohne Layout-Bruch.
Der Nebeneffekt, den ich am meisten schätze
Weniger Verschachtelung bedeutet weniger HTML pro Seite. Das ist kein Performance-Wunder — die Ladezeit hängt viel stärker an Bildern und Skripten. Aber es ist ein Schritt in die richtige Richtung, und er kostet nichts, weil Sie ohnehin bauen. Die größeren Hebel für die Ladezeit stehen in Elementor und Core Web Vitals.
Elementor Pro: Container gibt es in beiden Versionen. Pro wird erst relevant, wenn Sie diese Struktur auch für Kopfbereich, Footer und Beitrags-Layouts einsetzen wollen. Elementor Pro ansehen
Wenn Sie neu einsteigen
Lernen Sie gar nicht erst das alte System. Sections und Columns werden Ihnen in älteren Anleitungen und Videos noch lange begegnen — Sie können sie lesen, ohne sie zu verwenden. Fangen Sie direkt mit Containern an; das erspart Ihnen, ein Modell zu lernen und später wieder zu verlernen.
Genau so gehe ich auch in meiner Elementor-Schulung vor: Flexbox von Anfang an, weil es der Stand ist, auf dem Sie die nächsten Jahre arbeiten.
Tags