> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Widgets bearbeiten > Fügen Sie Elemente im Widget Studio hinzu, gestalten, skalieren, verschieben und animieren Sie sie und fügen Sie benutzerdefinierte Daten oder Schriftarten ein, um personalisierte Widget-Erlebnisse zu erstellen. ## Ein Element hinzufügen Klicken Sie im Bereich **Element hinzufügen** auf einen Elementtyp, um ihn zu Ihrem Widget hinzuzufügen. Es stehen mehrere Elemente zur Verfügung. ### Typografie * Überschrift * Text * Link ### Umfrage * Schaltfläche * Kurze Antwort * Lange Antwort * Mehrfachauswahl * NPS * Skala * Verstecktes Eingabefeld ### Medien * iFrame * Bild * Video * HTML * Slider * Countdown * Klick-zum-Kopieren * Fortschrittsbalken * Stufen-Fortschrittsbalken * QR-Code * Glücksrad ### Layout * Block * Schließen-Schaltfläche * Form * Tooltip ### Formular * Eingabefeld * Datum * Uhrzeit * Umschalter * Kontrollkästchen * Optionsfeld * Auswahl * Textbereich * Bereichseingabe * Fehlermeldung Der Ebenenstapel spiegelt die Position der Elemente im Vorder- oder Hintergrund wider. ## Ein Element gestalten Sie können die Elemente Ihres Widgets im Bereich **Inhalt** gestalten. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2022-01-27-a-16.18.46.png) ### Ein Element auswählen Klicken Sie auf ein Element, um es auszuwählen, oder klicken Sie auf seinen Namen im Hierarchie-Panel auf der linken Seite. ### Mit der Maus über ein Element fahren Wenn Sie mit der Maus über ein Element im linken Panel fahren, werden sekundäre Aktionen angezeigt. Klicken Sie auf das Symbol **+**, um ein Element unter dem ausgewählten Element hinzuzufügen. Klicken Sie auf das **Drei-Punkte-Menü**, um das Element zu bearbeiten, umzubenennen, zu duplizieren, auszublenden oder zu löschen. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2022-01-27-a-16.24.44-768x372.png) Wenn ein Ereignis mit einem Ihrer Elemente verknüpft ist, können Sie das Element nicht löschen. Sie müssen zuerst das Ereignis löschen. #### Duplizieren Sie können ein Element auf demselben Bildschirm duplizieren oder ein Element von einem Bildschirm auf einen anderen duplizieren. ### Auf ein Element klicken Klicken Sie auf ein Element, um auf seine Einstellungen zuzugreifen. Sie können KI verwenden, um Ihren Text zu bearbeiten oder zu generieren. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Screenshot-2024-05-14-at-6.43.38PM.png) Um einen Link hinzuzufügen, markieren Sie ein Wort, eine Wortgruppe oder einen ganzen Textblock. Um die mit dem Text verknüpfte URL zu ändern, können Sie ein Klick-Ereignis erstellen und eine **URL**-Aktion damit verknüpfen. Sie können auch Emojis zu Ihren Überschriften, Texten und Links hinzufügen. ### Eigene Schriftart hochladen Sie können Ihrem Widget Ihre eigene Schriftart hinzufügen. 1. Klicken Sie auf das Symbol **T** im Texteditor und dann auf **+ Schriftart hinzufügen**. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2025-06-05-a-11.22.43-2-1536x957.png) 2. Wählen Sie in den Schriftart-Importeinstellungen Ihre **Schriftquelle** aus: * **Von Ihrer Website:** Wählen Sie diese Option, wenn die Schriftart bereits auf derselben Website wie das Widget gehostet wird. * **Link zu einer Schriftdatei:** Geben Sie die direkte URL zur Schriftdatei an (z. B. `.woff`, `.woff2` oder `.tiff`). * **Einbettungscode:** Fügen Sie den CSS-Code ein, um die Schriftart mit `@import` oder `@font-face` zu importieren (von Diensten wie Google Fonts oder Adobe Fonts). Beim Einfügen von Google Fonts kopieren Sie nur den Code von `@import` bis ``. 3. Geben Sie die **Schriftfamilie** an. 4. Klicken Sie auf **Vorschau & Hinzufügen**, um sofort zu sehen, wie die Schriftart mit Ihrem Text aussehen wird. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2025-06-05-a-11.27.04-1536x957.png) Sie können auch den Vorschautext anpassen und die kursive Darstellung umschalten. Sie können eine oder mehrere Schriftstärken auswählen. Klicken Sie auf **Hinzufügen** zur Bestätigung. Nach dem Speichern erscheint Ihre Schriftart im Dropdown-Menü **Schriftfamilie**. Sie können die Schriftart auf jedes Textelement anwenden und in Echtzeit vorschauen. ### Eigene Farben verwenden Mit der Pipette im Farbauswahl-Panel können Sie jede Farbe auf dem Bildschirm auswählen und in einem Element verwenden. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-03-a-18.07.23.png) ### Dynamische Texte und Links einfügen Sie können generierten Text oder Linkparameter basierend auf dem Wert eines Formularfelds/API/benutzerdefinierten Daten einfügen. ### Ein Element skalieren Sie können Ihre Elemente im Vorschaufenster (rechts) skalieren. Positionieren Sie Ihren Cursor am Rand eines Elements, klicken und ziehen Sie dann, um seine Abmessungen zu ändern. Sie können diese Abmessungen auch im linken Panel ändern. #### Automatisches Skalieren von Text und Überschrift ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/auto-resize.png) Diese Option passt die Größe des Elements automatisch an, sodass es sich erweitert oder verkleinert, um den Textinhalt aufzunehmen. #### Intelligente Hilfslinien Intelligente Hilfslinien helfen Ihnen, Elemente beim Bearbeiten Ihres Widgets vertikal und horizontal auszurichten und zu positionieren. #### Proportionen einschränken Sobald Ihr Element skaliert ist, können Sie seine Abmessungen sperren. So beschränken Sie die Proportionen eines Elements: 1. Wählen Sie ein Element im linken Panel aus. 2. Fahren Sie mit der Maus über das Element und klicken Sie auf das **Schloss**. ## Zustände eines Elements bearbeiten Wenn Sie ein Element auswählen, erscheinen zwei Registerkarten oben im Bearbeitungsmenü: **Allgemein** und **Zustände**. Wählen Sie die Registerkarte **Zustände**, um zusätzliche Eigenschaften zu finden, mit denen Sie die Zustände des Elements (Hover, Aktiv, Deaktiviert) bearbeiten können. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-27-a-17.31.19.png) Beispielsweise können Sie das Hover-Erscheinungsbild eines Überschriftselements je nach Zustand personalisieren. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-27-a-17.31.40.png) Wenn Sie die Registerkarte **Zustände** auswählen, wechselt die Vorschau Ihres Widgets in den Standardzustand, wenn Sie auf die Registerkarte **Allgemein** klicken. Sie können den Standardzustand des Elements auf der Registerkarte **Allgemein** wählen. ## Ein Element verschieben Ziehen Sie ein Element in der Vorschau, um es zu verschieben. ## Ein Element drehen Wenn Sie ein Element drehen möchten, wählen Sie es aus und geben Sie den gewünschten Drehwinkel im Drehparameter im linken Panel ein. ## Ein Bild im Bildeditor bearbeiten So bearbeiten Sie ein Bild im Bildeditor: 1. Navigieren Sie zu dem Bild, das Sie bearbeiten möchten. 2. Wählen Sie **Im Bildeditor öffnen**. Der Bildeditor wird geöffnet. 3. Wenden Sie Ihre gewünschten Bearbeitungen an. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-07-a-17.36.13-1.png) In diesem Editor sind vier Registerkarten verfügbar: * Rahmen * Zeichnen * Formen * Filter Oben rechts im Bildeditor können Sie hinein- und herauszoomen, Ihre Änderungen rückgängig machen, sie erneut anwenden oder das Bild ändern, das Sie bearbeiten. ### Rahmen Hier können Sie Ihr Bild skalieren, zuschneiden oder spiegeln. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-07-a-17.36.31-2-1536x883.png) #### Skalieren So skalieren Sie Ihr Bild: 1. Klicken Sie auf das Werkzeug **Skalieren**. 2. Geben Sie die gewünschten Abmessungen ein oder verwenden Sie den Schieberegler, um die Bildgröße anzupassen. #### Zuschneiden Wenn Sie die Ränder Ihres Bildes beschneiden müssen: 1. Klicken Sie auf das Werkzeug **Zuschneiden**. 2. Wählen Sie eine voreingestellte Abmessung oder wählen Sie den Zuschnittbereich aus. #### Spiegeln Sie können Ihr Bild horizontal oder vertikal mit dem Werkzeug **Spiegeln** spiegeln. ### Zeichnen Verwenden Sie das Werkzeug **Zeichnen**, um auf Ihrem Bild zu zeichnen. Wählen Sie die Pinselgröße und -farbe, um Ihre Zeichnung anzupassen. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-07-a-17.44.24.png) ### Formen Fügen Sie Formen wie Kreise, Quadrate oder Pfeile mit dem Werkzeug **Formen** ein. Sie können Größe, Farbe und Position der Form anpassen. ### Filter Verbessern Sie Ihr Bild mit Filtern, indem Sie die Option **Filter** auswählen. Sie können Helligkeit, Rauschen und Schwellenwert Ihres Bildes anpassen. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-11-07-a-17.43.52.png) ## Das HTML eines Textelements bearbeiten Sie können jedes Textelement in Ihrem Widget auswählen und in HTML bearbeiten. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2023-05-11-a-14.51.58.png) ## Ein Element animieren Sie können ein Element eines Widgets animieren. Wenn ein Element ausgewählt ist, können Sie zwei Parameter aktivieren (**Eingangsanimation** und **Ausgangsanimation**). ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2022-10-26-a-18.05.04.png) Sie müssen einen Animationseffekt, eine Dauer und eine Verzögerung (optional) wählen. Klicken Sie auf **Vorschau**, um Ihre Animation in der Vorschau anzuzeigen. ## Benutzerdefinierte Daten in ein Element einfügen Sie können benutzerdefinierte Daten in Ihrem Widget verwenden, um bessere Personalisierungsmöglichkeiten zu schaffen. Mit dieser Option können Sie einen dynamischen Wert in jedes Textfeld einfügen. So fügen Sie einen dynamischen Wert in ein Textfeld ein: 1. Wählen Sie ein Textelement aus und klicken Sie im linken Panel auf **Benutzerdefinierte Daten**. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/edit-your-widgets/Capture-decran-2022-10-26-a-16.07.54-1.png) 2. Wählen Sie eine Datenquelle (eine benutzerdefinierte Daten, die Sie bereits erstellt haben). Sie können Ihren benutzerdefinierten Daten einen Standardwert zuweisen. Dieser Standardwert wird angezeigt, wenn der Wert Ihrer benutzerdefinierten Daten undefiniert oder null ist. 3. Klicken Sie auf **Validieren**. Anschließend können Sie simulieren, wie die benutzerdefinierten Daten in der Produktion angezeigt werden.