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

  1. Wählen Sie im Main-Slot Add Block und dann Section.
  2. Geben Sie einen Name ein. Das ist eine reine Admin-Beschriftung, damit Sie Sections in der Blockliste auseinanderhalten — Besucher sehen sie nie.
  3. Setzen Sie Spacing für die vertikale Luft um das Band und ergänzen Sie bei Bedarf ein Hintergrundbild mit Background Position und Overlay.
  4. Wählen Sie in der Zeile der Section Add child block und dann Container.
  5. Setzen Sie Width — sm bis xl oder full — und Flow. stack verteilt die Kinder gleichmäßig; none lässt sie unangetastet.
  6. Fügen Sie Ihre Inhaltsblöcke als Kinder des Containers hinzu.
Section block form showing name, background position, overlay, and spacing.
Container block form showing the admin name, width, and flow settings.
Public page showing a heading and paragraph constrained to a readable measure.

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. full ist 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.
Weiter: Columns und Grid