Section

Das Section-Element ist das wichtigste Element um vertikale Layouts zu erstellen. Sections nehmen immer 100% Breite des Bodys ein und werden immer untereinander dargestellt. Die Höhe von Sections basiert auf den Elementen die innerhalb platziert werden.

Sections lassen sich nur innerhalb des Bodys oder innerhalb von Wrapper-Elementen platzieren.

Um Sections entlang der Breite zu unterteilen werden Column- oder Group-Elemente innerhalb der Section platziert.

Um Inhalte in einer Section zu erstellen muss mindestens ein Column-Element in der Section platziert werden, in welcher dann wiederum Inhalt-Elemente wie Text, Button oder Image platziert werden können.

Einstellungen

Background Color

Bestimmt die Hintergrundfüllfarbe der Section und somit auch für alle Elemente, die innerhalb platziert werden.
Wird der Wert des Feldes gelöscht ist der Hintergrund transparent.

Background Image

Bestimmt die Quelle eines Bildes, welches im Hintergrund aller Elemente innerhalb der Section dargestellt wird.
Das Bild überlagert die Hintergrundfarbe, falls diese angegeben ist.

Mehr Information finden Sie unter:
Bild > Image

Background Size

Bestimmt die Breite des Hintergrundbildes in Pixel.
Das Bild wird immer zentriert ausgehend von der Oberkante der Section dargestellt. Nutzen Sie die Größenangabe um Bilder über die Breite der Section zu skalieren. Das Bild wird nie verzerrt dargestellt, die Höhe berechnet sich automatisch an der Breite des Bildes.

Background Repeat

Bestimmt das Verhalten mit welchem das Bild dargestellt wird, wenn es die Section nicht gänzlich füllen kann.

• Repeat: Wiederholt das Bild unendlich horizontal und vertikal
• No Repeat: Das Bild wird weder horizontal noch vertikal wiederholt
• Repeat Horizontally: Wiederholt das Bild unendlich nur entlang der horizontalen Achse.
• Repeat Vertically: Wiederholt das Bild unendlich nur entlang der vertikalen Achse.

Padding

Bestimmt den Abstand zwischen dem äußeren Rahmen der Section und allen Elementen die Innerhalb der Section platziert werden.

Padding Top

Abstand zwischen Oberkante des Rahmens der Section und beinhaltenden Elementen.

Padding Right

Abstand zwischen rechter Kante des Rahmens der Section und beinhaltenden Elementen.

Padding Bottom

Abstand zwischen unterer Kante des Rahmens der Section und beinhaltenden Elementen.

Padding Left

Abstand zwischen linker Kante des Rahmens der Section und beinhaltenden Elementen.

Border

Bestimmt die visuelle Gestaltung des äußeren Rahmens der Section. Jede Außenkante des Rahmens kann separat gestaltet werden. Anzeigeeinstellungen für jede Außenkante des Rahmens können über das jeweilige "Border Settings"-Menü vorgenommen werden.

Die Felder unterstützten auch die Eingabe eines CSS-Strings im Format:

<line-width> <line-style> <color>

Border Top

Bestimmt die Gestaltung der oberen Rahmenkante.

Border Right

Bestimmt die Gestaltung der rechten Rahmenkante.

Border Bottom

Bestimmt die Gestaltung der unteren Rahmenkante.

Border Left

Bestimmt die Gestaltung der linken Rahmenkante.

Border Radius

Bestimmt die Abrundung der Ecken des äußeren Rahmens in Pixel. Hintergrundfarbe- und Bild werden auf den abgerundeten Rahmen zugeschnitten.

Ein hoher Wert wie 1000px kann verwendet werden um die Ecken komplett abzurunden.