--- title: "Ein Pop-up anpassen" slug: "customize-a-pop-up" updated: 2024-06-11T03:00:27Z published: 2024-06-11T03:00:27Z canonical: "support.whatfix.com/customize-a-pop-up" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Ein Pop-up anpassen Nachdem Sie ein Pop-up erstellt haben, können Sie es basierend auf Ihren Anforderungen anpassen. Sie können folgendes in einem Pop-Up anpassen - Inhalt und Kopfzeile hinzufügen - Bilder und GIFs hinzufügen - Buttons hinzufügen und externe und tiefe Links anhängen your title goes here Die Anpassungsoptionen unterscheiden sich je nach gewähltem Pop-up Template. Auf dem Whatfix Mobile Studio wählen Sie eine Pop-up Vorlage und klicken dann auf das Pop-up, um Folgendes zu konfigurieren, ![popup_template_studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/popup_template_studio.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Header - Unter dem **Header**-Abschnitt können Sie den Header-Text bearbeiten, die Schriftart ändern, Schriftgröße, Schriftstärke, Textausrichtung, Textfarbe und unteren Rand. Sie können auch [Benutzereigenschaft hinzufügen](/mobile/docs/de/personalization) um die Erfahrung für Ihren Endbenutzer zu personalisieren. ![header_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) - Sie können den Header nach oben oder unten ausrichten, füge einen Inhaltsblock hinzu oder lösche den Header-Bereich mit der Aktionsleiste ![header_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Body - Gehen Sie zum Abschnitt **Body**. Sie können den Text bearbeiten, die Schriftart, Schriftgröße, Schriftstärke, Textausrichtung, Textfarbe und unteren Rand ändern. Sie können auch [Benutzereigenschaft hinzufügen](/mobile/docs/de/personalization) um die Erfahrung für Ihren Endbenutzer zu personalisieren. ![2022-11-22_16-57-16](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2022-11-22_16-57-16.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) - Sie können den Inhaltstext oben oder unten ausrichten, beliebigen Inhalt hinzufügen oder den Inhaltsbereich über die Aktionsleiste löschen. ![body_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Topspacer - Um den **Topspacer** zu erhöhen, zu verringern oder zu löschen, benutzt die Aktionsleiste. ![top_spacer_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/top_spacer_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Medien - Unter dem **Medien**-Abschnitt können Sie auf das **Bearbeiten**-Symbol klicken, um Bilder und GIFs zu Ihrem Pop-up von Ihrem lokalen Laufwerk hinzuzufügen und dann die Bildgröße, Ausrichtung und den unteren Rand zu konfigurieren. ![media_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) your title goes here Die unterstützten Bildformate sind .jpg, .png und .svg. - Aktivieren Sie den **KLICKAKTION**-Toggle um eine beliebige Aktion mit Ihrem Bild zu verknüpfen. Durch anklicken auf das Bild wird der Trigger ausgelöst, den Sie konfigurieren. ![click_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_action.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) | Button Aktion | Beschreibung | | --- | --- | | Schließen | Wenn der Benutzer auf die Medien klickt, wird das Pop-up vom App-Bildschirm ausgeblendet | | Externer Link | Wenn der Benutzer auf die Medien klickt, wird er zur URL weitergeleitet, die den Medien angehängt ist | | Deep Link | Wenn der Benutzer auf die Medien klickt, wird er zum App-Bildschirm innerhalb derselben App geleitet, die den Medien angehängt ist | your title goes here Um zu verfolgen, wie viele Benutzer die Medien verwenden, geben Sie zunächst einen Namen für die Aktion an, die Sie Ihren Medien hinzufügen. ![click_events](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_events.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) - Um die **Media** oben oder unten anzugleichen, Fügen Sie einen Inhaltsblock hinzu, oder löschen Sie die Medien-Sektion verwenden Sie die Aktionsleiste. ![media_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Buttons - Um den Button anzupassen, der in Ihrem Pop-up erscheint, wählen Sie einen oder zwei Buttons, passen Sie die Button-Breite, Ausrichtung, Höhe, Radius und den unteren Rand an. ![button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_config.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) - Klicken Sie auf den **Button**-Dropdown, um die einzelnen Buttons anzupassen. Sie können die Farbe des Buttons, den Strich der Button-Umrisslinie, den Text, die Schriftart, die Schriftgröße, das Schriftgewicht und die Button-Aktion ändern. Sie können auch [Benutzereigenschaft hinzufügen](/mobile/docs/de/personalization) um die Erfahrung für Ihren Endbenutzer zu personalisieren. ![individual_button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/individual_button.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Die folgenden sind die Button Aktionen, die Sie konfigurieren können, | Button Aktion | Beschreibung | | --- | --- | | Schließen | Wenn der Benutzer auf den Button klickt, wird das Pop-up vom App-Bildschirm ausgeblendet | | Externer Link | Wenn der Benutzer auf den Button klickt, wird er zur URL weitergeleitet, die dem Button angehängt ist | | Deep Link | Wenn der Benutzer auf den Button klickt, wird er zum App-Bildschirm innerhalb derselben App geleitet, die dem Button angehängt ist | - Sie können die Buttons oben oder unten ausrichten, einen beliebigen Inhaltblock hinzufügen oder die Buttons über die Aktionsleiste löschen. ![button_action_bar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) Layout 1. Klicken Sie auf der linken Seite auf **Layout** um das Overlay und das **Schließen** Symbol zu aktivieren, um das Pop-Up zu verwerfen. ![2023-02-06_16-48-23.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-02-06_16-48-23.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) your title goes here Sie können auch auf **Bearbeiten** klicken, um dasselbe zu tun. ![editiconmobile.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/editiconmobile.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) - Sie können die **Füllfarbe** des Overlays ändern und es Ihrem Endbenutzer ermöglichen, das Pop-up durch Klicken auf das Overlay zu schließen. - Sie können die Farbe der Pop-up-Vorlage ändern und auch die Position des **Schließen**-Symbols, die Schaltflächengröße, die Hintergrundfarbe und die Farbe des Symbols anpassen. ![Mobile_layout config_popup.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_layout%20config_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) 1. Klicken Sie **Erledigt**. ![done_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A49Z&se=2026-10-29T18%3A13%3A49Z&sr=c&sp=r&sig=LAnlPKVvlVZGnGlKdA0IwxNngE9b%2B5mdENOtk9toK%2BU%3D) your title goes here - Sie können [Projekte auf einem Gerät vorab anzeigen](/mobile/docs/de/preview-projects-on-a-device), bevor Sie es für Ihre Endbenutzer live schalten. - Nachdem Sie das Pop-up erstellt und entworfen haben, klicken Sie **Veröffentlichen**, um das Pop-up für Ihre Endbenutzer live zu schalten. Für weitere Informationen zur Veröffentlichung von Whatfix Mobile-Inhalten sehen Sie [Whatfix Mobile-Inhalte veröffentlichen](/mobile/docs/de/publish-whatfix-content).