So fügen Sie kostenlos und schnell ein Popup zu WordPress-Websites hinzu

Haben Sie beim Besuch einer Website jemals plötzlich ein Bild oder eine Nachricht auf dem Bildschirm gesehen? Das ist das Popup oder das Benachrichtigungsfenster der Website.

Popup ist eine beliebte und effektive Marketingstrategie, die von vielen Geschäftsleuten und Websitebesitzern verwendet wird. Um ein solches Popup zu WordPress hinzuzufügen, können Sie ein kostenloses Plugin verwenden, um es schnell und einfach zu machen. Auch wenn Sie kein Experte sind, brauchen Sie nur 10 Minuten, um unseren Anweisungen zu folgen.

Warum sollten Sie ein Popup auf einer Unternehmenswebsite verwenden?

Das Bild unten ist ein Beispiel für das Popup einer Unternehmenswebsite. Es sieht toll aus, nicht wahr?

Popup ist nicht nur umwerfend (wenn Sie es schaffen, ein gut passendes und attraktives zu entwerfen), sondern bietet auch viele andere Vorteile wie:

• Bewerben Sie wichtige Informationen, Verkaufs- und Marketingkampagnen,…
• Call-to-Action, Conversion-Rate erhöhen
• Lead generieren

Fügen Sie mit dem Popup Builder-Plugin ein Popup zu WordPress hinzu

Um Ihrer WordPress-Website ein Popup hinzuzufügen, können Sie eine glaubwürdige Webdesign-Firma oder einen Programmierer beauftragen. Um jedoch Zeit und Geld zu sparen, ist das Plugin die beste Option. Unter einer Vielzahl von Popup-Plugins ist Popup Builder möglicherweise das benutzerfreundlichste und effektivste.

Es ist ein kostenloses Plugin und auf wordpress.org verfügbar, Sie müssen also nur das Plugin direkt im Dashboard installieren und aktivieren.

Führen Sie nach Abschluss die folgenden Schritte aus.

Schritt 1: Wählen Sie den Typ des Popups

Jetzt wird das Untermenü Popup Builder auf dem Dashboard angezeigt. Gehen Sie dorthin, klicken Sie auf Nachrichten hinzufügen und wählen Sie einen der 4 bereitgestellten Popup-Typen aus.

Zur besseren Veranschaulichung zeigt das folgende Bild, wie die 4 Arten von Popups, die von diesem Plugin bereitgestellt werden, im Frontend angezeigt werden.

Nachdem Sie den gewünschten Typ ausgewählt haben, gehen Sie zum nächsten Schritt.

Schritt 2: Inhalt zum Popup hinzufügen

Geben Sie dem Popup zunächst einen Namen, um es einfacher zu verwalten.

Verschiedene Arten von Popups benötigen unterschiedliche Inhalte. Lassen Sie uns in jeden Typ graben.

Inhalte zu Facebook-Popups hinzufügen

Auf der Benutzeroberfläche zum Erstellen von Facebook-Popups müssen Sie diese Informationen eingeben:

1. Die Nachricht, die im Popup angezeigt wird. Sie sollten einen Call-to-Action-Satz verwenden, um die Leser zur Interaktion zu ermutigen. Außerdem sollten Sie Bilder und Banner hinzufügen, damit es atemberaubender wird.
2. Fügen Sie die Facebook-URL ein.
3. Wählen Sie nach Belieben ein Layout für das Popup. Im Grunde sind diese Layouts nicht so unterschiedlich. So können Sie sie ausprobieren und Ihren Favoriten auswählen.
4. Klicken Sie hier, um die Teilen-Schaltfläche auszublenden, wenn Sie möchten.

Und das habe ich:

Inhalt zu Bild-Popups hinzufügen

Hier müssen Sie nur das Bild hochladen oder den Link des Bildes einfügen. Dieses Plugin unterstützt JPG, PNG und GIF.

Dies ist ein wunderschönes Banner, das ich selbst für die Black Friday-Kampagne meiner Website erstellt habe:

Inhalt zu HTML-Popups hinzufügen

Das Hinzufügen von Inhalten zu einem HTML-Popup ist wie das Schreiben eines Beitrags im WordPress Gutenberg-Editor. Sie können Bilder, Videos, Tabellen, Schaltflächen, Zitate usw. einfügen oder andere Inhalte, die der WordPress-Editor unterstützt. Die Benutzeroberfläche ähnelt dem Gutenberg-Editor, ist also recht freundlich und nativ.

Und das ist mein HTML-Popup im Frontend:

Inhalt zu Abonnement-Popups hinzufügen

Hier haben wir ziemlich viele Inhalte, die Sie für Ihr Abonnementformular ausfüllen und anpassen müssen. Was Sie jedoch am meisten beachten müssen, sind Felder des Formulars wie Vorname , Nachname , E-Mail und passen Sie deren Platzhalter- und Pflichtfeld an .

Scrollen Sie danach nach unten und passen Sie die Anzeige des Formulars in Bezug auf Formularhintergrundoptionen, Eingabestil und Schaltflächenstile zum Senden an, um es ansprechender und an die Website anzupassen.

Wählen Sie insbesondere im Abschnitt Nach erfolgreichem Abonnement taktvoll eine geeignete Nachricht oder Informationen aus, die Sie Ihren Benutzern nach dem Abonnement anzeigen möchten. Für diese Abonnenten können Sie beispielsweise Dankesschreiben, Coupons, Geschenke, Geschenkkarten usw. anzeigen. Auf diese Weise können Sie die Eindrücke der Benutzer ziehen und ihre Erfahrung verbessern.

Dies ist zum Beispiel mein Abonnement-E-Mail-Popup. Nach dem Absenden zeige ich eine Benachrichtigung über die Black-Friday-Sale-Kampagne an, in der die Kunden aufgefordert werden, einkaufen zu gehen.

Gehen Sie zu Popup Builder > Alle Abonnenten , um Abonnenten zu verwalten.

Auf der Registerkarte Newsletter können Sie sogar E-Mails an Abonnenten senden.

Scrollen Sie nach unten, nachdem Sie Inhalt hinzugefügt haben. Sie sehen viele weitere Einstellungsmöglichkeiten. Sehen wir uns jede Option in den Schritten 4, 5, 6 an.

Schritt 3: Richten Sie den Anzeigeort und den Zustand des Popups ein

Einrichten des Anzeigestandorts

Im Abschnitt Popup-Anzeigeregeln müssen wir anpassen, wo das Popup angezeigt wird/nicht angezeigt wird.

Sie können Überall auswählen, um es auf jeder Seite anzuzeigen, zu posten, zu markieren oder anzupassen oder an einer bestimmten Stelle anzuzeigen, die Sie möchten. Sie können auch auf die QuickInfo (?) klicken, um weitere Informationen zu erhalten.

Zum Beispiel wähle ich den Standort als eine bestimmte Seite aus, wähle „ist“ , um sie anzuzeigen, und wähle die Anzeigeseite als „Startseite“ aus . Darüber hinaus können Sie weitere Standorte hinzufügen, indem Sie Hinzufügen wählen.

Einrichten der Anzeigebedingung

Wählen Sie im Abschnitt Popup-Ereignisse die Zeit aus, zu der das Popup angezeigt wird (wenn die Website einige Sekunden lang geladen wurde, wenn Benutzer irgendwo klicken usw.). Dieses Plugin unterstützt die folgenden Anzeigebedingungen:

• Beim Laden : Das Popup wird automatisch nach einigen Sekunden angezeigt (Sie können die Anzahl der Sekunden auf der Registerkarte Verzögerung hinzufügen), nachdem die Site geladen wurde.

• Nach CC-Klasse festgelegt : Ermöglicht Benutzern, auf eine Komponente zu klicken, um das Popup zu aktivieren. Diese Komponente basiert auf ihrer ID. Dieser Teil ist etwas kompliziert, daher sollten Sie die Dokumentation sorgfältig lesen.

• Beim Klicken : ähnlich wie im Abschnitt " Nach CSS-Klasse festlegen", aber Sie müssen nicht die ID des Popups verwenden, um die "Schaltfläche" zu installieren, um sie zu aktivieren.

Wenn Sie stattdessen im Abschnitt „ Optionen“ die Option „ Standard“ auswählen, erstellt das Plugin eine Standardklasse für das Popup im Abschnitt „ Standardklasse “ wie unten beschrieben.

Wenn Sie Benutzerdefiniertes CSS wählen, geben Sie die Klasse, die Sie selbst erstellt haben, im Abschnitt Benutzerdefinierte Klasse ein.

Danach fügen Sie die Klasse des Popups in das CSS der gewünschten Komponente ein.

In diesem Beitrag habe ich beispielsweise eine Schaltfläche und die gewünschte Klasse im Abschnitt Zusätzliche CSS-Klassen hinzugefügt.

Das ist das Ergebnis im Frontend:

• Hover Click : Wenn Sie mit der Maus über eine Komponente fahren, wird das Popup angezeigt. Sie können dasselbe wie im Abschnitt On Click tun.

Schritt 4: Passen Sie die Anzeige des Popups an

Nach Schritt 3 haben Sie ein einfaches Popup. Aber wenn Sie es noch atemberaubender haben möchten, scrollen Sie nach unten zum Abschnitt Design . Hier können Sie einige Komponenten wie Benutzeroberfläche, Overlay und Hintergrund anpassen, um es zu Ihrem Favoriten zu machen.

Darüber hinaus können Sie im Abschnitt Abmessungen die Breite und Länge anpassen, indem Sie den benutzerdefinierten Modus auswählen oder den Responsive-Modus auswählen, damit die Größe automatisch an den Inhalt angepasst wird.

Schritt 5: Andere erweiterte Einstellungen anpassen

Mit diesen erweiterten Einstellungen können Sie die Anzeige und Interaktion mit Popup-Fenstern … detaillierter konfigurieren.

Sie können beispielsweise im Abschnitt Einstellungen schließen auswählen, wie das Popup-Fenster geschlossen werden soll. Es gibt viele Möglichkeiten, es zu schließen, z. B. Esc drücken oder eine Schließen-Schaltfläche hinzufügen, … Wählen Sie eine oder mehrere aus, das liegt an Ihnen.

Wenn Sie Effekte zum Schließen und Öffnen von Popups hinzufügen oder die Anzeigezeiten für einen Benutzer anpassen möchten, … scrollen Sie nach unten zum Abschnitt Popup-Optionen . Sie müssen nur auf die gewünschte Option klicken und schon sind Sie fertig.

Beachten Sie, dass bei Verwendung des kostenlosen Popup Builder-Plugins die Abschnitte mit der Bezeichnung Unlock Option in gelber Farbe wie in der Abbildung unten dargestellt sind, die Funktionen der Pro-Version sind. Sie müssen weitere Erweiterungen dieses Plugins kaufen, um sie zu verwenden.

Schließlich gibt es in der Seitenleiste eine sehr interessante Option: Hinzufügen einer festen Schaltfläche auf der Website, um das Popup beim Klicken anzuzeigen. Diese schwebende Schaltfläche ist wirklich praktisch, sodass die Leute sie immer und überall sehen können. Auch sein Design ist angenehm und nicht störend.

Dies ist die schwebende Schaltfläche auf der Website:

Oder Sie können es deaktivieren , indem Sie deaktivieren klicken.

Klicken Sie abschließend auf Veröffentlichen , um dies zu erledigen.

Sie haben Ihr Popup also nach 6 Schritten von den grundlegenden bis zu den erweiterten Einstellungen abgeschlossen. Sie haben einen guten Job gemacht!

Letzte Worte

Wie Sie sehen, ist das Hinzufügen eines Popups zu WordPress nicht wirklich kompliziert. Sie müssen nur ein wenig Geduld haben, wenn Sie das Display anpassen, das ist die ganze harte Arbeit!

Darüber hinaus gibt es viele Dinge, um die Conversion-Rate der Website zu erhöhen. Wenn Sie eine effektive Zielseite erstellen möchten, lesen Sie besser einige weitere Artikel darüber, wie Sie eine Zielseite mit hoher Conversion-Rate erstellen oder eine Produktseite erstellen.

Viel Glück!