Auf dieser Seite
Bausteine: Conversion und CTA
Dreizehn Bausteine, die zu einem nächsten Schritt führen: Handlungsaufrufe, Bildband, Hinweis-Band, Countdown, Buttons, Preistabellen, Telefon-Band und die drei Formular-Bausteine. Zu jedem stehen hier alle Einstellungen.
Überblick
Bausteine, die zu einem nächsten Schritt führen: Handlungsaufrufe, Buttons, Preistabellen, Telefon und Formulare.
Diese Bausteine stehen im Editor unter „Conversion & CTA". Setzen Sie pro Seite einen klaren Hauptweg: ein Handlungsaufruf am Ende, höchstens ein zweiter mitten im Text. Mehrere gleich starke Aufforderungen nebeneinander heben sich gegenseitig auf.
Die Formular-Bausteine sind hier mit allen Einstellungen aufgeführt. Wie die eingegangenen Nachrichten bearbeitet werden, steht im Kapitel Anfragen und Team — dort sehen Sie beide Formulare auch als Live-Beispiel.
Preise und Fristen müssen stimmen
Aus Preistabelle und Preis-Anker entstehen zusätzlich maschinenlesbare Preisangaben, und ein Countdown behauptet eine echte Frist. Tragen Sie hier nur Angaben ein, die tatsächlich gelten.
CTA-Band cta-band
Vollbreiter Aufruf zur Handlung mitten auf der Seite, mit einem oder zwei Buttons.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Eigenständig
- Einstellungen
- 10
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | Pflicht | keine Vorgabe | Die Aufforderung als Überschrift des Bandes. |
text | Text | optional | keine Vorgabe | Ein Satz, der die Aufforderung begründet. |
button | Gruppe | optional | keine Vorgabe | Hauptbutton des Bandes. |
button.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
button.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
secondary | Gruppe | optional | keine Vorgabe | Zweiter, weniger betonter Button. |
secondary.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
secondary.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
image | Text | optional | keine Vorgabe | Bild des Bausteins als Adresse; erzeugt wird es mit generate_image. |
imageAlt | Text | optional | keine Vorgabe | Alternativtext des Bildes. Leer lassen, wenn das Bild reine Dekoration ist. |
Dazu kommen die gemeinsamen Einstellungen _style.
Bildband mit Aussage statement-band
Randloses Foto über die ganze Breite, darüber ein Satz, der für sich steht. Der Schleier liegt gerichtet über dem Bild: dicht an der Textseite, offen an der anderen, damit das Foto sichtbar bleibt.
Das Foto läuft über die volle Breite, Text und Button liegen darauf. Die Deckschicht wird zur Textseite hin dunkler und zur Gegenseite hin durchsichtig, damit die Schrift lesbar bleibt und vom Bild trotzdem etwas zu sehen ist; auf schmalen Bildschirmen deckt sie durchgehend, weil der Text dort die ganze Breite einnimmt. Über „align" wechseln Textseite und Verlaufsrichtung gemeinsam. Ohne Bild fällt das Band auf einen Farbverlauf zurück.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Eigenständig
- Einstellungen
- 11
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
eyebrow | Text | optional | keine Vorgabe | Kleine Zeile über der Aussage, zum Beispiel der Abschnittsname. |
title | Text | Pflicht | keine Vorgabe | Der Satz, der für sich steht. Kurz halten, er wird groß gesetzt. |
text | Text | optional | keine Vorgabe | Zwei bis drei Zeilen, die den Satz belegen. |
button | Gruppe | optional | keine Vorgabe | Button unter der Aussage. |
button.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
button.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
image | Text | optional | keine Vorgabe | Randloses Foto, füllt das ganze Band. |
imageAlt | Text | optional | keine Vorgabe | Alternativtext des Fotos. Leer lassen, wenn es reine Dekoration ist. |
focalX | Zahl | optional | keine Vorgabe | Waagerechter Bildausschnitt in Prozent: 0 linker Rand, 50 Mitte, 100 rechter Rand. Nur setzen, wenn der Zuschnitt das Motiv anschneidet. Wertebereich: 0–100 |
focalY | Zahl | optional | keine Vorgabe | Senkrechter Bildausschnitt in Prozent: 0 oben, 50 Mitte, 100 unten. Bei Portraets haeufig 30, damit der Kopf im Bild bleibt. Wertebereich: 0–100 |
align | Auswahl | optional | links | Auf welcher Seite der Text steht. Der Schleier folgt ihm. Mögliche Werte: links, rechts |
Dazu kommen die gemeinsamen Einstellungen _style.
CTA-Split cta-split
Aufruf zur Handlung mit Text und Buttons nebeneinander in einer Zeile.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 7
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | Pflicht | Bereit loszulegen? | Die Aufforderung als Überschrift. |
text | Text | optional | keine Vorgabe | Ein Satz, der die Aufforderung begründet. |
buttonText | Text | optional | Jetzt starten | Beschriftung des Hauptbuttons. |
buttonUrl | Text | optional | /de/kontakt/ | Ziel des Hauptbuttons. |
secondaryText | Text | optional | keine Vorgabe | Beschriftung des zweiten Buttons. |
secondaryUrl | Text | optional | keine Vorgabe | Ziel des zweiten Buttons. |
layout | Auswahl | optional | split (Darstellung) | Anordnung: split (Text links, Buttons rechts), centered (zentriert) oder text-right (Text rechts). Mögliche Werte: split, centered, text-right |
Dazu kommen die gemeinsamen Einstellungen _style.
Hinweis-Band announcement
Schmale farbige Leiste für eine Ankündigung mit optionalem Link.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
text | Text | Pflicht | Neu: Kurze Ankündigung. | Der Text der Ankündigung. |
badge | Text | optional | keine Vorgabe | Kurzes Kennwort als Chip vor dem Text. |
linkText | Text | optional | keine Vorgabe | Beschriftung des Links am Ende der Leiste. |
linkUrl | Text | optional | keine Vorgabe | Ziel des Links; er erscheint nur, wenn auch der Linktext gesetzt ist. |
variant | Auswahl | optional | brand | Farbgebung der Leiste: brand, gold oder neutral. Mögliche Werte: brand, gold, neutral |
Dazu kommen die gemeinsamen Einstellungen _style.
Countdown countdown
Zähler, der live auf ein Datum herunterläuft.
Der Zeitpunkt in „target" steht als Datum mit Uhrzeit, zum Beispiel 2026-12-31T23:59:59. Ist er erreicht, zeigt der Baustein den Text aus „expiredText" — bleibt der leer, verschwindet die Zählung. Befristungen müssen echt sein; ein Countdown, der immer wieder von vorn läuft, ist unzulässige Werbung.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 4
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
target | Text | Pflicht | keine Vorgabe | Zieldatum im ISO-Format, zum Beispiel 2026-12-31T23:59:59. |
expiredText | Text | optional | keine Vorgabe | Text, der nach Ablauf an Stelle des Zählers steht. |
Dazu kommen die gemeinsamen Einstellungen _style.
Preistabelle pricing-table
Pakete oder Tarife nebeneinander; hier gehören Preise hin.
Aus jedem Paket mit erkennbarem Preis entsteht zusätzlich eine maschinenlesbare Preisangabe. Tragen Sie deshalb nur Preise ein, die auf der Seite auch wirklich gelten.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 16
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
note | Text | optional | keine Vorgabe | Fußnote unter den Karten, etwa zur Mehrwertsteuer. |
columns | Zahl | optional | keine Vorgabe | Anzahl der Spalten im Raster. |
tiers | Einträge | Pflicht | leer | Die Pakete in Anzeigereihenfolge. |
tiers[].name | Text | Pflicht | keine Vorgabe | Name des Pakets. |
tiers[].price | Text | Pflicht | keine Vorgabe | Preis des Pakets. |
tiers[].period | Text | optional | keine Vorgabe | Zeitraum hinter dem Preis, zum Beispiel je Monat. |
tiers[].description | Text | optional | keine Vorgabe | Ein Satz, für wen das Paket gedacht ist. |
tiers[].badge | Text | optional | keine Vorgabe | Kurzes Kennwort als Chip auf der Karte. |
tiers[].highlighted | Ja/Nein | optional | keine Vorgabe | Hebt dieses Paket gegenüber den anderen hervor. |
tiers[].features | Textliste | optional | keine Vorgabe | Die Leistungen des Pakets als Häkchenliste. |
tiers[].image | Text | optional | keine Vorgabe | Produktbild; damit wird aus der Tarifkarte eine Angebotskarte. |
tiers[].cta | Gruppe | optional | keine Vorgabe | Button der Karte. |
tiers[].cta.text | Text | Pflicht | keine Vorgabe | Beschriftung des Buttons. |
tiers[].cta.url | Text | Pflicht | keine Vorgabe | Ziel des Buttons als Pfad oder vollständige Adresse. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Preis-Umschalter pricing-toggle
Tarife mit Umschalter zwischen monatlichem und jährlichem Preis.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 14
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
monthlyLabel | Text | optional | keine Vorgabe | Beschriftung der monatlichen Umschalt-Taste. |
yearlyLabel | Text | optional | keine Vorgabe | Beschriftung der jährlichen Umschalt-Taste. |
note | Text | optional | keine Vorgabe | Fußnote unter den Tarifen. |
plans | Einträge | optional | leer | Die Tarife in Anzeigereihenfolge. |
plans[].name | Text | Pflicht | keine Vorgabe | Name des Tarifs. |
plans[].monthly | Text | optional | keine Vorgabe | Preis bei monatlicher Zahlung. |
plans[].yearly | Text | optional | keine Vorgabe | Preis bei jährlicher Zahlung. |
plans[].unit | Text | optional | keine Vorgabe | Zusatz hinter dem Preis, zum Beispiel je Monat. |
plans[].features | Textliste | optional | keine Vorgabe | Leistungen des Tarifs als Liste. |
plans[].ctaText | Text | optional | keine Vorgabe | Beschriftung des Buttons im Tarif. |
plans[].ctaUrl | Text | optional | keine Vorgabe | Ziel des Buttons im Tarif. |
plans[].highlight | Ja/Nein | optional | keine Vorgabe | Hebt diesen Tarif gegenüber den anderen hervor. |
Dazu kommen die gemeinsamen Einstellungen _style.
Telefon-Band phone-band
Band mit großer Rufnummer für Anrufe als Hauptweg der Kontaktaufnahme.
Die Nummer aus „phone" wird zum Anruf-Link. Auf dem Handy startet ein Tippen darauf direkt den Anruf.
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
phone | Text | optional | keine Vorgabe | Die Rufnummer; sie wird zur Wählverknüpfung. |
availability | Text | optional | keine Vorgabe | Wann Sie erreichbar sind. |
stats | Einträge | optional | leer | Kurze Kennzahlen neben der Rufnummer. |
stats[].value | Text | Pflicht | keine Vorgabe | Der Wert der Kennzahl. |
stats[].label | Text | Pflicht | keine Vorgabe | Beschriftung unter dem Wert. |
formText | Text | optional | keine Vorgabe | Beschriftung des Links zum Formular. |
formUrl | Text | optional | keine Vorgabe | Ziel des Links zum Formular. |
Dazu kommen die gemeinsamen Einstellungen _style.
Kontaktformular contact-form
Vorgefertigtes Kontaktformular; die Eingaben landen als Anfrage im Konto.
Die vier Felder Name, E-Mail, Telefon und Nachricht sind fest eingebaut. Abgesendete Anfragen landen in XICflow im Bereich „Anfragen".
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 11
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift neben dem Formular. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text neben dem Formular. |
urlField | Ja/Nein | optional | Nein | Blendet ein zusätzliches Feld für die Website-Adresse ein. |
urlLabel | Text | optional | keine Vorgabe | Beschriftung des Feldes für die Website-Adresse. |
submitText | Text | optional | keine Vorgabe | Beschriftung des Absende-Buttons. |
id | Text | optional | kontakt-formular | DOM-Kennung des Bausteins; sie dient als Sprungziel für Links. |
messageOptional | Ja/Nein | optional | keine Vorgabe | Macht das Nachrichtenfeld freiwillig statt zur Pflicht. |
successText | Text | optional | keine Vorgabe | Text, der nach dem Absenden erscheint. |
successUrl | Text | optional | keine Vorgabe | Pfad der eigenen Website, auf den nach dem Absenden gewechselt wird; leer bestätigt an Ort und Stelle. |
recipient | Text | optional | keine Vorgabe | E-Mail-Empfänger nur dieses Formulars; leer bedeutet die Adresse der Website. |
formKey | Text | optional | keine Vorgabe | Kennung dieses Formulars; wird beim Veröffentlichen gesetzt, nichts zu pflegen. |
Dazu kommen die gemeinsamen Einstellungen _style.
Formular form
Frei zusammengestelltes Formular; die Felder legen Sie selbst fest.
Anders als das Kontaktformular stellen Sie die Felder hier selbst zusammen. Abgesendete Anfragen landen ebenfalls im Bereich „Anfragen".
- Im Editor
- Conversion & CTA
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 15
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Formular. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text über dem Formular. |
fields | Einträge | optional | [{"key":"name","label":"Name","type":"text","required":true},{"key":"email","label":"E-Mail","type":"email","required":true},{"key":"message","label":"Nachricht","type":"textarea","required":true}] | Die Formularfelder in Anzeigereihenfolge. |
fields[].key | Text | optional | keine Vorgabe | Technischer Schlüssel des Feldes; unter ihm steht der Wert in der Anfrage. |
fields[].label | Text | Pflicht | keine Vorgabe | Beschriftung, die über dem Feld steht. |
fields[].type | Auswahl | optional | text | Art des Feldes und damit Eingabeform und Prüfung. Mögliche Werte: text, email, tel, textarea, number, select, checkbox, consent |
fields[].required | Ja/Nein | optional | keine Vorgabe | Macht das Feld zur Pflichtangabe. |
fields[].placeholder | Text | optional | keine Vorgabe | Hinweistext im leeren Feld. |
fields[].options | Textliste | optional | keine Vorgabe | Auswahlmöglichkeiten; nur bei der Feldart select. |
submitText | Text | optional | keine Vorgabe | Beschriftung des Absende-Buttons. |
successText | Text | optional | keine Vorgabe | Text, der nach dem Absenden erscheint. |
successUrl | Text | optional | keine Vorgabe | Pfad der eigenen Website, auf den nach dem Absenden gewechselt wird; leer bestätigt an Ort und Stelle. |
id | Text | optional | formular | DOM-Kennung des Bausteins; sie dient als Sprungziel für Links. |
recipient | Text | optional | keine Vorgabe | E-Mail-Empfänger nur dieses Formulars; leer bedeutet die Adresse der Website. |
formKey | Text | optional | keine Vorgabe | Kennung dieses Formulars; wird beim Veröffentlichen gesetzt, nichts zu pflegen. |
Dazu kommen die gemeinsamen Einstellungen _style.