Auf dieser Seite
Editor und Seiten
Der Editor ist der Ort, an dem Ihre Website entsteht: Hier legen Sie Seiten an, füllen sie mit Bausteinen und sehen sofort, wie das Ergebnis aussieht. Alles, was Sie ändern, wird automatisch gespeichert — auf der öffentlichen Website erscheint es aber erst, wenn Sie oben rechts auf „Veröffentlichen" klicken.
Der Aufbau des Editors
Der Editor ist in drei Spalten geteilt: links die Seiten und der Baustein-Katalog, in der Mitte die Vorschau, rechts die Einstellungen.
- Links: Unter „Seiten" stehen alle Seiten der Website, darunter „Vorlagen einfügen", „Meine Vorlagen", der Katalog „Bausteine" und ganz unten die Liste „Aufbau" mit den Bausteinen der geöffneten Seite.
- Mitte: Die Vorschau. Sie zeigt die Seite so, wie Besucher sie sehen werden, und lässt sich direkt bearbeiten.
- Rechts: Der Inspektor mit den Reitern „Eigenschaften" für die Einstellungen des gewählten Bausteins und „KI" für den Assistenten.
Darüber liegt die Kopfzeile mit dem Website-Wechsler, dem Seitentitel und den Knöpfen für Rückgängig, Versionen, Speicherstand und Veröffentlichen. Der nächste Abschnitt nimmt sie Stück für Stück auseinander.
Auf Handy und Tablet sind die Seitenspalten eingeklappt; die Leiste am unteren Rand öffnet sie mit „Aufbau" und „Eigenschaften". Es ist immer nur eine der beiden Spalten offen, ein Klick auf die abgedunkelte Fläche daneben oder die Escape-Taste schließt sie wieder. Ist ein Baustein ausgewählt, trägt „Eigenschaften" einen kleinen Punkt.
Der Titel des Browser-Tabs folgt dem, woran Sie gerade arbeiten: Seitentitel, Name der Website und XICflow, durch Mittelpunkte getrennt. Eine Seite ohne Titel erscheint dort als „Ohne Titel".

Die Kopfzeile
In der Kopfzeile liegt alles, was für die ganze Website oder die ganze Seite gilt — von links nach rechts gelesen.
- Website-Wechsler
- Zeigt Anfangsbuchstabe, Name und Zustand der geöffneten Website („Live", „Entwurf" oder „Archiviert") sowie darunter deren Adresse. Ein Klick öffnet die Liste „Deine Sites".
- Seitentitel
- Das Eingabefeld mit dem Titel der geöffneten Seite.
- Befehle
- Öffnet die Befehlsleiste; daneben steht das Kürzel ⌘K. Auf schmalen Bildschirmen ist der Knopf ausgeblendet, das Tastenkürzel gilt trotzdem.
- Rückgängig und Wiederherstellen
- Die beiden Pfeile. Sie sind ausgegraut, solange es nichts zurückzunehmen beziehungsweise nichts wiederherzustellen gibt.
- Versionsverlauf
- Das Uhr-Symbol; öffnet die gesicherten Stände der Website.
- Aktivität
- Das Klemmbrett-Symbol; öffnet die Historie „Wer hat wann was getan".
- Speicheranzeige
- Zeigt „gespeichert" oder — wenn es klemmt — „Nicht gespeichert" mit „Erneut versuchen".
- Veröffentlichen
- Startet die Veröffentlichung. Währenddessen steht dort „Veröffentlichung läuft…", danach „Veröffentlicht" mit der Adresse der Website.
- App-Design hell/dunkel
- Schaltet die Oberfläche des Editors um („Zu dunklem Design wechseln" beziehungsweise „Zu hellem Design wechseln"). Das Aussehen Ihrer Website ändert sich dadurch nicht.
- Konto
- Das Kreissymbol ganz rechts mit den übrigen Bereichen und „Abmelden".
Ohne ausgewählte Website sind „Veröffentlichen", „Versionsverlauf" und „Aktivität" gesperrt — sie beziehen sich immer auf eine bestimmte Website.
Schlägt das Veröffentlichen fehl, erscheint an derselben Stelle die Fehlermeldung des Servers, ersatzweise „Veröffentlichen fehlgeschlagen". Was beim Veröffentlichen genau passiert, steht im Kapitel „Veröffentlichen und eigene Domain".
Seiten anlegen, umbenennen, sortieren und löschen
Jede Website besteht aus Seiten und Beiträgen. Beide legen Sie in der linken Spalte an und ordnen sie dort auch.
-
Klicken Sie in der linken Spalte unten auf „Seite hinzufügen".
-
Wählen Sie den Typ: „Seite" oder „Beitrag".
„Seite" ist der Normalfall — eine Unterseite wie „Über uns" oder „Kontakt". „Beitrag" ist ein Blogbeitrag und wird unterhalb von „/blog/" abgelegt.
-
Tragen Sie im Feld einen Titel ein („Seitentitel…" beziehungsweise „Beitragstitel…").
-
Klicken Sie auf „Anlegen". Mit „Abbrechen" verwerfen Sie die Eingabe.
Die neue Seite wird sofort geöffnet; aus dem Titel entsteht automatisch ihre Adresse.
Was in der Liste steht
Über der Liste steht „Seiten" und rechts daneben die Anzahl. Jede Zeile zeigt ein Symbol — ein Haus für die Startseite, sonst ein Blatt —, den Titel, bei Blogbeiträgen die Kennzeichnung „Beitrag", einen farbigen Punkt für den Status („Veröffentlicht" oder „Entwurf") und darunter die Adresse der Seite. Hat eine Seite noch keinen Titel, steht dort ersatzweise ihre Adresse oder schlicht „Seite". Gibt es noch nichts, steht dort „Noch keine Seiten."; während des Ladens erscheinen graue Platzhalter.
Neue Seiten starten als Entwurf — erkennbar am kleinen Punkt neben dem Titel, dessen Beschriftung „Entwurf" oder „Veröffentlicht" lautet.
Umbenennen
Öffnen Sie die Seite und ändern Sie in der Kopfzeile das Feld „Seitentitel". Der neue Titel wird kurz darauf automatisch gespeichert; die Adresse der Seite bleibt unverändert.
Sortieren, Startseite, Entwurf und Löschen
Jede Zeile der Seitenliste hat rechts ein Menü mit drei Punkten. Ein Klick darauf öffnet die Aktionen:
- „Nach oben" und „Nach unten" ändern die Reihenfolge in der Liste.
- „Veröffentlichen" beziehungsweise „Auf Entwurf setzen" schaltet den Status um. Seiten im Entwurf bleiben beim Veröffentlichen außen vor.
- „SEO & Meta" öffnet die Suchmaschinen-Einstellungen dieser Seite.
- „Als Startseite" macht die Seite zur Startseite. Es gibt immer genau eine.
- „Löschen" entfernt die Seite, nach der Rückfrage „Seite löschen?" mit „Löschen" oder „Abbrechen".
Die Reihenfolge in dieser Liste ist die Reihenfolge der Seiten Ihrer Website. Löschen Sie die gerade geöffnete Seite, wechselt der Editor selbständig auf die Startseite beziehungsweise auf die erste verbleibende Seite.
Unterseiten
Die Adresse einer Seite entsteht aus ihrem Titel. Beiträge legt der Editor unterhalb von „/blog/" ab, alle übrigen Seiten direkt unter der Hauptadresse. Gibt es den Pfad schon, hängt der Editor eine Ziffer an. Eine tiefere Verschachtelung — also Seiten unterhalb anderer Seiten — richtet der Editor nicht selbst ein; wo eine Seite im Menü erscheint, legen Sie im Bereich „Header & Footer" fest.
Die Startseite ist geschützt
Die Startseite lässt sich weder löschen („Startseite kann nicht gelöscht werden") noch auf Entwurf setzen. Bestimmen Sie dafür zuerst eine andere Seite über „Als Startseite".
Bausteine einfügen, verschieben und entfernen
Eine Seite besteht aus Bausteinen, die untereinander liegen — zum Beispiel „Hero", „Feature-Grid" oder „Kontaktformular".
-
Klappen Sie links unter „Bausteine" eine Kategorie auf.
-
Klicken Sie auf den gewünschten Baustein.
Er wird unten an die Seite angehängt und ist sofort ausgewählt.
-
Bearbeiten Sie ihn rechts im Reiter „Eigenschaften".
Im Katalog „Bausteine" sind sie nach Kategorien sortiert; die Ziffer neben dem Namen nennt, wie viele Bausteine die Kategorie enthält. Beim Öffnen des Editors ist „Basis" aufgeklappt, die übrigen Kategorien klappen Sie bei Bedarf auf.
| Kategorie | Anzahl | Bausteine |
|---|---|---|
| Basis | 9 | Hero, Kennzahlen, Überschrift, Text, Feature-Grid, Preis-Anker, Leistungsliste, FAQ, CTA |
| Text & Struktur | 10 | Einleitung, Zitat, Hervorhebung, Kernaussagen, Liste, Hinweisbox, Trennlinie, Code, Terminal, Bild |
| Grids & Karten | 22 | Spalten, Icon-Karten, Stimmen, Stimmen-Slider, Fakten-Band, Trust-Badges, Logo-Wall, Team, Öffnungszeiten, Social-Links, Schritte, Kennzahl-Karten, Akkordeon, Aufklapp-Liste, Tabs, Zeitstrahl, Prozess-Schritte, Metrik-Band, Mini-Fälle, Split-Feature, Gegenüberstellung, Feature-Tabs |
| Conversion & CTA | 12 | CTA-Band, CTA-Split, Hinweis-Band, Countdown, Button, Button-Gruppe, Preistabelle, Preis-Umschalter, Telefon-Band, Kontaktformular, Formular, Newsletter |
| Medien & Showcase | 8 | Galerie, Video, Downloads, Mockup, Servicegebiet, KI-Assistent-Demo, Vorher-Nachher, Bild mit Punkten |
| Inhalte (CMS) | 1 | CMS-Liste |
| Blog & Kontext | 6 | Blog-Liste, Inhaltsverzeichnis, Beitrags-Mockup, Verwandte Beiträge, Verwandte Links, Vergleichstabelle |
Was jeder einzelne Baustein kann und welche Einstellungen er mitbringt, steht im eigenen Kapitel zu den Bausteinen. Hier geht es nur um den Umgang mit ihnen.
Unsere Leistungen
Beratung
Ein bis zwei Sätze, die das Angebot in klarer Sprache beschreiben.
Umsetzung
Der zweite Punkt derselben Reihe — ähnliche Längen wirken am ruhigsten.
Betreuung
Drei Karten füllen die Reihe vollständig aus, deshalb sind sie voreingestellt.
Ist die Seite noch leer, steht in der Vorschau „Noch keine Bausteine" mit dem Hinweis „Füge links einen Baustein hinzu." und den Knöpfen „Vorlagen einfügen" und „Mit KI erstellen".
Verschieben, duplizieren, entfernen
Die Liste „Aufbau" zeigt alle Bausteine der Seite in ihrer Reihenfolge. Ein Klick auf einen Eintrag wählt ihn aus und zeigt ihn in der Vorschau; rechts daneben liegen die Knöpfe für „nach oben", „nach unten", Duplizieren und „löschen". Sie können die Einträge auch mit der Maus greifen und an die gewünschte Stelle ziehen — daran erinnert der Hinweis „ziehen zum Sortieren".
Ein Duplikat wird direkt unter dem Original eingefügt und ist danach ausgewählt. Ist die Liste leer, steht dort „Noch keine Bausteine."
Dasselbe geht direkt in der Vorschau: Ein einfacher Klick wählt einen Baustein aus, danach erscheint an ihm eine Leiste mit „Nach oben", „Nach unten", „Duplizieren", „Einstellungen" und „Löschen".
Bausteine nebeneinander stellen
Für zwei oder mehr Bausteine nebeneinander gibt es den Baustein „Spalten" aus der Kategorie „Grids & Karten". Er nimmt andere Bausteine in seinen Zellen auf; wie Sie ihn füllen, steht weiter unten unter „Der Inspektor rechts".
Text direkt in der Vorschau ändern
Ein Doppelklick auf einen Text in der Vorschau macht ihn direkt beschreibbar. Dabei erscheint eine zweite Leiste mit „Fett", „Kursiv", „Akzent" und „Link" — bei „Link" tragen Sie die Adresse ein und bestätigen mit „Übernehmen".
Tastatur beim Bearbeiten in der Vorschau
Die Eingabetaste beendet das Bearbeiten, Umschalt+Eingabe erzeugt einen Zeilenumbruch, Escape verwirft die Änderung.
Der Inspektor rechts
Die rechte Spalte gehört immer genau einem Baustein. Sie hat zwei Reiter: „Eigenschaften" und „KI".
Ohne Auswahl steht dort „Wähle links oder in der Vorschau einen Baustein aus." Sobald ein Baustein ausgewählt ist, nennt die Zeile ganz oben seinen Namen, darunter folgen seine Felder. Zwischen den beiden Reitern wechseln Sie mit der Maus oder mit den Pfeiltasten links und rechts. Was im Reiter „KI" passiert, steht im Kapitel „Mit der KI arbeiten".
Felder
Je nach Baustein erscheinen einzeilige Felder, mehrzeilige Textfelder, Schalter, Auswahl-Pillen und Listen von Karten. Bei Listen bearbeiten Sie jede Karte einzeln; die kleinen Knöpfe an einer Karte heißen „Nach oben", „Nach unten" und „Duplizieren". Bilder wählen Sie über die Bildquelle aus — dazu mehr im Kapitel „Inhalte, Mediathek und Blog".
Bausteine ohne eigenen Text weisen darauf hin, statt ein leeres Formular zu zeigen: bei der Trennlinie „Ein Trenner hat keinen bearbeitbaren Inhalt — Abstand, Linie und Stil passt du unten an.", beim Inhaltsverzeichnis „Das Inhaltsverzeichnis wird automatisch aus den Überschriften der Seite erzeugt.", beim Beitrags-Mockup „Die Vorschau-Grafik wird automatisch erzeugt — hier gibt es nichts einzustellen." und sonst „Dieser Baustein hat keine Textfelder — passe Layout, Abstand und Stil unten an."
Layout, Stil und Pro-Modus
Unter den Feldern folgen immer dieselben Abschnitte: „Layout" mit den Darstellungsvarianten des Bausteins (sofern er welche hat), „Stil" für Abstand, Ausrichtung und Farbfläche, „Flow Design · Pro" für Verläufe, Muster und Effekte sowie der Schalter „Pro-Modus · jedes CSS-Detail", der rechts „an" oder „aus" anzeigt.
Ist der Pro-Modus an, erscheint darüber die Auswahl „Wirkt auf". Damit legen Sie fest, worauf sich die folgenden Einstellungen beziehen: auf den „Ganzen Block" oder auf ein einzelnes Element daraus — „Karte", „Bild", „Icon", „Titel", „Text", „Button" oder „Zusatz". Welche Elemente angeboten werden, hängt vom Baustein ab. Die Vorschau-Breite bestimmt dabei mit, für welchen Bildschirm die Angaben gelten: Desktop, Tablet und Mobil lassen sich getrennt einstellen.
Bausteine mit eigenem Aufbau
Vier Bausteine bringen im Inspektor eine eigene Bedienung mit:
- Spalten
- Oben wählen Sie unter „Layout" die Aufteilung, darunter unter „Abstand" zwischen „Eng", „Normal" und „Weit". Für jede Zelle gibt es einen eigenen Kasten „Spalte 1", „Spalte 2" und so fort mit den Knöpfen „Spalte schmaler" und „Spalte breiter" (die Zahl dazwischen ist die „Breite (fr)", also das Größenverhältnis der Spalten) sowie „Spalte entfernen". Mit „+ Baustein" füllen Sie eine Zelle, mit „+ Spalte" kommt eine weitere Spalte dazu — bis zu sechs. Ein Klick auf einen Baustein in der Zelle klappt seine einfachen Felder auf; hat er keine, steht dort „Keine einfachen Felder." beziehungsweise „Zum vollen Bearbeiten den Baustein direkt in der Vorschau anklicken." Ist ein Baustein innerhalb einer Spalte ausgewählt, meldet der Inspektor oben „In Reihe · Spalte 2"; „Zur Reihe" springt zurück zum umgebenden Spalten-Baustein.
- Vergleichstabelle
- Unter „Spaltenköpfe" tragen Sie die Überschriften ein, „+ Spalte" ergänzt eine weitere (bis zu sechs). Darunter folgen die „Zeilen": „+ Zeile" legt eine an, die Pfeile sortieren sie, das Kreuz löscht sie. Ohne Inhalt steht dort „Noch keine Zeilen — „+ Zeile" hinzufügen." Der Hinweis am Ende erklärt die Schreibweise: Werte wie „inklusive" oder „—" werden in der Vorschau als Häkchen beziehungsweise Strich dargestellt, jeder andere Text bleibt Text, und die erste Spalte ist immer die Merkmal-Spalte.
- Formular
- Unter „Formular-Felder" legt „+ Feld" ein Feld an. Je Feld gibt es die „Feldbezeichnung", den „Feldtyp" — „Text", „E-Mail", „Telefon", „Textbereich", „Zahl", „Auswahl", „Checkbox" oder „Einwilligung" —, den Schalter „Pflicht" und, außer bei Checkbox und Einwilligung, einen „Platzhalter (optional)". Beim Typ „Auswahl" kommt das Feld „Optionen, Komma-getrennt" hinzu. Ohne Felder steht dort „Noch keine Felder — „+ Feld" hinzufügen."
- CMS-Liste
- Unter „Collection" wählen Sie die Inhaltssammlung aus, die angezeigt werden soll („— auswählen —"). Gibt es noch keine, steht dort „Noch keine Collections. Lege unter Inhalte (CMS) eine an." Darunter folgen „Überschrift (optional)" — leer greift der Name der Collection —, „Darstellung" mit „Raster" oder „Liste", beim Raster die „Spalten" 2, 3 oder 4 und „Maximale Anzahl (0 = alle)".
Vorlagen
Vorlagen sind fertige Zusammenstellungen von Bausteinen; sie lassen sich anschließend frei ändern.
-
Klicken Sie links auf „Vorlagen einfügen".
-
Wählen Sie oben eine Kategorie: „Startpunkte", „Premium-Seiten", „Branchen", „Seitentypen" oder „Sektionen".
-
Klicken Sie die passende Karte an („Übernehmen").
Auf jeder Karte stehen Name, Beschreibung und die Anzahl der Bausteine.
| Kategorie | Inhalt |
|---|---|
| Startpunkte | Ganzseitige Grundgerüste zum schnellen Loslegen. |
| Premium-Seiten | Hochwertige, ganzseitige Vorlagen für SaaS, Agentur, Portfolio, Event und mehr. |
| Branchen | Fertige Landingpages je Branche — übernehmen und anpassen. |
| Seitentypen | Einzelseiten wie Über uns, Leistungen, Preise, Kontakt. |
| Sektionen | Kleine Bausteine zum Einschieben — Hero, Features, Preise, FAQ. |
Über der Kategorie-Auswahl steht „Schnellstart · Vorlagen" mit dem Satz „Wählen Sie eine Vorlage als Startpunkt oder schieben Sie eine Sektion ein." Unter Name und Beschreibung jeder Karte sitzen kleine Marken, die die enthaltenen Bausteine benennen — etwa „Hero", „Kennzahlen", „Überschrift", „Einleitung", „Text", „Features", „Vergleich", „Hinweis", „Preis", „FAQ", „Formular" und „CTA".
Die Bausteine der Vorlage werden an das angehängt, was bereits auf der Seite steht — vorhandene Inhalte gehen also nicht verloren. Passt das Ergebnis nicht, hilft „Rückgängig". Das Fenster schließen Sie mit dem Kreuz, mit Escape oder mit einem Klick auf die Fläche daneben.
- 1
Anfrage
Sie schildern kurz, worum es geht.
- 2
Termin
Wir stimmen einen Termin ab und klären offene Punkte.
- 3
Umsetzung
Die Arbeiten laufen an, Sie bleiben auf dem Laufenden.
Meine Vorlagen
Eigene Bausteine sichern Sie als Vorlage, indem Sie einen Baustein auswählen, links „Meine Vorlagen" öffnen und auf „Aktuellen Block speichern" klicken. Ohne Auswahl ist der Knopf inaktiv („Erst einen Block auswählen"). Es folgt die Abfrage „Name der Vorlage:"; die Vorgabe ist der Name des Bausteins. Danach fügen Sie die Vorlage jederzeit mit „Einfügen" wieder ein oder entfernen sie über „Vorlage löschen". Ist noch nichts gesichert, steht dort „Noch keine Vorlagen. Baustein auswählen und oben speichern."
Eine eingefügte Vorlage landet unten auf der Seite und ist danach ausgewählt. Eigene Vorlagen gelten für alle Ihre Websites, werden aber im Browser gespeichert — an einem anderen Gerät oder in einem anderen Browser stehen sie nicht zur Verfügung.
Vorschau in Desktop, Tablet und Mobil
Die Vorschau zeigt nicht nur den Inhalt, sondern auch, wie er sich auf verschiedenen Bildschirmen verhält.
Über der Vorschau liegt die Gruppe „Vorschau-Breite" mit den Symbolen „Desktop", „Tablet" und „Mobil"; daneben steht die zugehörige Breite. Prüfen Sie längere Seiten immer auch in „Mobil".
| Schaltfläche | Breite | Wofür |
|---|---|---|
| Desktop | Voll | Die Vorschau nimmt die ganze verfügbare Breite ein. |
| Tablet | 820 px | Mittlere Bildschirme. |
| Mobil | 390 px | Handy-Breite; hier ordnen sich viele Bausteine neu an. |
Unter „Vorschau-Farbschema" schalten Sie zwischen „Vorschau hell" und „Vorschau dunkel" um — so sehen Sie, wie die Seite bei Besuchern mit dunklem Systemdesign wirkt. Das ist etwas anderes als „App-Design hell/dunkel" in der Kopfzeile: dort ändert sich nur der Editor selbst.
Ist die Website bereits veröffentlicht, öffnet „Live-Version" die echte Seite in einem neuen Browser-Tab. Sind mehrere Sprachen aktiv, erscheint links davon zusätzlich die „Bearbeitungssprache" — damit legen Sie fest, welche Sprachfassung Sie gerade bearbeiten.
Auswählen und bearbeiten
Die Vorschau ist kein Bild, sondern die Seite selbst — gerendert mit denselben Bausteinen, die später ausgeliefert werden. Ein Klick wählt einen Baustein aus und markiert ihn zugleich in der Liste „Aufbau"; umgekehrt rollt ein Klick in der Liste die Vorschau an die passende Stelle. Ein Doppelklick auf ein Textfeld startet die Inline-Bearbeitung, bei Bausteinen ohne bearbeitbaren Text springt der Cursor stattdessen in das erste Feld des Inspektors. Auf Handy und Tablet öffnet sich dabei automatisch die rechte Spalte.
Befehlsleiste und Tastenkürzel
Die Befehlsleiste bündelt alles, was Sie häufig brauchen, an einer Stelle — erreichbar mit einem Tastendruck.
Mit Strg+K beziehungsweise Cmd+K öffnen Sie die Befehlsleiste, mit demselben Kürzel schließen Sie sie wieder; alternativ klicken Sie in der Kopfzeile auf „Befehle". Der Fokus liegt sofort im Suchfeld „Befehl oder Baustein suchen…". Tippen filtert die Liste, die Pfeiltasten bewegen die Auswahl, die Eingabetaste führt aus. Findet die Suche nichts, steht dort „Kein Treffer für …". Am unteren Rand erinnert eine Zeile an die Bedienung: „navigieren" und „ausführen".
Die Treffer sind nach Gruppen sortiert:
| Gruppe | Was darin steht |
|---|---|
| Aktionen | „Veröffentlichen", „Versionsverlauf", „Aktivität", „Rückgängig" (⌘Z), „Wiederholen" (⌘⇧Z), „Vorlagen einfügen", „Vorschau Desktop", „Vorschau Tablet", „Vorschau Mobil" (die aktive ist mit „aktiv" gekennzeichnet), „Pro-Modus umschalten" („an"/„aus"), „SEO dieser Seite" und „KI-Assistent öffnen" |
| Bausteine | Für jeden Baustein des Katalogs ein Eintrag „Baustein einfügen: …". Er hängt den Baustein unten an die Seite an. |
| Aktuelle Bausteine | Für jeden Baustein der geöffneten Seite ein Eintrag „Baustein: …". Er wählt ihn aus und rollt die Vorschau dorthin. |
| Seiten | „Zu Seite wechseln: …" für jede Seite der Website, rechts daneben ihre Adresse. |
| Navigation | „Marke & Design", „Header & Footer", „Eigene Domains", „Anfragen", „Inhalte (CMS)" und „Konto & Abrechnung". Betreiber sehen zusätzlich „Betreiber-Admin". |
„Rückgängig" und „Wiederholen" erscheinen nur, solange es etwas zurückzunehmen beziehungsweise zu wiederholen gibt. Der Eintrag „Wiederholen" macht dasselbe wie „Wiederherstellen" in der Kopfzeile.
Alle Tastenkürzel
| Kürzel | Wirkung | Wo |
|---|---|---|
| Strg+K / Cmd+K | Befehlsleiste öffnen und wieder schließen | überall im Editor |
| Strg+Z / Cmd+Z | Rückgängig | überall im Editor |
| Strg+Umschalt+Z / Cmd+Umschalt+Z / Strg+Y | Wiederherstellen | überall im Editor |
| Escape | Schließt Befehlsleiste, Vorlagen-Fenster, SEO, Versionsverlauf, Aktivität und die eingeblendeten Spalten auf Handy und Tablet | überall im Editor |
| Eingabe | Beendet das Bearbeiten und übernimmt den Text | Inline-Bearbeitung in der Vorschau |
| Umschalt+Eingabe | Fügt einen Zeilenumbruch ein | Inline-Bearbeitung in der Vorschau |
| Escape | Verwirft die Änderung | Inline-Bearbeitung in der Vorschau |
| Pfeil hoch / Pfeil runter | Bewegt die Auswahl in der Trefferliste | Befehlsleiste |
| Pos 1 / Ende | Springt zum ersten beziehungsweise letzten Treffer | Befehlsleiste |
| Eingabe | Führt den markierten Befehl aus | Befehlsleiste |
| Pfeil links / Pfeil rechts | Wechselt zwischen „Eigenschaften" und „KI" | Reiter des Inspektors |
| Tabulator | Der Fokus bleibt im geöffneten Fenster, bis Sie es schließen | Vorlagen, SEO & Meta, Versionsverlauf, Aktivität, Befehlsleiste |
Rückgängig, Wiederherstellen und Versionsverlauf
Für den letzten Handgriff genügen die beiden Pfeile in der Kopfzeile, für größere Sprünge gibt es den Versionsverlauf.
„Rückgängig" (Strg+Z beziehungsweise Cmd+Z) und „Wiederherstellen" (Strg+Umschalt+Z beziehungsweise Cmd+Umschalt+Z) liegen oben in der Kopfzeile. Der Editor merkt sich bis zu 50 Schritte der laufenden Sitzung; schnelles Tippen zählt dabei als ein Schritt.
Diese Schritte gelten nur für die geöffnete Seite und nur, solange der Tab offen ist. Auch das Übernehmen einer Vorlage und das Anwenden eines KI-Vorschlags legen einen solchen Punkt an, lassen sich also mit einem einzigen Klick zurücknehmen.
Der „Versionsverlauf" (Uhr-Symbol in der Kopfzeile) sammelt „Publish-Stände, KI-Änderungen & Checkpoints" der gesamten Website:
-
Klicken Sie in der Kopfzeile auf „Versionsverlauf".
-
Tragen Sie unter „Aktuellen Stand sichern" eine „Bezeichnung (optional)" ein und klicken Sie auf „Checkpoint".
So sichern Sie den jetzigen Stand, bevor Sie etwas Größeres umbauen.
-
Klicken Sie bei der gewünschten Version auf „Wiederherstellen" und bestätigen Sie mit „Ja, wiederherstellen".
Jeder Eintrag nennt die Nummer der Version, die Bezeichnung (ohne eigene Bezeichnung „Snapshot"), Datum und Uhrzeit sowie den Urheber. Veröffentlichte Stände tragen zusätzlich die Kennzeichnung „veröffentlicht". Gibt es noch nichts, steht dort „Noch keine Versionen." mit dem Hinweis „Beim Veröffentlichen und bei KI-Änderungen entstehen automatisch Snapshots. Sichere jederzeit selbst einen Checkpoint."
Vor dem Wiederherstellen wird der aktuelle Stand automatisch als eigener Punkt gesichert — auch das lässt sich also zurücknehmen. Nach dem Wiederherstellen lädt der Editor die Website vollständig neu; das ist normal. Schlägt etwas fehl, meldet das Panel „Verlauf konnte nicht geladen werden.", „Checkpoint fehlgeschlagen." oder „Wiederherstellung fehlgeschlagen."
Aktivität: wer hat wann was getan
Der Aktivitätsverlauf ist die Lesefassung der Geschichte Ihrer Website — ohne Knöpfe, die etwas verändern.
Das Klemmbrett-Symbol in der Kopfzeile öffnet die „Aktivität" mit dem Untertitel „Wer hat wann was getan — Nachvollziehbarkeit". Jeder Eintrag nennt die Aktion, Datum und Uhrzeit sowie die Person; bei KI-Aktionen kommen das verwendete Modell und die Anzahl der verbrauchten Tokens hinzu, bei Fehlern die Meldung des Servers.
| Eintrag | Bedeutung |
|---|---|
| Planung | Die KI hat einen Aufbau für die Website geplant. |
| Website aufgebaut | Die KI hat Seiten und Inhalte erzeugt. |
| Seite generiert | Eine einzelne Seite wurde erzeugt. |
| Baustein generiert | Ein einzelner Baustein wurde erzeugt. |
| Text generiert | Ein Text wurde geschrieben oder umgeschrieben. |
| Bild generiert | Ein Bild wurde erzeugt. |
| SEO erzeugt | Meta-Angaben wurden erzeugt. |
| Übersetzung | Inhalte wurden in eine andere Sprache übertragen. |
| Rechtstexte erzeugt | Impressum und Datenschutzerklärung wurden erzeugt. |
| Veröffentlichung | Die Website wurde veröffentlicht. |
| Checkpoint gesichert | Ein Stand wurde von Hand gesichert; dahinter steht die Bezeichnung. |
Läuft eine Aktion noch oder ist sie fehlgeschlagen, steht das als kleine Kennzeichnung daneben: „erfolgreich", „fehlgeschlagen", „läuft", „wartet" oder „in Warteschlange". Am unteren Rand erinnert die Fußzeile daran, worum es hier geht: „Nur-Lese-Historie · Wiederherstellen im Versionsverlauf". Ist noch nichts passiert, steht dort „Noch keine Aktivität." mit dem Hinweis „KI-Aktionen, Veröffentlichungen und Checkpoints erscheinen hier automatisch."
SEO und Meta-Angaben je Seite
Was Google und soziale Netzwerke von einer Seite anzeigen, stellen Sie im Panel „SEO & Meta" ein — je Seite und je Sprache.
-
Öffnen Sie im Drei-Punkte-Menü der Seite den Eintrag „SEO & Meta".
Für die geöffnete Seite geht das auch über die Befehlsleiste mit „SEO dieser Seite".
-
Füllen Sie „Meta-Titel" und „Meta-Beschreibung" aus.
Der Kasten „Vorschau · Suchergebnis" oben zeigt sofort, wie der Eintrag aussehen wird.
-
Klicken Sie unten auf „Speichern" und warten Sie auf „Gespeichert".
Das Panel speichert nicht automatisch — ohne diesen Klick geht die Eingabe verloren.
Ganz oben zeigt der Kasten „Vorschau · Suchergebnis" Adresse, Überschrift und Vorschautext so, wie ein Suchergebnis aussehen wird. Solange Sie keine eigene Adresse eingetragen haben, steht dort ein Beispiel („https://ihre-domain.de") mit dem Pfad Ihrer Seite; fehlt die Beschreibung, erklärt der Platzhaltertext, wozu sie dient. Führt Ihre Website mehrere Sprachen, wählen Sie über die Reiter darunter die Sprachfassung; bei nur einer Sprache steht dort schlicht „Sprache: Deutsch".
| Feld | Wirkung | Grenze |
|---|---|---|
| Meta-Titel | Die Überschrift des Suchergebnisses. Bleibt das Feld leer, greift der Seitentitel — der Hinweis darunter nennt ihn. | Zähler bis 60 Zeichen |
| Meta-Beschreibung | Der Vorschautext unter dem Suchergebnis. | Zähler bis 155 Zeichen |
| OG-Titel | Überschrift beim Teilen in sozialen Netzwerken. Leer = Meta-Titel, sonst Seitentitel. | — |
| OG-Beschreibung | Text beim Teilen. „Fällt sonst auf die Meta-Beschreibung zurück." | — |
| OG-Bild (URL) | Das Vorschaubild beim Teilen. Auswahl über dieselbe Bildquelle wie im Inspektor. | — |
| Robots | „Indexieren (index, follow)", „noindex, follow" oder „noindex, nofollow". Die beiden noindex-Werte halten die Seite aus den Suchergebnissen heraus. | Vorgabe: Indexieren |
| Canonical-URL (Override) | Trägt eine abweichende Originaladresse ein. „Leer = automatisch aus Domain + Pfad." | — |
| Frühere Pfade (301-Weiterleitung) | Alte Adressen, die dauerhaft auf diese Seite weiterleiten. Beim Umbenennen kommen sie von selbst dazu; von Hand ergänzte helfen beim Umzug von einer alten Website. | höchstens 10 |
| JSON-LD (strukturierte Daten) | Zusätzliche strukturierte Daten. Rechts steht „JSON ok" oder „Kein gültiges JSON"; gespeichert wird beides, ausgeliefert nur gültiges JSON. | — |
Die Zähler neben „Meta-Titel" und „Meta-Beschreibung" färben sich, sobald Sie sich der Grenze nähern, und deutlicher, sobald Sie darüber liegen. Es sind Empfehlungen: Speichern lässt sich auch ein längerer Text, Suchmaschinen kürzen ihn dann aber ab. „Meta-Titel", „Meta-Beschreibung" und die drei OG-Felder gelten je Sprache, „Robots", „Canonical-URL", „Frühere Pfade" und „JSON-LD" für die ganze Seite.
Zusätzliche Felder bei Blogbeiträgen
Bei einem „Beitrag" erscheint zuoberst der Abschnitt „Blog-Beitrag":
| Feld | Bedeutung |
|---|---|
| Status | „Entwurf", „Geplant" oder „Veröffentlicht". |
| Datum | Das Veröffentlichungsdatum des Beitrags. |
| Kategorie | Freitext, zum Beispiel „Ratgeber". |
| Autor | Der angezeigte Name. |
| Tags | Schlagwörter, mit Komma getrennt. |
| Lesezeit | Die angezeigte Lesedauer in Minuten. |
Ein Datum in der Zukunft zusammen mit dem Status „Geplant" oder „Veröffentlicht" gibt den Beitrag automatisch zum Termin frei; er erscheint dann unter „/blog/".
Solange für eine Seite noch keine Übersetzung existiert, weist das Panel darauf hin: „Für diese Seite sind noch keine Übersetzungen angelegt — Meta/OG werden je Sprache bearbeitet, sobald eine vorhanden ist."
Dieses Panel speichert nicht von allein
Anders als der Editor speichert „SEO & Meta" erst auf Klick. Schließen Sie das Panel ohne „Speichern", sind die Eingaben verloren. Nach dem Speichern erscheint links unten „Gespeichert", bei einem Fehler „Speichern fehlgeschlagen."
Sprachen: Oberfläche und Website
Zwei Dinge, die leicht zu verwechseln sind: die Sprache, in der XICflow mit Ihnen spricht, und die Sprachen, die Ihre Website führt.
Sprache der Oberfläche
XICflow selbst gibt es auf Deutsch und Englisch. Umgestellt wird das in der Kopfzeile der Einstellungsbereiche — also zum Beispiel unter „Marke" — über das Feld „Sprache" mit den Einträgen „Deutsch" und „English". Die Wahl gilt sofort für die gesamte Oberfläche und wird zu Ihrem Konto gespeichert, steht also auch am nächsten Gerät wieder so.
Sprachfassungen der Website
Welche Sprachen Ihre Website führt und welche davon die Hauptsprache ist, legen Sie im Bereich „Marke" fest. Sobald mehr als eine Sprache aktiv ist, erscheint über der Vorschau die „Bearbeitungssprache" mit einem Kürzel je Sprache. Sie entscheidet, welche Fassung Sie gerade bearbeiten — die Vorschau wechselt mit.
In der Hauptsprache bearbeiten Sie den Originaltext. In jeder weiteren Sprache sind die Felder zunächst leer und zeigen den Text der Hauptsprache als blassen Platzhalter: So sehen Sie, was noch zu übersetzen ist. Was Sie eintragen, ersetzt den Platzhalter nur in dieser Sprache; ein leer gelassenes Feld greift beim Veröffentlichen auf die Hauptsprache zurück. Übersetzen lassen können Sie die Seite auch von der KI — das steht im Kapitel „Mit der KI arbeiten".
Meta-Angaben und OG-Felder werden ebenfalls je Sprache gepflegt, siehe den Abschnitt zu „SEO & Meta". Das Feld „Seitentitel" in der Kopfzeile wechselt dagegen nicht mit der Bearbeitungssprache.
Website wechseln und die übrigen Bereiche
Der Editor zeigt immer genau eine Website. Der Wechsler links oben führt zu den anderen — und zu einer neuen.
Zwischen Websites wechseln
Ein Klick auf den Wechsler öffnet die Liste „Deine Sites". Jede Zeile zeigt den Namen, die Adresse und den Zustand „Live", „Entwurf" oder „Archiviert"; die aktuelle ist mit einem Haken markiert. Während die Liste lädt, steht dort „Lade Sites…", ohne Website „Keine Site" beziehungsweise „Noch keine Site. Leg deine erste an."
Beim Wechsel sichert der Editor zuerst die offene Seite und öffnet danach die Startseite der anderen Website. Escape oder ein Klick daneben schließt die Liste.
Eine weitere Website anlegen
„Neue Site" öffnet im selben Fenster das Formular „Neue Site anlegen":
- „Name" ist Pflicht — fehlt er, meldet das Formular „Bitte einen Namen angeben."
- „Domain (optional)": Ihre Wunschadresse. Sie muss wie eine Domain aussehen, sonst erscheint „Domain sieht nicht gültig aus (z. B. meine-firma.de)." Der Hinweis darunter stellt klar: „Kann auch später im Bereich „Flow Domains" verbunden werden."
- „Bestehende Website (optional)": Tragen Sie hier die Adresse einer vorhandenen Seite ein und klicken Sie auf „Marke laden", liest die KI Name, Ton und Farben daraus und übernimmt sie in die neue Website. Die Rückmeldung nennt, was übernommen wurde, oder „Kein Vorschlag gefunden."
„Site anlegen" legt sie an (währenddessen „Wird angelegt…"), „Abbrechen" bricht ab. Die neue Website wird sofort geöffnet.
Die übrigen Bereiche
Alles, was nicht zu einer einzelnen Seite gehört, liegt außerhalb des Editors. Sie erreichen es über das Konto-Menü, über die Befehlsleiste oder über die Reiterleiste, die in diesen Bereichen oben steht: „Marke", „Header & Footer", „Inhalte", „Blog", „Mediathek", „Anfragen", „Domains", „Team" und „Konto"; Betreiber sehen zusätzlich „Admin". Links davon führt „Zurück zum Editor" wieder zur Vorschau, ebenso das Logo.
Autospeichern
Sie müssen nichts von Hand speichern.
Kurz nachdem Sie aufhören zu tippen, schreibt der Editor Ihre Änderungen weg; in der Kopfzeile erscheint „gespeichert". Auch beim Wechsel auf eine andere Seite, beim Wechsel auf eine andere Website, beim Aufruf eines anderen Bereichs und vor jedem Veröffentlichen wird der Stand zuerst gesichert.
Gespeichert werden dabei zwei Dinge getrennt: der Seitentitel aus der Kopfzeile und die Bausteine der Seite. Das Panel „SEO & Meta" gehört nicht dazu — dort klicken Sie selbst auf „Speichern".
Wenn das Speichern nicht klappt
Dann zeigt die Kopfzeile „Nicht gespeichert" und daneben „Erneut versuchen". Schließen Sie den Tab, während noch etwas aussteht, warnt der Browser vorher.
Ließ sich eine Seite gar nicht erst laden, schaltet der Editor das Speichern bewusst ab und meldet „Seite konnte nicht geladen werden" — sonst würde ein leerer Stand die vorhandene Seite überschreiben. Laden Sie in diesem Fall neu, bevor Sie weiterarbeiten.
Wenn etwas nicht klappt
Die häufigsten Meldungen im Editor und was dahintersteckt.
- In der Kopfzeile steht „Nicht gespeichert".
- Klicken Sie auf „Erneut versuchen" und schließen Sie den Tab erst, wenn wieder „gespeichert" erscheint.
- Statt der Vorschau steht „Vorschau nicht erreichbar".
- Ihre Änderungen sind gespeichert, nur die Darstellung fehlt. Klicken Sie auf „Neu laden".
- Es erscheint „Seite konnte nicht geladen werden".
- Laden Sie den Editor über „Neu laden" neu, bevor Sie etwas ändern — sonst werden Ihre Änderungen nicht gespeichert.
- Über der Seitenliste steht „Control-Plane nicht erreichbar — Änderungen werden nicht gespeichert." und daneben „Offline".
- Die Verbindung zum Server fehlt. Warten Sie kurz und laden Sie die Seite neu; bis dahin bleiben Änderungen an der Seitenliste nur im Browser.
- Neben dem Website-Wechsler steht „Demo".
- Sie arbeiten ohne Anmeldung in der Klick-Demo („Vorschau — nicht mit dem Backend verbunden", im Wechsler „Vorschaumodus — Sites werden lokal gehalten, bis das Backend verbunden ist."). Nichts wird gespeichert, und „Veröffentlichen" bleibt gesperrt. Melden Sie sich an, um mit einer echten Website zu arbeiten.
- Es erscheint „Für diesen Bereich ist eine Anmeldung erforderlich."
- Die Sitzung ist abgelaufen. Melden Sie sich erneut an; beim Hochladen von Bildern lautet die Meldung „Für den Upload ist eine Anmeldung erforderlich."
- Der Löschen-Knopf einer Seite ist ausgegraut.
- Es handelt sich um die Startseite („Startseite kann nicht gelöscht werden"). Bestimmen Sie zuerst eine andere Seite über „Als Startseite".
- Ein Baustein zeigt rechts keine Textfelder.
- Manche Bausteine haben keinen eigenen Text, etwa die „Trennlinie" oder das „Inhaltsverzeichnis". Der Inspektor weist darauf hin; Layout, Abstand und Stil stellen Sie trotzdem darunter ein.
- Rechts steht „Dieser Bausteintyp hat hier keine Schnelleinstellungen."
- Der Baustein ist dem Editor unbekannt — das kommt bei ganz neu von der KI erzeugten Typen vor. Er wird beim Veröffentlichen normal dargestellt; ändern lässt er sich über den KI-Chat.
- Nach dem Veröffentlichen erscheint ein Kontrast-Hinweis.
- Die Meldung „… Kontrast-Hinweis(e) — in Marke & Design prüfen" weist auf Farbpaare hin, die schwer lesbar sind. Die Website ist veröffentlicht; die Farben ändern Sie im Bereich „Marke".
Löschen fragt immer zurück: Statt eines Systemfensters klappt an Ort und Stelle eine Rückfrage auf — bei Seiten „Seite löschen?", sonst „Wirklich löschen?" — mit dem roten Knopf „Löschen" daneben. Escape oder ein Klick daneben bricht ab, ohne etwas zu verändern.