Auf dieser Seite
Bausteine: Conversion und CTA
Zwölf Bausteine, die zu einem nächsten Schritt führen: Handlungsaufrufe, 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
- 8
Bereit für den nächsten Schritt?
Ein kurzer Satz, der den Nutzen des Klicks benennt.
| 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. |
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
Bereit loszulegen?
Text links, Buttons rechts — über „layout" auch zentriert oder seitenverkehrt.
| 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
- 7
| 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. |
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
- 12
| 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. |
id | Text | optional | formular | DOM-Kennung des Bausteins; sie dient als Sprungziel für Links. |
Dazu kommen die gemeinsamen Einstellungen _style.