Abschnitte
Ein Abschnitt ist ein Band über die volle Breite des Angebots. Ihm gehören Hintergrund, Abstände und Spaltenlayout; Texte, Bilder und Buttons sitzen in seinen Zellen.
Die drei Arten
Abschnitt betitelt „Die drei Arten“| Art | Wofür |
|---|---|
| Standard | Freier Inhalt — Text, Bilder, Buttons, in beliebigem Spaltenlayout. Die meisten Abschnitte sind das. |
| Preis | Die strukturierte Preistabelle: Positionen, Mengen und Summen, gerechnet statt getippt. Siehe Preise und Annahme. |
| Annahme | Der Unterschrifts- und Annahmeblock, mit dem der Kunde zusagt. Üblicherweise der letzte Abschnitt. |
Die Art steht beim Anlegen fest. Ein Preis-Abschnitt speichert strukturierte Positionen, ein Annahme-Abschnitt eine Signatur-Konfiguration — für beides gibt es kein sinnvolles Freitext-Gegenstück, in das man umwandeln könnte.
Einstellungen
Abschnitt betitelt „Einstellungen“Jede Einstellung unten ist optional, und eine wegzulassen ist nicht dasselbe wie „sie hat keine Wirkung“: es greift der Standardwert aus der Tabelle. Das ist wichtig, wenn ein einzelner Abschnitt anders aussieht als seine Nachbarn — meist wurde die Einstellung dort nie gesetzt, statt bewusst geändert.
Breite (width)
Abschnitt betitelt „Breite (width)“Wie breit der Inhalt werden darf, unabhängig vom Hintergrund des Abschnitts, der immer über die volle Breite geht.
| Wert | Ergebnis |
|---|---|
s |
Schmal — angenehm für längeren Fließtext |
m |
Mittel |
l |
Breit (Standard) |
Innenabstand (padding)
Abschnitt betitelt „Innenabstand (padding)“Die Luft innerhalb des Abschnitts: xs, s, m, lg (Standard), xl, 2xl. Größere
Werte wirken bewusster und hochwertiger — und sind das, was eine Titelseite überhaupt erst
wie eine Titelseite aussehen lässt.
Zeilen- und Spaltenabstand (rowGap, columnGap)
Abschnitt betitelt „Zeilen- und Spaltenabstand (rowGap, columnGap)“Der Abstand zwischen gestapelten Zeilen und zwischen nebeneinanderliegenden Spalten: xs,
sm, md (Standard), lg, xl. Beide werden getrennt gesetzt — Spalten können also eng
stehen, während Zeilen luftig bleiben.
Mindesthöhe (minHeight)
Abschnitt betitelt „Mindesthöhe (minHeight)“Zwingt den Abschnitt, mindestens einen Teil des Bildschirms einzunehmen, egal wie wenig
Inhalt er hat: none (Standard), 1/3, 1/2 oder full für einen bildschirmfüllenden
Abschnitt. So baut man eine Titelseite, die den Schirm ausfüllt.
Vertikale Ausrichtung (verticalAlign)
Abschnitt betitelt „Vertikale Ausrichtung (verticalAlign)“Wo der Inhalt sitzt, wenn der Abschnitt höher ist als sein Inhalt: start (Standard),
center oder end. Sichtbar wird das nur zusammen mit einer Mindesthöhe.
Hintergrund (background)
Abschnitt betitelt „Hintergrund (background)“Entweder eine Volltonfarbe oder ein Bild mit:
- Größe —
cover,containoderauto - Position —
top,centeroderbottom - Bilddeckkraft, dazu Overlay-Farbe und -Deckkraft, um ein Foto so weit abzudunkeln, dass Text darauf lesbar bleibt
Automatischer Kontrast
Abschnitt betitelt „Automatischer Kontrast“Der automatische Kontrast ist keine Einstellung, die man aktiviert. Er gilt immer: Pural misst die Helligkeit des Abschnittshintergrunds und wählt die Textfarbe selbst, mit einem Kontrast von mindestens 4,5:1 nach WCAG. Deshalb kannst du jede Hintergrundfarbe wählen, ohne dass der Text unlesbar wird.
Es gibt keine Einstellung autoContrast und keine Möglichkeit, ihn abzuschalten — ein
geschriebener Wert bleibt wirkungslos.
Achtung: Setze keine feste Textfarbe, um einen dunklen Hintergrund auszugleichen. Du arbeitest damit gegen die Kontrastlogik, und das Ergebnis kann Text sein, der auf einem Hintergrund unsichtbar ist und auf einem anderen funktioniert.
Die einzige Ausnahme ist ein Bildhintergrund, für den der automatische Kontrast nicht greift — siehe unten.
Bildhintergründe und Lesbarkeit (contentFill)
Abschnitt betitelt „Bildhintergründe und Lesbarkeit (contentFill)“Ein Hintergrund vom Typ image schaltet den automatischen Kontrast ab. Nichts passt den
Text mehr an das an, was hinter ihm liegt — eine dunkle Überschrift auf einem dunklen Foto
geht genau so raus, wie sie geschrieben wurde, und die Einstellungen sehen dabei völlig
korrekt aus. Kombiniere einen Bildhintergrund deshalb immer mit einer Lesbarkeitsebene.
Drei davon, von schwach nach stark:
| Einstellung | Wirkung |
|---|---|
imageOpacity |
Blendet das Bild in Richtung der Abschnittsfarbe aus |
overlayColor + overlayOpacity |
Legt eine Tönung über das ganze Bild |
contentFill |
Legt eine Fläche nur hinter den Inhalt |
contentFill nimmt Farbe, Deckkraft, Weichzeichnung, Eckenradius und Innenabstand und
reicht damit von einer kaum sichtbaren Milchglasfläche bis zur deckenden Karte. Für eine
bildschirmfüllende Titelseite mit Überschrift auf einem unruhigen Foto ist es die
verlässliche Wahl.
Eine einzelne Zelle kann ein eigenes fill in derselben Form tragen. Es wird unterdrückt,
sobald der Abschnitt bereits contentFill setzt — die beiden stapeln sich also nie.
Tipp: Das ist der Fall, den keine Einstellungsübersicht für dich beurteilen kann. Schau dir den Abschnitt in der Vorschau an, bevor du das Angebot verschickst.
Einstellungen konsistent halten
Abschnitt betitelt „Einstellungen konsistent halten“Ein Angebot wirkt als ein Dokument, wenn seine Abschnitte übereinstimmen. Wenn alle
Abschnitte lg Innenabstand und Breite l haben und einer m und s, sieht dieser eine
nach Versehen aus, auch wenn niemand sagen kann warum. Variiere den Hintergrund bewusst —
das unterscheidet eine Titelseite oder einen Hinweiskasten von normalen Abschnitten — und
lass die strukturellen Einstellungen gleich, solange du keinen Grund hast.
Diese Seite für Sprachmodelle
Dieselben Inhalte als reiner Text, für einen KI-Assistenten zum Einlesen.