So erstellen Sie Popups in WordPress mit Gutenberg

Haben Sie beim Surfen im Internet schon einmal ein Popup-Fenster gesehen? Ein Popup-Fenster, das mit Overlay angezeigt wird, während Sie eine Webseite besuchen. 

Manchmal können diese Popups sehr hilfreich sein und Ihnen nützliche Informationen oder tolle Angebote bieten. Sie können aber auch etwas nervig und aufdringlich wirken.

Aus der Sicht eines Websitebesitzers haben sich Popups jedoch als wirkungsvolles Mittel erwiesen, um Aufmerksamkeit zu erregen, Angebote zu bewerben und Leads zu generieren.

Daher ist es entscheidend, die richtigen Popups zu erstellen, die den Benutzer einbeziehen, ohne ihn gleichzeitig zu nerven.

Um Ihnen dabei zu helfen, führen wir Sie Schritt für Schritt durch die Einrichtung effektiver Popups, die auf die Ziele Ihrer Website zugeschnitten sind. Am Ende dieses Handbuchs kennen Sie die einfachste Möglichkeit, Popups zu erstellen, die nicht nur Aufmerksamkeit erregen, sondern auch das Benutzererlebnis verbessern.

Was ist ein Popup auf der Website?

Popups sind kleine Fenster, die auf einer Webseite erscheinen, normalerweise als Overlay, um die Aufmerksamkeit des Benutzers zu erregen. Diese Fenster können verschiedene Arten von Inhalten enthalten, wie etwa Werbeanzeigen, Abonnementangebote, Benachrichtigungen oder Handlungsaufforderungen. 

Popups erfordern häufig eine Interaktion, z. B. das Aufrufen oder Verlassen einer Seite, das Klicken auf eine Schaltfläche zum Schließen oder das Ausfüllen eines Formulars. Sie sind so konzipiert, dass sie sich vom Rest der Seite abheben und sofortige Interaktion auslösen.

Wann verwenden Benutzer normalerweise Popups auf ihren Websites?

Popups werden am häufigsten verwendet, um bestimmte Ziele im Zusammenhang mit Benutzerinteraktion und Konvertierung zu erreichen. Hier sind einige gängige Szenarien, in denen Benutzer Popups auf ihren Websites verwenden:

• Zu Leads erfassen oder Erstellen Sie eine E-Mail-Liste mit einem Abonnement.
• Bewerben Sie exklusive Angebote, Rabatte oder zeitlich begrenzte Angebote.
• Neue Produkte ankündigen, Funktionen oder wichtige Updates.
• Zur Verfügung stellen Wichtige Hinweise um Besucher aufmerksam zu machen. 
• Bitten Sie die Besucher, Registrieren Sie sich für ein Konto auf der Website.
• Zu Feedback sammeln oder Umfragen durchführen unter dem Publikum.
• Zeigen Cookie-Einwilligung oder Datenschutzrichtlinie Benachrichtigung.
• Bringen Sie die Benutzer dazu, Für Veranstaltungen anmelden, Webinare oder Workshops.

Diese strategische Verwendung von Popups trägt dazu bei, die Benutzereinbindung und Konvertierung zu verbessern. Es ist jedoch wichtig, sie mit Bedacht zu implementieren, um eine Beeinträchtigung des Benutzererlebnisses zu vermeiden.

So erstellen Sie WordPress-Popups in Gutenberg

Lassen Sie uns direkt zum Kernteil dieser Anleitung springen, in dem es darum geht, wie Sie mit dem Gutenberg-Blockeditor ein Popup in WordPress hinzufügen.

Der Standard-Gutenberg-Editor verfügt nicht über einen Popup-Builder. Sie müssen daher ein WordPress-Popup-Plugin für den Blockeditor auswählen. Für dieses Tutorial haben wir das Plugin GutenKit verwendet.

GutenKit ist ein Blockeditor-Plugin das mit einem Popup-Builder geliefert wird, der speziell für Gutenberg entwickelt wurde. Mit diesem Popup-Builder ist das Erstellen von Popups in Gutenberg jetzt einfacher als je zuvor.

Hier ist die Schritt-für-Schritt-Anleitung zum Erstellen eines Gutenberg-Popups im WordPress-Editor.

Installieren und aktivieren Sie ein WordPress-Popup-Plugin für Gutenberg

Um den GutenKit Popup Builder zu installieren, müssen Sie das GutenKit Blockeditor-Plugin auf Ihrer Website installiert haben. Hier sind die erforderlichen Plugins und Designs, um den Popup Builder nahtlos auf Ihrer Website zu verwenden.

☑️Vorausgesetzte(s) Plugin(s):

• GutenKit Kostenlose Version
• oder, GutenKit Pro-Version

☑️ Thema: Hallo Blöcke Thema oder jedes beliebige WordPress-Blockthema.

Sobald Sie das GutenKit-Plugin installiert haben, gehen Sie zu GutenKit > Module. Finden Sie die Popup-Builder und klicken Sie auf Installieren Schaltfläche. Wenn der Popup-Builder aktiviert ist, können Sie mit dem Erstellen von WordPress-Popups in Gutenberg für Ihre WordPress-Site beginnen.

Entwerfen Sie Popups für WordPress mit jedem beliebigen Gutenberg-Block

Navigieren Sie nun zu GutenKit > Popup und klicken Neues Popup erstellen um den Editor zu öffnen, in dem Sie das Popup erstellen.

Anschließend können Sie den Block verwenden, um das Popup im Editor zu erstellen.

Mit dem GutenKit Popup Builder können Sie beliebige Gutenberg-Blöcke zum Gestalten Ihres Popups verwenden. 

Sie können über 65 GutenKit-Blöcke und über 18 Module verwenden, um ein modernes und anspruchsvolles Popup für Ihre Site zu entwerfen.

Hierzu gehören Blöcke wie Überschriften, Absätze, Schaltflächen, Bilder und sogar Videos für Ihr Popup, wodurch es äußerst anpassbar wird. 

Erstellen Sie Gutenberg-Popups mit vorgefertigten Vorlagen

Anstatt bei Null anzufangen, können Sie Zeit und Mühe sparen, indem Sie die fertigen Designs verwenden. Mit über 500 Mustern und Vorlagen in der Vorlagenbibliothek von GutenKit können Sie in wenigen Minuten schnell professionell aussehende Popups erstellen.

So importieren Sie die vorgefertigten Designs

1. Popup-Builder-Editor für Gutenberg.
2. Klick auf das Vorlagenbibliothek Taste.
3. Wählen Sie ein Muster aus der Bibliothek.

Anschließend können Sie den Inhalt ändern und die Stile an Ihre Kampagne anpassen. So können Sie schnell und unkompliziert beeindruckende Popups erstellen und ausführen!

Verwenden Sie intelligente Bedingungen, um Gutenberg-Popups auf Ihrer Website anzuzeigen

Sie haben die Flexibilität, auszuwählen, auf welchen Seiten Ihre Popups erscheinen sollen. Gehen Sie einfach zum Popup-Block-Editor und unter der Registerkarte „Inhalt“ sehen Sie eine Option namens „Bedingungen“. 

Klicken Sie dort einfach auf  + Bedingung hinzufügen und legen Sie die Regeln fest, wo Ihr Popup angezeigt werden soll. So einfach ist das!

Mit dem GutenKit-Popup-Builder können Sie die Einschluss- und Ausschlussbedingungen festlegen.

• Bedingung einschließen: Mit den Einschlussbedingungen können Sie Popups zur gesamten Website, zu bestimmten Seiten oder zu Archivseiten hinzufügen.
• Ausschlussbedingung: Mit den Ausschlussbedingungen können Sie entscheiden, wo auf Ihrer Site die Popups nicht angezeigt werden sollen.

So können Sie mithilfe intelligenter Bedingungen Popups auf Ihrer Website anzeigen:

Gutenberg-Popups auf der gesamten Website anzeigen

Um das Popup auf allen Seiten Ihrer Website anzuzeigen, 

👉 Schritt 1: Fügen Sie eine neue Bedingung für Popups hinzu.

👉 Schritt 2: Wählen Sie die Bedingung „Einschließen“ aus.

👉 Schritt 3: Wählen Sie „Gesamte Site“, um auf jeder Seite ein Popup anzuzeigen.

Deaktivieren Sie die Anzeige von Popups auf bestimmten Seiten

Es kann vorkommen, dass Sie nicht möchten, dass Popups auf bestimmten Seiten angezeigt werden. Sie können dies tun mit Ausschließen Bedingungen. 

👉 Schritt 1: Fügen Sie eine neue Bedingung für Popups hinzu.

👉 Schritt 2: Wählen Sie die Bedingung „Ausschließen“ aus.

👉 Schritt 3: Wählen Sie „Singular“.

👉 Schritt 4: Wählen Sie eine Seite aus, auf der die Popups nicht angezeigt werden sollen.

Popups nur auf bestimmten Seiten anzeigen

Wenn Sie gezieltere Kampagnen anstreben, möchten Sie möglicherweise auf bestimmten Seiten Ihrer Website Popups anzeigen.

👉 Schritt 1: Fügen Sie eine neue Bedingung für Popups hinzu.

👉 Schritt 2: Wählen Sie die Bedingung „Einschließen“ aus.

👉 Schritt 3: Wählen Sie „Singular“.

👉 Schritt 4: Wählen Sie eine Seite aus, um ein Popup anzuzeigen.

Um sicherzustellen, dass das Popup nicht auf anderen Seiten angezeigt wird, können Sie außerdem ein Ausschlussbedingung, und wählen Sie die gesamte Site aus, um die Anzeige des Popups auf der gesamten Website einzuschränken.

WordPress-Popups auf den Archivseiten

Sie können Popups auch auf jeder WordPress-Archivseite anzeigen, indem Sie eine Bedingung festlegen. Dafür Bedingung hinzufügen > Einschließen > Archivieren > Archiv auswählen Seite.

Wenn Sie andererseits verhindern möchten, dass Popups auf einer bestimmten Archivseite angezeigt werden, können Sie eine Ausschlussbedingung einrichten. Folgen Sie dazu einfach den gleichen Schritten: Bedingung hinzufügen > Ausschließen > Archivieren > Archiv auswählen Seite.

Entscheiden Sie, wie und wann die Gutenberg-Popups ausgelöst werden sollen

Sie haben die vollständige Kontrolle darüber, wie Popups auf Ihren Webseiten erscheinen. Sie können entscheiden, ob die Popups beim Laden der Seite, beim Verlassen der Seite oder nach einer Interaktion erscheinen.

Im GutenKit Popup Builder können Sie auswählen, wie die Popups auf Ihrer Website ausgelöst werden sollen: Inhalt > Offene Veranstaltungen im Blockeditor..

Dies hilft Ihnen, verschiedene Arten von Popups auf Gutenberg zu entwickeln. Hier sind die Arten von WordPress-Popups Auf Gutenberg können Sie mit GutenKit Popup Builder gestalten.

1. Eintrags-Popups

• Auslösen: Wird sofort ausgelöst, wenn die Seite im Browser des Benutzers geladen wird.
• Zweck: Bindet Benutzer ein, sobald sie auf der Website landen.
• Anwendungsfall: Begrüßt Benutzer mit einem Rabatt, einer Veranstaltungsankündigung oder fordert sie direkt zu einem Abonnement auf.

💡 Wie wird es ausgelöst? Wählen Sie das offene Ereignis als „Beim Laden der Seite”

2. Exit-Intent-Popups

• Auslösen: Wird aktiviert, wenn der Benutzer beabsichtigt, die Registerkarte oder den Browser zu schließen.
• Zweck: Erfasst Benutzer, bevor sie die Site verlassen.
• Anwendungsfall: Bietet einen Rabatt, ein Newsletter-Abonnement oder ein Sonderangebot.

💡 Wie wird es ausgelöst? Wählen Sie das offene Ereignis als „Exit-Intent auf der Seite”

3. Scroll-Trigger-Popups

• Auslösen: Wird dadurch ausgelöst, dass der Benutzer auf einer Seite nach unten scrollt.
• Zweck: Bietet ein Sonderangebot an oder bittet um Feedback, nachdem der Benutzer einen bestimmten Teil der Seite erkundet hat.
• Anwendungsfall: Bewirbt zusätzliche Inhalte, ein Anmeldeformular oder ein zeitlich begrenztes Angebot.

💡 Wie wird es ausgelöst? Wählen Sie das offene Ereignis als „Seite gescrollt“.

Setzen Sie anschließend die „Seiten-Scroll-Fortschritt um zu entscheiden, an welcher Stelle das Popup angezeigt wird, wenn der Benutzer auf der Seite nach unten scrollt.

4. Popups bei Benutzerinaktivität

• Auslösen: Wenn der Benutzer für eine bestimmte Zeit inaktiv ist.
• Zweck: Sprechen Sie Benutzer erneut an, die für einen bestimmten Zeitraum inaktiv auf der Site waren.
• Anwendungsfall: Erinnert Benutzer an Sonderangebote, fordert sie zum Handeln auf oder schlägt Artikel vor, die sie möglicherweise noch in ihrem Einkaufswagen liegen gelassen haben.

💡 Wie wird es ausgelöst? Wählen Sie das offene Ereignis als „Nach Inaktivität“.

Stellen Sie nun die ein Inaktivitätszeit des Benutzers in Sekunden, um zu entscheiden, wann das Popup angezeigt wird, nachdem der Benutzer inaktiv geworden ist.

5. Popups beim Klicken

• Auslösen: Aktiviert durch Benutzerinteraktion mit einem Abschnitt auf der Seite.
• Zweck: Zeigt Inhalte an, wenn der Benutzer auf ein bestimmtes Seitenelement (z. B. eine Schaltfläche oder ein Bild) klickt.
• Anwendungsfall: Wird häufig für Produktdetails, zusätzliche Formulareinreichungen oder Videowiedergaben verwendet.

💡 Wie wird es ausgelöst? Wählen Sie das offene Ereignis als „Benutzerdefinierter Selektor-Klick“.

Jetzt hinzufügen Selector-Klasse für den Abschnitt. 

Mit diesen verschiedenen Arten von WordPress-Popups, die in Gutenberg verfügbar sind, haben Sie die Flexibilität, das beste Format auszuwählen, das Ihren Zielen entspricht und das Benutzererlebnis verbessert, sodass Ihre Website ansprechender und effektiver wird, um Aufmerksamkeit zu erregen und Conversions zu erzielen.

Planen Sie die Popup-Aktivierung für Ihre Kampagne

Manchmal verwenden Sie Popups, um Kampagnen auf Ihrer Website zu bewerben. Diese Kampagnen haben ein bestimmtes Datum und eine bestimmte Uhrzeit für den Start. Sie müssen also genau diesen Zeitpunkt einhalten, um das Popup zu aktivieren.

Das geht mit dem Erweiterte Regeln. 

➡️ Schritt 1: Schalten Sie den Knopf auf „Datum und Uhrzeit planen“.

➡️ Schritt 2: Stellen Sie die ein Zeit wenn Sie das Popup aktivieren möchten.

➡️ Schritt 3: Wählen Sie das Datum des Starts der Popup-Kampagne.

Warum sollten Sie sich für den GutenKit Popup Builder für WordPress entscheiden?

Der GutenKit Popup-Builder ist aufgrund seiner nahtlosen Integration mit dem Gutenberg-Blockeditor eine hervorragende Wahl für die Erstellung von Popups in WordPress und bietet Benutzern ein intuitives und hochgradig anpassbares Erlebnis. Aus diesen Gründen ist es eine hervorragende Lösung für WordPress-Sites:

✅ Nahtlose Gutenberg-Integration:

GutenKit wurde speziell für Gutenberg entwickelt, sodass Sie Popups mit derselben blockbasierten Oberfläche erstellen und verwalten können, mit der Sie bereits vertraut sind. Dadurch sind keine externen Popup-Builder oder Codierungen mehr erforderlich, was den gesamten Prozess rationalisiert und ein einheitliches Erlebnis ermöglicht.

✅ Vorgefertigte Vorlagen für eine schnelle Einrichtung:  

   GutenKit bietet eine Vielzahl professionell gestalteter Popup-Vorlagen, die sich leicht an den Stil Ihrer Marke anpassen lassen. Diese Vorlagen sparen Zeit und Mühe und bieten einen Ausgangspunkt für alle, die Popups nicht von Grund auf neu erstellen möchten, aber dennoch ein elegantes, modernes Design wünschen.

✅ Erweiterte Anzeigeregeln: 

Mit GutenKit haben Sie die volle Kontrolle darüber, wann und wo Ihre Popups erscheinen. Sie können genaue Anzeigebedingungen festlegen, je nachdem, auf welchen Seiten Sie das Popup anzeigen möchten. 

Dadurch wird sichergestellt, dass Ihre Popups in den optimalen Momenten angezeigt werden und die Interaktion verbessert wird, ohne aufdringlich zu wirken.

✅ Mehrere Auslöseoptionen:

GutenKit bietet mehrere Auslöseoptionen zum Anzeigen von Popups, z. B. beim Laden der Seite, nach einer zeitlichen Verzögerung, beim Scrollen oder wenn der Benutzer im Begriff ist, die Seite zu verlassen. 

Sie können auch Popups auslösen, wenn Benutzer mit bestimmten Elementen interagieren, was Ihnen die vollständige Kontrolle über die Benutzerreise gibt.

✅ Flexible Anpassung

Der GutenKit Popup Builder ermöglicht eine umfassende Anpassung Ihrer Popups, von Animationen und Stilen bis hin zu Typografie und Farben. 

Sie können sogar benutzerdefiniertes CSS für ein erweitertes Styling hinzufügen und so sicherstellen, dass Ihre Popups zum einzigartigen Design und Branding Ihrer Website passen.

✅ Reaktionsschnell und für Mobilgeräte optimiert 

Mit GutenKit erstellte Popups sind vollständig responsive und mobilfreundlich, sodass sichergestellt ist, dass Ihre Popups auf jedem Gerät gut aussehen. Sie können das Erscheinungsbild mit Eingangs- und Ausgangsanimationen, Hintergrundstilen, Overlay-Farben und mehr anpassen.

✅ Leicht und leistungsorientiert 

Anders als viele andere Popup-Plugins ist GutenKit auf geringes Gewicht und optimale Leistung ausgelegt. 

Das bedeutet, dass Sie sich keine Sorgen darüber machen müssen, dass Popups Ihre Site verlangsamen, was sowohl für die Benutzererfahrung als auch für die SEO von entscheidender Bedeutung ist.

Einpacken

Wenn Sie diese Schritte befolgen, können Sie ganz einfach Popups auf Ihren WordPress-Sites erstellen und anzeigen. Mit dem GutenKit Popup Builder können Sie problemlos dynamische Popups in Ihre WordPress-Site integrieren und so effektiv mit Ihrem Publikum kommunizieren. 

Nutzen Sie die Erkenntnisse aus diesem Handbuch und experimentieren Sie mit verschiedenen Popup-Strategien, um das Potenzial Ihrer Site zu maximieren!

Wie Popup Builder verfügt GutenKit über mehr als 65 Blöcke, mehr als 18 Module und mehr als 500 fertige Designs, um Ihnen ein erweitertes Seitenerstellungserlebnis im Gutenberg-Blockeditor zu bieten. Installieren Sie also noch heute GutenKit und beginnen Sie mit dem Erstellen Ihrer Traumwebsite in WordPress.