Zum Inhalt springen

Text-, Bild- und Button-Blöcke

Drei Blöcke kommen in die Zellen eines Abschnitts. Alles, was du in einem Angebot schreibst, ist einer davon.

Der Textblock ist ein Rich-Text-Editor: Überschriften, Absätze, fett und kursiv, Listen, Links und Platzhalter.

Absätze gibt es in Größen — so bekommt Kleingedrucktes das Aussehen von Kleingedrucktem:

Variante Verwendung
t1 Fließtext — der Standard
t2 Klein
t3 Bildunterschrift-Größe
small / caption Gedämpftes Kleingedrucktes — aber siehe die Warnung unten

Nimm lieber t1, t2 oder t3. small und caption werden als gedämpftes Kleingedrucktes dargestellt, aber die Typ-Auswahl des Editors kann sie weder erzeugen noch erneut auswählen. Wer den Absatz später bearbeitet, verliert die Variante, ohne es zu merken. Verwende stattdessen t3 für Text in Bildunterschrift-Größe.

Überschriften sind davon getrennt, von Ebene 1 bis 4, und bekommen ihre Größe aus der Ebene statt aus einer Variante — eine Überschrift nimmt keine Absatzvariante an.

Zitate haben ihren eigenen Stil: Für ein Testimonial oder eine hervorgehobene Kundenaussage ist ein Blockzitat (blockquote) das Richtige, nicht ein kursiver Absatz.

Zur Farbe eine Warnung: Lass die Textfarbe in Ruhe und überlass sie dem automatischen Kontrast, der sie an den Hintergrund anpasst.

Option Werte
Quelle Ein hochgeladenes Asset oder eine externe URL
Alternativtext Beschreibt das Bild für Screenreader und falls es nicht lädt
Anpassung (objectFit) cover beschneidet und füllt, contain zeigt das ganze Bild, fill verzerrt
Seitenverhältnis (aspectRatio) auto behält das Original, oder fest 1:1, 4:3, 16:9, 3:4
Ausrichtung (alignment) left, center oder right
Breite (maxWidthPercent) Wie viel der Zelle das Bild füllt, 20100 (Standard 100)
Eckenradius (borderRadius) none, sm, md (Standard), lg oder full

Die beiden Quellen schließen sich aus: entweder ein hochgeladenes Asset oder eine externe URL. Ein Block, der auf externe URL steht, aber keine URL enthält, fällt auf den Asset-Modus zurück, statt einen Fehler zu zeigen.

Hochgeladene Bilder lassen sich direkt zuschneiden und drehen — eine Datei muss also selten außerhalb von Pural vorbereitet werden.

cover mit festem Seitenverhältnis ist die verlässliche Wahl, wenn mehrere Bilder nebeneinander stehen: sonst lassen unterschiedliche Proportionen die Zeile ausgefranst wirken.

Eine Handlungsaufforderung — Termin buchen, Dokument öffnen, antworten.

Option Werte
Beschriftung Der Text auf dem Button
Linktyp Eine Webadresse, eine Telefonnummer oder eine E-Mail-Adresse
Linkziel Die URL, Nummer oder Adresse selbst
In neuem Tab öffnen Für Weblinks
Füllung (backgroundColor) Hex-Farbe des Buttons selbst
Textfarbe (fontColor) Hex-Farbe der Beschriftung
Innenabstand (paddingX, paddingY) Horizontal smxl, vertikal smlg
Schriftgröße (fontSize) sm, md oder lg
Eckenradius (borderRadius) none, sm, md, lg oder full
Ausrichtung (alignment) left, center oder right

Anders als beim Text sollen die Farben eines Buttons gesetzt werden. Der automatische Kontrast erreicht sie nicht: Ein Button auf einem dunklen Abschnitt behält Füllung und Textfarbe so, wie sie gesetzt wurden. Prüfe deshalb, ob die Beschriftung auf der gewählten Füllung noch lesbar ist.

Füllung, Textfarbe, Innenabstand, Schriftgröße und Eckenradius bietet der Editor als wenige kombinierte Größen-Voreinstellungen an. Sie einzeln zu setzen funktioniert und wird auch so dargestellt, aber eine Kombination außerhalb dieser Voreinstellungen lässt sich von Hand nicht wieder herstellen.

Ein Telefon- oder E-Mail-Button öffnet die entsprechende App des Empfängers. Das ist gut zu wissen, bevor man ihn zur zentralen Handlungsaufforderung eines Angebots macht, das überwiegend am Rechner gelesen wird.