Auf dieser Seite
Bausteine
Jede Seite in XICflow besteht aus Bausteinen: Kopfbereich, Überschrift, Text, Karten, Preise, Formular. Dieses Kapitel führt alle 76 Bausteine mit sämtlichen Einstellungen auf. Hier auf der Übersicht steht zuerst, was für alle gilt — die Referenz selbst liegt auf sechs Teil-Seiten.
Was ein Baustein ist
Ein Baustein ist ein Stück Seite mit einer festen Aufgabe und einer festen Liste von Einstellungen.
Im Editor fügen Sie Bausteine links über den Katalog „Bausteine" ein; rechts im Reiter
„Eigenschaften" füllen Sie ihre Felder. Jeder Baustein hat einen Schlüssel — etwa feature-grid —, unter dem er überall dasselbe bedeutet: im Editor, in den Vorlagen und in den Anweisungen
an den KI-Assistenten.
Was ein Baustein annimmt, ist festgelegt. Ein Feld, das in seiner Tabelle nicht steht, kennt er nicht und verwirft es beim Speichern. Deshalb sind die Tabellen in diesem Kapitel vollständig: sie zeigen alles, was ein Baustein aufnimmt, und nichts darüber hinaus.
Hat ein Baustein mehrere Darstellungen, erscheint im Inspektor oben die Gruppe „Layout". Sie
schreibt auf das Feld layout, das Sie in der Tabelle des Bausteins mit allen möglichen Werten wiederfinden.
Abschnitt und Inhalt: welche Bausteine zusammengehören
Bausteine stehen nicht nur untereinander — sie bilden Abschnitte. Daran hängt, was optisch als Einheit wirkt.
Eine Seite besteht aus Abschnitten. Ein neuer Abschnitt beginnt bei einem Baustein der Kategorie Abschnitts-Beginn oder ganz am Anfang der Seite; alle Bausteine der Kategorie Im Abschnitt hängen sich an den Abschnitt darüber an. Eigenständige Bausteine stehen außerhalb dieser Abschnitte über die volle Breite. Die Abschnitte bekommen abwechselnd einen leicht getönten Hintergrund.
| Einordnung | Anzahl | Bedeutung |
|---|---|---|
| Eigenständig | 6 | Läuft über die volle Breite und bringt seinen eigenen Hintergrund mit. |
| Abschnitts-Beginn | 22 | Eröffnet einen neuen Abschnitt; die folgenden Inline-Bausteine gehören optisch dazu. |
| Im Abschnitt | 42 | Hängt sich an den Abschnitt darüber an, statt einen neuen zu beginnen. |
| Rahmen | 6 | Gehört in den Kopf- oder Fußbereich der Website, nicht in den Seiteninhalt. |
Was wir machen
Die Überschrift eröffnet den Abschnitt. Dieser Text und das Raster darunter hängen sich an sie an, statt jeweils einen eigenen Abschnitt zu beginnen.
Planen
Erster Punkt des Rasters.
Bauen
Zweiter Punkt, ähnlich lang.
Betreuen
Dritter Punkt füllt die Reihe.
Bausteine, die einen Abschnitt eröffnen
Diese Bausteine beginnen jeweils einen neuen Abschnitt. Alles, was danach kommt und selbst keinen Abschnitt eröffnet, gehört dazu — bis zum nächsten Eintrag aus dieser Liste:
Überschrift, FAQ, Stimmen, Kontaktformular, Formular, Öffnungszeiten, Galerie, Video, Newsletter, Schritte, Countdown, Kennzahl-Karten, CTA-Split, Tabs, Aufklapp-Liste, Preis-Umschalter, Stimmen-Slider, Bewertungen, Blog-Liste, Telefon-Band, Verwandte Beiträge, Verwandte Links.
Bausteine über die volle Breite
Diese Bausteine stehen außerhalb der Abschnitte und bringen ihren Hintergrund selbst mit: Hero, Metrik-Band, CTA-Band, KI-Assistent-Demo, Spalten, CMS-Liste.
Reihenfolge zuerst, Feinheiten danach
Wenn zwei Bausteine optisch nicht zusammengehören, obwohl sie es sollen, liegt meistens ein Baustein dazwischen, der einen neuen Abschnitt eröffnet. Verschieben Sie ihn in der Liste „Aufbau", bevor Sie an Abständen drehen.
Einstellungen, die jeder Baustein hat
Neben ihren eigenen Feldern kennen alle Bausteine dieselben Gestaltungs-Einstellungen. Sie stehen deshalb nicht in jeder Tabelle.
_style— Gestaltung des Bausteins: Ausrichtung, Abstände, Sichtbarkeit je Gerät und eigenes CSS.columnsByBp— Spaltenzahl je Bildschirmgröße; ohne Angabe gilt die Grundeinstellung des Bausteins. Diese Einstellung gibt es nur bei Bausteinen mit dem Feld columns.
Die Struktur von _style ist offen — welche Angaben darin tatsächlich wirken, entscheidet die Darstellung des jeweiligen
Bausteins. Im Inspektor erreichen Sie diese Einstellungen unterhalb der Felder: unter „Stil" legen Sie
mit „Sichtbar auf" fest, auf welchen Geräten der Baustein erscheint (Mobil, Tablet, Desktop).
Unter „Flow Design · Pro" stellen Sie Hintergrund, Bildausschnitt, Overlay, Textfarbe,
Effekte und Animation ein. Der „Pro-Modus" öffnet zusätzlich die CSS-Feinheiten und lässt
sich auf ein einzelnes Element des Bausteins richten — etwa nur auf Karte, Bild, Icon, Titel,
Text, Button oder Meta.
Bausteine mit Listen haben dieselbe Möglichkeit eine Ebene tiefer: Jeder Eintrag kann ein
eigenes _style tragen, damit sich zum Beispiel eine einzelne Karte auf dem Handy ausblenden lässt.
So lesen Sie die Tabellen
Auf den Teil-Seiten hat jeder Baustein eine Tabelle mit allen seinen Einstellungen. Die fünf Spalten bedeuten immer dasselbe.
- Einstellung — der Name des
Feldes. Ein Punkt trennt Untergruppen (
cta.text), eckige Klammern stehen für eine Liste:items[].titleist das Feld „title" in jedem Eintrag der Liste „items". - Art — Text, Zahl, Ja/Nein, Auswahl, Liste oder Gruppe. Bei „Auswahl" stehen die möglichen Werte in der Spalte „Bedeutung".
- Pflicht — ob der Baustein das Feld braucht. Optionale Felder dürfen leer bleiben.
- Vorgabe — der Wert, mit dem das Feld startet. Ein Strich bedeutet: keine Vorgabe. Der Zusatz „(Darstellung)" heißt, dass der Wert erst beim Anzeigen greift, wenn Sie das Feld leer lassen.
- Bedeutung — wofür das Feld da ist.
Formatierungen in Textfeldern
In den Textfeldern der Bausteine funktionieren dieselben Auszeichnungen wie beim Bearbeiten in der Vorschau:
==Text==— farbiger Akzent in der Markenfarbe**Text**— fett*Text*— kursiv`Text`— als Code hervorgehoben[Text](/ziel/)— Link; erlaubt sind Adressen mit http, https, mailto und tel sowie Ziele, die mit / oder # beginnen- Eine Leerzeile beginnt einen neuen Absatz, ein einfacher Zeilenumbruch bleibt ein Umbruch.
Alle Bausteine auf einen Blick
Die vollständige Liste mit 424 Einstellungen insgesamt. Der Name führt zum ausführlichen Eintrag mit der Tabelle.
| Baustein | Schlüssel | Wofür | Einordnung | Einstellungen | Teil |
|---|---|---|---|---|---|
| Hero | hero | Kopfbereich einer Seite mit der H1, einem kurzen Untertitel und bis zu zwei Buttons. | Eigenständig | 12 | Basis |
| Kennzahlen | stats-bar | Waagerechte Leiste mit wenigen Kennzahlen; Preise gehören nicht hierher. | Im Abschnitt | 5 | Basis |
| Überschrift | heading | Zwischenüberschrift, die einen neuen Abschnitt der Seite eröffnet. | Abschnitts-Beginn | 3 | Basis |
| Text | paragraph | Fließtext für den Hauptteil einer Seite. | Im Abschnitt | 1 | Basis |
| Feature-Grid | feature-grid | Raster aus Leistungen oder Vorteilen, je mit Symbol, Titel und Text. | Im Abschnitt | 6 | Basis |
| Preis-Anker | price-band | Ein einzelner, prominenter Preis mit Nutzenpunkten und Button. | Im Abschnitt | 11 | Basis |
| Leistungsliste | price-list | Liste einzelner Leistungen mit Preis, nach Art einer Speise- oder Behandlungskarte. | Im Abschnitt | 9 | Basis |
| FAQ | faq | Häufige Fragen mit Antworten; der Baustein liefert zusätzlich das FAQPage-Schema der Seite. | Abschnitts-Beginn | 3 | Basis |
| CTA | promo | Abschließender Aufruf zur Handlung; er wird im Fußbereich der Seite ausgegeben. | Im Abschnitt | 5 | Basis |
| Einleitung | intro | Hervorgehobener Einleitungstext am Anfang einer Seite oder eines Beitrags. | Im Abschnitt | 1 | Text und Struktur |
| Zitat | quote | Hervorgehobenes Zitat mit Quellenangabe. | Im Abschnitt | 2 | Text und Struktur |
| Hervorhebung | highlight | Kurzer, farbig abgesetzter Textblock für eine wichtige Aussage. | Im Abschnitt | 2 | Text und Struktur |
| Kernaussagen | key-takeaways | Kasten mit den wichtigsten Punkten in Kürze, vor allem für Blogbeiträge. | Im Abschnitt | 2 | Text und Struktur |
| Liste | list | Aufzählung als Punkte, Nummern oder Häkchenliste. | Im Abschnitt | 2 | Text und Struktur |
| Hinweisbox | callout | Farbig abgesetzter Kasten für Hinweise, Tipps oder Warnungen. | Im Abschnitt | 3 | Text und Struktur |
| Trennlinie | divider | Waagerechte Linie zwischen zwei Abschnitten. | Im Abschnitt | 2 | Text und Struktur |
| Code | code | Codeblock mit Dateikopf für technische Inhalte. | Im Abschnitt | 3 | Text und Struktur |
| Terminal | terminal | Darstellung von Befehlen und ihrer Ausgabe wie in einer Eingabeaufforderung. | Im Abschnitt | 4 | Text und Struktur |
| Bild | image | Einzelnes Bild mit optionaler Unterschrift. | Im Abschnitt | 3 | Text und Struktur |
| Spalten | columns | Container, der andere Bausteine nebeneinander in Spalten stellt. | Eigenständig | 4 | Grids und Karten |
| Icon-Karten | icon-cards | Karten mit großem Symbol, kurzem Text und optionalem Link. | Im Abschnitt | 8 | Grids und Karten |
| Stimmen | testimonial | Kundenstimmen als Zitatkarten nebeneinander. | Abschnitts-Beginn | 4 | Grids und Karten |
| Stimmen-Slider | testimonial-slider | Kundenstimmen einzeln nacheinander zum Durchblättern. | Abschnitts-Beginn | 6 | Grids und Karten |
| Fakten-Band | fact-band | Eine einzelne große Aussage mit hervorgehobener Kennzahl. | Im Abschnitt | 4 | Grids und Karten |
| Trust-Badges | trust-badges | Reihe kurzer Vertrauensmerkmale wie Zertifikate oder Zusagen. | Im Abschnitt | 3 | Grids und Karten |
| Logo-Wall | logo-wall | Leiste mit Kunden- oder Partnerlogos als Vertrauensbeleg. | Im Abschnitt | 5 | Grids und Karten |
| Team | team-grid | Vorstellung der Personen hinter dem Betrieb mit Foto, Rolle und Kurzvorstellung. | Im Abschnitt | 8 | Grids und Karten |
| Öffnungszeiten | opening-hours | Tabelle der Öffnungszeiten je Wochentag. | Abschnitts-Beginn | 5 | Grids und Karten |
| Social-Links | social-links | Reihe verlinkter Profil-Symbole der sozialen Netzwerke. | Im Abschnitt | 6 | Grids und Karten |
| Schritte | steps | Nummerierte Schrittfolge ohne Interaktion, etwa für einen Ablauf. | Abschnitts-Beginn | 5 | Grids und Karten |
| Kennzahl-Karten | stat-cards | Kennzahlen als eigenständige Karten im Raster. | Abschnitts-Beginn | 7 | Grids und Karten |
| Akkordeon | accordion | Aufklappbare Abschnitte für beliebige Inhalte; ohne FAQ-Auszeichnung. | Im Abschnitt | 3 | Grids und Karten |
| Aufklapp-Liste | disclosure | Aufklappbare Einträge für Zusatzinformationen; funktioniert ohne Skript. | Abschnitts-Beginn | 4 | Grids und Karten |
| Tabs | content-tabs | Mehrere Textblöcke hinter Reitern; ohne Skript ist der erste Reiter offen. | Abschnitts-Beginn | 5 | Grids und Karten |
| Zeitstrahl | timeline | Senkrechte Zeitachse für einen Ablauf oder die Geschichte des Betriebs. | Im Abschnitt | 5 | Grids und Karten |
| Prozess-Schritte | process-steps | Ablauf in Schritten, auf breiten Bildschirmen mit Reitern zum Durchklicken. | Im Abschnitt | 4 | Grids und Karten |
| Metrik-Band | metric-band | Vollbreites Band mit mehreren Kennzahlen, die beim Scrollen hochzählen. | Eigenständig | 8 | Grids und Karten |
| Mini-Fälle | mini-cases | Anonymisierte Projektverläufe nach dem Muster Ausgangslage, Maßnahme, Ergebnis. | Im Abschnitt | 7 | Grids und Karten |
| Split-Feature | split-feature | Abschnitte aus Text und Bildfläche, abwechselnd links und rechts. | Im Abschnitt | 9 | Grids und Karten |
| Gegenüberstellung | vs-cards | Zwei oder mehr Ansätze als Karten nebeneinander, je mit Plus- und Minuspunkten. | Im Abschnitt | 9 | Grids und Karten |
| Feature-Tabs | feature-tabs | Große Leistungsumfänge nach Reitern gruppiert. | Im Abschnitt | 9 | Grids und Karten |
| CTA-Band | cta-band | Vollbreiter Aufruf zur Handlung mitten auf der Seite, mit einem oder zwei Buttons. | Eigenständig | 8 | Conversion und CTA |
| CTA-Split | cta-split | Aufruf zur Handlung mit Text und Buttons nebeneinander in einer Zeile. | Abschnitts-Beginn | 7 | Conversion und CTA |
| Hinweis-Band | announcement | Schmale farbige Leiste für eine Ankündigung mit optionalem Link. | Im Abschnitt | 5 | Conversion und CTA |
| Countdown | countdown | Zähler, der live auf ein Datum herunterläuft. | Abschnitts-Beginn | 4 | Conversion und CTA |
| Button | button | Einzelner Button mitten im Inhalt. | Im Abschnitt | 3 | Conversion und CTA |
| Button-Gruppe | buttons | Mehrere Buttons nebeneinander. | Im Abschnitt | 4 | Conversion und CTA |
| Preistabelle | pricing-table | Pakete oder Tarife nebeneinander; hier gehören Preise hin. | Im Abschnitt | 16 | Conversion und CTA |
| Preis-Umschalter | pricing-toggle | Tarife mit Umschalter zwischen monatlichem und jährlichem Preis. | Abschnitts-Beginn | 14 | Conversion und CTA |
| Telefon-Band | phone-band | Band mit großer Rufnummer für Anrufe als Hauptweg der Kontaktaufnahme. | Abschnitts-Beginn | 8 | Conversion und CTA |
| Kontaktformular | contact-form | Vorgefertigtes Kontaktformular; die Eingaben landen als Anfrage im Konto. | Abschnitts-Beginn | 7 | Conversion und CTA |
| Formular | form | Frei zusammengestelltes Formular; die Felder legen Sie selbst fest. | Abschnitts-Beginn | 12 | Conversion und CTA |
| Newsletter | newsletter | Schlanke Anmeldung für den Newsletter; die Anmeldung landet als Anfrage im Konto. | Abschnitts-Beginn | 5 | Conversion und CTA |
| Galerie | gallery | Bildraster für Arbeitsproben, Räume oder Produkte. | Abschnitts-Beginn | 10 | Medien und Showcase |
| Video | video-embed | Video auf der Seite; extern gehostete Videos öffnen erst nach Klick. | Abschnitts-Beginn | 5 | Medien und Showcase |
| Downloads | download-cards | Karten mit herunterladbaren Dateien wie Preislisten oder Merkblättern. | Im Abschnitt | 8 | Medien und Showcase |
| Mockup | mockup | Gerahmte Bildschirm-Darstellung aus eigenem HTML oder SVG. | Im Abschnitt | 5 | Medien und Showcase |
| Servicegebiet | area-map | Darstellung des Einzugsgebiets mit Ortsliste, ohne Kartendienst von außen. | Im Abschnitt | 7 | Medien und Showcase |
| KI-Assistent-Demo | assistant-demo | Vorführung des Chat-Assistenten direkt auf der Seite. | Eigenständig | 3 | Medien und Showcase |
| Vorher-Nachher | before-after | Zwei Bilder mit Schieberegler, um ein Ergebnis zu zeigen. | Im Abschnitt | 8 | Medien und Showcase |
| Bild mit Punkten | image-hotspots | Ein Foto, in dem einzelne Stellen mit Punkten erklärt werden. | Im Abschnitt | 8 | Medien und Showcase |
| CMS-Liste | collection-list | Listet die veröffentlichten Einträge eines eigenen Inhaltstyps. | Eigenständig | 5 | Inhalte, Blog und Kontext |
| Blog-Liste | blog-list | Liste der veröffentlichten Blogbeiträge mit Filter und Seitenblättern. | Abschnitts-Beginn | 5 | Inhalte, Blog und Kontext |
| Inhaltsverzeichnis | toc | Verzeichnis der Abschnitte; es entsteht automatisch aus den Überschriften der Stufe 2. | Im Abschnitt | 0 | Inhalte, Blog und Kontext |
| Beitrags-Mockup | featured-mockup | Zeigt die Grafik des Blogbeitrags; der Inhalt kommt aus dem Beitrag selbst. | Im Abschnitt | 0 | Inhalte, Blog und Kontext |
| Verwandte Beiträge | related-posts | Verweise auf Blogbeiträge mit ähnlichen Schlagwörtern; die Auswahl entsteht beim Bauen. | Abschnitts-Beginn | 1 | Inhalte, Blog und Kontext |
| Verwandte Links | related-links | Gesammelte Verweise auf andere Seiten, wahlweise flach oder in Gruppen. | Abschnitts-Beginn | 15 | Inhalte, Blog und Kontext |
| Vergleichstabelle | comparison | Tabelle zum Vergleich mehrerer Angebote oder Varianten. | Im Abschnitt | 2 | Inhalte, Blog und Kontext |
| Bewertungen | ratings | Sterne-Bewertungen mit Gesamtnote und einzelnen Rezensionen. | Abschnitts-Beginn | 13 | Inhalte, Blog und Kontext |
| Rechtslinks | footer-legal | Die Pflichtlinks der Fußzeile. Sie kommen aus den Rechtsseiten, die die Website wirklich führt — mit übersetzter Beschriftung und passendem Pfad je Sprache. Von Hand eingetragen wäre der häufigste Fehler ein fehlendes Impressum, und bemerkt würde er erst bei einer Abmahnung. | Rahmen | 5 | Inhalte, Blog und Kontext |
Gezählt sind 70 von 83 Bausteinen des Katalogs; die Zahl in der Spalte „Einstellungen" enthält auch die Felder innerhalb von Listen und Gruppen.