Fügen Sie Ihrer Website schnell ein Popup hinzu
Es gibt verschiedene Methoden, um ein Popup auf Ihrer Website hinzuzufügen. Zum Beispiel ist der einfachste Weg, ein Widget von Drittanbietern zu verwenden. Ein solches Tool ist das Popup-Widget von Elfsight. Kompatibel mit 99,9 % der Website-Builder, lässt es sich in wenigen Minuten in Ihre Seite integrieren.
Kurzanleitung
Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie mit diesem Widget ein Popup zu Ihrer Website hinzufügen:
- Öffnen Sie den Popup-Editor und wählen Sie eine vorgefertigte Vorlage oder gestalten Sie Ihr eigenes Popup von Grund auf neu.
- Stimmen Sie Einstellungen und Erscheinungsbild ganz nach Ihren Wünschen ab: Elemente nach Belieben hinzufügen oder entfernen, Farbschema anpassen – und vieles mehr.
- Speichern Sie Ihr Design und kopieren Sie den generierten HTML-Code.
- Fügen Sie den Code in den Editor Ihrer Website ein.
Das war’s! Jeder kann die Aufgabe erledigen – Ohne Programmierkenntnisse! Elfsight ermöglicht es Ihnen, ansprechende Popups mit Titeln, Beschreibungen, Bildern und vielem mehr zu erstellen, ganz darauf ausgerichtet, sich nahtlos in das Design Ihrer Website einzufügen.
Popups einfach erstellen – Steigern Sie die Attraktivität Ihrer Website und halten Sie Besucher aktiv!
So fügen Sie einer Website ein Popup hinzu: Ausführliche Anleitung
Jetzt schauen wir uns die Möglichkeiten des Popup-Widgets im Detail an.
- Layout personalisieren. Wählen Sie, wo auf der Seite Ihr Popup erscheinen soll: linke Spalte, obere Leiste, Modal usw. Breite anpassen, Animation hinzufügen, Öffnen- oder Schließen-Buttons.
So fügen Sie Ihrem CMS ein Popup-Widget hinzu.
Jetzt, da Sie sehen, wie das Widget funktioniert, fragen Sie sich vielleicht: „Kann ich das Popup zu meinem Website-Builder hinzufügen?“ Nachfolgend finden Sie detaillierte Anleitungen zur Implementierung des Tools in einigen der beliebtesten Content-Management-Systeme.
Fügen Sie Ihrer HTML-Website ein Pop-up hinzu
Hier ist eine einfache Anleitung, um das Popup-Widget schnell auf jeder HTML-basierten Website hinzuzufügen.
- Zugriff auf das Website-Backend. Stellen Sie sicher, dass Sie HTML-Code über Ihr Admin-Panel bearbeiten können, um das Widget nahtlos zu integrieren.
- Fügen Sie den Elfsight-Code in das HTML Ihrer Website ein. Bestimmen Sie den genauen Ort, an dem das Popup erscheinen soll – abgestimmt auf Ihre Geschäftsziele.
- Speichern Sie Ihre Änderungen. Vergewissern Sie sich, dass das Widget korrekt funktioniert und wie vorgesehen auf Ihrer Webseite erscheint.
Website-Popup zu WordPress hinzufügen
Sie können das Widget ohne Code schnell in Ihre Website einbetten, indem Sie den bereitgestellten Code in einen Block einfügen.
- Melden Sie sich bei Ihrem WordPress-Konto an.Greifen Sie auf Ihr Admin-Panel zu, wo Sie den HTML-Code anpassen können.
- Gehen Sie zu ‘Seiten’ und wählen Sie die Seite aus, die Sie bearbeiten möchten. Denken Sie über Ihre Ziele nach und darüber, warum Sie Bewertungen in einem bestimmten Abschnitt der Seite platzieren möchten.
- Eigenen HTML-Block hinzufügen. Platzieren Sie ihn an der Stelle der Seite, an der Sie das Popup einbetten möchten.
- Fügen Sie den generierten Code in den Block ein. Vergessen Sie nicht, die Seite zu aktualisieren und zu überprüfen, dass das Widget wie erwartet funktioniert.
Erstelle ein Popup in WordPress →
Fügen Sie Ihrer Wix-Website ein Pop-up-Banner hinzu.
Das Hinzufügen des Popup-Widgets zu einer erforderlichen Seite Ihrer Wix-Website ist einfach.
- Greifen Sie auf den Wix-Website-Editor zu. Melden Sie sich bei Ihrem Wix-Konto an, wählen Sie die Website aus, an der Sie arbeiten möchten, und gehen Sie zum Dashboard Ihrer Website. Klicken Sie auf „Website bearbeiten“, um den Editor zu starten.
- Fügen Sie einen HTML-Block zum Popup-Widget hinzu. Klicken Sie auf das Plus-Symbol im linken Menü, wechseln Sie zum Abschnitt Einbetten und wählen Sie unter dem Reiter „Custom Embeds“ die Option „Embed a Widget“, um der Seite einen neuen HTML-Block hinzuzufügen.
- Füge den Installationscode des Popup-Widgets ein. Wählen Sie ‘Code eingeben’, fügen Sie den Installationscode des Popup-Widget-Anbieters ein und klicken Sie auf ‘Aktualisieren’, um das Widget in die Seite einzubetten.
- Größe und Position des Widgets anpassen. Passen Sie Abmessungen und Platzierung an, damit es nahtlos passt und optisch ansprechend aussieht. Größe und Position bei Bedarf anpassen.
- Sorge für mobile Kompatibilität. Wechsel zum mobilen Editor, um das Erscheinungsbild des Widgets auf kleineren Bildschirmen zu verfeinern. Nimm alle notwendigen Anpassungen für mobile Nutzer vor und veröffentliche deine Änderungen, wenn du mit dem Ergebnis zufrieden bist.
Fügen Sie Ihrer Shopify-Website ein Pop-up hinzu
Sie können das Popup-Widget schnell zu jeder Seite Ihrer Shopify-Website hinzufügen.
- Greifen Sie auf den Shopify-Admin-Bereich zu. Gehen Sie zum Abschnitt Onlineshop Ihrer Website.
- Öffnen Sie die Anpassungsoptionen. Wählen Sie aus dem Dropdown-Menü ‚Anpassen‘, dann im linken Menü ‚Abschnitt hinzufügen‘ aus.
- Eigene Inhalte hinzufügen. Unter ‘Eigene Inhalte’ klicken Sie auf ‘Hinzufügen’ und entfernen Sie alle vorinstallierten Shopify-Komponenten.
- Wählen Sie die Option Benutzerdefiniertes HTML. Im Menü „Inhalt hinzufügen“ wählen Sie „Benutzerdefiniertes HTML“.
- Installationscode einfügen. Öffnen Sie den Abschnitt „HTML“, fügen Sie den Popup-Installationscode ein und speichern Sie alle Änderungen.
Fügen Sie ein Website-Popup zu Squarespace hinzu.
Jeder kann Bewertungen schnell auf der gewünschten Seite Ihres Shopify-Shops einbetten.
- Melden Sie sich bei Ihrem Squarespace-Konto an. Melden Sie sich in Ihrem Konto an und wählen Sie die Website aus, zu der Sie das Widget hinzufügen möchten. Gehen Sie zum Dashboard Ihrer Website und wählen Sie die Website aus, die Sie bearbeiten möchten.
- Gehen Sie zum Abschnitt „Website“. Wählen Sie die Seite aus, auf der Sie das Popup-Widget platzieren möchten. Öffnen Sie im Hauptmenü den Abschnitt „Website“ und wählen Sie die Seite aus, die Sie bearbeiten möchten.
- Klicke auf ‚Bearbeiten‘ und dann ‚Abschnitt hinzufügen‘. Auf der ausgewählten Seite klicke erneut auf ‚Bearbeiten‘ und wähle dann ‚Abschnitt hinzufügen‘, um einen neuen Abschnitt für das Widget zu erstellen.
- <strong>Fügen Sie einen Code-Block hinzu.</strong> Wählen Sie „Leeren Abschnitt hinzufügen“, klicken Sie auf „Block hinzufügen“ und wählen Sie „Code“ aus den Optionen. Hier fügen Sie den Installationscode des Popup-Widgets ein.
- Fügen Sie den Popup-Widget-Installationscode ein. Im Bereich ‘Bearbeiten’, fügen Sie den bereitgestellten Popup-Widget-Code ein und passen Sie die Breite des Blocks so an, dass das Widget richtig passt und optisch ansprechend auf Ihrer Seite aussieht.
Popup in Squarespace erstellen →
Fügen Sie Ihrer Webflow-Website ein Popup hinzu
Das Hinzufügen des Popup-Widgets zu Webflow-Seiten ist einfach und dauert nur wenige Minuten.
- Starten Sie in Webflow. Melden Sie sich bei Ihrem Webflow-Konto an und wählen Sie die Website aus, zu der Sie das Widget hinzufügen möchten.
- Widget einbetten. Im Webflow-Editor klicken Sie auf das Plus-Symbol. Ziehen Sie anschließend das Embed-Element aus dem linken Menü an die gewünschte Stelle, an der die Bewertungen erscheinen sollen.
- Code einfügen. Fügen Sie den Installationscode des Popups in den angezeigten HTML-Einbettungscode-Editor ein und klicken Sie dann auf „Speichern & Schließen“.
- Anpassung und Veröffentlichung. Passen Sie die Einstellungen Ihres Popups an, klicken Sie anschließend auf ‘Veröffentlichen’ und wählen Sie die Domains aus, auf denen es aktiviert werden soll.
Auf Ihrer Elementor-Website ein Pop-up hinzufügen
Es ist einfach und praktisch, das Popup-Widget in Elementor einzubetten.
- Beginnen Sie im WordPress-Backend. Loggen Sie sich im Backend Ihrer WordPress-Website ein, navigieren Sie zu ‘Seiten’ und wählen Sie die Seite aus, auf der Sie das Popup-Widget hinzufügen möchten.
- Elementor-Bearbeitung starten. Klicken Sie auf „Mit Elementor bearbeiten“, um die ausgewählte Seite anzupassen.
- HTML-Element implementieren. Verwende die Drag-and-Drop-Funktion, um das HTML-Element auf deiner Seite zu platzieren.
- Fügen Sie den Widget-Code zur Website hinzu. Fügen Sie den Popup-Installationscode von Elfsight in das HTML-Code-Feld ein.
- Aktualisieren und genießen. Klicken Sie auf ‘Aktualisieren’, um Ihre Änderungen zu speichern und Ihre Seite mit dem eingebetteten Popup anzuzeigen.
In Elementor Popup erstellen →
Weitere kompatible Plattformen
Neben diesen CMS kannst du das Pop-up-Widget auch ganz einfach zu Websites hinzufügen, die mit Adobe Muse, BigCommerce, Blogger, Drupal, Facebook-Seite, Joomla, jQuery, iFrame, Magento, ModX, OpenCart, Webnode, Weebly, WooCommerce, Google Sites, GoDaddy, Jimdo, PrestaShop erstellt wurden.
Popup-Widget-Funktionen
Das Popup-Widget von Elfsight bietet eine Vielzahl an Funktionen, die sowohl auf die Bedürfnisse Ihres Geschäfts eingehen als auch das Erlebnis Ihrer Website-Besucher verbessern. Hier sind einige bemerkenswerte Beispiele:
| Funktion | Nutzen für Ihr Unternehmen | Vorteile für Kunden |
| Überzeugende Buttons oder Links mit klarer Handlungsaufforderung | Conversions steigern, indem Besucher zu bestimmten Aktionen aufgefordert werden, etwa einen Kauf zu tätigen oder sich anzumelden. | Kunden werden mühelos zu den gewünschten Aktionen geführt – so verbessert sich die Nutzererfahrung auf Ihrer Website. |
| Bilder und Videos, die das Popup ergänzen. | Verleihen Sie dem Pop-up mehr visuelle Wirkung, um Aufmerksamkeit zu gewinnen und Angebote effektiv zu kommunizieren. | Besucher interagieren mit reichhaltigeren, fesselnderen Inhalten, die das Verständnis und das Interesse steigern. |
| Angebote und Verkaufsaktionen, Coupon-Einbindung | Steigern Sie Umsatz und Kundentreue, indem Sie Promotionen direkt über Popups anbieten. | Kunden erhalten exklusive Angebote oder Rabatte – so wird ihr Einkaufserlebnis verbessert. |
| Integrierter Formular-Builder für benutzerdefinierte Formulare | Kundendaten oder Leads erfassen, um Nachvermarktung und Service-Verbesserungen zu ermöglichen. | Kunden können ganz einfach Informationen oder Anfragen senden – wodurch die Interaktion deutlich vereinfacht wird. |
| E-Mail-Benachrichtigungen bei Formularübermittlung | Erhalten Sie sofortige Updates, wenn Formulare eingereicht werden, für schnellere Nachverfolgung und besseren Kundenservice. | Kunden erhalten eine schnelle Bestätigung ihrer Übermittlung, was Vertrauen und Zufriedenheit erhöht. |
| Popup beim Scrollen oder durch Klicken auf ein Element anzeigen | Steigern Sie das Engagement, indem Sie Popups anzeigen, sobald ein Besucher Interesse daran zeigt, weiter zu erkunden oder zu interagieren. | Besucher erhalten zur richtigen Zeit relevante Inhalte, was das Nutzererlebnis verbessert. |
| Pop-up beim Verlassen der Seite | Verhindern Sie potenzielle Conversion-Verluste, indem Sie ein Popup anzeigen, wenn ein Nutzer dabei ist, die Website zu verlassen. | Besucher erhalten ein Last-Minute-Angebot oder eine Erinnerung, was ihre Kaufentscheidung erleichtert. |
| Anpassbare Popup-Anzeigenhäufigkeit | Überfordern Sie Ihre Kunden nicht – zeigen Sie Popups zum richtigen Zeitpunkt, um Konversionen zu maximieren. | Kunden werden durch wiederholte Popups nicht gestört – ihr Erlebnis bleibt angenehm. |
Zusätzlich zu den oben genannten Vorteilen profitieren Unternehmen vor allem von Funktionen, die ihre Popup-Strategien verbessern. Der KI-Inhaltsgenerator ermöglicht es Unternehmen, effektive Popups schnell zu erstellen, ohne Designkenntnisse zu benötigen. Die bedingten Logik-Einstellungen für Formulare helfen Unternehmen, Zielgruppen mit maßgeschneiderten Botschaften anzusprechen und so die Relevanz der präsentierten Inhalte zu erhöhen.
Zusätzlich bieten nahtlose Übersetzungen in jede Sprache sowie ein anpassbarer CSS/JS-Editor Unternehmen die Flexibilität, Popups an verschiedene Märkte und Markenbedürfnisse anzupassen.
Vorteile von Popup-Benachrichtigungen auf der Website.
Pop-ups wurden lange Zeit von Vermarktern zu aggressiv eingesetzt. Zum Beispiel öffneten sich Fenster automatisch nach dem Schließen, und sie konnten erst entfernt werden, nachdem die Zielaktion ausgeführt war. Früher nutzten Betrüger Pop-ups, um Malware einzuschleusen.
Hier sind die wichtigsten Vorteile, wenn Sie ein Popup auf Ihrer Website verwenden:
Durch den gezielten Einsatz dieser Popups in verschiedenen Kontexten können Unternehmen das Nutzer-Engagement erhöhen, Conversions steigern und Besuchern eine personalisierte Browser-Erfahrung bieten.
Website-Pop-up-Beispiele
Und werfen wir nun einen Blick auf spannende Template-Beispiele des Popup-Widgets für Ihre Website. Das könnte besonders hilfreich sein für diejenigen Nutzer, die nicht wissen, wo sie anfangen sollen, und nach Inspiration suchen.
Exit-Intent-Popup
Ein Exit-Intent-Popup erscheint, wenn ein Besucher dabei ist, Ihre Website zu verlassen, typischerweise ausgelöst, wenn die Maus in Richtung des Exit-Buttons bewegt wird. Das ist der ideale Moment, um seine Aufmerksamkeit mit einem Last-Minute-Angebot, einer Erinnerung oder einem Rabatt zu gewinnen und so die Wahrscheinlichkeit zu verringern, einen potenziellen Kunden zu verlieren.
Benachrichtigungs-Popup
Popup-Formular
Pop-up-Formulare ermöglichen es Ihnen, direkt von Besuchern wichtige Informationen wie E-Mail-Adressen, Feedback oder Anfragen zu sammeln. Diese Funktion hilft Unternehmen, ihre E-Mail-Liste zu erweitern, Umfragen durchzuführen oder Besucher mit zielgerichteten Handlungsaufrufen anzusprechen.
Rabatt- oder Gutschein-Popup
Rabatt- oder Gutschein-Popup präsentiert Sonderangebote oder Promo-Codes, um Besucher zum Kauf zu bewegen. Indem du Rabatte direkt über ein Popup anbietest, kannst du Besucher zu sofortigem Handeln motivieren und Transaktionen abschließen.
Social Proof Popup
Ein Social Proof-Popup zeigt Kundenbewertungen oder Testimonials, um Vertrauen und Glaubwürdigkeit bei neuen Besuchern aufzubauen. Durch positives Feedback können Unternehmen das Vertrauen der Kunden stärken und potenzielle Käufer zur Interaktion oder zum Kauf animieren.
Abonnement-Popup
Ein Newsletter-Anmelde-Popup motiviert Besucher, sich für Newsletter oder exklusive Inhalte anzumelden. Durch Anreize wie Rabatte oder kostenlose Ressourcen können Unternehmen eine treue Zielgruppe aufbauen und das Engagement erhöhen.
Schauen Sie sich unsere anderen Vorlagen an und wählen Sie die, die am besten zu Ihren Bedürfnissen passen.
Über 100 Popup-Vorlagen entdecken
Fazit
Insgesamt sind Website-Popups leistungsstarke Werkzeuge, um Besucher zu fesseln und Conversions zu steigern. Sie bieten eine breite Palette von Funktionen und Anwendungsfällen zur Verbesserung der Benutzererfahrung und zur Erreichung Ihrer Geschäftsziele.
Ob Sie die Abbruchrate im Warenkorb senken, Sonderangebote bewerben, Feedback sammeln oder Ihre E-Mail-Liste erweitern möchten – Popups bieten eine flexible und effektive Lösung. Wenn Sie Popups strategisch einsetzen, die zu Ihren Zielen passen und Ihr Publikum ansprechen, steigern Sie die Kundeninteraktion, erhöhen den Umsatz und verbessern letztlich die Gesamtleistung Ihrer Website.
Weitere Infos?
Wir hoffen, dass dieser Leitfaden hilfreich war. Kontaktieren Sie uns, wenn Sie mehr darüber erfahren möchten, wie Sie einen benutzerdefinierten Rechner für Ihre Website erstellen können. Unsere Mission ist es, Ihnen ein nahtloses und erfolgreiches Erlebnis zu bieten. Bei Elfsight arbeiten wir daran, Ihrem Unternehmen durch No-Code-Widgets eine vollständige Lösung zu bieten.
Werden Sie Teil unserer dynamischen Community, in der Wissen und Ideen ausgetauscht werden. Wir freuen uns immer über Ihre Vorschläge zur Verbesserung, also fügen Sie sie gerne unserer Wishlist hinzu.
