Auf dieser Seite
Marke und Design
Unter „Marke & Design" legen Sie fest, wie Ihre Website als Ganzes aussieht und klingt: Sprachen, Farben, Schriften, Hintergründe, Logo, Favicon, Tonalität und ein optionales Popup. Im Editor kommt je Baustein das Gestaltungssystem dazu — Verläufe, Muster, Effekte, Animationen, Symbole und die Feineinstellung im Pro-Modus.
Der Bereich „Marke & Design"
Sie erreichen den Bereich im Dashboard über den Reiter „Marke". Oben wählen Sie, für welche Website die Einstellungen gelten — sie betreffen immer diese eine Website, nicht Ihr Konto.
Die Abschnitte sind unabhängig voneinander: Sprachen, Logo, Favicon, Hintergrund, Hero-Hintergrund, Marke aus Website übernehmen, Markenstimme, Popup, Schriften und Markenfarben. Fast jeder Abschnitt hat seinen eigenen Speichern-Knopf; nur Schriften und Markenfarben werden gemeinsam am Ende gesichert.
Das Gestaltungssystem verteilt sich auf drei Orte: Was für die ganze Website gilt, steht unter „Marke & Design". Was einen einzelnen Baustein betrifft, stellen Sie im Editor in der rechten Spalte ein. Kopf- und Fußzeile haben einen eigenen Bereich.
| Bereich | Wo Sie ihn finden | Was dort festgelegt wird |
|---|---|---|
| „Marke & Design" | Dashboard, Reiter „Marke" | Sprachen, Logo, Favicon, Hintergrund, Hero-Hintergrund, Marke aus Website übernehmen, Markenstimme, Popup, Schriften, Markenfarben |
| „Stil" | Editor, rechte Spalte, unter den Feldern des Bausteins | Auf welchen Bildschirmgrößen der Baustein sichtbar ist |
| „Flow Design · Pro" | Editor, rechte Spalte, direkt darunter | Hintergrund (Verlauf, Muster, Bild), Textfarbe, Effekte und Animation des Bausteins |
| „Pro-Modus · jedes CSS-Detail" | Editor, rechte Spalte, ganz unten | Abstand, Rahmen, Schatten, Typografie, Farben, Größe, Position und eigenes CSS — je Bildschirmgröße |
| „Raster" und „Karten" | Editor, rechte Spalte, bei Bausteinen mit Kartenliste | Spaltenzahl, Reihenfolge, Sichtbarkeit und Kachelgröße der Karten |
| „Kopfzeile", „Fußzeile", „Navigation" | Dashboard, Bereich „Header & Footer" | Logo, Buttons und Schalter im Kopfbereich, Spalten, Rechtstexte und Social-Links im Fußbereich, Menüpunkte |
Erst speichern, dann veröffentlichen
Änderungen werden zwar gespeichert, sind auf der Website aber erst mit der nächsten Veröffentlichung sichtbar. Am Seitenende steht dazu der Hinweis: Danach im Editor „Veröffentlichen", damit die Änderungen live gehen.
Sprachen
Hier bestimmen Sie, in welchen Sprachen Ihre Website erscheint. Genau eine davon ist die Primärsprache — sie ist die Standard- und Rückfallsprache.
-
Im Abschnitt „Sprachen" bei jeder gewünschten Sprache das Häkchen setzen.
-
Bei der Hauptsprache auf „Primär" („Als Primärsprache setzen") klicken.
Die Primärsprache ist die Standard- und Rückfallsprache: Fehlt eine Übersetzung, greift sie.
-
Oben rechts im Abschnitt auf „Speichern" klicken.
Der Knopf zeigt danach „Gespeichert". Unter der Liste steht eine Zusammenfassung nach dem Muster „Aktiv: … · Primär: …".
Die Inhalte der weiteren Sprachen pflegen Sie anschließend im Editor über den Sprach-Umschalter — Seite für Seite und Inhalt für Inhalt. Auch Kopfzeile, Fußzeile und Navigation werden je Sprache getrennt gepflegt.
Der Speichern-Knopf bleibt grau?
Dann gibt es keine Änderung zu speichern. Setzen oder entfernen Sie ein Häkchen — danach ist „Speichern" wieder anklickbar.
Farbsystem
Drei Rollen tragen die gesamte Website: „Primärfarbe", „Akzentfarbe" und „Flächen / Text". Je Rolle legen Sie eine Basisfarbe für den hellen und eine für den dunklen Modus fest; die vollständige Abstufung entsteht daraus automatisch.
Sie finden den Abschnitt „Markenfarben" ganz unten im Bereich „Marke & Design". Aus jeder Basisfarbe entstehen elf Stufen von 50 (sehr hell) bis 950 (sehr dunkel): Farbton und Sättigung stammen aus Ihrer Farbe, die Helligkeit folgt einer festen Rampe. Deshalb bleiben Buttons, Rahmen, Hintergründe und Hover-Zustände zueinander stimmig, auch wenn Sie nur eine einzige Farbe ändern.
Primärfarbe
Buttons, Links und Hervorhebungen greifen darauf zu.
Akzentfarbe
Zweitfarbe für Verläufe und feine Hervorhebungen.
Flächen / Text
Hintergründe, Rahmen und Fließtext.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Primärfarbe" | Buttons, Links, Hervorhebungen; die Basisfarbe steht in der Skala für die Stufe 600 | HEX, RGB oder HSL, mit Deckkraft | #004D43 |
| „Akzentfarbe" | Zweitfarbe und Verläufe; steht für die Stufe 500 | HEX, RGB oder HSL, mit Deckkraft | #ACA316 |
| „Flächen / Text" | Hintergründe, Rahmen, Fließtext; steht für die Stufe 500 | HEX, RGB oder HSL, mit Deckkraft | #647169 |
| „Hell" / „Dunkel" | Je Rolle eine Basisfarbe für den hellen und eine für den dunklen Modus | zwei Farbwerte je Rolle | beide gleich |
| Abstufung 50–950 | Entsteht automatisch aus der Basisfarbe: Farbton und Sättigung bleiben, die Helligkeit folgt einer festen Rampe von sehr hell (50) bis sehr dunkel (950) | nicht direkt einstellbar | 11 Stufen je Rolle |
| „= Hell" | Setzt die dunkle Basisfarbe wieder auf die helle | erscheint nur, wenn beide voneinander abweichen | — |
Der Farbwähler
Ein Klick auf ein Farbfeld öffnet den Farbwähler. Er ist überall derselbe — bei den Markenfarben, bei der Textfarbe eines Bausteins, bei Musterfarbe, Overlay und Schatten. Er lässt sich vollständig mit der Tastatur bedienen und schließt mit der Escape-Taste.
| Bedienelement | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| Farbfeld | Sättigung (waagerecht) und Helligkeit (senkrecht) | je 0 bis 100 Prozent; Pfeiltasten ändern um 1, mit Umschalttaste um 10 | — |
| „Farbton" | Der Farbwinkel im Farbkreis | 0 bis 360; Pos1 und Ende springen an die Enden | — |
| „Deckkraft" | Alphakanal der Farbe | 0 bis 100 Prozent | 100 Prozent |
| „Ausgabe-Format" | In welcher Schreibweise der Wert gespeichert wird | HEX · RGB · HSL | HEX |
| „Aa auf Weiss" / „Aa auf Schwarz" | Kontrastverhältnis der Farbe gegen Weiß und gegen Schwarz | AAA ab 7,0 · AA ab 4,5 · ab 3,0 nur für großen Text · darunter „zu gering" | — |
| „Marke" | Feste Markenfarben zum Anklicken | #004D43, #ACA316, #00A88A, #0d0d10, #ffffff | — |
| „Zuletzt" | Zuletzt verwendete Farben | bis zu 12 Einträge | leer |
| „Harmonien" | Aus der aktuellen Farbe abgeleitete Vorschläge | 1× Komplementär, 2× Analog, 2× Triade, 3× Tetrade | — |
| „Farbe vom Bildschirm aufnehmen" | Pipette: übernimmt eine Farbe vom Bildschirm | nur in Browsern mit Pipetten-Funktion sichtbar | — |
Auf Kontrast achten
Der Farbwähler zeigt das Kontrastverhältnis gegen Weiß und gegen Schwarz an. Für Fließtext gilt 4,5:1 als Untergrenze, für großen Text 3:1. Bleibt eine Farbe darunter, verwenden Sie sie besser als Fläche und nicht für Schrift — oder wählen Sie eine dunklere Basis. Die Tönung im Dunkelmodus verändert nur die Sättigung, nie den Kontrast.
Weicht die dunkle Basisfarbe von der hellen ab, wird für den Dunkelmodus eine eigene Skala hinterlegt; sind beide gleich, wird keine zweite Skala gespeichert. Schriften und Markenfarben sichern Sie gemeinsam mit dem „Speichern"-Knopf am Ende des Bereichs.
Schriften
Sie wählen getrennt eine Schrift für „Überschriften" und eine für „Fließtext". Die gewählte Schrift wird beim Veröffentlichen mit Ihrer Website ausgeliefert, es wird beim Besuch also nichts extern nachgeladen.
-
Im Auswahlfeld nach einer Schrift suchen oder über Kategorien wie „Serifenlos", „Serif", „Display", „Handschrift" und „Monospace" filtern.
-
Die Familie und die gewünschten Schnitte wählen.
-
Mit „zurücksetzen" kehren Sie zur Standardschrift zurück.
Überschrift in der Überschriften-Schrift
Der Fließtext nutzt die zweite Schrift. Fett und kursiv stammen aus denselben Schnitten — deshalb lohnt es sich, beim Auswählen die benötigten Schnitte gleich mitzunehmen.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Überschriften" | Schrift aller Überschriften der Website | eine Familie aus 775 plus die gewünschten Schnitte | ohne Auswahl die Standardschrift |
| „Fließtext" | Schrift für Fließtext, Listen und Beschriftungen | eine Familie aus 775 plus die gewünschten Schnitte | ohne Auswahl die Standardschrift |
| „Kategorie" | Schränkt die Liste auf eine Gattung ein | „Alle" · „Serifenlos" (272) · „Serif" (147) · „Display" (191) · „Handschrift" (128) · „Monospace" (37) | „Alle" |
| „Schrift suchen …" | Freitextsuche über die Familiennamen; Treffer nach Relevanz sortiert | beliebiger Text | leer |
| „Schnitte" | Welche Strichstärken mitgeliefert werden — jede zusätzliche Stärke vergrößert die Website | je Familie aus 300, 400, 500, 600, 700, 800; mindestens eine bleibt aktiv | 400 (oder der nächstliegende Schnitt) plus 600 und 700, sofern vorhanden |
| „Beliebt" | Kennzeichnung häufig genutzter Familien; sie stehen oben in der Liste | 113 der 775 Familien | — |
| „Weitere … laden" | Lädt weitere Zeilen der Trefferliste nach | 60 Zeilen je Schritt | 60 Zeilen |
| „zurücksetzen" | Entfernt die Auswahl für diese Rolle | — | — |
Paarung von Überschrift und Text
- Zwei Schriften genügen. Eine markante Schrift für Überschriften, eine ruhige für den Fließtext — mehr wirkt selten besser.
- Schriften der Kategorien „Display" und „Handschrift" sind für Überschriften gedacht. Im Fließtext werden sie schnell schwer lesbar.
- Nehmen Sie nur die Schnitte mit, die Sie wirklich brauchen: Fett und kursiv stammen aus denselben Schnitten, und jeder zusätzliche Schnitt wird mit ausgeliefert.
Warum sieht die Vorschau anders aus als die Website?
In der Auswahlliste steht der Name der Schrift immer prominent, die Vorschauzeile nutzt aber die auf Ihrem Rechner vorhandene Ersatzschrift, solange die gewählte Familie dort nicht installiert ist. Erst beim Veröffentlichen wird die echte Schrift mit ausgeliefert — dann stimmt das Bild.
Hintergrund und Hero-Hintergrund
Zwei Abschnitte bestimmen den Untergrund: „Hintergrund" liegt als Fläche oder Verlauf hinter der gesamten Website, „Hero-Hintergrund" gestaltet den Aufmacher am Seitenanfang.
Ihr Aufmacher in Ihrer Marke
Beispiel-Hero: Markenfarben, Schriftpaar und die gewählte Hintergrund-Variante wirken hier zusammen.
-
Unter „Hintergrund (Hell)" einen Wert einstellen — über „Vorlagen" oder über „Eigener" mit eigenen „Farbstopps".
-
Bei Bedarf unter „Hintergrund (Dunkelmodus)" einen abweichenden Wert einstellen.
-
Auf „Speichern" klicken. Mit „Zurücksetzen" leeren Sie beide Felder wieder.
Oberhalb der Felder sehen Sie eine Vorschaufläche; ohne Auswahl steht dort „Kein Hintergrund". Bleiben beide Felder leer, gilt der Standard. Für den Aufmacher wählen Sie darunter eine Variante und die Tönung im Dunkelmodus; auch dieser Abschnitt hat einen eigenen „Speichern"-Knopf.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Hintergrund (Hell)" | Vollflächiger Hintergrund hinter der ganzen Website im hellen Modus | ein Verlauf aus den „Vorlagen" oder ein eigener Verlauf | leer (Standard) |
| „Hintergrund (Dunkelmodus)" | Derselbe Hintergrund für den Dunkelmodus | ein Verlauf aus den „Vorlagen" oder ein eigener Verlauf | leer (Standard) |
| Hero-Variante | Gestaltung des Aufmachers auf allen Seiten dieser Website | „Schlicht" · „Plexus" · „Mesh" · „Aurora" · „Wellen" | „Schlicht" |
| „Tönung im Dunkelmodus" | Wie stark die dunklen Flächen die Markenfarbe aufnehmen; wirkt nur auf die Sättigung, nicht auf den Kontrast | „Neutral" · „Dezent" · „Kräftig" | „Dezent" |
Der Hero sieht unverändert aus?
Dann ist dort vermutlich ein Bild hinterlegt, denn: „Ein Hero mit Bild zeigt immer das Bild — die Animation greift nur ohne Bild." Entfernen Sie das Bild im Editor, damit die gewählte Animation sichtbar wird.
Verläufe
104 fertige Verläufe in 13 Gruppen stehen bereit — dazu ein eigener Verlaufs-Editor. Verläufe liegen hinter der ganzen Website, hinter einem einzelnen Baustein, als Auflage über einem Bild oder als Füllung einer Wortmarke.
-
Den Baustein anklicken und in der rechten Spalte unter „Flow Design · Pro" den Abschnitt „Hintergrund" aufklappen.
-
Auf „Verlauf" umschalten. Der Picker startet in den „Vorlagen".
-
Eine der 104 Vorlagen anklicken — oder auf „Eigener" wechseln und Typ, „Winkel" und „Farbstopps" selbst setzen.
| Gruppe | Anzahl | Charakter |
|---|---|---|
| „XICflow" | 15 | Die Hausfarben Teal und Gold, linear, radial und konisch |
| „Glass-Overlays" | 7 | Halbtransparente Auflagen für den Glas-Look |
| „Mesh" | 11 | Mehrere weiche Farbwolken übereinander |
| „Aurora" | 8 | Nordlicht-artige Bänder |
| „Ocean" | 9 | Blau- und Türkistöne |
| „Sunset" | 10 | Warme Abendtöne |
| „Vibrant" | 10 | Kräftige, gesättigte Kombinationen |
| „Neon" | 5 | Leuchtende Signalfarben |
| „Pastell" | 6 | Helle, entsättigte Töne |
| „Duotone" | 5 | Genau zwei kontrastierende Farben |
| „Cyber" | 6 | Dunkle Technik-Anmutung |
| „Metallic" | 6 | Gold-, Silber- und Kupfertöne |
| „Monochrom" | 6 | Ein Farbton in mehreren Helligkeiten |
Eigener Verlauf
Über „Eigener" bauen Sie einen Verlauf aus einzelnen Farbstopps. Jeder Stopp hat eine Farbe und eine Position; die Vorschau darüber zeigt das Ergebnis sofort.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Verlauf-Modus" | Zwischen fertigen Vorlagen und eigenem Verlauf umschalten | „Vorlagen" · „Eigener" | „Vorlagen" |
| Verlaufstyp | Form des Verlaufs | „Linear" · „Radial" · „Konisch" | „Linear" |
| „Winkel" | Richtung des Verlaufs | 0 bis 360 Grad; bei „Radial" ohne Wirkung, der Regler ist dann gesperrt | 135 Grad |
| „Farbstopps" | Farbe und Position der einzelnen Stopps; sie lassen sich verschieben und in der Reihenfolge tauschen | Position 0 bis 100 Prozent; mindestens zwei Stopps | #004D43 bei 0 Prozent, #ACA316 bei 100 Prozent |
| „Farbstopp hinzufügen" | Setzt einen weiteren Stopp in die größte vorhandene Lücke | — | neuer Stopp in #00A88A |
Grenzen
- Ein radialer Verlauf hat keine Richtung — der Winkel-Regler ist dort gesperrt.
- Unter zwei Farbstopps entsteht kein Verlauf: Bei nur einem Stopp bleibt schlicht dessen Farbe stehen.
- Verläufe liegen hinter dem Text. Prüfen Sie den Kontrast an der hellsten und an der dunkelsten Stelle des Verlaufs, nicht nur in der Mitte.
- Für Hintergrundbilder mit Text ist die Auflage („Overlay") der bessere Weg: Sie dämpft das Bild, ohne den Verlauf des Themes zu ersetzen.
Muster
50 kachelnde Muster in 8 Gruppen geben einer Fläche Struktur, ohne von den Inhalten abzulenken. Farbe und Deckkraft stellen Sie selbst ein.
-
Im Abschnitt „Hintergrund" des Bausteins auf „Muster" umschalten.
-
Unter „Musterfarbe" die Farbe und mit dem Regler „Deckkraft" die Stärke einstellen.
-
Ein Muster aus den Gruppen wählen. Die Vorschaukacheln zeigen es bereits in Ihrer Farbe und Deckkraft.
| Gruppe | Anzahl | Muster |
|---|---|---|
| „XICflow" | 2 | „Flow Punkte", „Flow Schraffur" |
| „Punkte" | 6 | „Punkte", „Punkte fein", „Punkte weit", „Punkte versetzt", „Punkte diagonal" und eine Variante mit großen Punkten |
| „Raster" | 8 | „Raster", „Raster fein", „Raster gestrichelt", „Blueprint", „Isometrisch", „Schachbrett", „Millimeterpapier", „Punktraster" |
| „Linien" | 9 | „Diagonal", „Diagonal umgekehrt", „Diagonal breit", „Diagonalkreuz", „Vertikal", „Horizontal", „Kreuzschraffur", „Nadelstreifen", „Breite Streifen" |
| „Formen" | 17 | „Plus", „Kreuz", „Wellen", „Zickzack", „Chevron", „Dreiecke", „Rauten", „Ringe", „Schuppen", „Waben", „Mauerwerk", „Quadrate", „Sterne", „Kreise groß", „Pfeile", „Kleeblatt", „Konfetti" |
| „Geometrisch" | 2 | „Würfel", „Dreiecke offen" |
| „Technik" | 1 | „Platine" |
| „Textur" | 5 | „Carbon", „Noise", „Papier", „Beton", „Korn" |
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| Musterauswahl | Welches Muster hinter dem Baustein liegt | 50 Muster in 8 Gruppen | „Punkte" |
| „Musterfarbe" | Farbe der Musterzeichnung | jeder Farbwert | #17A98D |
| „Deckkraft" | Wie kräftig das Muster erscheint | 0 bis 100 Prozent | 50 Prozent |
| Ausnahmen | Die beiden XICflow-Muster und „Platine" bringen eine eigene Grundfarbe mit | — | #00A88A |
Weniger ist mehr
Muster wirken am besten als ruhiger Untergrund. Bleiben Sie deutlich unter voller Deckkraft und setzen Sie ein Muster nur in einzelnen Abschnitten ein — liegt es unter jedem Baustein, wird die Seite unruhig. Muster bestehen aus reinem CSS und werden mit der Seite ausgeliefert; es wird also kein Bild nachgeladen.
Effekte
25 Effekte in 5 Gruppen geben einem Baustein Tiefe: Schatten, farbiger Schein, Glas, Rahmen und Weichzeichnen. Mehrere Effekte lassen sich kombinieren.
Sie finden die Effekte im Editor beim ausgewählten Baustein unter „Flow Design · Pro" im Abschnitt „Effekte". Jede Kachel zeigt den Effekt an einer Beispielfläche vor einem farbigen Hintergrund — so ist auch bei Glas und Blur erkennbar, was passiert. Ein Klick schaltet einen Effekt an oder aus; die Zahl neben der Überschrift nennt die Anzahl der aktiven Effekte.
| Gruppe | Anzahl | Einträge | Worauf zu achten ist |
|---|---|---|---|
| „Schatten" | 6 | „Schatten S", „Schatten M", „Schatten L", „Schatten XL", „Schatten 2XL", „Schatten innen" | Reine Schlagschatten in einem sehr dunklen Markenton — sie funktionieren auf jedem Untergrund |
| „Glow" | 5 | „Glow Teal" und „Glow Gold", jeweils zusätzlich in einer kräftigeren Stufe, sowie „Glow Flow (Teal-Gold)" | Farbiger Schein; auf hellen Flächen wirkt er schnell zu stark |
| „Liquid Glass" | 6 | „Glas dezent", „Glas mittel", „Glas stark", „Glas Frost", „Glas Teal", „Glas dunkel" | Braucht etwas Sichtbares dahinter — über einer einfarbigen Fläche passiert nichts |
| „Rahmen" | 5 | „Haarlinie", „Rahmen Teal", „Rahmen Gold", „Rahmen Verlauf", „Ring" | „Rahmen Verlauf" zeichnet bewusst eine scharfe Kante und ignoriert abgerundete Ecken |
| „Blur" | 3 | „Blur S", „Blur M", „Blur L" | Zeichnet nur den Hintergrund weich und bringt keine eigene Fläche mit |
Glas und Blur sparsam einsetzen
Die Gruppen „Liquid Glass" und „Blur" zeichnen den Hintergrund weich. Das ist aufwendiger zu berechnen als ein Schatten — auf älteren Geräten macht sich das bemerkbar. Setzen Sie diese Effekte an wenigen, gezielten Stellen ein, und immer dort, wo tatsächlich etwas hindurchscheinen kann.
Animationen
Neun Einblend-Bewegungen mit fünf Beschleunigungskurven. Sie starten, sobald der Baustein beim Scrollen ins Bild kommt — und bleiben aus, wenn jemand Bewegung reduziert.
-
Im Baustein den Abschnitt „Animation" aufklappen.
-
Eine der neun Bewegungen wählen — die Vorschau spielt sie sofort ab.
-
„Dauer", Verzögerung und „Easing" anpassen; mit „Abspielen" die Vorschau wiederholen.
| Animation | Bewegung | Vorgabe-Dauer |
|---|---|---|
| „Einblenden" | Nur die Deckkraft | 600 ms |
| „Von unten einblenden" | 24 Pixel von unten | 600 ms |
| „Von oben einblenden" | 24 Pixel von oben | 600 ms |
| „Von rechts hereinschieben" | 40 Pixel von rechts | 550 ms |
| „Von links hereinschieben" | 40 Pixel von links | 550 ms |
| „Heranzoomen" | Von 92 auf 100 Prozent Größe | 550 ms |
| „Unscharf einblenden" | Von 12 Pixel Unschärfe auf scharf | 700 ms |
| „Kippen" | Kippt um 14 Grad um die Waagerechte in die Ansicht | 700 ms |
| „Aufsteigen" | 48 Pixel von unten, dabei leicht wachsend | 800 ms |
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Typ" | Welche der neun Bewegungen abgespielt wird | 9 Animationen | „Einblenden" |
| „Dauer" | Wie lange die Bewegung läuft | 100 bis 2000 ms in Schritten von 50 | je Animation, siehe oben |
| Verzögerung | Wartezeit vor dem Start | 0 bis 1500 ms in Schritten von 50 | 0 ms |
| „Easing" | Beschleunigungskurve der Bewegung | „Flow (weich aus)" · „Ease-out" · „Ease-in-out" · „Federnd" · „Linear" | „Flow (weich aus)" |
| „Abspielen" | Spielt die Vorschau erneut ab | — | — |
Verhalten bei „Bewegung reduzieren"
Hat jemand im Betriebssystem eingestellt, Bewegung zu reduzieren, werden auf der veröffentlichten Website alle Einblend-Animationen abgeschaltet: Die Inhalte sind sofort und vollständig sichtbar. Auch im Editor bleibt die Vorschau dann still und zeigt den Hinweis „Bewegung reduziert – Vorschau statisch". Dasselbe gilt, wenn im Browser kein JavaScript läuft — ohne Animation, aber mit vollständigem Inhalt.
Nur die tatsächlich verwendeten Bewegungen werden beim Veröffentlichen mit ausgeliefert. Wer keine Animation setzt, bekommt auch keinen zusätzlichen Code.
Symbole
272 Symbole in 17 Kategorien, einheitlich als feine Strichzeichnung. Sie erscheinen in Karten, in Menüpunkten und als Favicon.
Alle Symbole sind im selben Stil gezeichnet und übernehmen automatisch die Textfarbe der Umgebung — deshalb wirken sie in hellen und dunklen Flächen gleichermaßen. An drei Stellen greifen Sie darauf zu: über die Symbol-Auswahl beim Favicon, über „Icon (optional)" bei einem Menüpunkt und über das Icon-Feld einer Karte, in das Sie den Namen eintragen (etwa check-circle).
- Das Suchfeld durchsucht Namen und hinterlegte Schlagwörter — die Suche nach „Warenkorb" findet also auch Symbole, die anders heißen.
- Das Raster lädt in Schritten von 120 Kacheln nach („Weitere … laden") und lässt sich mit den Pfeiltasten durchlaufen.
- Ausgeliefert werden nur die Symbole, die Ihre Website tatsächlich verwendet.
| Kategorie | Anzahl |
|---|---|
| „Pfeile" | 23 |
| „Bedienung" | 37 |
| „Layout" | 19 |
| „Handel" | 15 |
| „Kommunikation" | 16 |
| „Medien" | 13 |
| „Dateien" | 13 |
| „Social" | 14 |
| „Wetter" | 12 |
| „Natur" | 12 |
| „Geräte" | 15 |
| „Sicherheit" | 11 |
| „Finanzen" | 14 |
| „Gesundheit" | 9 |
| „Essen" | 11 |
| „Verkehr" | 12 |
| „Sonstiges" | 26 |
Symbole ersetzen keine Beschriftung
Ein Symbol allein sagt selten eindeutig, was gemeint ist. Verwenden Sie es begleitend zu einer Beschriftung — in Karten also zusätzlich zum Titel, in Menüpunkten zusätzlich zum Text. Wählen Sie außerdem thematisch passende Symbole statt überall desselben Häkchens.
Stil-Steuerung im Editor
Wählen Sie im Editor einen Baustein aus, erscheinen in der rechten Spalte drei Ebenen: „Stil" für die Sichtbarkeit, „Flow Design · Pro" für Hintergrund, Farbe, Effekte und Animation, und der „Pro-Modus" für jedes einzelne CSS-Detail.
Die allgemeinen Regler
Die ersten beiden Ebenen decken den Alltag ab. Sie brauchen dafür keine CSS-Kenntnisse: Sie wählen aus Listen und Kacheln, und die Vorschau zeigt das Ergebnis sofort.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Sichtbar auf" | Auf welchen Bildschirmgrößen der Baustein erscheint; ein abgeschalteter Punkt wird darunter als „Ausgeblendet: …" aufgeführt | „Mobil", „Tablet", „Desktop" — einzeln an- und abschaltbar | alle drei sichtbar |
| „Hintergrund" | Was hinter dem Baustein liegt | „Keiner" · „Verlauf" · „Muster" · „Bild" | „Keiner" |
| „Bildausschnitt" | Verschiebt den sichtbaren Ausschnitt eines Hintergrundbildes („Fokus horizontal", „Fokus vertikal"); „Zentriert" stellt beides zurück | 0 bis 100 Prozent je Achse | 50 / 50 |
| „Overlay" | Legt eine Auflage über das Bild, damit Text lesbar bleibt | „Tint" mit „Tint-Farbe" und „Deckkraft" oder ein „Verlauf" | aus; als Tint #000000 mit 45 Prozent |
| „Textfarbe" | Überschreibt die Textfarbe im Baustein | jeder Farbwert; „zurücksetzen" entfernt sie wieder | Farbe des Themes |
| „Effekte" | Schatten, Glow, Glas, Rahmen und Blur — mehrere gleichzeitig möglich | 25 Effekte in 5 Gruppen | keiner |
| „Animation" | Einblend-Bewegung beim Hereinscrollen | 9 Animationen mit Dauer, Verzögerung und Easing | keine |
Der Pro-Modus
Der „Pro-Modus · jedes CSS-Detail" ist für Feinarbeit gedacht. Alle Angaben gelten je Bildschirmgröße getrennt: „Desktop" ist die Grundlage, „Tablet" und „Mobil" überschreiben sie nur dort, wo Sie etwas eintragen — ein leeres Feld erbt vom Desktop.
-
Baustein auswählen und in der rechten Spalte auf „Pro-Modus · jedes CSS-Detail" klicken.
-
Unter „Wirkt auf" entscheiden, ob die Angaben für den „Ganzen Block" oder für ein einzelnes Element gelten (etwa „Karte", „Titel" oder „Button").
-
Oben den „Breakpoint" wählen: „Desktop" ist die Grundlage, „Tablet" und „Mobil" überschreiben sie („überschreibt Desktop · leer = erbt").
-
Die benötigten Abschnitte aufklappen und die Werte setzen. Die Zahl am Breakpoint zeigt, wie viele Angaben dort gesetzt sind.
| Abschnitt | Einstellungen | Wertebereich |
|---|---|---|
| „Abstand" | Innenabstand (padding) und Außenabstand (margin), je für Oben, Rechts, Unten und Links; ein Schalter verknüpft alle vier Seiten | Innenabstand 0 bis 200, Außenabstand −100 bis 200, jeweils in px, rem oder % |
| „Rahmen" | „Rahmenbreite", „Rahmenstil", „Rahmenfarbe" und der „Eckenradius" je Ecke | Breite 0 bis 20; Stil durchgezogen, gestrichelt, gepunktet, doppelt oder keiner; Radius 0 bis 100 |
| „Schatten" | „X-Versatz", „Y-Versatz", „Weichzeichnen", „Ausbreitung" und „Schattenfarbe" | Werte in Pixeln; Vorgabe 0 / 8 / 24 / 0 in #000000 |
| „Typografie" | „Schriftgröße", „Schriftstärke", „Zeilenhöhe", „Laufweite", „Texttransformation", „Textausrichtung" | Größe 0 bis 120 (px, rem, em); Stärke „Leicht", „Normal", „Mittel", „Halbfett", „Fett", „Extrafett", „Schwarz"; Zeilenhöhe 0,8 bis 3; Laufweite −5 bis 20 (px, em); Texttransformation keine, GROSSBUCHSTABEN, kleinbuchstaben oder „Wortanfänge"; Ausrichtung links, zentriert, rechts oder „Blocksatz" |
| „Farben" | „Textfarbe" und „Hintergrundfarbe" | jeder Farbwert, auch rgba() und Farbnamen |
| „Größe" | „Breite", „Min-Breite", „Max-Breite", „Höhe", „Min-Höhe", „Max-Höhe" | 0 bis 1200 in px, rem, %, vw oder vh; Schlüsselwörter wie auto oder none über „Eigenes CSS" |
| „Position & Layout" | „Anzeige (display)", „Position", z-index, „Deckkraft", „Überlauf (overflow)" | Anzeige block, inline-block, flex, inline-flex, grid oder ausgeblendet; Position static, „relativ", „absolut", „fixiert" oder sticky; z-index 0 bis 100; Deckkraft 0 bis 1 in Schritten von 0,05; Überlauf sichtbar, „verborgen", auto, „scrollen" oder clip |
| „Eigenes CSS" | Freitextfeld „Eigene CSS-Deklarationen" für alles, was die Abschnitte nicht abdecken | nur Deklarationen der Form Eigenschaft: Wert; — kein Selektor |
Nicht jedes Ziel braucht jeden Abschnitt: Ein Symbol hat keine Typografie, eine Karte keine Schriftgröße. Deshalb bietet der Pro-Modus je nach Auswahl unter „Wirkt auf" eine passende Teilmenge an.
| Ziel unter „Wirkt auf" | Angebotene Abschnitte |
|---|---|
| „Ganzer Block" | alle acht Abschnitte |
| „Karte" | Abstand, Rahmen, Schatten, Farben, Größe, Position & Layout, Eigenes CSS |
| „Bild" | Rahmen, Schatten, Größe, Position & Layout, Eigenes CSS |
| „Icon" | Farben, Größe, Abstand, Rahmen, Eigenes CSS |
| „Titel" | Typografie, Farben, Abstand, Eigenes CSS |
| „Text" | Typografie, Farben, Abstand, Eigenes CSS |
| „Button" | Farben, Typografie, Rahmen, Abstand, Schatten, Eigenes CSS |
| „Zusatz" | Typografie, Farben, Abstand, Eigenes CSS |
Worauf Sie im Pro-Modus achten sollten
Feste Höhen und Breiten brechen bei langen Texten und in anderen Sprachen. Arbeiten Sie lieber mit Abständen und Maximalbreiten. Prüfen Sie jede Änderung in allen drei Bildschirmgrößen, und setzen Sie Werte nur dort, wo Sie sie wirklich brauchen — die Zahl am Breakpoint zeigt Ihnen, wie viele Angaben gesetzt sind. Mit „Pro-Stile für … zurücksetzen" leeren Sie den aktuellen Breakpoint wieder. Das Feld „Eigenes CSS" nimmt ausschließlich Deklarationen an, keinen Selektor.
Raster und Karten
Bausteine mit einer Kartenliste — etwa Merkmal-Raster, Bewertungen oder Vergleichstabellen — haben eine eigene Steuerung für Spaltenzahl, Reihenfolge und Sichtbarkeit der Karten.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Spalten (alle Breakpoints)" | Spaltenzahl des Rasters für alle Bildschirmgrößen | 1, 2, 3 oder 4 | 3 |
| „je Breakpoint" | Schaltet auf getrennte Spaltenzahlen für „Desktop", „Tablet" und „Mobil" um | je Breakpoint 1 bis 4 | aus; ohne Angabe gilt: Desktop wie eingestellt, Tablet höchstens 2, Mobil 1 |
| „Karte hinzufügen" | Hängt eine leere Karte an; die Struktur der letzten Karte bleibt erhalten | — | — |
| Karten-Werkzeuge | „Karte {n} duplizieren", „Karte {n} nach oben", „Karte {n} nach unten", „Karte {n} entfernen" sowie „Zum Sortieren ziehen" | — | — |
| „Sichtbar auf" (je Karte) | Blendet einzelne Karten auf bestimmten Bildschirmgrößen aus | „Mobil", „Tablet", „Desktop" | überall sichtbar |
| „Kachelgröße" | Wie viele Spalten und Zeilen eine Kachel belegt — nur bei Galerien im Mosaik-Layout | 1x1, 2x1, 1x2, 2x2 | 1x1 |
| Icon-Feld | Symbol einer Karte; die Vorschau zeigt das Symbol sofort neben dem Feld | Name aus dem Symbol-Katalog, etwa check-circle | leer |
Reihen voll besetzen
Ein dreispaltiges Raster wirkt am ruhigsten mit drei, sechs oder neun Karten. Bleibt in der letzten Reihe eine Lücke, fällt sie sofort auf — ergänzen Sie eine Karte oder wechseln Sie die Spaltenzahl. Auf dem Handy steht ohne eigene Angabe ohnehin eine Karte je Reihe.
Logo
Das Logo erscheint im Kopfbereich Ihrer Website anstelle von Symbol und Name. Drei Wege führen dorthin: „Wortmarke", „KI-Logo" und „Datei". Über den Feldern sehen Sie jederzeit eine Vorschau auf hellem und auf dunklem Grund.
Wortmarke — Ihr Name als Schriftzug
-
Unter „Markentext" Ihren Namen eintragen.
-
Bei „Schrift" eine Kategorie und bei „Stärke" zwischen „Normal", „Halbfett" und „Fett" wählen.
-
„Einfarbig" (Feld „Farbe") oder „Verlauf" (Felder „Von" und „Bis") wählen und bei Bedarf den „Abstand" der Buchstaben einstellen.
-
Auf „Als Website-Logo übernehmen" klicken.
KI-Logo — die KI entwirft ein Vektor-Logo
-
Unter „Markentext" Ihren Namen eintragen.
-
Unter „Art" zwischen „Wortmarke", „Symbol + Text" und „Monogramm" wählen.
-
Unter „Hinweis (optional)" Stil oder Motiv beschreiben, zum Beispiel schlicht und mit einem Blatt-Symbol.
-
Auf „Erzeugen" klicken. Gefällt das Ergebnis nicht, auf „Neu erzeugen" klicken.
-
Auf „Als Website-Logo übernehmen" klicken.
Datei — ein vorhandenes Logo hochladen
Über „Eigene Logo-Datei hochladen (PNG, JPG, WebP, GIF oder SVG)." wählen Sie Ihre Datei aus und klicken ebenfalls auf „Als Website-Logo übernehmen".
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| Modus | Woher das Logo kommt | „Wortmarke" · „KI-Logo" · „Datei" | „Wortmarke" |
| „Markentext" | Der Text, der als Schriftzug gesetzt wird | bis zu 40 Zeichen | Name der Website |
| „Schrift" | Schriftgattung des Schriftzugs — bewusst allgemeine Familien, weil ein als Bild eingebundenes Logo die Website-Schriften nicht sieht | „Serifenlos" · „Serif" · „Monospace" · „Display" | „Serifenlos" |
| „Stärke" | Strichstärke des Schriftzugs | „Normal" (400) · „Halbfett" (600) · „Fett" (800) | „Fett" |
| „Einfarbig" / „Verlauf" | Füllung des Schriftzugs | „Einfarbig" mit „Farbe" oder „Verlauf" mit „Von" und „Bis" | „Verlauf" von #004D43 nach #ACA316; als Einzelfarbe #004D43 |
| „Abstand" | Abstand zwischen den Buchstaben | −2 bis 8 in Schritten von 0,5 | 0 |
| „Art" (KI-Logo) | Aufbau des erzeugten Logos | „Wortmarke" · „Symbol + Text" · „Monogramm" | „Symbol + Text" |
| „Hinweis (optional)" | Beschreibung von Stil oder Motiv für die KI | bis zu 200 Zeichen | leer |
| „Datei" | Eigene Logo-Datei hochladen | PNG, JPG, WebP, GIF oder SVG | — |
| „Logo aufs OG-Vorschaubild" | Brennt ein Vektor-Logo weiß in das Vorschaubild für soziale Netzwerke | nur bei gesetztem Vektor-Logo | an |
| „Erstellt mit XICflow"-Hinweis entfernen | Blendet den Hinweis im Fußbereich aus | ab dem Agency-Plan | aus |
Ein gesetztes Logo entfernen Sie mit „Logo entfernen"; danach zeigt die Website wieder das automatische Markenzeichen. Daneben stehen zwei Schalter: „Logo aufs OG-Vorschaubild" brennt ein Vektor-Logo in das Vorschaubild für soziale Netzwerke ein, und der Schalter „Erstellt mit XICflow"-Hinweis entfernen blendet den Hinweis im Fußbereich aus (gekennzeichnet mit „Ab Agency").
Wenn der Übernehmen-Knopf nicht reagiert
Im Modus „Wortmarke" fehlt dann der „Markentext", im Modus „KI-Logo" wurde noch kein Logo erzeugt und im Modus „Datei" noch keine Datei hochgeladen. Erscheint beim Erzeugen „Kontingent erschöpft — bitte Plan prüfen.", ist Ihr KI-Kontingent für den Zeitraum aufgebraucht: Nutzen Sie so lange die Wortmarke oder ein Icon aus dem Iconset, oder erweitern Sie Ihren Tarif.
Favicon
Das Favicon ist das kleine Symbol im Browser-Tab und in Lesezeichen. Es erscheint weiß auf einer Kachel in Ihrer Markenfarbe; ohne eigene Auswahl zeigt es den Anfangsbuchstaben.
-
„Iconset", „KI-Icon" oder „Datei" wählen.
-
Bei „Iconset" unter „Favicon-Icon" ein Symbol über das Suchfeld oder die Kategorien suchen.
-
Bei „KI-Icon" optional Stil oder Idee beschreiben und auf „Erzeugen" klicken.
-
Bei „Datei" eine SVG-Datei hochladen: „Nur SVG. Wird weiß auf die Markenfarbe gesetzt (Favicon-/PWA-Kachel)."
-
Auf „Als Favicon übernehmen" klicken.
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| Modus | Woher das Symbol kommt | „Iconset" · „KI-Icon" · „Datei" | „Iconset" |
| „Favicon-Icon" | Auswahl aus dem Symbol-Katalog | 272 Symbole in 17 Kategorien, mit Suche und Filter | keine Auswahl |
| „KI-Icon" | Die KI erzeugt ein monochromes Marken-Icon | optionaler Hinweis zu Stil oder Idee | — |
| „Datei" | Eigenes Symbol hochladen | nur SVG; wird weiß auf die Markenfarbe gesetzt | — |
| Ohne Auswahl | Das Favicon zeigt den Anfangsbuchstaben der Website | — | Anfangsbuchstabe |
| „Auf Buchstaben zurücksetzen" | Verwirft das eigene Favicon | — | — |
Mit „Auf Buchstaben zurücksetzen" kehren Sie jederzeit zum Anfangsbuchstaben zurück. Weil das Symbol immer einfarbig weiß auf der Markenkachel steht, eignen sich klare Umrisse besser als feine Details — bei 16 Pixeln Kantenlänge geht Feinzeichnung verloren.
Das Favicon zeigt weiter den Buchstaben?
Nach der Auswahl muss „Als Favicon übernehmen" geklickt und die Website veröffentlicht werden. Browser merken sich Favicons zudem lange — laden Sie die Seite anschließend neu.
Kopf- und Fußzeile
Kopfzeile, Fußzeile und Navigation haben im Dashboard einen eigenen Bereich („Header & Footer"). Alles wird je Sprache getrennt gepflegt; oben schalten Sie zwischen den Sprachen Ihrer Website um.
Kopfzeile
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Logo-Text (Wortmarke)" | Text im Kopfbereich, wenn kein Bild gesetzt ist | freier Text | Name der Website |
| „Logo-Bild URL (hell)" / „(dunkel)" | Zwei Bildvarianten für hellen und dunklen Modus | Adresse einer Bilddatei, etwa /logo.svg | leer |
| „Logo-Höhe (px)" / „Logo-Breite (px, optional)" | Darstellungsgröße des Logos | Zahlen in Pixeln | leer |
| „Stil" | Verhalten der Kopfzeile beim Scrollen | „Standard" · „Klebend (sticky)" · „Statisch" | „Standard" |
| „Theme-Umschalter zeigen" | Blendet die Umschaltung zwischen hell und dunkel ein | an / aus | aus |
| „Sprachumschalter zeigen" | Blendet die Sprachauswahl ein | an / aus | aus |
| „Button (primär)" / „Button (sekundär)" | Bis zu zwei Aktionsknöpfe mit Beschriftung und Linkziel | Stil „Primär" oder Ghost; Ziel „Gleiches Fenster" oder „Neues Fenster" | kein Button |
Fußzeile und Navigation
| Einstellung | Wirkung | Mögliche Werte | Vorgabe |
|---|---|---|---|
| „Logo-Text" | Wortmarke im Fußbereich | freier Text | Name der Website |
| „Logo-Bild URL (hell)" / „(dunkel)" | Bildvarianten für den Fußbereich | Adresse einer Bilddatei | leer |
| Kurzbeschreibung | Ein Satz unter der Wortmarke | freier Text | leer |
| „Copyright (überschreibt Standard)" | Eigene Copyright-Zeile | freier Text | automatische Zeile |
| „Footer-Spalten" | Beliebig viele Spalten mit „Spaltentitel" und Links | je Link Beschriftung und Ziel | keine Spalten |
| „Rechtstexte (Footer-Spalte)" | Eigene Liste der Rechtstexte | je Eintrag Beschriftung und Ziel | Impressum / Datenschutz / AGB / Barrierefreiheit |
| „Social-Links" | Verweise auf Ihre Profile | je Eintrag Plattform und Adresse | keine |
| „Menuepunkte" (Navigation) | Die Hauptnavigation je Sprache, wahlweise mit Symbol und Mega-Menü aus „Karten" und „Spalten" | „Nur im Footer" blendet einen Punkt aus der Kopfzeile aus | keine Menüpunkte |
Mit „Live-Vorschau" blenden Sie den veröffentlichten Stand Ihrer Startseite ein, mit „Vorschau ausblenden" wieder aus; „Live ansehen" öffnet die Website in einem neuen Tab. Die Vorschau zeigt bewusst den zuletzt veröffentlichten Stand — Ihre Änderungen erscheinen dort erst nach dem Speichern und Veröffentlichen.
Rechtstexte bleiben auch ohne Eintrag erhalten
Tragen Sie unter „Rechtstexte (Footer-Spalte)" nichts ein, gilt der Standard: Impressum / Datenschutz / AGB / Barrierefreiheit. Eigene Einträge ersetzen diese Liste vollständig — nehmen Sie die Pflichtseiten dann bitte mit auf.
Marke übernehmen und Markenstimme
Haben Sie bereits eine Website, leitet die KI daraus Vorschläge ab. Nichts wird automatisch überschrieben — Sie entscheiden, was übernommen wird.
-
Die Adresse Ihrer bestehenden Website eintragen (Beispiel im Feld: „https://ihre-alte-website.de") und auf „Analysieren" klicken.
-
Das Ergebnis prüfen: Name, Claim, Branche, erkannter Ton und die gefundenen Farben.
-
Auf „Tonalität übernehmen" klicken, um Ton und Markenstimme zu setzen, und auf „Farben übernehmen" für Primär- und Akzentfarbe.
„Farben übernehmen" setzt Primär- und Akzentfarbe auf die gefundenen Werte; die vollständige Abstufung entsteht daraus wie bei jeder anderen Basisfarbe. Prüfen Sie danach den Kontrast im Farbwähler — eine aus einem Screenshot gelesene Farbe erfüllt nicht automatisch die Anforderungen an Fließtext.
Wenn die Analyse fehlschlägt
Meldet der Abschnitt „Analyse fehlgeschlagen.", prüfen Sie die eingegebene Adresse — vollständig, mit „https://" — und ob die Seite öffentlich erreichbar ist.
Markenstimme
Die Markenstimme bestimmt den Ton, in dem die KI Texte für diese Website schreibt und überarbeitet — konsistent über alle Sprachen hinweg.
-
Eine der Kacheln wählen: „Professionell", „Freundlich", „Selbstbewusst", „Verspielt", „Hochwertig", „Technisch" oder „Inspirierend".
-
Unter „Eigene Stimme (optional)" eigene Vorgaben ergänzen, etwa zur Anrede oder zum Umgang mit Fachbegriffen.
-
Auf „Stimme speichern" klicken. Mit „Zurücksetzen" nehmen Sie die Auswahl wieder zurück.
Popup
Ein Popup zeigt einen Hinweis oder eine Aktion auf allen Seiten — nur Inhalt, kein Tracking, für Besucher jederzeit schließbar.
-
Oben rechts im Abschnitt das Häkchen bei „Aktiv" setzen.
-
„Titel" und „Text" sowie „Button-Text" und „Button-Ziel (URL)" füllen, zum Beispiel mit Ihrer Kontaktseite.
-
Unter „Darstellung" zwischen „Modal (Mitte)" und „Banner (unten)" wählen.
-
Unter „Auslöser" zwischen „Sofort", „Nach Verzögerung", „Beim Scrollen" und „Beim Verlassen" wählen. Bei „Nach Verzögerung" zusätzlich „Verzögerung (s)" einstellen.
-
Unter „Häufigkeit" „Immer", „Einmal je Sitzung" oder „Nur einmal" festlegen und auf „Popup speichern" klicken.
Das Popup erscheint nicht?
Prüfen Sie das Häkchen „Aktiv", den „Auslöser" und die „Häufigkeit": Bei „Einmal je Sitzung" oder „Nur einmal" sehen Sie es nicht erneut, solange die Sitzung läuft.