Effektive Website-Kommunikation erfordert ein sorgfältiges Gleichgewicht zwischen Nutzererlebnis und geschäftlichen Zielen. Während schlecht getimte Modale die Navigation stören können, bleiben strategisch gestaltete Pop-ups ein zentrales Werkzeug, um Leads zu gewinnen, Angebote zu bewerben und Besucher zu binden. Das Sammeln von E-Mail-Adressen und das Teilen wichtiger Neuigkeiten muss nicht kompliziert sein. Indem Sie in Positive User ein Pop-up einrichten, kann Ihr Team ganz einfach die richtige Nachricht an die richtigen Personen ausspielen, während diese Ihre Website besuchen.
In Positive User stehen Ihnen zwei Möglichkeiten zur Verfügung, um ein Pop-up zu erstellen: Pop-up Builder vs. Pop-up Code Editor.
Mit dieser Option können Sie einfache Pop-ups auf Basis vordefinierter Vorlagen erstellen. Sie können die Inhalte personalisieren und eigene Bilder hochladen.
Gehen Sie zu „Website-Erlebnis" → „Pop-ups" → „Neues Pop-up".
Wählen Sie in der oberen linken Ecke des Bereichs zwischen „Pop-up-Formularen" und „Weiterleitungs-Pop-ups".
Wählen Sie eine der Vorlagen aus, bewegen Sie den Mauszeiger darüber und klicken Sie auf „Visueller Editor".
Geben Sie den Namen des Pop-ups ein und fügen Sie für Ihre Teammitglieder eine Beschreibung hinzu.
Klicken Sie auf „Erstellen". Sie befinden sich nun in dem Bereich, in dem Sie den Inhalt des Pop-ups anpassen können.
Im Hauptbereich sehen Sie eine Vorschau der ausgewählten Vorlage, in der alle Änderungen in Echtzeit dargestellt werden. Sie können die Vorlage jederzeit ändern, indem Sie in der oberen rechten Ecke des Editors auf die Schaltfläche „Vorlagen öffnen" klicken.
In der oberen linken Ecke können Sie zwischen dem Mobil- und dem Desktop-Modus wechseln – so lässt sich das Erscheinungsbild des Pop-ups perfekt anpassen.
Auf der rechten Seite finden Sie Abschnitte, in denen Sie einzelne Bestandteile des Inhalts und der Darstellung des Pop-ups anpassen können.
Inhalt
In diesem Bereich legen Sie die zentrale Botschaft Ihres Pop-ups fest.
Header: Dies ist Ihre Hauptüberschrift. Nutzen Sie diesen Platz für Ihr wichtigstes Angebot oder Ihre wichtigste Ankündigung (z. B. „Abonnieren Sie unseren Newsletter" oder „Entdecken Sie die neue Kollektion").
Inhalt: Dieses Feld ist für Ihren ergänzenden Text vorgesehen. Es eignet sich hervorragend, um weitere Details zu geben oder das „Warum" hinter Ihrem Call-to-Action zu erläutern.
Schaltflächen-Stil
Die Schaltfläche ist der zentrale Interaktionspunkt Ihres Pop-ups. Sie sollte klar und visuell hervorstechend sein.
Schaltfläche: Geben Sie den Text ein, der auf der Schaltfläche erscheinen soll. Kurze, handlungsorientierte Beschriftungen wie „Jetzt anmelden" oder „Rabatt sichern" funktionieren in der Regel am besten.
Textfarbe: Wählen Sie eine Farbe für die Beschriftung innerhalb der Schaltfläche. Achten Sie auf ausreichenden Kontrast zum Hintergrund, damit sie gut lesbar ist.
Hintergrundfarbe: Legen Sie die Hauptfarbe für Ihre Schaltfläche fest. Es empfiehlt sich, eine markenspezifische Farbe zu wählen, um ein einheitliches Erscheinungsbild auf der gesamten Website zu gewährleisten.
Link-Stil
Je nach Vorlage können Sie Ihren Besuchern zusätzliche Optionen wie einen Link zu einer „Hilfe"-Seite oder „Kontakt"-Informationen als sekundäre Links anbieten.
Text: Geben Sie den Namen des Links ein (z. B. „Über uns" oder „Datenschutzerklärung").
Öffnen in: Legen Sie fest, ob der Link in einem neuen oder im aktuellen Tab geöffnet werden soll.
Textfarbe: Sie können diese Links separat gestalten. Oft eignet sich hier eine dezente Farbe, damit sie nicht von der Hauptschaltfläche ablenken.
Bilder
Die visuellen Elemente verbinden das gesamte Pop-up und sorgen dafür, dass es sich wie ein natürlicher Bestandteil Ihrer Website anfühlt.
Hintergrundbild: Das Hauptbild Ihres Pop-ups.
Overlay-Farbe: Damit steuern Sie das „Overlay", das Ihre Website abdunkelt, wenn das Pop-up erscheint. Sie können die RGBA-Werte anpassen, um den Hintergrund transparenter oder weniger transparent zu gestalten, sodass der Fokus vollständig auf Ihrer Botschaft bleibt.
Hintergrundfarbe: Damit legen Sie die Grundfarbe des Pop-ups fest, in der sich Ihr Text und Ihre Formularfelder befinden.
Vorlagen enthalten in der Regel Empfehlungen zur optimalen Größe des Hintergrundbildes.
Eingabefelder
Wenn Sie ein Pop-up-Formular erstellen, können Sie in diesem Bereich festlegen, welche Informationen Sie von Ihren Besuchern erfassen möchten. Jedes Feld, das Sie hier hinzufügen, wird direkt den Daten im Kontaktprofil zugeordnet.
Beschriftung: Der Text, der direkt über dem Eingabefeld erscheint und der Person mitteilt, was einzugeben ist.
Platzhalter: Der „Geistertext" innerhalb des Feldes (z. B. „[email protected]"), der verschwindet, sobald der Nutzer mit der Eingabe beginnt.
Attribut: Dies ist ein entscheidender Schritt. Es teilt dem System mit, in welchem Feld Ihrer Positive User-Datenbank die Information gespeichert werden soll (z. B. „E-Mail" oder „Vorname").
Erforderlich?: Aktivieren Sie dieses Kontrollkästchen, wenn das Feld ausgefüllt sein muss, bevor der Nutzer das Formular absenden kann.
Je nach Vorlage kann die Anzahl der Texteingabefelder, die Sie hinzufügen können, begrenzt sein. Wenn Sie das Limit erreicht haben, können Sie dennoch Kontrollkästchen für Dinge wie die Newsletter-Zustimmung hinzufügen.
Wenn Ihr Pop-up fertig ist, klicken Sie auf „Speichern und beenden". Sie werden dann zur Liste Ihrer Pop-ups weitergeleitet.
Beachten Sie, dass Sie zur Aktivierung eines Pop-ups nun eine Automatisierung erstellen müssen.
Sie können individuelle Pop-ups selbstverständlich auch direkt im HTML-Code erstellen. Unser Code Editor ist der richtige Ort dafür. Sie können ein Pop-up entweder komplett neu erstellen oder bestehende Vorlagen anpassen.
Diese Option setzt HTML-Kenntnisse voraus.
Gehen Sie zu „Website-Erlebnis" → „Pop-ups" → „Neues Pop-up".
Hier können Sie entweder von Grund auf neu beginnen, indem Sie in der oberen rechten Ecke des Bereichs auf die Schaltfläche „Code Editor" klicken, oder eine der vorhandenen Vorlagen bearbeiten. Wählen Sie dazu in der oberen linken Ecke des Bereichs den Typ aus („Pop-up-Formulare" vs. „Weiterleitungs-Pop-ups"), wählen Sie eine der Vorlagen, bewegen Sie den Mauszeiger darüber und klicken Sie auf „Code Builder".
Sie befinden sich nun in dem Bereich, in dem Sie das Pop-up anpassen können. (Oder von Grund auf neu erstellen können, falls Sie im vorherigen Schritt direkt den „Code Editor" ausgewählt haben.)
Volle HTML- und CSS-Kontrolle
Der linke Bereich ist ein vollwertiger Editor, in dem Sie Struktur und Erscheinungsbild Ihres Pop-ups festlegen können. Sie können die Struktur Ihres Formulars anpassen, eigene Wrapper hinzufügen oder zusätzliche Elemente wie Icons oder spezielle Textblöcke einfügen, die in den Standardvorlagen nicht verfügbar sind.
Ändern Sie nicht die ID der Schaltfläche in Weiterleitungs-Pop-ups! Die ID muss id=submitButton bleiben – oder die entsprechende ID, die die Schaltfläche hat. Wenn Sie sie ändern, werden keine Statistiken für Klicks und CTR% mehr generiert.
Feld einfügen
Eine der leistungsstärksten Funktionen des Code Editors ist das Dropdown-Menü „Feld einfügen". Damit schlagen Sie eine Brücke zwischen Ihrem individuellen Design und Ihrer Positive User-Datenbank.
Dynamische Platzhalter: Anstatt Formulareingaben manuell zu programmieren, verwenden Sie dieses Menü, um Platzhalter für bestimmte Attribute einzufügen (z. B. „E-Mail", „Vorname" oder „Telefonnummer").
Benutzerdefinierte Attribute: Wenn Sie benutzerdefinierte Attribute (wie „Treuestufe" oder „Lieblingskategorie") erstellt haben, finden Sie diese hier und können sie in Ihr Formular einbinden. Sobald ein Kontakt diese ausfüllt, werden die Daten automatisch in seinem Profil gespeichert.
Vorschau umschalten
Verwenden Sie diese Schaltfläche, um zwischen Ihrem Code und einer Live-Vorschau des Pop-ups zu wechseln. So können Sie Stilfehler oder Ausrichtungsprobleme direkt erkennen.
Wenn Ihr Pop-up fertig ist, klicken Sie auf „Speichern und beenden". Sie werden dann zur Liste Ihrer Pop-ups weitergeleitet.
Nun müssen Sie ein Automatisierungsszenario erstellen, um Ihr Pop-up zu aktivieren.
Sie haben nun ein Pop-up vorbereitet. Um dieses Pop-up auf der Website anzuzeigen, müssen Sie im Bereich „Automatisierungen" eine Automatisierung erstellen.
Das Modul „Pop-up anzeigen" bezieht sich auf alle Pop-ups, die unter „Website-Erlebnis" → „Pop-ups" erstellt wurden.
Eine Beispiel-Automatisierung sieht so aus:
Sehen Sie sich die Artikel zu Automatisierungen an, um einen wirkungsvollen Workflow für Ihre Website-Besucher aufzubauen.
Arten von Pop-ups [LINK]
