Farben, Schriften und Form

Im Bereich Design stellst du ein, wie dein ganzer Funnel aussieht: Farben, Schrift und Form.

Farben

Oben stehen sechs Zeilen. Jede trägt oben ihren Namen, darunter das Farbfeld und ein Feld für den Hexcode, also die Schreibweise #1a56db aus Styleguides.

• Primärfarbe (Buttons, Balken)
• Text auf Primärfarbe
• Seitenhintergrund
• Karte
• Text
• Text gedämpft

Die Statusleiste auf dem iPhone

Die iPhone-Statusleiste zeigt die Hintergrundfarbe deines Funnels. Wenn deine Seite oben farbig startet, stelle die Hintergrundfarbe im Design passend ein.

Im Hexfeld darfst du den Wert einfügen. Die Raute wird ergänzt, falls sie fehlt. Erlaubt sind genau sechs Stellen, Kurzformen wie #abc und Farbnamen nimmt das Feld nicht an. Solange der Wert unvollständig ist, bleibt das Feld rot markiert und die Farbe ändert sich nicht.

Blöcke erben die Theme-Farben

Ein Block ohne eigene Farbe nimmt die Farbe aus dem Design-Bereich. Im Eigenschaften-Panel steht bei so einem Feld das Kennzeichen Theme und daneben ein Tupfer mit der geerbten Farbe.

Nimm den Verweis, wo es geht. Ein Block, der auf die Theme-Farbe zeigt, zieht mit, wenn du später die Markenfarbe änderst. Ein fester Hexwert am Block bleibt stehen, und du suchst ihn Wochen später einzeln zusammen. Der Zurücksetzen-Knopf am Farbfeld entfernt den festen Wert wieder, der Block erbt danach erneut.

Schriften

Es gibt zwei Felder: Überschriften und Fließtext. Beide zeigen ihre eigene Schrift, du siehst also am Feld schon, wie sie aussieht.

Zur Auswahl stehen zwei Gruppen.

• Mitgeliefert: System (neutral), Inter, Montserrat, Work Sans und Lora. Sie liegen auf unserem Server, es geht keine Anfrage an einen fremden Anbieter raus.
• Eigene: Schriften, die du selbst hochlädst. Nur .woff2, höchstens 2 MB je Datei. Ein fetter Schnitt lässt sich zusätzlich hinterlegen, sonst rechnet der Browser ihn selbst aus.

Ein Feld für eine Schrift-Adresse aus dem Netz gibt es bewusst nicht. Das wäre eine Verbindung zu einem fremden Server, und genau die schließt die Datenschutzerklärung des Funnels aus.

Benennst du eine eigene Schrift um, zieht der Funnel mit. Vor dem Löschen wird geprüft, ob ein anderer Funnel sie noch benutzt.

Form

Ecken-Radius ist ein Schieberegler von 0 bis 40 Pixel. Er gilt für Karten, Knöpfe und Felder gemeinsam.

Inhaltsbreite hat drei Stufen:

• Schmal, konzentriert
• Normal, der Standard
• Breit, großzügig

Sie gilt für Landing Pages und für Frage-Schritte. Die Frage-Karte ist bei „Breit" gedeckelt und bleibt auf dem Wert von „Normal". Eine Antwortkachel über die ganze Bildschirmbreite liest sich verloren.

Ein Abschnitt darf seinen Inhalt zusätzlich enger stellen, ein einzelner Block hat das letzte Wort. Breiter als die Stufe hier wird es an keiner Stelle.

Frage-Layout entscheidet, wie ein Frage-Schritt aussieht: Karte legt die Frage in eine weiße Karte mit Schatten, Offen stellt sie direkt auf den Seitenhintergrund. Die zwei kleinen Zeichnungen neben dem Schalter zeigen den Unterschied.

Darunter liegen Logo und Badge und die Fortschrittsanzeige. Beide haben eigene Artikel.