So erstellen Sie Warnboxen in WordPress

Wenn Ihre Website eine solide Anzahl von Besuchern hat, aber Anmeldungen oder Conversions niedriger sind als Sie möchten, sind Sie nicht allein. Es stehen unzählige Ressourcen zur Verfügung, um Ihren Traffic zu steigern – aber diesen Traffic dazu zu bringen, die richtigen Aktionen auf Ihrer Website durchzuführen, ist eine andere Geschichte.

Eine mögliche Lösung ist die Verwendung einer Alertbox. Dies ist ein leistungsstarkes und einfaches Tool, das die Conversions auf Ihrer WordPress-Seite dramatisch steigern kann. Darüber hinaus ist es sehr einfach, diese Funktion zu erstellen und anzupassen.

In diesem Artikel behandeln wir, was ein Benachrichtigungsfeld ist und warum Sie eines verwenden sollten. Dann zeigen wir Ihnen, wie Sie Ihre eigene Benachrichtigungsbox in WordPress erstellen. Tauchen wir ein!

Was ist eine Alarmbox?

Eine Warnbox ist genau das, wonach es sich anhört. Es ist eine Warnung, die auf einer Website erscheint, um Besucher darüber zu informieren, dass etwas passiert ist. Vielleicht kennen Sie diese Funktion besser als „Popup“.

Warnfelder in WordPress haben normalerweise eine von zwei Formen. Möglicherweise sehen Sie ein Popup, das auf dem Bildschirm erscheint, oder eine Leiste, die am oberen Rand Ihrer Seite verläuft (manchmal auch als „Hallo-Leiste“ bezeichnet).

Warum eine Warnbox erstellen?

Hinweisfelder werden normalerweise verwendet, um Benutzer über wichtige Ereignisse auf Ihrer Website zu informieren (oder zu warnen). Sie können beispielsweise ein WordPress-Warnfeld verwenden, um Besucher über einen Sonderverkauf für ein Produkt zu informieren, das sie sonst möglicherweise nicht sehen, oder über eine Reihe von hervorgehobenen Beiträgen.

Eine weitere sehr häufige Verwendung für diese Funktion ist die Erfassung von E-Mail-Adressen von Besuchern. Viele WordPress Alert Box-Plugins können so eingestellt werden, dass sie erscheinen, wenn ein Benutzer seinen Cursor von der Website wegbewegt (um beispielsweise die Registerkarte zu schließen oder die Zurück-Taste zu drücken).

Diese „Last-Minute“-Benachrichtigungen können eine großartige Möglichkeit sein, die Kontaktdaten von Besuchern zu erfassen, bevor sie gehen, was möglicherweise später zu einer Konversion führt. Diese Benachrichtigungen können äußerst effektiv sein – die leistungsstärksten Popups haben eine Konversionsrate von über 9 Prozent. Mit anderen Worten, ihre Implementierung lohnt sich.

Erstellen einer Warnbox mit einem Plugin

Dank WordPress-Plugins ist das Erstellen eigener Warnboxen einfach. Wir führen Sie mit dem leistungsstarken (und kostenlosen) Popup Maker-Plug-in durch jeden Schritt.

Schritt 1: Laden Sie ein Plugin herunter (z. B. Popup Maker)

Als erstes müssen Sie sich ein dediziertes Plugin besorgen. Wie oben erwähnt, ist das kostenlose Popup Maker-Plugin gut bewertet und eine solide Wahl.

Um dieses Tool zu installieren, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins > Add New . Suchen Sie nach „Popup Maker“, und es sollte der erste Eintrag sein:

Klicken Sie dann auf Jetzt installieren . Wenn die Installation abgeschlossen ist, vergessen Sie nicht, das Plugin zu aktivieren, indem Sie Aktivieren auswählen. Beachten Sie, dass Popup Maker selbst zwar kostenlos ist, für einige Funktionen jedoch ein Premium-Plan erforderlich ist.

Schritt 2: Erstellen Sie ein Popup

Wenn Popup Maker installiert ist, sollten Sie einen neuen Eintrag in Ihrer WordPress-Seitenleiste sehen, der nach dem Plugin benannt ist . Klicken Sie darauf, um eine Liste aller Ihrer Popups zu öffnen. Zuerst wird es leer sein, aber Sie sind dabei, das zu beheben.

Um ein Popup zu erstellen, klicken Sie oben auf dem Bildschirm auf Neues Popup hinzufügen . Dies öffnet den WordPress-Editor:

Wenn Sie diesen Bildschirm aufrufen, wird ein Tutorial angezeigt, das Ihnen zeigt, wie Sie ein Popup erstellen. Als erstes werden Sie aufgefordert, einen Namen einzugeben, damit Sie das Popup später identifizieren können.

Danach können Sie einen optionalen Titel eingeben, der im Popup als Überschrift erscheint. Im Haupteditorfeld können Sie auch den Inhalt eingeben, der im Popup angezeigt werden soll. Wenn Sie nur ein einfaches Kontaktformular erstellen möchten, können Sie auch einen vordefinierten Shortcode verwenden.

Diese Shortcodes finden Sie unter einer neuen Schaltfläche mit dem Popup-Maker-Logo in der Symbolleiste:

Klicken Sie auf Abonnementformular , um ein einfaches Kontaktformular zum Erfassen von E-Mails einzufügen. Der Text für die Felder und den Datenschutzhinweis kann angepasst werden, indem Sie auf das Formular klicken und die Schaltfläche „Bearbeiten“ auswählen. Zusätzlich zum Text gibt es eine Reihe von Optionen für Stile und Layout.

Schritt 3: Konfigurieren Sie Trigger für Ihr Popup

Nachdem Ihr Popup-Formular erstellt wurde, besteht der nächste Schritt darin, seine Trigger zu konfigurieren. Diese bestimmen, wann das Warnfeld angezeigt wird.

Scrollen Sie auf dem Popup-Editor-Bildschirm nach unten zu Popup-Einstellungen und wählen Sie Auslöser aus der Liste aus. Klicken Sie dann auf Neuen Trigger hinzufügen :

Das Basis-Popup-Maker-Plug-in enthält hier drei Optionen: Klicken Sie auf Öffnen , Zeitverzögerung/Automatisches Öffnen und Formularübermittlung . Sie können auch Exit Intent als Auslöser auswählen, wenn Sie einen Premium-Plan haben – diese Option können Sie verwenden, wenn Sie möchten, dass das Popup angezeigt wird, wenn ein Benutzer versucht, Ihre Website zu verlassen.

Auf der Registerkarte „Targeting“ können Sie auch anpassen, auf welchen Seiten das Benachrichtigungsfeld angezeigt wird. Stellen Sie sicher, dass Sie diese Einstellung anpassen, wenn Sie bestimmte Seiten oder Gerätetypen von der Anzeige der Warnung ausschließen möchten.

Schritt 4: Gestalten Sie Ihr Alert-Feld

Schließlich können Sie das Erscheinungsbild Ihres neuen Benachrichtigungsfelds ändern, um es besser an das Thema Ihrer Website anzupassen. Wählen Sie im Bereich Popup-Einstellungen die Option Anzeige . Dort können Sie ändern, wo das Popup auf dem Bildschirm angezeigt wird (auch als obere Leiste), seine Größe und Position festlegen und eines von mehreren verfügbaren Themen auswählen:

Wenn Sie fertig sind, stellen Sie sicher, dass Sie die Schaltfläche Veröffentlichen auswählen, um Ihre Änderungen zu speichern und Ihr Popup zu aktivieren.

Erstellen einer Warnbox ohne Plugin

Wenn Sie kein Plugin verwenden möchten, können Sie mit etwas Code und ein wenig Ellenbogenfett auch selbst eine Warnbox erstellen. Sie müssen Ihre header.php- Datei bearbeiten und Ihrer Website etwas CSS hinzufügen. Für dieses Beispiel erstellen wir oben auf der Seite eine Warnleiste.

Schritt 1: Bearbeiten Sie Ihre header.php-Datei

Das erste, was Sie tun müssen, ist, Ihrer header.php- Datei etwas Code hinzuzufügen. Darauf kann mit dem WordPress-Theme-Editor zugegriffen werden. Navigieren Sie in Ihrem Dashboard zu Darstellung > Design-Editor . Wählen Sie dann Theme Header (header.php) aus der rechten Seitenleiste:

Kopieren Sie den folgenden Code und fügen Sie ihn am Ende des Abschnitts <head> in die Datei ein:

<div class="alertbar">All items 20% off!</div>

So sollte die Datei nach dieser Hinzufügung aussehen:

Daraufhin wird die Meldung „Alle Artikel 20 % Rabatt!“ angezeigt. in Ihrer Benachrichtigungsleiste. Sie können den Text nach Belieben anpassen.

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Schließlich müssen Sie Cascading Style Sheets (CSS) verwenden, um Ihre Warnung zu gestalten. Sie können CSS mit dem WordPress Customizer hinzufügen.

Gehen Sie dazu zu Ihrem WordPress-Dashboard und navigieren Sie zu Aussehen > Anpassen. Dadurch wird Ihre Website im Customizer geöffnet. Wählen Sie in der Seitenleiste Zusätzliches CSS aus. Dadurch wird ein Codefeld geöffnet, in das Sie benutzerdefiniertes CSS eingeben können.

Fügen Sie den folgenden Code in das Textfeld ein:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

So sieht die Warnung aus:

Der obige Code erstellt eine dunkelgraue Leiste mit weißem Text – aber Sie können die Farben und die Größe nach Belieben an Ihr Thema anpassen. Wenn Sie fertig sind, klicken Sie auf Veröffentlichen , um Ihre Änderungen zu speichern.

Erweitern Sie Ihre Website mit WP Engine

Egal, ob Sie E-Mail-Anmeldungen erhöhen oder Besucher auf einfache Weise über Sonderangebote informieren möchten, ein Benachrichtigungsfeld ist eine elegante und effektive Lösung. Die Implementierung eines solchen auf Ihrer WordPress-Seite kann Ihre Konversionsrate dramatisch steigern.

Sie können eine Warnbox mit einem WordPress-Plugin wie Popup Maker implementieren. Mit ein bisschen CSS kann man auch relativ einfach selbst einen codieren. In jedem Fall erhalten Sie eine anpassbare Benachrichtigung, die darauf ausgelegt ist, Anmeldungen und Conversions zu steigern.

Wenn Sie Ihre Website noch weiter verbessern möchten, sehen Sie sich unbedingt unsere speziellen WordPress-Hosting-Pläne an!