Popups in HTML erstellen – Claspo Anleitung

Egal, ob Sie eine Landingpage gestalten, Konversionspfade optimieren oder nur mit Front-End-Funktionen experimentieren – zu wissen, wie man ein Pop-up in HTML erstellt, ist eine wertvolle Fähigkeit. In diesem Leitfaden zeigen wir Ihnen zwei praktische Ansätze, um ein benutzerdefiniertes Pop-up zu Ihrer Website hinzuzufügen — einen mit HTML, CSS und JavaScript, und einen anderen mit einem No-Code-Builder, der dies in wenigen Minuten erledigt.

Wenn Sie Spaß am Handcodieren und voller Designkontrolle haben, werden Sie unsere Schritt-für-Schritt-Anleitung zur manuellen Methode zu schätzen wissen. Und wenn Sie lieber auf die technische Komplexität verzichten möchten, stellen wir Ihnen Claspo vor — ein leistungsstarkes, codefreies Tool zum Erstellen responsiver, hoch konvertierender Pop-ups mit nur ein paar Klicks.

Als Bonus teilen wir außerdem Expertentipps zur Benutzerfreundlichkeit von Web-Pop-ups, Best Practices für das Design und wie Sie Ihr Pop-up wie einen natürlichen Teil Ihrer Website wirken lassen können, anstatt wie eine Unterbrechung.

Wie man ein Popup in HTML und ohne Code erstellt

In diesem Abschnitt werden wir zwei Hauptmethoden untersuchen: das Erstellen einer Popup-Benachrichtigung in HTML, CSS und JavaScript sowie die Verwendung einer Vorlage, um den Prozess zu vereinfachen. Die erste Option wird immer noch aufgrund der endlosen Anpassungsmöglichkeiten verwendet. Währenddessen bezieht sich die zweite Methode auf No-Code-Lösungen, die an Fahrt gewinnen und eine Lösung für nicht-technische Benutzer und diejenigen werden, die sich keinen Entwickler leisten können, wann immer sie ein Pop-up benötigen.

Popup in HTML CSS: eine Methode mit Code

Fortgeschrittene Programmierkenntnisse erlauben es Ihnen, ein benutzerdefiniertes Popup-Fenster in HTML von Grund auf zu erstellen und dessen Aussehen und Verhalten auf der Website an Ihre Bedürfnisse anzupassen. Wie erstellt man also ein Popup in HTML, wenn man solche Fähigkeiten besitzt? Gehen wir Schritt für Schritt durch.

Schritt 1: Bereiten Sie Ihr Bild vor

Bevor Sie mit dem Codieren beginnen, stellen Sie sicher, dass Sie ein Pop-up-Bild für Ihr HTML-Popup-Fenster bereit haben (können Sie es nicht selbst machen? Herzlichen Glückwunsch, Sie brauchen auch einen Designer). Das Bild sollte auf einem Server gehostet werden, damit es über eine URL zugänglich ist. Sie können Ihr Bild auf den Server Ihrer Website hochladen oder einen externen Bildhosting-Dienst verwenden.

Schritt 2: Widget-Struktur mit einem Popup-Button in HTML

Der HTML-Code des Pop-ups bildet die Struktur Ihres Widgets. Hier ist eine Erklärung des Popup-Codes:

1. DOCTYPE-Deklaration: definiert den Dokumenttyp und die HTML-Version.

<!DOCTYPE html>
<html lang="de">

2. Kopfbereich: enthält Metainformationen über das Dokument, wie Zeichensatz und Links zu Stylesheets und Skripten.

<head>

<meta charset="UTF-8">

<title>Wie man ein Popup erstellt</title>

<link rel="stylesheet" href="style.css">

<script defer src="app.js"></script>

</head>

3. Körperbereich: enthält den Hauptinhalt des Dokuments, einschließlich dem Popup-Button in HTML, um das Pop-up auszulösen, und das Pop-up selbst.

<body>

<div class="container">

<button type="submit" class="btn" onclick="openPopup()">Senden</button>

<div class="popup" id="popup">

<img src="https://yourserver.com/path-to-image.png" alt="">

<h2>Danke!</h2>

<p>Ihre Angaben wurden erfolgreich übermittelt. Danke!</p>

<button type="button" onclick="closePopup()">OK</button>

</div>  

</div>

</body>

</html>

Container-Div: zentriert das Pop-up-Fenster und den Button in HTML.
Button: löst das Pop-up beim Klicken aus.
Popup-Div: enthält den Pop-up-Inhalt, einschließlich eines Bildes, einer Überschrift, einer Nachricht und eines Schließen-Buttons.
Bild: zeigt das Bild, das Sie vorbereitet haben. Das src-Attribut sollte auf die URL verweisen, unter der Ihr Bild gehostet wird.

Schritt 3: CSS-Popup-Styling

Das Design des CSS-Popups wird verwendet, um das Widget zu stylen und optisch ansprechend zu gestalten. Hier ist, was jeder Teil des CSS-Codes bewirkt:

1. Schriftart importieren: importiert eine benutzerdefinierte Schriftart von Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

2. Globale Stile: legt Standardstile für alle Elemente fest.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

3. Containerstile: zentriert den Inhalt auf der Seite.

.container {

width: 100%;

height: 100vh;

background: linear-gradient(to right, #485563, #29323c);

display: flex;

align-items: center;

justify-content: center;

}

4. Buttonstile: stylt das Button-Popup und fügt eine Klickanimation hinzu.

.btn {

padding: 10px 60px;

background: #fff;

border: 0;

outline: none;

cursor: pointer;

font-size: 22px;

font-weight: 500;

border-radius: 10px;

transition: transform 0.2s;

}

.btn:active {

transform: scale(0.95);

}

5. Pop-up-Stile: stylt das Pop-up und steuert dessen Sichtbarkeit und Eintrittsanimation (wie z. B. Fading oder Sliden).

.popup {

width: 400px;

background: #fff;

border-radius: 6px;

position: absolute;

top: 0;

left: 50%;

transform: translate(-50%, -50%) scale(0.1);

text-align: center;

padding: 0 30px 60px;

color: #333;

visibility: hidden;

transition: all 0.4s ease-in-out;

}

.open-popup {

visibility: visible;

top: 50%;

transform: translate(-50%, -50%) scale(1);

}

.popup img {

width: 100px;

margin-top: -50px;

border-radius: 50%;

box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

.popup h2 {

font-size: 38px;

font-weight: 500;

margin: 30px 0 10px;

}

.popup button {

width: 100%;

margin-top: 50px;

padding: 10px 0;

background-color: #e02189;

color: #fff;

border: 0;

outline: none;

font-size: 18px;

border-radius: 4px;

box-shadow: 0 5px 5px rgba(0,0,0,0.2);

}

Tipps, um Ihr Pop-up in HTML und CSS hervorzuheben

Wenn Sie ein HTML-Popup erstellen, geht es nicht nur um die Funktionalität — es geht um den visuellen Eindruck. Ein gut gestaltetes Widget kann sofort Aufmerksamkeit erregen und das Engagement steigern, wenn es mit Klarheit und Zweck entworfen ist. Hier erfahren Sie, wie Sie Ihr Popup mithilfe gängiger Designstrategien verbessern können.

1. Verwenden Sie ein Overlay mit angepasster Deckkraft.
Ein Overlay ist eine halbtransparente Schicht, die hinter dem Popup liegt. Es dimmt den Rest des Bildschirms, damit die Benutzer sich auf Ihre Nachricht konzentrieren können. Um dies zu erreichen, erstellen Sie ein separates div als Overlay-Container für das Popup und setzen Sie dessen Hintergrundfarbe mit rgba und einem geeigneten Deckkraftwert (wie 0.6) in Ihrem CSS.

.popup-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.6); /* Overlay mit Deckkraft */

z-index: 999;

display: none; /* wird per JS umgeschaltet */

}

2. Halten Sie das HTML-Popup-Fenster zentriert und wirkungsvoll gestaltet.
Wenn Sie HTML-Popups mit CSS erstellen, stellen Sie sicher, dass Ihr Container mit Polsterung, einer maximalen Breite, einem subtilen Schatten und einem abgerundeten Rand gestaltet ist. Designen Sie Ihren Popup-Container mit einem weißen oder hellen Hintergrund, einem subtilen Schatten und großzügiger Polsterung. Unabhängig davon, ob Sie es oben auf dem Bildschirm, in der Mitte oder in der Nähe eines Menüs anzeigen, ist visueller Kontrast entscheidend. Verwenden Sie einen starken CTA und eine auffällige Schriftart (wie Poppins oder Montserrat), um die Sichtbarkeit zu erhöhen.

3. Fügen Sie mit CSS-Übergängen sanfte Animationen hinzu.
Animationen wie Einblenden oder Heruntergleiten können das Erlebnis verbessern. Wenden Sie eine Klasse mit Übergangs- und Transformations-Eigenschaften auf Ihr HTML- und CSS-Popup an. Dies sorgt dafür, dass es interaktiver und moderner wirkt, auch ohne JavaScript-intensive Effekte.

4. Standardmäßig responsiv.
Vergessen Sie nicht sicherzustellen, dass Ihr Popup auf allen Bildschirmgrößen funktioniert. Verwenden Sie @media-Abfragen und prozentuale Breiten für Ihren Container. So wird Ihr Popup in der HTML-Umsetzung mobilfreundlich, ohne zusätzliche Tools.

Durch die Kombination aus Struktur, HTML und CSS sowie subtilen Animationen können Sie ein HTML-Popup erstellen, das nicht nur funktional, sondern auch wirklich ansprechend ist — entwickelt, um aufzufallen und zu konvertieren.

Schritt 4: JavaScript-Funktionalität

JavaScript wird verwendet, um dem Popup-Bildschirm in HTML Leben einzuhauchen, indem es sein Verhalten steuert. Hier ist, was die grundlegenden Funktionen tun:

1. Pop-up-Element abrufen: Wählt das Pop-up-Element anhand seiner ID aus.

let popup = document.getElementById('popup')

2. Pop-up-Funktion öffnen: Fügt eine Klasse hinzu, um das Popup anzuzeigen und die Animation zu starten.

function openPopup() {

popup.classList.add('open-popup')

}

3. Pop-up-Funktion schließen: Entfernt diese Klasse, um das Popup auszublenden und den Standardzustand wiederherzustellen.

function closePopup() {

popup.classList.remove('open-popup')

}

Mit JavaScript können Sie steuern, wann und wo Ihr Popup erscheint — etwa auf bestimmten Seiten wie Ihren Preis-, Blog- oder Checkout-Seiten. Dies stellt sicher, dass Ihre Nachricht relevant und gut getimt ist, anstatt störend zu wirken.

if (window.location.pathname === "/pricing") {

popup.style.display = "block";

}

Codefreie Methode: Pop-up-Vorlagen

Die Hauptvorteile von codefreien Lösungen zur Erstellung eines Popup-Fensters in HTML sind Zeitersparnis und Flexibilität. Wenn Sie über eine fertige Vorlage verfügen, verschwenden Sie keine Zeit damit, ein Popup-Bild vorzubereiten, und der Drag-and-Drop-Editor bietet Ihnen die Flexibilität, die Vorlage an Ihre Bedürfnisse anzupassen. Wir können dieser Liste auch Geldersparnis hinzufügen, da Sie keinen Entwickler und Designer benötigen. Wie fügt man also in diesem Fall ein Popup in HTML hinzu? Im Allgemeinen läuft der Prozess auf folgende Schritte hinaus, was ihn deutlich einfacher macht, als ein Popup in HTML mit CSS von Grund auf zu codieren:

Wählen Sie eine fertige Vorlage, die Ihrem Zweck entspricht (wie ein Opt-in-Popup, Informer, Vermeidung von Warenkorb-Abbrüchen usw.) aus den in der Bibliothek verfügbaren Optionen aus.
Passen Sie es gemäß Ihrem Branding, Website-Design und spezifischen Anforderungen an.
Sehen Sie sich an, wie Ihr fertiges Popup in der mobilen und Desktop-Version der Website aussieht.
Richten Sie die Pop-up-Anzeigeregeln ein (wann, wo, wie oft und wem es angezeigt wird usw.).
Binden Sie das Popup auf Ihrer Website ein und veröffentlichen Sie es.

Diese Option scheint viel einfacher als die vorherige zu sein, oder? So ist es, wenn Sie sich für Claspo entscheiden. Schließlich sind Sie schon zu uns gekommen, also schauen Sie unten nach, wie Sie ein Popup in HTML mit CSS erstellen (natürlich mit unserem intuitiven Editor!) und fangen Sie nach dem Lesen des Artikels sofort an.

Wie man mit Claspo ein Popup erstellt: 8 Schritte

Das Erste, was es zu wissen gilt, ist, dass Claspo eines der besten Popup-Tools ist., bietet Ihnen die gleichen umfassenden Anpassungsmöglichkeiten wie die codebasierte Methode. Im Gegensatz zu letzterer ist Claspo jedoch auch für diejenigen geeignet, die keine Programmier- und Designkenntnisse besitzen. Es macht das Erstellen eines Pop-ups in HTML zu einer einfachen und schnellen Aufgabe. Lassen Sie uns sehen, wie Sie mit unserem Builder ein Pop-up ohne zusätzlichen Aufwand erstellen können.

Schritt 1. Registrieren und loslegen

Erstellen Sie ein kostenloses Konto bei Claspo und klicken Sie auf die Schaltfläche „Neues Widget“. Sie haben die Möglichkeit, ein Widget von Grund auf neu zu erstellen oder die Vorlagengalerie zu verwenden. Um maximale Zeit zu sparen, wählen wir die zweite Option.

Step_1

Schritt 2. Wählen Sie Ihre Vorlage

Unsere Vorlagenbibliothek enthält mehr als 1000 gebrauchsfertige Vorlagen, die mehrere Anwendungsfälle abdecken. Sie können mit den Filtern auf der linken Seite des Bildschirms Ihre ideale Vorlage leicht finden. Diese ermöglichen es Ihnen, den Anwendungsfall, das Layout (HTML Pop-up-Formular, schwebende Leiste, schwebende Box, inhaltssperrendes Widget usw.), Branche und Thema auszuwählen. Sobald Sie ein Beispiel gefunden haben, das Sie benötigen, gelangen Sie zum Editor.

Step_2

Schritt 3. Passen Sie Ihre Vorlage an

Da sich dieser Artikel darauf konzentriert, wie man ein Pop-up in HTML auf Ihrer Website erstellt, haben wir ein Pop-up als Layout gewählt und einen der beliebtesten Anwendungsfälle dafür — das Sammeln von Nutzerdaten. Wie Sie im untenstehenden Beispiel sehen können, kann unsere Vorlage bis zur Unkenntlichkeit verändert werden.

In diesem Fall haben wir das Bild ersetzt, zuerst eines mit KI erstellt, den Text eines Pop-up-Formulars in HTML geändert, ein Eingabefeld entfernt, ein Kontrollkästchen für die Einwilligung zur Datenverarbeitung hinzugefügt, um das Pop-up DSGVO-konform zu machen, und letztendlich das Farbschema, einschließlich der CTA Schaltflächenfarbe, angepasst. Die einzige Einschränkung ist Ihr Bild, sodass Sie die Vorlage noch weiter anpassen können.

Step_3_2 Step_3_1

Schritt 4. Vorschau Ihres Pop-ups

Sobald Sie alle notwendigen Änderungen vorgenommen haben, können Sie in der Vorschau sehen, wie Ihr Pop-up auf den Desktop- und Mobilversionen Ihrer Website aussieht. Klicken Sie dazu auf das Symbol des entsprechenden Geräts in der oberen rechten Ecke des Bildschirms. Wenn Sie mit etwas nicht zufrieden sind, können Sie immer weiter editieren.

Step_4

Schritt 5. Anzeige-Regeln festlegen

Falls Sie sich fragen, wie Sie ein Popup in HTML auf einer Website erstellen, ohne die Benutzer zu stören, hat Claspo die Lösung. Unsere Plattform bietet erweiterte Targeting-Funktionen und optimale Anzeigeregeln für ein nahtloses Benutzererlebnis, die standardmäßig voreingestellt sind. Zum Beispiel erscheint das HTML-Benachrichtigungspopup automatisch einmal pro Sitzung, nachdem der Benutzer 20 Sekunden auf der Seite verbracht hat. Außerdem wird es automatisch nicht mehr angezeigt, für diejenigen, die bereits ihre E-Mail hinterlassen haben, damit Sie Ihre Website-Besucher effektiv erfassen können. Logisch, oder?

Und das Sahnehäubchen — wir schützen Ihre Pop-ups automatisch davor, gleichzeitig zu erscheinen und sich zu überlappen. Das bedeutet, Sie können Ihre Lead-Generation-Strategie mit Pop-ups sicher skalieren, ohne befürchten zu müssen, Besucher abzuschrecken.

Dennoch können Sie die Anzeigeregeln jederzeit an Ihre Bedürfnisse anpassen. Sie können problemlos verschiedene Optionen umschalten, um spezifisches Benutzerverhalten anzuvisieren, wie zum Beispiel das Aktivieren von Exit-Intent-Triggern. Anders als bei der code-basierten Methode müssen Sie lediglich ein paar Schaltflächen in unserem „Triggering“-Bereich anklicken, ohne sich mit komplexem Pop-up-CSS befassen zu müssen. Das bedeutet, ein Claspo-Popup bietet mehr Kontrolle und Flexibilität bei der Erstellung eines Pop-ups mit unseren intuitiven Werkzeugen, um E-Mail-Adressen und andere wertvolle Daten zu sammeln.

Step_5_Rule_based

Schritt 6. Integrieren Sie Claspo mit Ihrer gewählten Plattform

Über die Frage hinaus, wie man ein Pop-up auf seiner Website erstellt, müssen Sie verstehen, wie man eine Pop-up-Nachricht in HTML mit anderen Marketing-Tools synchronisiert. Aber bei Claspo läuft diese Aufgabe ebenfalls auf ein paar Klicks hinaus.

Integrieren Sie Claspo mit einem geeigneten CRM, ESP oder CDP aus der Dropdown-Liste. In diesem Fall werden alle Informationen über Nutzer, die mithilfe unserer Pop-ups gesammelt wurden, sofort auf die gewählte Plattform für die nachfolgende Segmentierung und den Start Ihrer automatischen Kampagnen übertragen.
Integrieren Sie Claspo mit Google Analytics. Es wird Ihnen wertvolle Einblicke darin geben, wie Nutzer mit Ihren Pop-ups interagieren und helfen, sie für eine bessere Leistung zu optimieren.

Step_6_Integration

Schritt 7. Installieren Sie Ihr Pop-up

Sobald Ihr Pop-up fertig ist, erhalten Sie einen fertigen Skriptcode, den Sie in Ihre Website einbetten müssen. Sie denken wahrscheinlich: „Moment! Ich dachte, wir sprechen darüber, wie man ein Pop-up auf einer Website ohne Programmierkenntnisse erstellt!“ Das stimmt! In Claspo müssen Sie nur den fertigen Code kopieren und einfügen, gemäß einer unserer Schritt-für-Schritt-Anleitungen. Sie finden sie ganz einfach unter Ihrem Skriptcode in unserem Editor.

Wenn Sie immer noch nicht allein zurechtkommen, können Sie unser Support-Team kontaktieren, und wir installieren die HTML-Pop-up-Nachricht auf Ihrer Website absolut kostenlos!

Step_7_1 Step_7_2

Schritt 8. Analysieren und optimieren

Ihr Pop-up wurde erstellt und arbeitet aktiv daran, Ihre Konversionen zu steigern! Aber wie erfolgreich ist es? Sie können jederzeit die wichtigsten Leistungsindikatoren jedes Pop-ups verfolgen, wie die Anzahl der eindeutigen Aufrufe, die Anzahl der gezielten Aktionen und die Konversionsrate direkt in Claspo. Haben Sie Ideen, wie Sie die Leistung Ihres Pop-ups verbessern können? Nutzen Sie unser A/B-Testing, um mit beliebigen Elementen zu experimentieren und zu überprüfen, was bei Ihrem Publikum am besten ankommt.

Claspo zielt darauf ab, Ihre Aufgabe zu vereinfachen und die gewünschten Ergebnisse schneller zu erzielen. Mit diesem Gedanken im Hinterkopf hat unser Marketing-Team eine A/B-Testvorlage erstellt. Sie enthält die kritischen Phasen dieses Prozesses und ermöglicht es Ihnen, jede Hypothese in die Praxis umzusetzen. Holen Sie sie sich kostenlos und nutzen Sie sie für alle nachfolgenden A/B-Tests (nicht nur für jene, die mit Pop-ups zu tun haben).

Wie man ein Pop-up benutzerfreundlich gestaltet

Haftungsausschluss: Das optimale Erscheinungsbild Ihres Pop-ups kann nur durch A/B-Tests ermittelt werden. Es gibt jedoch einige grundlegende Regeln, die Ihnen helfen, ein Pop-up-Design zu erstellen, das für die Nutzer attraktiv und für Sie effektiv ist.

Branding ist entscheidend, daher stellen Sie sicher, dass alle Designelemente des Pop-ups mit dem Farbschema und Stil Ihrer Marke übereinstimmen. Dies wird helfen, Ihre Markenidentität zu stärken und das Pop-up wie einen natürlichen Teil Ihrer Website wirken zu lassen.
Denken Sie an das Reziprozitätsprinzip und bieten Sie etwas im Gegenzug für deren Kontaktinformationen an.
Verstärken Sie Ihre Nachricht mit einem Bild, um die Klickrate um bis zu 25 % zu steigern. Verwenden Sie hochauflösende Bilder, um sicherzustellen, dass sie auf allen Geräten gut aussehen. Unscharfe oder verpixelte Bilder können die Professionalität Ihres Pop-ups beeinträchtigen.
Fügen Sie nicht zu viele Eingabefelder hinzu. Statistiken zeigen, dass Pop-ups mit zwei Eingabefeldern die höchste Konversionsrate haben. Dies reicht aus, um die Kontaktdaten und den Namen des Interessenten zu klären, ohne sie mit Ihrem Pop-up-Formular zu langweilen.
Stellen Sie sicher, dass jedes Feld klar beschriftet ist, damit Benutzer genau wissen, welche Informationen erforderlich sind. Verwenden Sie Platzhaltertext, um Beispiele oder zusätzliche Anweisungen bereitzustellen.
Gestalten Sie für Sichtbarkeit und Lesbarkeit. Verwenden Sie hohen Kontrast zwischen Text und Hintergrund, um Ihre Nachricht leicht lesbar zu machen. Wählen Sie Schriften, die gut lesbar sind, und vermeiden Sie übermäßig verzierte Schriften, die schwer zu entziffern sind.
Optimieren Sie für mobile Geräte. Stellen Sie sicher, dass Ihr Pop-up-Formular responsiv ist und auf allen Bildschirmgrößen, einschließlich Smartphones und Tablets, gut aussieht. Stellen Sie sicher, dass Tasten und Links groß genug sind, um leicht per Finger angetippt werden zu können.
Seien Sie vorsichtig mit Vollbild-Widgets. Die Norman Nielsen Group empfiehlt, Widgets zu verwenden, die den Inhalt blockieren, nur wenn Sie das Alter der Benutzer überprüfen, ihre rechtliche Zustimmung erhalten usw. In anderen Fällen können sie Ihre Werbung aufdringlich machen und die Benutzer verärgern.
Stellen Sie sicher, dass es einen gut sichtbaren Schließen-Knopf gibt, damit Benutzer das Pop-up leicht schließen können, wenn sie nicht interessiert sind. Lassen Sie Benutzer das Pop-up schließen, indem sie außerhalb davon klicken oder die Escape-Taste drücken.

Tipps zur Anpassung des Pop-up-Fensters

Selbst das visuell ansprechendste Pop-up kann aufdringlich wirken und Besucher von Ihrer Website abschrecken. Daher ist es, um die Frage zu beantworten, wie ein Pop-up erstellt werden kann, das konvertiert und nicht nervt, wichtig, nicht nur das Design, sondern auch die Anzeigeregeln zu besprechen.

Überhäufen Sie Benutzer nicht mit Pop-ups. 45,6% der Besucher beschweren sichüber zu viele Pop-ups auf einer Website. Mit Claspo können Sie dies auf verschiedene Weise vermeiden:

Verwenden Sie das vorab konfigurierte Stille-Intervall, um das gleichzeitige Erscheinen von Pop-ups zu verhindern, und zeigen Sie sie nur einmal alle drei Minuten (das Intervall kann angepasst werden)
Wählen Sie Seiten mit dem passenden Kontext für ein bestimmtes Pop-up statt einfach das gleiche Pop-up auf der gesamten Website anzuzeigen.
Personalisieren Sie Ihre Pop-ups, beispielsweise nur für Erstbesucher, Nutzer aus einer bestimmten geographischen Region oder diejenigen, die über eine spezielle Traffic-Quelle oder Kampagne auf die Seite gekommen sind

Don't_bombard_users_with_pop-ups

28,6% der Nutzer hassen das sofortige Erscheinen von Pop-ups. Erstellen Sie ein Pop-up, das erscheint, wenn der Nutzer mindestens ein paar Sekunden auf der Website verbracht hat. Auf diese Weise geben Sie ihnen Zeit, sich wohl zu fühlen und mehr über Ihr Unternehmen zu erfahren, bevor Sie ihnen Ihr Angebot zeigen. Dies verbessert ihr Browser-Erlebnis und erhöht Ihre Chancen auf eine Conversion. Unsere voreingestellten Anzeige-Regeln verzögern Pop-ups um 20 Sekunden, aber Sie können diese Zeit jederzeit anpassen.
Verwenden Sie einen Scroll-Trigger für Ihr Pop-up-Formular. So können Sie ein Pop-up anzeigen, wenn der Nutzer die Seite zu einem bestimmten Prozentsatz nach unten gescrollt hat, was mehr Conversions als ein Zeit-Trigger bringt. Der Hauptgrund dafür ist, dass Ihr Pop-up im richtigen Kontext erscheint.

Zum Beispiel, wenn ein Nutzer Ihren Blogartikel bis zu einem bestimmten Punkt gelesen hat, laden Sie ihn ein, sich für Ihren Newsletter anzumelden, um weitere hilfreiche Informationen zu erhalten. Ein Pop-up kann auch erscheinen, wenn der Nutzer zum Preisabschnitt gescrollt hat, um einen Rabatt auf die erste Bestellung oder eine kostenlose Testversion anzubieten.

Hören Sie auf, Ihr Pop-up rechtzeitig anzuzeigen. 20% der Nutzer fühlen sich gestört, wenn sie jedes Mal dieselben Pop-up-Formulare sehen, wenn sie eine Website besuchen. Achten Sie auf ihr Erlebnis! Verzichten Sie darauf, das Pop-up denen zu zeigen, die es bereits ein oder mehrmals geschlossen haben und denen, die bereits ihre Kontaktdaten hinterlassen haben. Das ist mit Claspo leicht zu erreichen.

Stop_your_pop-up

Fazit

Da haben Sie es! Sie haben gelernt, wie Sie HTML-Pop-ups erstellen und den unglaublich einfachen, codefreien Weg beschreiten. Wir hoffen, Sie haben gesehen, wie sehr Claspo Ihr Leben und Ihre Webdesign-Projekte wirklich vereinfachen kann. Mit Claspo benötigen Sie keine Vorkenntnisse im Programmieren, um Ihr erstes Widget für die Website zu erstellen. Unsere Plattform ermöglicht es Ihnen, Pop-ups zu erstellen, die auf jedem Gerät gut aussehen, von Desktops bis hin zu Smartphones, und sorgt für ein nahtloses Erlebnis für Ihre Besucher.

Ob Ihr Ziel darin besteht, Ihre E-Mail-Liste mit überzeugenden E-Mail-Pop-up-Beispielen zu erweitern, Feedback zu sammeln oder ein Sonderangebot anzukündigen, Sie können buchstäblich in wenigen Minuten beeindruckende Pop-ups haben. Sobald Sie die erfolgreichen Anwendungsfälle von Pop-ups entdecken, möchten Sie selbstverständlich auch ein Pop-up für Ihre Website erstellen. Deshalb laden wir Sie ein, mit unserem kostenlosen Lifetime-Plan den Sprung zu wagen. Sie können beginnen, Ihre Webseite aufzubauen und echte Ergebnisse für Ihr Geschäft zu sehen, ohne einen Cent auszugeben. Es ist die perfekte Möglichkeit, HTML zu nutzen (ohne es tatsächlich zu programmieren!), um die Leistung Ihrer Website zu steigern. Warum probieren Sie es nicht aus und sehen, wie einfach es ist, wirkungsvolle Widgets für Ihre Seite zu erstellen?

Wie man ein Popup in HTML für Ihre Website erstellt