Top
Eines Bildes in ein Pop-up einsetzen
  • 08 Dec 2024
  • 2 Minuten zu lesen
  • Dunkel
    Licht
  • pdf

Eines Bildes in ein Pop-up einsetzen

  • Dunkel
    Licht
  • pdf

Artikel-Zusammenfassung

Visual Editor ermöglicht es Ihnen, ein Bild in einer Pop-up-Vorlage direkt über die UI einzusetzen, ohne den JSX-Code bearbeiten zu müssen. Bilder in jede Pop-up-Vorlage einbetten, indem Sie ihre URL hinzufügen. Jedes Bild, das Sie in einem Pop-up einsetzen möchten, muss das erste im Whatfix Dashboard gehostet, oder auf einer online Bildteilungs-Website wie Imgur, ImgBB, und mehr. Nachdem die Bilder gehostet sind, verwenden Sie die Bild-URL, um die Bilder hinzuzufügen.

Note
  • Stellen Sie sicher, dass Sie die URL des Bildes haben, bevor Sie fortfahren.
  • Die Bild-URL muss https enthalten, wenn das Pop-up auf einer sicheren Webseite angezeigt wird.
  • Nur .jpg, .gif und .png Bildformate mit einer Größe von bis zu 4 MB werden unterstützt.
  • Mit Whatfix können Sie bis zu 100 Bilder und Videos von Ihrem lokalen Laufwerk hochladen und in Ihren Pop-ups verwenden. Sobald diese Grenze erreicht ist, wird die Fehlermeldung angezeigt. Dieses Limit kann jedoch erhöht werden, indem Sie support@whatfix.com kontaktieren.

Verwenden Sie die folgenden Schritte, um ein Bild in einem Pop-up mit dem Visual Editoreinzusetzen:

  1. Melden Sie sich bei der Anwendung an, in der Sie Inhalte erstellen möchten, und starten Sie dann den Whatfix Studio.
    CLM_editor plug in2

  2. Auf dem Whatfix Studio, klicken Sie Pop-up.
    RB_EDT_Clickpopup

  3. Wählen Sie in der Dropdown-Liste Thema das gewünschte Farbthema aus.
    RB_EDT_popupthemes

Note

Sie können auch Ihre eigene Farbe verwenden, indem Sie den Hex-Farbcode in das Textfeld eingeben.

  1. Wählen Sie eine der Pop-up-Vorlagen aus, zum Beispiel Funktion Onboarding.
    Select_template

  2. Klicken Sie auf den Bildplatzhalter, um die Image Froala Toolbar zu öffnen.
    Image_froala_toolbar

  3. Klicken Sie auf das + Symbol.
    click_add_componentnew

  4. Auf dem Dialogfeld Komponente hinzufügen, klicken Sie Bild.
    click_image

  5. Sie können die URL des Bildes, das Sie einfügen möchten, einsetzen oder ein Bild von Ihrem lokalen Laufwerk oder der Whatfix-Galerie hochladen.
    click_add_img

  6. Klicken Sie Einsetzen.
    click_insert

  7. Das Bild wird im Pop-up hinzugefügt.

your title goes here

Sobald das Bild hinzugefügt wurde, führen Sie die folgenden Änderungen mit der Bild-Froala-Symbolleiste durch:

  • Ändern Sie die Bildhöhe mithilfe des Icons für die Größenänderung.

click_image_resize

  • Aktivieren Sie den Des sicheren Bereichs ignorieren Toggle, um das Bild über die Grenzen des sicheren Bereichs hinaus zu erweitern.
    ignore_safe_area_toggle

  • Verwenden Sie das Anordnung-Symbol, um das Bild links, rechts oder zentriert auszurichten.
    Align_icon

  • Verwenden Sie das Vertikale Ausrichten Symbol, um das Bild vertikal auszurichten.
    Vertical_align

  • Verwenden Sie das Alternativ Text Symbol, um eine textuelle Beschreibung des Bildinhalts bereitzustellen.
    Alternative_text

  • Verwenden Sie das Bild ersetzen Symbol, um das vorhandene Bild zu ersetzen.
    Replace_icon

  • Verwenden Sie das Komponente entfernen Symbol, um das Bild zu löschen.
    Remove_Component

your title goes here
  • Verwenden Sie die Ziehen und Ablegen Funktion, um das Bild um das Pop-up herum zu verschieben oder neu zu positionieren.
  • Mit den Drag-Handler kann das Bild sowohl vertikal (spaltenweise) als auch horizontal (zeilenweise) verschoben bzw. neu positioniert werden.
![Drag and Drop](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screen%20Recording%202024-07-05%20at%202.16.06%20PM%20%281%29.gif){height="" width="500"}
your title goes here

Wann Sie Änderungen am Pop-up mit Hilfe der Drag Handlers vornehmen, können Sie bestimmte Änderungen leider nicht rückgängig machen. In diesem Fall müssen Sie das Pop-up möglicherweise neu erstellen. Weitere Informationen finden Sie unter Kann ich die mit den Drag-Handlern vorgenommenen Änderungen rückgängig machen?.

  1. Beenden Sie die Erstellung des Pop-up und klicken Sie Pop-up speichern.
    click_save
your title goes here

Ein Bild in einer Pop-up Vorlage einsetzen oder bearbeiten, nachdem Sie diese erstellt haben, indem Sie das Bearbeiten-Symbol auf dem Dashboard verwenden.
resize_popup_DB


War dieser Artikel hilfreich?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.