Zum Hauptinhalt springen

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.

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.
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. 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.
  1. 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 </style>.
  2. Geben Sie die Schriftfamilie an.
  3. Klicken Sie auf Vorschau & Hinzufügen, um sofort zu sehen, wie die Schriftart mit Ihrem Text aussehen wird.
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.
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

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.
Beispielsweise können Sie das Hover-Erscheinungsbild eines Überschriftselements je nach Zustand personalisieren.
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.
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.

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.

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.

Das HTML eines Textelements bearbeiten

Sie können jedes Textelement in Ihrem Widget auswählen und in HTML bearbeiten.

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).
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.
  1. 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.
  2. Klicken Sie auf Validieren.
Anschließend können Sie simulieren, wie die benutzerdefinierten Daten in der Produktion angezeigt werden.