Möchten Sie eine schwebende Fußzeilenleiste in WordPress erstellen? Wir verwenden die schwebende Fußzeile auf unserer Website seit vielen Jahren, weil sie uns hilft, die Absprungrate zu reduzieren und die von Benutzern aufgerufenen Seiten zu erhöhen. Viele von Ihnen haben uns gefragt, wie man eine ähnliche schwebende Bar erstellt, also hier ist sie. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress eine schwebende Fußzeilenleiste erstellen.
Was ist eine schwebende Fußzeile?
Eine schwebende Fußzeilenleiste ermöglicht es Ihnen, Ihre wichtigen Inhalte den Benutzern prominent anzuzeigen. Diese Leiste bleibt für Benutzer jederzeit sichtbar, sodass sie eher darauf klicken und mehr nützliche Inhalte entdecken.
Sie können die schwebende Fußzeile verwenden, um:
- Steigern Sie die Klicks auf andere Blog-Posts
- Erstellen Sie Ihre E-Mail-Liste
- Auf Sonderangebote / Sale aufmerksam machen
In diesem Artikel zeigen wir Ihnen zwei Methoden, um eine schwebende Fußzeilenleiste auf Ihrer WordPress-Site hinzuzufügen. Einer verwendet ein Plugin, während der andere eine Codemethode ist, die wir auf Themelocal verwenden. Sie können diejenige auswählen, die für Sie einfacher zu verwenden ist.
Methode 1: Erstellen Sie manuell eine schwebende Fußzeilenleiste in WordPress
Bei dieser Methode müssen Sie Ihren WordPress-Dateien Code hinzufügen. Wenn Sie neu beim Hinzufügen von Code sind, sehen Sie sich bitte unsere Anleitung zum Einfügen von Snippets aus dem Web in WordPress an.
Zuerst müssen Sie sich mit einem FTP-Client oder Dateimanager in cPanel mit Ihrer WordPress-Site verbinden.
In Ihrem FTP-Client müssen Sie die footer.php
Datei in Ihrem WordPress-Theme-Ordner und laden Sie sie auf Ihren Desktop herunter. Es würde sich an einem Pfad wie diesem befinden:
/wp-content/themes/your-theme-folder/
Als nächstes müssen Sie die Datei footer.php in einem Nur-Text-Editor wie Notepad öffnen und den folgenden Code kurz vor dem hinzufügen </body>
Schild.
<div class="fixedbar"> <div class="boxfloat"> <ul id="tips"> <li><a href="https://www.wpbeginner.com/">Themelocal Link is the First Item</a></li> <li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li> </ul> </div> </div>
Sie können beliebig viele Listenelemente hinzufügen. Wir zeigen Ihnen, wie Sie sie bei jedem Seitenladen zufällig drehen.
Der nächste Schritt ist das Hinzufügen der CSS-Stile.
Sie können CSS zu Ihrem WordPress-Theme hinzufügen style.css
Datei oder verwenden Sie das Simple Custom CSS-Plugin.
/*Themelocal Footer Bar*/ .fixedbar { background: #000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold; } .boxfloat { text-align:center; width:920px; margin:0 auto; } #tips, #tips li { margin:0; padding:0; list-style:none } #tips { width:920px; font-size:20px; line-height:120%; } #tips li { padding: 15px 0; display:none; } #tips li a{ color: #fff; } #tips li a:hover { text-decoration: none; }
Nachdem Sie das CSS hinzugefügt haben, können Sie die Änderungen möglicherweise nicht auf Ihrer Website sehen. Dies liegt daran, dass wir die Anzeige für Elemente in unserer Liste auf Keine gesetzt haben.
Als Nächstes verwenden wir jQuery, um bei jedem Seitenladen zufällig ein Element aus unserer Liste anzuzeigen.
Sie müssen einen Nur-Text-Editor wie Notepad auf Ihrem Computer öffnen und diesen Code zu einer leeren Datei hinzufügen:
(function($) { this.randomtip = function(){ var length = $("#tips li").length; var ran = Math.floor(Math.random()*length) + 1; $("#tips li:nth-child(" + ran + ")").show(); }; $(document).ready(function(){ randomtip(); }); })( jQuery );
Wenn Sie fertig sind, müssen Sie diese Datei als floatingbar.js auf Ihrem Desktop speichern.
Öffnen Sie nun Ihren FTP-Client und verbinden Sie sich mit Ihrem Webserver. Gehen Sie zu Ihrem Theme-Ordner und suchen Sie den js-Ordner. Es wäre an einem Pfad wie diesem:
/wp-content/themes/your-theme-folder/js
Wenn in Ihrem Theme-Verzeichnis kein js-Ordner vorhanden ist, müssen Sie einen erstellen.
Jetzt müssen Sie die zuvor erstellte Floatingbar.js-Datei in den gerade erstellten js-Ordner hochladen.
Der nächste Schritt besteht darin, die JavaScript-Datei in Ihr WordPress-Theme einzureihen (zu laden).
Fügen Sie diesen Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin ein.
function wpb_floating_bar() { wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );
Das ist alles, Sie können jetzt Ihre Website besuchen, um die schwebende Fußzeile in Aktion zu sehen. Laden Sie die Seite ein paar Mal neu, um zu sehen, dass die Fußzeile nach dem Zufallsprinzip verschiedene Elemente aus Ihrer Liste anzeigt.
Der Vorteil dieser Methode besteht darin, dass Sie mehrere Links in der schwebenden Fußzeilenleiste zufällig drehen können, wie wir es tun.
Die Schwierigkeit besteht jedoch darin, dass Sie Code hinzufügen müssen. Außerdem können Sie diese schwebende Leiste nicht für andere Dinge verwenden, ohne zu viele CSS-Anpassungen vorzunehmen.
Methode 2: Verwenden von OptinMontser zum Hinzufügen einer schwebenden Fußzeile in WordPress
OptinMonster ist ein beliebtes Plugin zur Lead-Generierung, das auf allen Websites funktioniert. Es hilft Ihnen, Website-Besucher in Abonnenten und Kunden zu verwandeln.
Eine der Funktionen von OptinMonster ist ein Schwebende Kopf- und Fußzeilen mit denen Sie ein E-Mail-Opt-In-Formular anzeigen sowie einzelne Links / Angebote bewerben können.
Der Vorteil dieser Methode ist:
- Einfach einzurichten (kein Code)
- Sie können benutzerdefinierte schwebende Balken auf verschiedenen Seiten / Kategorien Ihrer Website anzeigen.
- Sie können es verwenden, um Ihre E-Mail-Liste aufzubauen und Angebote zu bewerben.
Der einzige Nachteil ist, dass OptinMonster ein kostenpflichtiger Dienst ist. Aber Sie können unseren OptinMonster Coupon verwenden: WPB10 um 10 % Rabatt auf jeden OptinMonster-Plan zu erhalten.
Nach dem Kauf OptinMonster (Plus- oder Pro-Plan) können Sie die OptinMonster WordPress-API Plugin auf Ihrer Seite. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Dieses Plugin fungiert nur als Verbindung zwischen Ihrer WordPress-Site und OptinMonster.
Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt namens OptinMonster zu deiner WordPress-Administrationsleiste hinzu. Wenn Sie darauf klicken, gelangen Sie zur Einstellungsseite des Plugins.
Sie werden aufgefordert, Ihren OptinMonster-API-Benutzernamen und -Schlüssel anzugeben. Sie können diese Schlüssel von Ihrem OptinMonster-Konto erhalten.
Kopieren Sie die Schlüssel und fügen Sie sie in die Plugin-Einstellungen ein und klicken Sie auf die Schaltfläche „Mit OptinMonster verbinden“. Das Plugin verbindet nun Ihre WordPress-Site mit Ihrem OptinMonster-Konto.
Als nächstes müssen Sie auf die Schaltfläche „Neue Option erstellen“ klicken.
Dadurch gelangen Sie zur Seite „Neues Optin erstellen“ auf der OptinMonster-Website.
Zuerst müssen Sie einen Titel für Ihre Optin-Kampagne angeben und eine Website auswählen, auf der Sie dieses Optin verwenden. Wenn Ihre Website nicht aufgeführt ist, klicken Sie auf den Link „Neue Website hinzufügen“.
Als nächstes können Sie auf die schwebende Leiste unter „Wählen Sie Ihren Opt-In-Typ“ klicken, um Vorlagen zu verwenden, die als schwebende Leiste verwendet werden können.
Sie können alle diese Vorlagen nach Ihren Wünschen anpassen. Wählen Sie diejenige aus, die Ihren Vorstellungen am nächsten kommt.
Sobald Sie eine Vorlage auswählen, startet OptinMonster seinen Design-Anpasser. Es ist ein Point-and-Click-Builder, mit dem Sie das Erscheinungsbild und die Einstellungen für Ihr Optin konfigurieren können.
Wenn Sie mit der Konfiguration des Erscheinungsbilds Ihres Optins fertig sind, klicken Sie auf die Schaltfläche Speichern.
Diese werden zwar als Optins bezeichnet, müssen es aber nicht immer sein. Sie können die Ja / Nein-Funktion verwenden, um die Schaltfläche hinzuzufügen, um einen Blogbeitrag anzuzeigen oder einen Sonderrabatt zu erhalten.
Wenn Sie Ihre schwebende Leiste zum ersten Mal erstellen, ist sie standardmäßig angehalten.
Wenn Sie mit der Konfiguration fertig sind, bewegen Sie den Mauszeiger über die Statusleiste im oberen Menü und wählen Sie Kampagne starten.
Ihre schwebende Leiste kann jetzt zu Ihrer WordPress-Site hinzugefügt werden.
Kehren Sie zum Admin-Bereich Ihrer WordPress-Site zurück und besuchen Sie OptinMonster » Optins. Ihr Opt-In wird hier aufgelistet. Wenn Sie es nicht sehen, klicken Sie auf die Schaltfläche Refresh Optins und das Plugin zeigt es an.
Klicken Sie auf den Link „Ausgabeeinstellungen bearbeiten“, um fortzufahren.
Aktivieren Sie auf der nächsten Seite das Kontrollkästchen neben der Option „Optin on Site aktivieren“ und klicken Sie dann auf die Einstellungen speichern.
Sie können auch die Option Erweitert verwenden, um die schwebende Leiste nur in bestimmten Beiträgen, Seiten, Kategorien und anderen Bereichen anzuzeigen.
Das ist alles, das Optin für die schwebende Fußzeile ist jetzt auf Ihrer WordPress-Site verfügbar.
Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihrer WordPress-Site eine schwebende Fußzeile hinzuzufügen. Vielleicht möchten Sie auch diese umsetzbaren Tipps sehen, um den Verkehr auf Ihre WordPress-Site zu lenken.