Skip to main content
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

​
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
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
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
Um einen Link hinzuzufügen, markieren Sie ein Wort, eine Wortgruppe oder einen ganzen Textblock.
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
  1. 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 </style>.
  2. Geben Sie die Font family an.
  3. 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
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

​
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
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
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