Zum Inhalt springen

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.

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.

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.

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)

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.

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.

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.

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.

Entweder eine Volltonfarbe oder ein Bild mit:

  • Größecover, contain oder auto
  • Positiontop, center oder bottom
  • Bilddeckkraft, dazu Overlay-Farbe und -Deckkraft, um ein Foto so weit abzudunkeln, dass Text darauf lesbar bleibt

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.

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.

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.