Sektion
Eine Sektion ist ein grundlegendes Layout-Element, das die Struktur deiner Webseite bestimmt. Moderne Webseiten sind heutzutage in einzelne Abschnitte unterteilt:
Dabei hat eine Sektion immer eine feste Breite von 100% und geht somit über das gesamte Browserfenster.
Sektion hinzufügen
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:
Ohne Container würden die Elemente sehr weit am Rand kleben:
Manchmal kann es aber Sinn machen, den Container zu deaktivieren. Das machst du wie folgt:
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:
Diese maximale Breite kannst du verändern, wenn du möchtest, dass der Container etwas kleiner dargestellt werden soll:
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:
Spaltenverhältnis verändern
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:
Spaltenabstand verändern
Der Spaltenabstand wird standardmäßig in Prozent angegeben, damit dieser bei jeder Browsergröße optimal dargestellt wird. Da man in der Regel kein Gefühl für % hat, hier eine kleine Umrechnungstabelle, wenn der Container eine Breite von 1200px besitzt:
- 8% = ca. 100px
- 7% = ca. 90px
- 6%= ca. 80px
- 5%= ca. 60px
- 4% = ca. 50px
- 3% = ca. 40px
- 2% = ca. 30px
- 1% = ca. 20px
- 0% = 0px
Spalten vertauschen
Vertausche eine einzelne Spalte einfach per Drag & 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:
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:
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:
Achte dabei aber darauf, dass die Abstände bei kleineren Bildschirmgrößen nicht zu groß sind und passe diese ggf. dafür an:
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:
