So erstellen Sie eine „Sticky“ Floating Bar in WordPress

Möchten Sie die Aufmerksamkeit Ihrer Besucher mit einer festen schwebenden Leiste in WordPress auf sich ziehen?

Mit einem festen schwebenden Banner oder einer Leiste können Sie eine Nachricht am oberen oder unteren Rand Ihrer Website anzeigen, ohne die Benutzererfahrung zu beeinträchtigen. So können Sie E-Mail-Anmeldungen, Produkte, Blitzangebote, Social-Media-Konten bewerben und benutzerdefinierte Nachrichten anzeigen. Sie können beispielsweise Cookie-Einstellungen anzeigen, um den Besucher um Erlaubnis zu bitten, seine Daten während des Surfens auf Ihrer Website zu verfolgen.

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen den einfachsten Weg, ein schwebendes WordPress-Banner zu erstellen. Bevor wir mit dem Tutorial beginnen, klären wir, was genau eine feste schwebende Leiste ist.

Was ist eine feste schwebende Leiste?

Ein festes schwebendes Banner bleibt am oberen oder unteren Rand Ihrer Webseite, während Ihre Besucher die Seite scrollen. 

Diese Leisten sind für den Benutzer immer sichtbar und er kann jederzeit während seiner Browsing-Reise mit Ihrer Nachricht interagieren.

Feste Leisten sind flexibel und vielseitig einsetzbar. Sie können sie also so anpassen, dass sie jede gewünschte Nachricht anzeigen. Als Beispiele können Sie Willkommensrabatte für neue Besucher hinzufügen oder ein neu hinzugefügtes Produkt bewerben, um die Sichtbarkeit zu maximieren.

Wenn sie richtig eingesetzt werden, können Sie schwebende Leisten verwenden, um:

• Ihre Verkäufe und Einnahmen durch Blitzangebote, Rabatte und Deals zu verbessern
• Traffic auf Ihre Online-Inhalte zu lenken (Podcasts, Artikel, Anleitungen, Videos und mehr)
• Die Website-Interaktion und Konversionen zu steigern
• Leads und Abonnenten zu generieren, um Ihre E-Mail-Marketingliste zu erweitern 
• Die Social-Media-Interaktion und die Follower-Zahl zu steigern
• Die Markenbekanntheit zu erhöhen

Es gibt viele Möglichkeiten, wie Sie feste Leisten zu Ihrem Vorteil nutzen können. Lassen Sie uns nun lernen, wie Sie ein ansprechendes schwebendes WordPress-Banner für Ihre Website erstellen.

Erstellen eines festen schwebenden Banners für WordPress

Es gibt einige schwebende Leisten-Plugins für WordPress, aber nicht alle bieten die Funktionen, die Sie benötigen, um eine einfach zu erstellen und anzupassen.

Wir zeigen Ihnen, wie Sie eine in unter 5 Minuten erstellen, ohne eine einzige Codezeile zu berühren, indem Sie unser bevorzugtes Werkzeug für schwebende Banner namens OptinMonster verwenden.

OptinMonster ist das führende Tool zur Lead-Generierung, mit dem Sie auffällige Marketingkampagnen erstellen können, um Ihre Besucher in Kunden zu verwandeln. Dazu gehören schwebende Leisten, Popups, Slide-ins, Inline-Formulare und mehr.

OptinMonster verfügt über eine Bibliothek mit über 50 vorgefertigten Vorlagen für schwebende Leisten, sodass Sie nicht bei Null anfangen müssen.

Sie finden Designs für Ankündigungen, Rabatte, beliebte Feiertagsangebote, Newsletter-Abonnements und vieles mehr.

Sie können eine Vorlage Ihrer Wahl in der Vorschau anzeigen und auswählen. Dann gibt es einen Drag-and-Drop-Builder, der so einfach zu bedienen ist. Sie können Ihren Text, das Bilddesign, die Farben und mehr mit wenigen Mausklicks anpassen.

Darüber hinaus ermöglicht Ihnen OptinMonster, gezielte Regeln festzulegen, sodass Sie Ihre schwebenden Banner den richtigen Personen zur richtigen Zeit und am richtigen Ort anzeigen können. Sie können beispielsweise Ihre Kampagne so einrichten, dass sie nur neuen Benutzern oder solchen angezeigt wird, die Ihre Website verlassen möchten. Es ermöglicht Ihnen auch, Ihre Leads erneut anzusprechen und nachzuverfolgen, um das Engagement zu verbessern. 

Zusätzlich verfolgt und zeigt OptinMonster alle wichtigen Statistiken an, die Sie benötigen, direkt in seinem Dashboard. Sie können die Anzahl der Besucher sehen, die Ihren WordPress-schwebenden Banner angesehen und darauf geklickt haben, und sogar, wie viel Geld Sie mit der Kampagne verdienen. 

Um Ihnen einen Einblick zu geben, was Sie mit OptinMonster tun können, hier sind einige Beispielkampagnen:

Das Beste an OptinMonster ist, dass es Ihnen die Flexibilität gibt, alle Ihre Kampagnen, einschließlich schwebender Balken, direkt von Ihrem WordPress-Dashboard aus zu erstellen und zu verwalten. 

Nun wollen wir keine Zeit verschwenden und mit OptinMonster unseren WordPress-schwebenden Banner erstellen.

Schritt 1: OptinMonster Plugin installieren und aktivieren

Zuerst müssen Sie ein OptinMonster-Konto erstellen. Das Plugin beginnt bei 9 US-Dollar pro Monat mit einer 30-tägigen Geld-zurück-Garantie.

Dann müssen Sie das OptinMonster-Plugin installieren, um das Konto mit Ihrer Website zu verbinden. 

Das Connector-Plugin ist kostenlos erhältlich, sodass Sie es einfach von Ihrem WordPress-Dashboard herunterladen können. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Wenn Sie das OptinMonster-Plugin auf Ihrer Website installieren und aktivieren, wird ein Einrichtungsassistent gestartet. Sie erhalten die Option, Ihr neu erstelltes Konto zu verbinden.

Beachten Sie, dass das Plugin Ihr Konto automatisch erkennt und Ihre Website synchronisiert, wenn Sie in einem anderen Tab bei Ihrem OptinMonster-Konto angemeldet sind.

Jetzt können Sie mit OptinMonster Ihren ersten WordPress-schwebenden Banner erstellen.

Schritt 2: Neue Floating Bar-Kampagne erstellen

OptinMonster ermöglicht es Ihnen, schwebende Banner in Ihrem WordPress-Admin-Dashboard zu erstellen und anzupassen. 

Gehen Sie dazu zum OptinMonster-Tab. Dort sehen Sie verschiedene Arten von Lead-Generierungs-Kampagnen wie Popup, Floating Bar, Vollbild, Inline und mehr. 

Um eine WordPress Sticky Bar-Kampagne zu erstellen, wählen wir die Option Floating Bar. 

Dies öffnet die Vorlagenbibliothek mit beeindruckenden Vorlagen für schwebende Banner, aus denen Sie wählen können. 

Hier können Sie mit der Maus über eine beliebige Vorlage fahren, um die Sticky Floating Bar auf derselben Seite in der Vorschau anzuzeigen. Wenn Sie das beste Design für Ihre Kampagne gefunden haben, klicken Sie auf die Schaltfläche Vorlage verwenden, um Ihren schwebenden Banner zu erstellen.

Dies öffnet ein Popup-Fenster, in dem Sie Ihrer Floating Bar-Kampagne einen Namen geben können. 

Klicken Sie dann auf die Schaltfläche Mit dem Erstellen beginnen, um den OptinMonster-Kampagnen-Builder zu starten. 

Schritt 3: Passen Sie Ihren WordPress Floating Banner an

Im Kampagnen-Builder sehen Sie links alle Elementblöcke und rechts die Vorschau Ihrer Sticky Bar. Hier können Sie die benötigten Blöcke einfach per Drag & Drop auf Ihren Banner ziehen.

Sie finden die 12 Blöcke, mit denen Sie Ihr Banner ansprechender und interaktiver gestalten können. 

Einige der nützlichen Elementblöcke sind: 

• Countdown
• ChatBot
• Social Icons
• Optin-Felder
• Ja/Nein-Button

1. Inhaltsblöcke bearbeiten

Wenn Sie einen Inhaltsblock anpassen möchten, klicken Sie einfach darauf und der Blockeditor wird in der linken Taskleiste geöffnet.

Sie können beispielsweise das Bild ersetzen, indem Sie Ihr eigenes hochladen oder eines aus der vorhandenen Mediathek auswählen. Sie können auch die Bildeinstellungen wie Deckkraft, Breite, alternativer Text und mehr ändern.

Darüber hinaus ermöglicht Ihnen OptinMonster, Links zu Ihren Bildern hinzuzufügen, damit Benutzer darauf klicken können, um zur gewünschten Seite weitergeleitet zu werden. Es gibt eine Option, die Link-URL in einem neuen Fenster zu öffnen, und Sie können die Klickverfolgung aktivieren, um zu sehen, wie viele Personen auf das Bild klicken.

Auf die gleiche Weise können Sie den Text des Inhalts in Ihren schwebenden Bannern ändern und auch den Optin-Button bearbeiten. Alles, was Sie tun müssen, ist, das Element in Ihrer Vorschau auszuwählen und Ihren benutzerdefinierten Text einzugeben.

Sobald Sie mit der Anpassung Ihrer Inhaltsblöcke fertig sind, klicken Sie auf die Schaltfläche Speichern.

2. Kampagneneinstellungen konfigurieren

OptinMonster ermöglicht es Ihnen, die Kampagneneinstellungen im Builder zu bearbeiten. Dazu müssen Sie auf das Einstellungen-Symbol unten links im Kampagnen-Builder klicken.

Dann sehen Sie die 4 Haupt-Einstellungen auf der linken Seite und die Live-Vorschau der schwebenden Leiste auf der rechten Seite der Seite. Die Einstellungen umfassen:

• Kampagnendetails: Ermöglicht Ihnen, den Kampagnennamen, die Beschreibung und andere Informationen zu Ihrer schwebenden Leiste zu bearbeiten.
• Ansichtsgestaltung: Bietet Ihnen unzählige Design- und Stileinstellungen, die zu Ihrem Website-Branding passen.
• Anzeigeeinstellungen: Wählen Sie aus, wie oft Ihre Kampagne den Besuchern angezeigt werden soll.
• Einstellungen für schwebende Leisten: Ändern Sie die Position Ihrer schwebenden Leiste von oben nach unten und umgekehrt.

Da die Vorlagen von OptinMonster sofort gut aussehen und funktionieren, müssen Sie sie nicht viel anpassen, außer ein paar Details zu ändern, um Ihre Kampagnenziele zu erreichen. Sie können jedoch problemlos Änderungen am Design und an der Gestaltung vornehmen, wenn Sie dies wünschen.

Unter der Option Ansichtsgestaltung können Sie die allgemeinen Gestaltungs- und Designoptionen ändern. Die Grundeinstellungen ermöglichen Ihnen die Bearbeitung von Stil, Hintergrundfarbe, Bild, Schließen-Schaltfläche und mehr.

Die erweiterten Einstellungen ermöglichen es Ihnen, selbst die kleinsten Details wie Rahmen, Abstände, Schatten und mehr anzupassen.

Standardmäßig zeigt OptinMonster schwebende Banner am unteren Rand Ihrer Website an, aber Sie können dies ändern und sie nach oben verschieben.

Gehen Sie dazu zu den Einstellungen für schwebende Leisten und aktivieren Sie dort die Option Schwebende Leiste oben auf der Seite laden. 

Vergessen Sie nicht, Ihre Einstellungen zu speichern, wenn Sie fertig sind.

Jetzt lernen wir die Anzeigeregeln kennen, die Sie für Ihre schwebende Bannerkampagne festlegen können, um Besucher anzusprechen. 

Schritt 4: Legen Sie Targeting-Regeln fest, um Ihr schwebendes Banner anzuzeigen

Optinmonster bietet leistungsstarke Zielgruppen-Targeting-Funktionen, um Konversionen zu optimieren und Leads aus Ihren Kampagnen zu generieren.

Um neue Targeting-Regeln hinzuzufügen, müssen Sie zum Tab Anzeigeregeln oben im Editor navigieren.

Dann sehen Sie das Standard-Regelset, das Ihr Banner anzeigt, wenn ein Besucher 5 Sekunden auf einer beliebigen Seite Ihrer Website verweilt. 

Wenn Sie die Anzeigeregel ändern möchten, können Sie auf die Schaltfläche Bearbeiten klicken oder auf die vorhandene Regel klicken, und Sie sehen die Liste der vordefinierten Anzeigeregeln, die von OptinMonster angeboten werden. 

Alle Regeln sind in verschiedene Tabs unterteilt, sodass Sie die Targeting-Regel für Ihre Kampagne leicht finden können. Einige Highlights sind:

• Scrolltiefe: Nur einmal anzeigen, nachdem ein Besucher eine bestimmte Tiefe auf der Seite gescrollt hat
• Zeit und Datum: Spezielle Feiertage, Wochentage und Zeiträume anvisieren, um Flash Sales oder zeitlich begrenzte Angebote durchzuführen
• Physischer Standort: Mit Benutzern basierend auf ihrem geografischen Gebiet interagieren, um das Kampagnenangebot zu lokalisieren
• Gerät des Besuchers: Kampagnen anzeigen/nicht anzeigen, je nachdem, ob ein Benutzer auf einem Desktop oder Mobilgerät ist

Um eine Regel hinzuzufügen, müssen Sie nur darauf klicken. So einfach ist das!

Sie müssen niemals Code hinzufügen oder mit komplexen Einstellungen arbeiten, um Ihre Zielgruppe anzusprechen. Als Nächstes zeigen wir Ihnen, wie Sie Ihre Kampagne mit Ihrem E-Mail-Konto verbinden, damit alle Ihre neuen Leads automatisch zu Ihrer Kontaktliste hinzugefügt werden.

Schritt 5: Mit Ihrem E-Mail-Anbieter verbinden

OptinMonster integriert sich mit allen wichtigen E-Mail-Marketingdiensten wie Constant Contact, Aweber, ActiveCampaign und ConvertKit.

Wenn Sie Ihr E-Mail-Konto synchronisieren, können Sie E-Mail-Adressen sammeln und automatisierte E-Mails an Ihre neuen Abonnenten senden. OptinMonster bietet auch integrierte Optionen zur Segmentierung Ihrer Leads, damit Ihre Liste organisiert bleibt und Sie relevante E-Mails basierend auf dem senden können, wofür sie sich angemeldet haben.

Um sich mit Ihrem E-Mail-Anbieter zu verbinden, öffnen Sie den Tab Integrationen im Kampagnen-Editor. 

Hier können Sie Ihren E-Mail-Anbieter auswählen und sich bei Ihrem Konto anmelden. Einige Anbieter benötigen eine API, um zu funktionieren, die Sie in den Einstellungen Ihres E-Mail-Kontos finden.

Vergessen Sie nicht, Ihre Einstellungen zu speichern, nachdem Sie Ihre Integration eingerichtet haben.

Jetzt sind Sie bereit, Ihre Sticky Floating Banner-Kampagne auf Ihrer WordPress-Website zu veröffentlichen

Schritt 6: Veröffentlichen Sie Ihr WordPress Floating Banner

Gehen Sie zum Tab Veröffentlichen im Editor und Sie sehen Optionen, um eine Live-Vorschau Ihrer Kampagne anzuzeigen. Wenn Sie bereit sind, müssen Sie nur den Status auf Veröffentlichen ändern.

Nachdem Sie auf die Schaltfläche Veröffentlichen geklickt haben, sehen Sie, wie sich der Kampagnenstatus zu 'Veröffentlicht' ändert. 

Gehen Sie zu Ihrem WordPress-Dashboard und öffnen Sie den Tab OptinMonster » Kampagnen. Stellen Sie sicher, dass der Status auch hier auf Veröffentlichen gesetzt ist.

Wenn Sie Ihre Website jetzt besuchen, sollten Sie sehen, wie Ihre Floating Bar-Kampagne gemäß den von Ihnen festgelegten Anzeigeregeln erscheint.

Und das war's für heute! Wir hoffen, dieser Artikel hat Ihnen geholfen, einfach zu lernen, wie Sie ein Sticky Floating Banner für Ihre WordPress-Website erstellen.

Nachdem Sie nun wissen, wie Sie OptinMonster verwenden, können Sie weitere hochkonvertierende Kampagnen auf Ihrer Website erstellen, wie z. B. Popups, Slide-ins, Gutscheinrad-Spiele und mehr. 

Um mehr Leads und Conversions auf Ihrer Website zu generieren, sollten Sie unbedingt diese Artikel lesen:

• So erstellen Sie eine Lead-Capture-Seite in WordPress
• So erstellen Sie ein Popup in WordPress (Schritt für Schritt)
• Erstellen Sie eine hochkonvertierende Squeeze Page

Diese Beiträge zeigen Ihnen weitere Möglichkeiten, Ihre Nutzer anzusprechen, damit sie sich engagieren und Ihre Marke abonnieren.