> ## 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. # Ein Element gestalten > Elemente im Bereich Content des Widget Studio auswählen, anordnen, gestalten und ihre Zustände festlegen. Mit der Gestaltung eines Elements legen Sie fest, wie es aussieht und wo es auf dem Bildschirm platziert wird. Sie nehmen diese Änderungen im Bereich **Content** des Widget Studio vor, in dem jedes Element in der Liste **Elements** aufgeführt ist. ![Registerkarte Content des Widget Studio mit dem Screen Default und der Liste Elements: Wrapper, Button, Image, Text und Heading](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-1-2x.png) ## Elemente auswählen und anordnen ### Ein Element auswählen Klicken Sie auf ein Element, um es auszuwählen, oder klicken Sie auf seinen Namen in der Hierarchie im linken Panel. ### Ein Element hinzufügen, duplizieren, bearbeiten oder löschen Wenn Sie den Mauszeiger über ein Element im linken Panel bewegen, werden weitere Aktionen angezeigt. Klicken Sie auf das Symbol **+**, um unter dem ausgewählten Element ein Element hinzuzufügen. Klicken Sie auf das Menü **three-dots**, um das Element zu bearbeiten, umzubenennen, zu duplizieren, auszublenden oder zu löschen. ![Registerkarte Content mit dem ausgewählten Image-Element in der Liste Elements unter Wrapper](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-2-2x.png) > [!NOTE] > > Wenn ein Event mit einem Ihrer Elemente verknüpft ist, können Sie das Element nicht löschen. Sie müssen zuerst das Event löschen. #### Ein Element duplizieren Sie können ein Element auf demselben Bildschirm duplizieren oder ein Element von einem Bildschirm auf einen anderen duplizieren. ### Die Größe eines Elements ändern Sie können die Größe Ihrer Elemente im Vorschaufenster (rechts) ändern. Platzieren Sie den Mauszeiger am Rand eines Elements, und klicken und ziehen Sie dann, um seine Abmessungen anzupassen. Sie können diese Abmessungen auch im linken Panel ändern. #### Auto-resize text and heading ![Panel des Heading-Elements, Registerkarte General, mit aktiviertem Kontrollkästchen Auto-resize block to fit text](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-7-2x.png) Diese Option passt die Größe des Elements automatisch an. Das Element wird je nach Textinhalt größer oder kleiner. #### Smart guides Smart guides helfen Ihnen, Elemente beim Bearbeiten Ihres Widgets vertikal und horizontal auszurichten und zu positionieren. #### Constrain proportions Nachdem Sie die Größe eines Elements angepasst haben, können Sie seine Abmessungen sperren. So fixieren Sie die Proportionen eines Elements: 1. Wählen Sie ein Element im linken Panel aus. 2. Bewegen Sie den Mauszeiger über das Element, und klicken Sie auf das **padlock**-Symbol. ### Ein Element verschieben Ziehen Sie ein Element in der Vorschau per Drag-and-drop, um es zu verschieben. ### Ein Element drehen Um ein Element zu drehen, wählen Sie es aus, und geben Sie im linken Panel im Parameter für die Drehung den gewünschten Drehwinkel ein. ## Den Inhalt eines Elements bearbeiten Klicken Sie auf ein Element, um seine Einstellungen aufzurufen. Sie können KI verwenden, um Ihren Text zu bearbeiten oder zu generieren. ![Panel des Text-Elements, Registerkarte General, mit dem Texteditor, der den Text Get 20% off your first order when you join our list today anzeigt](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-3-2x.png) Um einen Link hinzuzufügen, markieren Sie ein Wort, eine Wortgruppe oder einen ganzen Textblock. > [!NOTE] > > Um die URL zu ändern, die mit einem Text verknüpft ist, können Sie ein Klick-Ereignis erstellen und ihm eine **URL**-Aktion zuordnen. Sie können Ihren Überschriften, Texten und Links außerdem Emojis hinzufügen. ## Eine eigene Schriftart hochladen Sie können Ihrem Widget eine eigene Schriftart hinzufügen. 1. Klicken Sie im Texteditor auf das Symbol **T**, und klicken Sie dann auf **+ Add a font**. ![Panel des Text-Elements mit dem Popover für die Schrifteinstellungen, das Font size, Font family und Font weight sowie die Schaltfläche Apply zeigt](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-4-2x.png) 2. Wählen Sie in den Einstellungen für den Schriftimport Ihre **Font Source:** aus: * **From your website:** Wählen Sie diese Option, wenn die Schriftart bereits auf derselben Website wie das Widget gehostet wird. * **Link to a font file:** Geben Sie die direkte URL zur Schriftdatei an (zum Beispiel `.woff`, `.woff2`, `.ttf` oder `.otf`). * **Embed code:** 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). Wenn Sie Google Fonts einfügen, kopieren Sie nur den Code von `@import` bis ``. 3. Geben Sie die **Font family** an. 4. Klicken Sie auf **Preview & Add**, um sofort zu sehen, wie die Schriftart mit Ihrem Text aussieht. ![Dialogfeld zur Vorschau der benutzerdefinierten Schriftart Pacifico mit Schriftstärken von Thin 100 bis SemiBold 600 sowie den Schaltflächen Back, Cancel und Add](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-5-2x.png) Sie können außerdem den Vorschautext anpassen und die kursive Darstellung ein- oder ausschalten. Sie können eine oder mehrere Schriftstärken auswählen. Klicken Sie auf **Add**, um Ihre Auswahl zu bestätigen. Nach dem Speichern erscheint Ihre Schriftart im Dropdown-Menü **Font family**. Sie können die Schriftart auf jedes Textelement anwenden und in Echtzeit in der Vorschau anzeigen. ## Benutzerdefinierte Farben verwenden Mit der Pipette im Farbauswahl-Panel können Sie eine beliebige Farbe auf dem Bildschirm aufnehmen und in einem Element verwenden. ![Panel des Text-Elements mit aktiviertem Enable background color und geöffnetem Custom color picker mit dem Hex-Wert #ffffff](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-6-2x.png) ## Die Zustände eines Elements festlegen Wenn Sie ein Element auswählen, erscheinen oben im Bearbeitungsmenü zwei Registerkarten: **General** und **States**. Wählen Sie die Registerkarte **States** aus, um zusätzliche Eigenschaften zu finden, mit denen Sie die Zustände des Elements (Hover, Active, Disabled) bearbeiten können. ![Panel des Text-Elements, Registerkarte States, mit Choose state auf default und einem Hinweis, einen Zustand zur Bearbeitung auszuwählen](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-8-2x.png) Sie können zum Beispiel die Darstellung eines Überschriftenelements im Hover-Zustand personalisieren. ![Panel des Text-Elements, Registerkarte States, mit Choose state auf hover und den Bereichen Font, Background Color, Background Image und Border](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-9-2x.png) Wenn Sie die Registerkarte **General** anklicken, wechselt die Vorschau Ihres Widgets in den Standardzustand des Elements. Sie können den Standardzustand des Elements auf der Registerkarte **General** auswählen. ## Den HTML-Code eines Textelements bearbeiten Verwenden Sie den HTML-Code-Editor, um die Auszeichnung eines Text-Elements zu ändern, zum Beispiel die strong-Tags um einen Teil der Nachricht. So bearbeiten Sie den HTML-Code eines Text-Elements: 1. Wählen Sie ein Text-Element aus. 2. Klicken Sie in der Symbolleiste **Text content** auf das Drei-Punkte-Menü und dann auf **Code**. 3. Bearbeiten Sie den HTML-Code im Code-Editor. ![Einstellungspanel des Text-Elements, Registerkarte General, mit dem Inhalt als HTML-Code, einschließlich der strong-Tags um 20% off](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/edit-your-widgets-step-14-code-2x.png)