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.