# Wie Elemente, Eigenschaften und Input-Felder zusammenhängen

> Was du mit Input-Feldern alles änderbar machen kannst, welcher Feldtyp zu welcher Eigenschaft passt und was dabei mit deinen Werten passiert.

Source: https://bluepic.io/de/help/input-fields/elements-properties-input-fields  
Language: de  
Category: input-fields  
Last updated: 2026-10-22

Im Template-Editor machst du mit Input-Feldern Teile deines Designs änderbar. Nicht nur Texte und Bilder: Fast alles, was im Properties-Panel einen Wert hat, kann ein Input-Feld bekommen. Hier erfährst du, wie das zusammenhängt und was du dabei beachten musst.

## Element, Eigenschaft, Input-Feld

Drei Dinge greifen ineinander:

1. **Elemente** sind die Bausteine auf dem Canvas: Texte, Bilder, Formen, Pfade, Gruppen und Masken.
2. **Eigenschaften** beschreiben, wie ein Element aussieht: sein Text, seine Farbe, seine Position, ob es sichtbar ist. Du siehst sie im Properties-Panel, sobald du ein Element auswählst.
3. **Input-Felder** geben eine Eigenschaft an die Nutzer weiter. Ohne Input-Feld hat eine Eigenschaft einen festen Wert. Mit Input-Feld bestimmen Nutzer im Design-Generator diesen Wert.

Zwischen Input-Feld und Eigenschaft liegt eine **Variable**: ein benannter Wert, den das Input-Feld schreibt und die Eigenschaft liest. Auch Expressions können diesen Wert nutzen. Nutzer sehen nur das Input-Feld, nicht die Variable. Du brauchst sie meist nicht zu beachten. Wichtig wird sie, wenn ein Input-Feld mehrere Eigenschaften steuern soll (siehe unten).

Eine Eigenschaft mit Input-Feld kannst du im Properties-Panel nicht mehr direkt ändern. Sie ist hervorgehoben und zeigt den aktuellen Wert. Fährst du mit der Maus darüber, findest du **Edit Field** und **Delete Field**.

## Was du änderbar machen kannst

Welcher Feldtyp passt, hängt von der Art der Eigenschaft ab:

| Eigenschaft | Beispiele | Feldtypen |
|---|---|---|
| Text | Inhalt eines Texts (**Content**), Link | **Text**, **Text Selection** |
| Bild | Bild eines Bild-Elements | **Image**, **Image Selection**, **Logo** |
| Farbe | Füllfarbe (**Fill Color**), Rahmenfarbe (**Stroke Color**), Schattenfarbe, Farben eines Verlaufs | **Color**, **Color Selection** |
| Zahl | Position und Größe (**X**, **Y**, **W**, **H**), Drehung, Deckkraft (**Opacity**), **Max Font Size**, Abstände | **Number** |
| Ein oder aus | Sichtbarkeit (**Visibility**), **Wrap**, **Enforce Uppercase** | **Checkbox** |

Für Texte, Bilder und Farben von Formen schlägt dir das Werkzeug **Create Input Field** den passenden Feldtyp direkt vor. Alle anderen Eigenschaften verbindest du über **Select Custom Property**: Du klickst im Properties-Panel auf die Eigenschaft und wählst einen der Feldtypen, die dazu passen.

Einige Eigenschaften können kein Input-Feld bekommen, zum Beispiel die Schriftart (**Font Family**, **Font Style**), der **Crop Mode** von Bildern, das Spiegeln und die Schalter, mit denen du eine Füllung, einen Rahmen oder einen Effekt ein- und ausschaltest. Bei Effekten verbindest du stattdessen ihre Werte, zum Beispiel die Deckkraft eines Schattens mit einem Number-Input-Feld.

> **Tipp:** Ein Element ein- und ausblenden lassen: Verbinde seine Eigenschaft **Visibility** mit einem Checkbox-Input-Feld.

## Input-Felder ohne Eigenschaft

Drei Feldtypen gehören zu keiner Eigenschaft. Sie ordnen das Formular im Design-Generator:

- **Instruction** zeigt Nutzern einen Hinweistext.
- Eine **Input-Feld-Gruppe** (**Group**) zeigt mehrere Input-Felder gemeinsam unter einer Überschrift.
- Eine **Collection** ist eine Liste, in die Nutzer selbst Einträge hinzufügen, zum Beispiel für mehrere Sprecher auf einem Plakat. Sie ist für fortgeschrittene Templates gedacht.

Du legst sie im Input Fields View an, nicht über eine Eigenschaft.

## Was mit dem bisherigen Wert passiert

Verbindest du eine Eigenschaft mit einem Input-Feld, wird ihr bisheriger Wert zum Standardwert des Input-Felds. Nutzer sehen im Design-Generator also zuerst genau das, was vorher im Design stand.

Hatte die Eigenschaft eine Expression, ersetzt Studio sie durch ihr aktuelles Ergebnis. Die Expression ist danach weg. Brauchst du sie wieder, mach den Schritt rückgängig (Cmd + Z, unter Windows Strg + Z).
## Ein Input-Feld für mehrere Eigenschaften

Ein Input-Feld kann mehrere Eigenschaften steuern, auch in verschiedenen Elementen. So ändern Nutzer zum Beispiel mit einer Farbe gleich mehrere Formen. Jedes neue Input-Feld bekommt aber seine eigene Variable. Eine weitere Eigenschaft verbindest du mit einem bestehenden Input-Feld, indem du dort dessen Variable als Expression einträgst. Wie das geht, steht in [Variablen](https://bluepic.io/de/help/expressions-and-logic/variables).

## Was beim Löschen passiert

Löschst du ein Input-Feld, löschst du auch seine Variable. Deine Elemente bleiben: Jede Eigenschaft und jede Expression auf dem geöffneten Canvas, die die Variable genutzt hat, behält ihren letzten Wert als festen Wert. Hat dein Template mehrere Canvases, prüfe die Elemente auf den anderen Canvases. Wie das geht und was du danach prüfen solltest, steht in [Input-Feld löschen](https://bluepic.io/de/help/input-fields/deleting-input-fields).

## Input-Felder und Canvases

Hat dein Template mehrere Canvases, gilt:

- **Input-Felder gehören zum ganzen Template.** Alle Canvases teilen sich dieselben Input-Felder. Nutzer füllen sie einmal aus, und jeder Canvas, auf dem die Elemente verbunden sind, zeigt das Ergebnis.
- **Elemente gehören zu einem Canvas.** Verbindest du auf einem Canvas ein Element mit einem Input-Feld, sind die Elemente auf den anderen Canvases noch nicht verbunden.

Am einfachsten verbindest du deshalb alle Input-Felder auf dem Standard-Canvas, bevor du weitere Canvases anlegst. Neue Canvases übernehmen die Verbindungen dann. Für Canvases, die es schon gibt, übernimmst du sie mit **Sync from Default**, siehe [Canvases](https://bluepic.io/de/help/template-management/canvases).

## Mehr dazu

- [Input-Feld erstellen: Text oder Bild änderbar machen](https://bluepic.io/de/help/input-fields/create-input-field)
- [Color-Input-Feld erstellen: Farbe änderbar machen](https://bluepic.io/de/help/input-fields/make-color-changeable)
- [Canvases: mehrere Größen in einem Template anbieten](https://bluepic.io/de/help/template-management/canvases)
- [Variablen](https://bluepic.io/de/help/expressions-and-logic/variables)