So erstellen Sie eine Alert Bar in WordPress (3 einfache Wege)

Möchten Sie eine Alert Bar zu Ihrer WordPress-Site hinzufügen?

Eine Alert-Leiste oder Benachrichtigungsleiste ist eine großartige Möglichkeit, Besucher über wichtige Updates, Sonderangebote, neue Produkteinführungen und mehr zu informieren.

In diesem Artikel zeigen wir Ihnen, wie Sie mit 3 einfachen Lösungen eine Alert-Leiste in WordPress erstellen.

Warum eine Alert-Leiste in WordPress erstellen?

Eine Alert-Leiste ist eine großartige Möglichkeit, Ihre Besucher über etwas Wichtiges auf Ihrer Website zu informieren. Das kann ein laufendes Verkaufsereignis, eine Aktualisierung Ihrer Öffnungszeiten oder Änderungen an Ihren Dienstleistungen sein.

Sie können auch eine Alert-Leiste verwenden, um Besucher über ein Sonderangebot zu informieren, wie z. B. ein "Kaufe eins, erhalte eins gratis"-Angebot. Dies ist eine großartige Option, wenn Sie einen Online-Shop betreiben.

Die Verwendung einer Alert Bar ist besser, als nur eine Ankündigung auf Ihrer Homepage zu platzieren. Ihre Alert Bar kann prominent ganz oben auf jeder Seite Ihrer gesamten Website erscheinen.

Es ist einfach, eine Alert Bar in WordPress zu erstellen. Wir werden Methoden mit den besten Notification Bar Plugins und eine manuelle Methode mit HTML- und CSS-Code untersuchen. Klicken Sie einfach auf die unten stehenden Links, um direkt zu jeder Option zu springen:

• Methode 1: Erstellen einer Alert Bar mit OptinMonster
• Methode 2: Erstellen einer Alert Bar mit Thrive Leads
• Methode 3: Alert-Bar manuell mit benutzerdefiniertem HTML/CSS erstellen
• Bonus: Benutzerdefinierte Alert-Nachrichten zu WordPress-Seiten hinzufügen

Methode 1: Erstellen einer Alert Bar mit OptinMonster

OptinMonster ist die beste Conversion-Optimierungs- und Lead-Generierungssoftware auf dem Markt. Sie hilft Ihnen, mehr Website-Besucher in Abonnenten und Kunden zu verwandeln.

OptinMonster bietet einen Drag-and-Drop-Kampagnen-Builder. Er verfügt über schöne Lightbox-Popups, Welcome Mats, Countdown-Timer und andere dynamische Overlays, die Ihnen helfen, Abonnenten und Verkäufe auf Ihrer Website zu steigern.

Sie können OptinMonster auch verwenden, um eine Alert Bar für Ihre Website zu erstellen. Ihre vorgefertigten Vorlagen machen es wirklich einfach, eine Alert Bar zu erstellen, die innerhalb von Minuten großartig aussieht.

Besuchen Sie zuerst die OptinMonster-Website und melden Sie sich für ein Konto an. Sie benötigen mindestens den Basic-Plan, da dieser den Kampagnentyp Floating Bar beinhaltet.

Als Nächstes müssen Sie das OptinMonster WordPress Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Dieses Plugin ermöglicht es Ihnen, Ihre WordPress-Website mit der OptinMonster-Software zu verbinden.

Nach der Aktivierung sehen Sie den Willkommensbildschirm und den Einrichtungsassistenten. Klicken Sie auf die Schaltfläche „Bestehendes Konto verbinden“.

Als Nächstes öffnet sich ein neues Fenster, in dem Sie Ihre WordPress-Site mit OptinMonster verbinden müssen.

Klicken Sie einfach auf die Schaltfläche „Mit WordPress verbinden“, um fortzufahren.

Sie können nun den Anweisungen auf dem Bildschirm folgen, um Ihr OptinMonster-Konto zu verbinden.

Gehen Sie dann einfach in Ihrem WordPress-Dashboard zu OptinMonster » Kampagnen. Klicken Sie auf die Schaltfläche „Erste Kampagne erstellen“.

Dies öffnet den OptinMonster Kampagnen-Builder.

Von hier aus müssen Sie die 'Floating Bar' als Kampagnentyp auswählen, um eine Alert Bar zu erstellen.

Als Nächstes sehen Sie eine Auswahl an Kampagnen-Vorlagen. Wählen Sie eine Vorlage aus, die Sie verwenden möchten.

Sie müssen nur mit der Maus darüber fahren und auf die Schaltfläche „Vorlage verwenden“ klicken, um sie auszuwählen. Wir werden die Vorlage „Coupon Code Promo“ für unsere Alert Bar verwenden.

Als Nächstes werden Sie aufgefordert, Ihrer Vorlage einen Namen zu geben. Sobald Sie Ihrer Kampagne einen Namen gegeben haben, klicken Sie einfach auf die Schaltfläche „Mit dem Erstellen beginnen“.

Jetzt sehen Sie den Kampagnen-Editor. Hier können Sie Ihre Alert Bar gestalten.

OptinMonster bietet verschiedene Blöcke, die Sie einfach per Drag & Drop auf die Vorlage ziehen können. Sie können beispielsweise ein Bild, Text, eine Schaltfläche und mehr zu Ihrer Alert Bar hinzufügen.

Sie werden feststellen, dass Ihre Alert Bar standardmäßig am unteren Bildschirmrand angezeigt wird.

Um sie an den oberen Bildschirmrand zu verschieben, müssen Sie auf der linken Seite auf „Floating Bar Settings“ klicken. Klicken Sie dann einfach auf den Schieberegler, um die Floating Bar an den oberen Rand der Seite zu verschieben.

Um den Text auf der schwebenden Leiste zu ändern, klicken Sie einfach auf den Bereich, den Sie ändern möchten, und geben Sie den gewünschten Text ein.

Sie können auch die Schriftart, die Größe und die Farbe des Textes und mehr ändern.

Um die Countdown-Einstellungen zu ändern, wählen Sie einfach den Timer aus.

Geben Sie dann Ihr gewünschtes Enddatum und Ihre gewünschte Endzeit ein. OptinMonster lässt Sie auch den Countdown-Typ wählen. Sie können den Typ „Statisch“ auswählen, wenn Sie einen Standard-Timer mit Ihrem angegebenen Enddatum und Ihrer angegebenen Endzeit anzeigen möchten.

Auf der anderen Seite gibt es einen 'Dynamischen' Countdown-Typ. Der Timer funktioniert basierend auf dem Verhalten jedes Benutzers auf Ihrer Website. Der Countdown wird für jeden Besucher Ihrer Website separat eingestellt.

Wenn Sie mit dem Design Ihrer Alert-Leiste zufrieden sind, vergessen Sie nicht, oben auf dem Bildschirm auf die Schaltfläche „Speichern“ zu klicken.

Als Nächstes müssen Sie zum Tab „Anzeigeregeln“ gehen, um auszuwählen, wann und wo Ihre Alert Bar auf Ihrer Website angezeigt wird. Die Standardregel besagt, dass Ihre Alert Bar angezeigt wird, nachdem der Besucher 5 Sekunden auf der Seite war.

Wir werden dies auf 0 Sekunden ändern, damit die Alert-Leiste sofort erscheint. Ändern Sie dazu einfach den Wert „sec“ auf 0.

Abgesehen davon können Sie auch auswählen, wo die Alert Bar erscheinen soll. Sie können die Standardeinstellung verwenden, nämlich 'Der aktuelle URL-Pfad ist jede Seite'. Auf diese Weise wird Ihre Alert Bar auf allen Seiten Ihrer WordPress-Website angezeigt.

Klicken Sie dann auf die Schaltfläche „Nächster Schritt“, um die Aktioneinstellungen zu ändern. Sie können die Einstellungen „Kampagnenansicht anzeigen“ als Optin belassen und auswählen, ob Sie einen Soundeffekt abspielen möchten, wenn die Alert Bar erscheint.

Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie einfach erneut auf die Schaltfläche „Nächster Schritt“.

Hier sehen Sie eine Zusammenfassung Ihrer Anzeigeregeln. Sie können abschließende Bearbeitungen und Änderungen an Ihrer Alert Bar-Kampagne vornehmen.

Wenn Sie zufrieden sind, klicken Sie einfach oben auf dem Bildschirm auf die Schaltfläche „Speichern“.

Danach können Sie zum Tab "Veröffentlichen" oben gehen und den "Veröffentlichungsstatus" auf "Veröffentlichen" ändern. Sobald dies erledigt ist, müssen Sie auf die Schaltfläche "Speichern" klicken und den Kampagnen-Builder schließen.

Als Nächstes sehen Sie die Kampagnen-Ausgabeeinstellungen.

Der letzte Schritt ist die Aktivierung der Kampagne auf Ihrer Website selbst. Ändern Sie einfach den Status von 'Ausstehend' zu 'Veröffentlicht'.

Vergessen Sie nicht, auf die Schaltfläche 'Änderungen speichern' zu klicken, wenn Sie fertig sind.

Besuchen Sie nun einfach eine beliebige Seite auf Ihrer Website, und Sie werden Ihre Kampagne in Aktion sehen.

Methode 2: Erstellen einer Alert Bar mit Thrive Leads

Eine weitere Möglichkeit, Benachrichtigungsleisten zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von Thrive Leads. Es ist Teil der Thrive Themes Suite und hilft Ihnen, Leads über Benachrichtigungsleisten, Lightboxes, Slide-in-Popups und mehr zu generieren.

Zuerst müssen Sie die Thrive Themes-Website besuchen und sich für ein Konto anmelden. Klicken Sie einfach auf die Schaltfläche „Jetzt starten“, um loszulegen.

Als Nächstes müssen Sie das Thrive Product Manager Plugin auf Ihrer Website installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden unter so installieren Sie ein WordPress-Plugin.

Sie finden das Thrive Product Manager-Plugin in Ihrem Konto-Bereich.

Nachdem Sie das Plugin installiert haben, gehen Sie einfach zur Seite Produktmanager in Ihrem WordPress-Adminbereich.

Von hier aus klicken Sie auf die Schaltfläche "In mein Konto einloggen".

Nach der Anmeldung bei Ihrem Konto sehen Sie verschiedene Plugins und Tools, die von Thrive Themes angeboten werden.

Wählen Sie einfach das Thrive Leads Plugin aus und klicken Sie dann unten auf die Schaltfläche „Ausgewählte Produkte installieren“.

Wenn Thrive Leads einsatzbereit ist, sehen Sie eine Erfolgsmeldung.

Sie können dann auf die Schaltfläche „Zum Thrive Themes Dashboard gehen“ klicken.

Als Nächstes müssen Sie im WordPress-Admin-Panel zu Thrive Dashboard » Thrive Leads navigieren.

Klicken Sie einfach auf die Schaltfläche „Neu hinzufügen“ neben der Überschrift „Lead-Gruppen“.

Danach öffnet sich ein Popup-Fenster.

Sie können Ihrer neuen Lead-Gruppe einen Namen geben und auf die Schaltfläche „Lead-Gruppe hinzufügen“ klicken.

Als Nächstes müssen Sie ein neues Opt-in-Formular erstellen.

Klicken Sie auf die Schaltfläche „Neuen Opt-in-Formular-Typ hinzufügen“.

Danach werden Sie von Thrive Leads aufgefordert, einen Formular-Typ auszuwählen.

Sie können den Typ „Ribbon“ auswählen, um eine Alert Bar zu Ihrer Website hinzuzufügen.

Nachdem Sie den Ribbon-Opt-in-Formular-Typ hinzugefügt haben, müssen Sie nun ein Formular hinzufügen.

Klicken Sie einfach auf die Option „Formular hinzufügen“ unter Lead-Gruppen.

Auf dem nächsten Bildschirm können Sie aus Ihren vorhandenen Formularen auswählen.

Da Sie zum ersten Mal ein Formular erstellen, klicken Sie auf die Schaltfläche „Formular erstellen“.

Jetzt sehen Sie ein Popup-Fenster auf Ihrem Bildschirm.

Sie können einen Namen für Ihr Formular eingeben und auf die Schaltfläche 'Formular erstellen' klicken.

Ihr Formular wird der Ribbon-Lead-Gruppe hinzugefügt.

Um das Design des Formulars zu bearbeiten, klicken Sie einfach auf das Stift-Symbol.

Als Nächstes zeigt Thrive Leads mehrere Vorlagen zur Auswahl an.

Wählen Sie einfach eine Vorlage aus und klicken Sie unten auf die Schaltfläche „Vorlage auswählen“.

Dies startet den visuellen Builder mit einer Live-Vorschau, wo Sie Ihre Alert Bar anpassen können.

Zum Beispiel können Sie den Text in der Vorlage auswählen und ihn nach Ihren Bedürfnissen ändern. Oder klicken Sie auf das Bild in der Alert Bar und ändern Sie es.

Wenn Sie mit der Bearbeitung fertig sind, klicken Sie unten auf die Schaltfläche „Arbeit speichern“.

Sie können nun den visuellen Editor schließen und zu den Formulareinstellungen zurückkehren. Hier sehen Sie Optionen für die Einstellungen des Alert Bar Triggers, der Anzeigehäufigkeit und der Position.

Standardmäßig erscheint die Benachrichtigungsleiste beim Laden einer Seite oben. Sie können diese Einstellungen jedoch ändern.

Wenn Sie beispielsweise auf die Option „Trigger“ klicken, sehen Sie weitere Optionen, wie z. B. das Anzeigen der Alert Bar nach einer bestimmten Zeit, wenn ein Benutzer einen bestimmten Betrag nach unten scrollt oder wenn ein Benutzer das Ende der Seite erreicht.

Außerdem können Sie die Anzeigefrequenz ändern. Die Alert-Leiste wird standardmäßig immer allen Benutzern angezeigt.

Sie können dies jedoch bearbeiten und Ihre Alert-Leiste demselben Besucher nach einer bestimmten Anzahl von Tagen anzeigen.

Als Nächstes können Sie von Ihrem WordPress-Dashboard zur Thrive Leads-Seite zurückkehren.

Danach klicken Sie einfach auf das Zahnradsymbol, um die Anzeige-Einstellungen zu öffnen.

Von hier aus können Sie auswählen, auf welchen Beiträgen und Seiten die Alert Bar angezeigt werden soll.

Sie können sie zum Beispiel nur auf der Startseite anzeigen oder alle Beiträge und Seiten auswählen. Es gibt auch eine Option, bestimmte Seiten und Beiträge von der Anzeige Ihrer Alert-Nachricht auszuschließen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern & Schließen“.

Der letzte Schritt besteht darin, auf die Schalter zu klicken, um Ihre Alert Bar auf Desktop- und Mobilgeräten anzuzeigen.

Sobald das erledigt ist, ist Ihre Alert-Leiste nun bereit, E-Mail-Adressen von Benutzern zu sammeln und Ihre E-Mail-Liste aufzubauen.

Sie können Ihre Website besuchen, um es in Aktion zu sehen.

Sie können unsere vollständige Thrive Themes-Bewertung für weitere Details einsehen.

Methode 3: Alert-Bar manuell mit benutzerdefiniertem HTML/CSS erstellen

Was ist, wenn Sie OptinMonster oder Thrive Leads nicht verwenden möchten? In dieser Methode zeigen wir Ihnen, wie Sie eine Benachrichtigungsleiste mit HTML und CSS-Code erstellen.

Zuerst müssen Sie den folgenden benutzerdefinierten CSS-Code für die Alert Bar kopieren:

<pre class="wp-block-syntaxhighlighter-code"> .alertbar { background-color: #ff0000; color: #FFFFFF; display: block; line-height: 45px; height: 50px; position: relative; text-align: center; text-decoration: none; top: 0px; width: 100%; z-index: 100; } </pre> 

Eine einfache Möglichkeit, CSS-Code zu Ihrer Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin für WordPress, das Ihnen hilft, benutzerdefinierten Code zu Ihrer Website hinzuzufügen.

Hinweis: WPCode ist eines der eigenen Plugins von WPBeginner. Wir haben es entwickelt, um das Hinzufügen von Skripten, HTML-Code und mehr zu Ihren Website-Seiten sehr einfach zu machen. Es verfügt über Funktionen wie eine integrierte Bibliothek für Code-Snippets, bedingte Logik, Conversion-Pixel und mehr.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie im WordPress-Dashboard zu Code Snippets » + Snippet hinzufügen navigieren und die Option 'Eigener benutzerdefinierter Code (Neues Snippet)' auswählen.

Geben Sie danach oben einen Titel für Ihr Snippet ein und fügen Sie den CSS-Code in den Bereich "Code-Vorschau" ein.

Sie müssen auch den "Code-Typ" auf die Option "CSS-Snippet" ändern.

Als Nächstes können Sie nach unten zum Abschnitt "Einfügen" scrollen. Hier können Sie auswählen, wo der Code ausgeführt werden soll.

Da die Alert-Leiste auf der gesamten Website erscheinen soll, können Sie die Standardmethode „Automatisch einfügen“ verwenden. Sie können auch die Einstellung „Überall ausführen“ beibehalten.

Sobald das erledigt ist, können Sie oben auf die Schaltfläche „Snippet speichern“ klicken.

Sie müssen auch den Schalter umlegen, um den Code zu aktivieren.

Gehen Sie danach in Ihrem WordPress-Admin-Dashboard zu Code-Snippets » Header & Footer.

Kopieren Sie einfach die folgende Zeile HTML-Code und fügen Sie sie in das Feld "Header" ein:

<div class="alertbar">We are currently closed due to Covid-10.</div> 

So sollte der Code in der Box „Header“ in WPCode aussehen:

Sie können den Alert-Text beliebig ändern. Vergessen Sie nicht, oben auf der Seite auf die Schaltfläche „Änderungen speichern“ zu klicken, sobald Sie fertig sind.

Jetzt können Sie Ihren WordPress-Blog besuchen, um die Alert Bar anzuzeigen. Sie sollte oben auf jeder Seite wie folgt erscheinen:

Tipp: Bei einigen WordPress-Themes kann Ihre Alert-Leiste Ihr Menü überlappen. Sie können die Höhe der Leiste auf 40px oder 30px ändern, um dies zu vermeiden. Sie müssen auch die Zeilenhöhe entsprechend reduzieren, damit Ihr Text vertikal in der Leiste zentriert bleibt.

Bonus: Benutzerdefinierte Alert-Nachrichten zu WordPress-Seiten hinzufügen

Wenn Sie benutzerdefinierte Alert-Nachrichten zu verschiedenen Teilen Ihrer Website hinzufügen möchten, wie z. B. Produktseiten, Checkout-Seiten und Shop-Seiten, können Sie SeedProd verwenden. Es ist der beste Website-Builder und Landingpage-Builder für WordPress.

Das Plugin bietet einen Drag-and-Drop-Builder, um benutzerdefinierte Themes und Website-Seiten zu erstellen, ohne Code bearbeiten zu müssen. Es bietet auch einen Alert-Block, den Sie überall auf Ihrer Website platzieren können.

Dieser Alert-Block kann Kunden warnen, dass Ihr Lagerbestand zur Neige geht, bestimmte Artikel im Angebot sind oder andere zeitkritische Warnungen.

Sie können den Alert-Block einfach zu Ihrer Seite hinzufügen und dann einen Titel und eine Beschreibung eingeben. Das Plugin ermöglicht es Ihnen auch, dynamische Inhalte hinzuzufügen, mit denen Sie Daten und andere Abfrageparameter einfügen können.

Es gibt auch weitere Anpassungsoptionen für den Alert-Block. Sie können beispielsweise die Ausrichtung ändern, die Schriftgröße anpassen und das Symbol bearbeiten.

Um mehr über die Verwendung von SeedProd zu erfahren, können Sie diese Anleitung lesen: So erstellen Sie benutzerdefinierte Seiten in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine Alert-Leiste in WordPress erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zu den besten Drag-and-Drop-Page-Buildern für WordPress, um Ihre Website weiter anzupassen, und die besten WooCommerce-Plugins, um Ihren Shopumsatz zu steigern.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.