Section und Container: die Seitenbreite steuern
Ziel: Verhindern, dass Text auf einem großen Bildschirm über die volle Breite läuft, und einem Inhaltsband eigenen Luftraum geben.
Dauer: 3 Minuten
Sie brauchen: Eine Seite mit einem Main-Slot
Schritte
- Wählen Sie im Main-Slot Add Block und dann Section.
- Geben Sie einen Name ein. Das ist eine reine Admin-Beschriftung, damit Sie Sections in der Blockliste auseinanderhalten — Besucher sehen sie nie.
- Setzen Sie Spacing für die vertikale Luft um das Band und ergänzen Sie bei Bedarf ein Hintergrundbild mit Background Position und Overlay.
- Wählen Sie in der Zeile der Section Add child block und dann Container.
- Setzen Sie Width — sm bis xl oder full — und Flow.
stackverteilt die Kinder gleichmäßig;nonelässt sie unangetastet. - Fügen Sie Ihre Inhaltsblöcke als Kinder des Containers hinzu.
Was wofür zuständig ist
Section ist das waagerechte Band. Es läuft von Kante zu Kante, trägt den Hintergrund und besitzt den Raum darüber und darunter.
Container sitzt darin und entscheidet, wie breit der Inhalt sein darf.
Diese Trennung ist der Grund, warum ein bildschirmbreites Foto hinter einer Textspalte liegen kann, die sich immer noch bequem liest.
Hinweise
- Lange Zeilen sind schwer zu lesen. Rund 60-75 Zeichen sind der bequeme Bereich, und dafür gibt es die schmaleren Breiten.
fullist für Bildsprache und Layout, nicht für Absätze. - Das Feld Name an Layout-Blöcken ist reine Admin-Sache. Nutzen Sie es — eine Blockliste mit fünf Sections namens „Section“ hilft niemandem.
- Eine Section ohne Container ist zulässig und manchmal richtig, aber dann ist Ihr Text so breit wie der Bildschirm.
- Verschachtelt wird über Add child block in der Zeile des Elternblocks, nicht indem man einen Block auf oberster Ebene anlegt und hofft.