Im Input Fields View legst du fest, wie Nutzer eine Farbe in deinem Template ändern, zum Beispiel die Füllung oder den Rahmen einer Form oder die Farbe eines Texts. Nutzer wählen im Design-Generator jede Farbe oder nur Farben aus deiner Palette. Wie du ein Color-Input-Feld anlegst, steht in Color-Input-Feld erstellen: Farbe änderbar machen.
Die Einstellungen öffnest du im Input Fields View mit dem Zahnrad rechts im Input-Feld und schließt sie mit Done. Title, Description und Variable name haben alle Input-Felder. Sie stehen in Einstellungen eines Input-Felds.
Es gibt zwei Feldtypen:
- Color: Nutzer wählen jede Farbe. Im Popup von Create Input Field erstellen Fill Color und Stroke Color diesen Feldtyp.
- Color Selection: Nutzer wählen eine Farbe aus deiner Palette. Select Fill Color und Select Stroke Color erstellen diesen Feldtyp.
Color
Color hat keine eigenen Einstellungen. Standardwert ist die Farbe, die vorher im Element war.
Im Design-Generator sehen Nutzer einen vollständigen Farbwähler: eine Farbfläche, einen Regler für den Farbton, einen Regler für die Deckkraft, den Farbwert als HEX, RGB oder HSL zum Eintippen und eine Pipette.
Color Selection
Nutzer wählen nur aus den Farben, die du vorgibst. Wie du die Palette anlegst, steht in Color-Input-Feld erstellen: Farbe änderbar machen.
- Color options: die Farben deiner Palette. Am Anfang sind das die bisherige Farbe, Weiß und Schwarz. Jede Farbe ist eine Zeile:
- Mit dem Griff links ziehst du die Farbe an eine andere Stelle.
- Ein Klick auf das Farbfeld öffnet einen Farbwähler.
- Der Papierkorb löscht die Farbe. Eine Farbe muss immer bleiben.
- Add option: fügt eine Farbe hinzu. Sie ist eine Kopie der letzten Farbe.
- Type: Dropdown, Button Grid oder Carousel. Standardmäßig Button Grid.
- Size: Größe der Farbfelder, Small, Medium oder Large. Standardmäßig Medium. Bei Dropdown ohne Wirkung.
Eine eigene Beschriftung kannst du einer Farbe nicht geben. Bei Dropdown steht neben jeder Farbe automatisch eine: ihr Farbwert oder „Color 1“, „Color 2“ und so weiter.
Im Design-Generator sehen Nutzer die Farben als Raster (Button Grid), als Reihe zum Durchblättern (Carousel) oder in einem Dropdown-Menü. Auf dem Smartphone zeigt der Design-Generator ein Button Grid als Carousel.