Flexbox Container sind aktiviert. Container sind die Grundlage jeden Designs mit Elementor. Daher solltet ihr unbedingt verstehen, wofür sie da sind, was sie tun und wie sie sich verhalten.
Sehen wir uns also die Container etwas genauer an. Um genau zu sein, den Hauptcontainer und die Inhaltsbreite des Containers. Welche Besonderheiten gibt es? Was ist zu beachten?
Container Einstellungen
Wenn ihr eine leere Seite mit Elementor bearbeiten möchtet, seht ihr zuerst einen gestrichelten Kasten, der ein + Symbol enthält.
Wenn ihr auf das + klickt, werden euch ein paar vordefinierte Designs angezeigt. 2-spaltig, 3-spaltig, verschachtelt usw. Für unsere Zwecke benötigen wir nur den grauen Kasten mit dem Pfeil nach unten. Insgesamt sollte das, meine Empfehlung, immer der Ausgangspunkt für eine Seite sein. Alles weitere lässt sich später regeln. Achtet darauf, dass der Pfeil nach unten zeigt, das bedeutet, dass alle Inhalte von oben nach unten angeordnet sein werden.
Habt ihr auf den grauen Kasten geklickt, habt ihr sozusagen den „Hauptcontainer“ erstellt. In diesen Hauptcontainer wandert nun Stück für Stück der Inhalt eurer Seite. Allerdings solltet ihr keine tatsächlichen Inhalte (Überschriften, Texte, Bilder…) in diesen Kasten packen. Sollte eure Seite komplexer werden, könnte euch das vor Herausforderungen stellen.
Containerbreite
Der Hauptcontainer stellt die Breite für die gesamte weitere, fortlaufende Seite dar. Ihr habt 2 Möglichkeiten. Entweder Boxed oder Volle Breite.
Boxed bedeutet, dass sich der Inhalt des Containers nicht über den gesamten Bildschirm erstreckt. Es existieren also links und rechts Abstände nicht beschreibbar sind. Allerdings betrifft das nicht den Hintergrund des Containers, dieser erstreckt sich dennoch über die gesamte Breite. Ich habe das in zwei folgenden Beispielen veranschaulicht.
Boxed Layout
Wenn ihr euch für das Boxed Layout entscheidet, habt ihr die Möglichkeit den Inhalt der Box von mindestens 500px bis zu max 1600px zu begrenzen. Natürlich habt ihr auch die Möglichkeit die Breite in Prozent anzugeben zwischen 0 und 100%. Wichtig dabei zu erwähnen ist, dass der sich der Hauptcontainer dennoch über die gesamte Seite erstreckt. Zur Veranschaulichung hier ein Beispiel:
Da sich der Hauptcontainer (lila dargestellt) über die gesamte Breite erstreckt begrenzt ihr nur den Inhalt des Containers, aber habt keinen Einfluss auf seine äußeren Ränder links und rechts. Das ist wichtig für den Fall, falls ihr mit Hintergrundfarben oder Bildern arbeiten wollt.
Volle Breite Layout
Wählt ihr die Volle Breite, wird euch die Breite des Containers in Prozent standardmäßig angezeigt. Hier könnt ihr auch auf Pixel umstellen, wenn gewünscht. Der Unterschied bei der vollen Breite ist, dass ihr nicht den Inhalt des Containers verändert, sondern den gesamten Container.
Mobile
Besonders wichtig ist natürlich die Mobile Ansicht. Dort verhält es sich im Grunde genau so wie in der Desktopansicht. Einen Unterschied gibt es in der mobilen Ansicht aber, und das ist die Breite im Boxed Layout. Ihr könnt die Breite dort auch in Pixel angeben, es empfiehlt sich aber eher die Breite in Prozent anzugeben. Zum einen, da die mindestbreite 500px sind (so breit sind die wenigstens Smartphones) und zum anderen bekommt ihr dadurch ein schönes responsives Layout. Also ein Layout, dass sich dem Mobilgerät anpasst.
Zusammenfassung
Das grundsätzliche Design mit Elementor wird über Container dargestellt.
- Der erste Container der erstellt wird ist immer der „Hauptcontainer“. In diesen Container werden später alle Inhalte platziert.
- Jeder Container kann als Boxed oder Volle Breite dargestellt werden.
- Boxed bedeutet, dass die Breite des Inhaltes des Containers verändert werden kann.
- Volle Breite bedeutet, dass die Breite des gesamten Containers verändert werden kann.
- Dieses Prinzip trifft auf alle Container zu.
- Mobile verhalten sich die Container wie in der Desktopansicht. Lediglich im Boxed Layout sollte die Breite in Prozent angegeben werden und nicht in Pixel.