On this page
Blocks: conversion and CTA
Twelve blocks that lead to a next step: calls to action, announcement, countdown, buttons, pricing tables, phone band and the three form blocks. All settings are listed for each of them.
Overview
Blocks that lead to a next step: calls to action, buttons, pricing tables, phone and forms.
In the editor these blocks sit under "Conversion & CTA". Give every page one clear main path: a call to action at the end, at most a second one in the middle of the text. Several equally strong invitations next to each other cancel one another out.
The form blocks are listed here with all of their settings. How incoming messages are handled is described in the chapter Requests and team — where you also see both forms as a live example.
Prices and deadlines have to be correct
Pricing table and price anchor additionally produce machine-readable price statements, and a countdown claims a real deadline. Only enter information here that genuinely applies.
CTA band cta-band
Full-width call to action in the middle of a page, with one or two buttons.
- In the editor
- Conversion & CTA
- Page structure
- Standalone
- Settings
- 8
Ready for the next step?
One short sentence naming the benefit of the click.
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | Required | no default | The call to action as the heading of the band. |
text | Text | optional | no default | One sentence that backs up the call to action. |
button | Group | optional | no default | Primary button of the band. |
button.text | Text | Required | no default | Label of the button. |
button.url | Text | Required | no default | Target of the button as a path or full address. |
secondary | Group | optional | no default | Second, less prominent button. |
secondary.text | Text | Required | no default | Label of the button. |
secondary.url | Text | Required | no default | Target of the button as a path or full address. |
On top of these come the common settings _style.
CTA split cta-split
Call to action with text and buttons next to each other in one row.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 7
Ready to start?
Text on the left, buttons on the right — "layout" also offers centred or mirrored.
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | Required | Bereit loszulegen? | The call to action as the heading. |
text | Text | optional | no default | One sentence that backs up the call to action. |
buttonText | Text | optional | Jetzt starten | Label of the primary button. |
buttonUrl | Text | optional | /de/kontakt/ | Target of the primary button. |
secondaryText | Text | optional | no default | Label of the second button. |
secondaryUrl | Text | optional | no default | Target of the second button. |
layout | Choice | optional | split (rendering) | Arrangement: split (text left, buttons right), centered or text-right (text on the right). Possible values: split, centered, text-right |
On top of these come the common settings _style.
Announcement announcement
Slim coloured bar for an announcement with an optional link.
- In the editor
- Conversion & CTA
- Page structure
- Inline
- Settings
- 5
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
text | Text | Required | Neu: Kurze Ankündigung. | The text of the announcement. |
badge | Text | optional | no default | Short keyword shown as a chip before the text. |
linkText | Text | optional | no default | Label of the link at the end of the bar. |
linkUrl | Text | optional | no default | Target of the link; it only appears when the link text is set as well. |
variant | Choice | optional | brand | Colour scheme of the bar: brand, gold or neutral. Possible values: brand, gold, neutral |
On top of these come the common settings _style.
Countdown countdown
Counter that runs down to a date live.
The moment in "target" is a date with a time, for example 2026-12-31T23:59:59. Once it is reached, the block shows the text from "expiredText" — if that stays empty, the countdown disappears. Deadlines have to be genuine; a countdown that keeps restarting is unlawful advertising.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 4
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
subtitle | Text | optional | no default | Short line below the heading. |
target | Text | Required | no default | Target date in ISO format, for example 2026-12-31T23:59:59. |
expiredText | Text | optional | no default | Text shown instead of the counter once the date has passed. |
On top of these come the common settings _style.
Pricing table pricing-table
Packages or plans side by side; this is where prices belong.
Every package with a recognisable price additionally produces a machine-readable price statement. So only enter prices that really apply on the page.
- In the editor
- Conversion & CTA
- Page structure
- Inline
- Settings
- 16
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
subtitle | Text | optional | no default | Short line below the heading. |
note | Text | optional | no default | Footnote below the cards, for example about VAT. |
columns | Number | optional | no default | Number of columns in the grid. |
tiers | List of entries | Required | empty | The packages in display order. |
tiers[].name | Text | Required | no default | Name of the package. |
tiers[].price | Text | Required | no default | Price of the package. |
tiers[].period | Text | optional | no default | Period after the price, for example per month. |
tiers[].description | Text | optional | no default | One sentence on who the package is for. |
tiers[].badge | Text | optional | no default | Short keyword shown as a chip on the card. |
tiers[].highlighted | Yes/no | optional | no default | Highlights this package over the others. |
tiers[].features | List of texts | optional | no default | The features of the package as a checklist. |
tiers[].image | Text | optional | no default | Product image; it turns the plan card into an offer card. |
tiers[].cta | Group | optional | no default | Button of the card. |
tiers[].cta.text | Text | Required | no default | Label of the button. |
tiers[].cta.url | Text | Required | no default | Target of the button as a path or full address. |
On top of these come the common settings _style and columnsByBp.
Pricing toggle pricing-toggle
Plans with a switch between monthly and yearly price.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 14
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
subtitle | Text | optional | no default | Short line below the heading. |
monthlyLabel | Text | optional | no default | Label of the monthly toggle button. |
yearlyLabel | Text | optional | no default | Label of the yearly toggle button. |
note | Text | optional | no default | Footnote below the plans. |
plans | List of entries | optional | empty | The plans in display order. |
plans[].name | Text | Required | no default | Name of the plan. |
plans[].monthly | Text | optional | no default | Price when paying monthly. |
plans[].yearly | Text | optional | no default | Price when paying yearly. |
plans[].unit | Text | optional | no default | Suffix after the price, for example per month. |
plans[].features | List of texts | optional | no default | Features of the plan as a list. |
plans[].ctaText | Text | optional | no default | Label of the button in the plan. |
plans[].ctaUrl | Text | optional | no default | Target of the button in the plan. |
plans[].highlight | Yes/no | optional | no default | Highlights this plan over the others. |
On top of these come the common settings _style.
Phone band phone-band
Band with a large phone number for calls as the main way to get in touch.
The number from "phone" becomes a call link. On a phone, tapping it starts the call directly.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 8
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the block. |
phone | Text | optional | no default | The phone number; it becomes a dial link. |
availability | Text | optional | no default | When you are available. |
stats | List of entries | optional | empty | Short figures next to the phone number. |
stats[].value | Text | Required | no default | The value of the figure. |
stats[].label | Text | Required | no default | Label below the value. |
formText | Text | optional | no default | Label of the link to the form. |
formUrl | Text | optional | no default | Target of the link to the form. |
On top of these come the common settings _style.
Contact form contact-form
Ready-made contact form; entries arrive as requests in your account.
The four fields name, email, phone and message are built in. Submitted requests end up in the "Requests" area of XICflow.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 7
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading next to the form. |
subtitle | Text | optional | no default | Short text next to the form. |
urlField | Yes/no | optional | No | Shows an additional field for a website address. |
urlLabel | Text | optional | no default | Label of the website address field. |
submitText | Text | optional | no default | Label of the submit button. |
id | Text | optional | kontakt-formular | DOM id of the block; it serves as the anchor target for links. |
messageOptional | Yes/no | optional | no default | Makes the message field optional instead of required. |
On top of these come the common settings _style.
Form form
Freely composed form; you define the fields yourself.
Unlike the contact form, you assemble the fields yourself here. Submitted requests also end up in the "Requests" area.
- In the editor
- Conversion & CTA
- Page structure
- Section start
- Settings
- 12
| Setting | Type | Required | Default | Meaning |
|---|---|---|---|---|
title | Text | optional | no default | Heading above the form. |
subtitle | Text | optional | no default | Short text above the form. |
fields | List of entries | 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}] | The form fields in display order. |
fields[].key | Text | optional | no default | Technical key of the field; the value is stored under it in the request. |
fields[].label | Text | Required | no default | Label shown above the field. |
fields[].type | Choice | optional | text | Kind of field, and with it the input type and validation. Possible values: text, email, tel, textarea, number, select, checkbox, consent |
fields[].required | Yes/no | optional | no default | Makes the field mandatory. |
fields[].placeholder | Text | optional | no default | Hint text shown in the empty field. |
fields[].options | List of texts | optional | no default | Choices; only for the select field type. |
submitText | Text | optional | no default | Label of the submit button. |
successText | Text | optional | no default | Text shown after the form has been sent. |
id | Text | optional | formular | DOM id of the block; it serves as the anchor target for links. |
On top of these come the common settings _style.