Sektion

Eine Sektion ist ein grundlegendes Layout-Element, das die Struktur deiner Webseite bestimmt. Moderne Webseiten sind heutzutage in einzelne Abschnitte unterteilt:

skizze sektionen

Dabei hat eine Sektion immer eine feste Breite von 100% und geht somit über das gesamte Browserfenster.

Sektion hinzufügen

sektion hinzufuegen

Container deaktiveren

Jeder Sektion hat automatisch einen Container. Er ist eine Sammelbox für verschiedene Elemente. Die Besonderheit daran ist, dass er eine maximale Breite von 1200px hat und automatisch zentriert wird:

container automatisch zentriert

Ohne Container würden die Elemente sehr weit am Rand kleben:

sektion ohne container rand kleben

Manchmal kann es aber Sinn machen, den Container zu deaktivieren. Das machst du wie folgt:

container deaktivieren

Die Ausrichtung der einzelnen Elemente im Container machst du am besten auch direkt über den Container. Hier mehr zu Layout-Optionen.

Container-Breite verändern

Ein Container besitzt standardmäßig eine Maximalbreite von 1200px und verkleinert sich dementsprechend automatisch bei kleineren Bildschirmen:

container passt sich automatisch an

Diese maximale Breite kannst du verändern, wenn du möchtest, dass der Container etwas kleiner dargestellt werden soll:

container breite veraendern

Wenn du also mit Sektionen und Containern arbeitest, ist alles schön zentriert, bündig und gleichzeitig responsive.

Anzahl der Spalten bestimmen

Du kannst in den Element-Einstellungen die Anzahl der Spalten des Containers bzw. der Sektion bestimmen:

sektion anzahl spalten bestimmen

Spaltenverhältnis verändern

sektion spaltenverhaeltnis aendern

Beachte hierbei, dass es nur eine gerade Spaltenanzahl gibt. Das liegt daran, dass im Hintergrund ein 12er-Raster läuft. Dadurch ist dein Layout bis auf den Pixel genau bündig:

sektion buendig

Spaltenabstand verändern

sektion spaltenabstand veraendern

Spalten vertauschen

Vertausche eine einzelne Spalte einfach per Drag & Drop:

sektion spalten vertauschen drag and drop

Alternativ kannst du das auch über die Element-Einstellungen machen. Diese Option ist besonders nützlich, wenn du z.B. die Spalten unter Mobile vertauschen möchtest:

sektion spalten vertauschen element einstellungen

Höhe verändern

Die Höhe einer Sektion wird automatisch berechnet und richtet sich nach den Elementen, die sich darin befinden. Je mehr Elemente du untereinander platzierst, desto höher die Sektion:

groesse je mehr elemente sektion

Wir empfehlen, keine feste Höhe einzugeben, sondern die Höhe über Innenabstand oben und unten zu lösen (siehe nächsten Abschnitt).

In einigen Ausnahmefällen (z.B. für eine Hero-Sektion) kannst du mit Viewport Height (VH) arbeiten. Hier mehr dazu.

Innenabstand ändern

Anstelle eine feste Höhe einzugeben, solltest du einfach die Elemente die Höhe bestimmen lassen und den Rest über Innenabstand oben und unten lösen:

sektion innenabstand aendern

Achte dabei aber darauf, dass die Abstände bei kleineren Bildschirmgrößen nicht zu groß sind und passe diese ggf. dafür an:

sektion innenabstand responsive

Außerdem hat eine Sektion standardmäßig einen Innenabstand links und rechts von 8%. Das sorgt dafür, dass auch bei kleineren Auflösungen immer ausreichend Innenabstand links und rechts vorhanden ist und die Elemente nicht am Rand kleben:

sektion innenabtand links rechts

Brandneu

Neue Layout-Elemente

Chimpify

Plattform

Powered by Chimpify