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.

The default Gutenberg editor doesn’t come with a popup builder. So when you are using Gutenberg you need to pick a WordPress popup plugin for the block editor. For this tutorial, we have used the PopupKit plugin.

PopupKit is one of the best WordPress popup plugin​ for Gutenberg, designed specifically for the Gutenberg. With this WordPress popup maker​, creating popups in Gutenberg is now easier than ever.

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

To install the PopupKit plugin, you need to have the GutenKit block editor plugin installed on your website. Here are the required plugins and themes to use popup builder seamlessly on your website.

☑️Required Plugins:

• PopupKit: Download free WordPress popup plugin

☑️ Thema: Hallo Blöcke Thema or any WordPress block theme like Twenty Twenty-Five.

Once you’ve installed all the plugins, you’re all set to start building WordPress popups in Gutenberg for your WordPress site. Now you can pop up under Kampagne, get through the Teilnehmer information, see the campaign Analytics, get advanced Integration, explore template, and so on.

How to add a popup on WordPress using Gutenberg blocks

Now, we will start creating WordPress popups in Gutenberg. With PopupKit you can design popups from the scratch with any Gutenberg blocks. Or, you can use the pre-designed templates to quickly build high-converting popups.

In this tutorial, we will demonstrate both of the methods of creating WordPress popups in Gutenberg.

Method 1: Create Gutenberg popups for WordPress with pre-designed templates

Während creating a professional WordPress website with Gutenberg, you can save time and effort by using the ready designs rather than starting from scratch.  With 55+ templates available in PopupKit’s Template Library, you can quickly create professional-looking popups in just minutes.

First, let’s see how to use the ready templates to build popups. Go through the following steps to create WordPress popup in Gutenberg:

1. Gehe zu PopupKit > Templates
2. Klick auf das "Choose From the Template" Taste.
3. Set the campaign type to: Aufpoppen
4. Dann browse through the template library and import one.

You can easily narrow down your search in the PopupKit template library by using the built-in filters. Here’s a quick look at what you can sort by:

☑️ Typ:

• Alle: Browse both free and pro templates.
• Frei: Show only the free ones.
• Profi: See the premium templates.

☑️ Seasonal:

Filter the templates by seasonal events like Black Friday, New Year, summer sales, and more to match your campaign’s vibe.

☑️ Goal:

Find templates that can help you achieve specific campaign goals, such as growing your email list, making time-sensitive offers, reducing bounce rate, etc.

☑️ Industry:

Use templates tailored for your niche, whether you’re Blogger/ Publisher, running an eCommerce, working with a Local Business, Marketing Agency, Non-profit or SaaS brands.

☑️ Feature:

Choose templates with specific built-in features like Countdown Timers, Coupon wheels, Gamification, Multi-step campaigns, Exit intent, and Video support.

Method 2: Design WordPress popups from scratch using any Gutenberg block

Alternatively, if you want a fully custom-designed WordPress popup, you can build one entirely from scratch using any Gutenberg blocks (default ones and third-party add-ons) directly in the block editor. Follow the steps bellow:

1. Navigieren Sie zu PopupKit > Campaigns from your WordPress dashboard. Here you will see the popups you have created for your website.
2. Klicken Sie dann auf Create Black to open the popup editor. In the editor you have a blank canvas to create popup with blocks.

Now in the block editor, use various Gutenberg blocks to deisgn the kind of you popup you want for your WordPress website.

PopupKit initially have a set of essential blocks for creating WordPress popups. Beyond that, you can use block editor plugins like GutenKit to design popups with a more varsatile collection of blocks.

Mit GutenKit page builder for Gutenberg, you can use 74+ blocks and 18+ modules to design a modern and sophisticated popup for your site. This includes blocks like headings, paragraphs, buttons, images, and even videos to your popup, making it highly customizable.

Here are some basic examples of creating a WordPress popups in Gutenberg.

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

With PopupKit, you have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

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.

Decide how and when to trigger the WordPress popups

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.

With this popup maker for WordPress, you can select how the popups will trigger on your website from Inhalt > Offene Veranstaltungen im Blockeditor.

Dies hilft Ihnen, verschiedene Arten von Popups auf Gutenberg zu entwickeln. Hier sind die Arten von WordPress-Popups on Gutenberg you can design with Popup Builder.

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.