Es kann schwierig sein, die Besucher Ihrer Website dazu zu bringen, wichtige Nachrichten zu bemerken.
Sie möchten wertvolle Angebote teilen, aber die richtige Balance zwischen Sichtbarkeit und Benutzererfahrung zu finden, ist nicht immer einfach. Zu subtil, und die Leute verpassen es. Zu aggressiv, und es fühlt sich aufdringlich an.
Schwebende Fußzeilenleisten bieten den perfekten Mittelweg.
Sie bleiben sichtbar, während die Leute Ihren Inhalt durchscrollen, und bieten eine konsistente, aber subtile Möglichkeit, Ihre Botschaft zu teilen.
Wir haben sie als äußerst effektiv für die Bewerbung von Rabatten und die Präsentation von Newslettern auf unseren Websites empfunden – sie erregen Aufmerksamkeit, ohne das Surferlebnis zu unterbrechen.
In diesem Leitfaden führen wir Sie durch den gesamten Prozess, von der Auswahl der richtigen Methode bis zur Anpassung Ihrer schwebenden Footer-Leiste für maximale Wirkung.
Was ist eine schwebende Fußzeilenleiste in WordPress?
Eine feste schwebende Fußzeilenleiste ermöglicht es Ihnen, wichtige Inhalte und Neuigkeiten prominent für Benutzer anzuzeigen.
Diese Leiste bleibt für Besucher jederzeit sichtbar, sodass sie eher darauf klicken und weitere nützliche Inhalte entdecken.
Sie können die schwebende Fußzeile verwenden, um:
- Generieren Sie mehr Klicks für andere Blogbeiträge.
- Leads generieren und Ihre E-Mail-Liste aufbauen.
- Machen Sie auf besondere Gutscheine oder Rabattangebote/Sales aufmerksam.
- Bewerben Sie Ihre Social-Media-Konten.
- Markenbekanntheit aufbauen.
- Bieten Sie Zugriff auf wichtige Ressourcen auf Ihrer WordPress-Website.
Lassen Sie uns nun sehen, wie Sie ganz einfach eine feste schwebende Fußzeilenleiste in WordPress erstellen. Wir zeigen Ihnen in diesem Tutorial zwei Methoden, und Sie können die untenstehenden Links verwenden, um zur Methode Ihrer Wahl zu springen:
- Methode 1: Erstellen Sie eine Sticky Floating Footer Bar mit OptinMonster (empfohlen)
- Methode 2: Erstellen Sie eine schwebende Sticky-Fußzeilenleiste mit einem kostenlosen Plugin
- Bonus: Erstellen Sie ein Sticky Floating Navigationsmenü in WordPress
- Häufig gestellte Fragen zu schwebenden Fußzeilenleisten
Methode 1: Erstellen Sie eine Sticky Floating Footer Bar mit OptinMonster (empfohlen)
Sie können ganz einfach eine feste schwebende Fußzeilenleiste mit OptinMonster erstellen. Es ist das beste Lead-Generierungs- und Konversionsoptimierungstool auf dem Markt und macht es super einfach, Ihre Website-Besucher in Abonnenten zu verwandeln.
Bei WPBeginner haben wir es verwendet, um Banner und Popups zu erstellen, die unsere Pro-Dienste oder unseren Newsletter bewerben. Wenn Sie mehr über unsere Erfahrungen mit dem Tool erfahren möchten, können Sie unseren vollständigen OptinMonster-Testbericht lesen.
Das Plugin verfügt über einen Drag-and-Drop-Builder und vorgefertigte Vorlagen, mit denen Sie eine schwebende Footer-Leiste, Slide-in-Popups und Banner erstellen können, ohne Code verwenden zu müssen.
Wir empfehlen diese Methode, da OptinMonster super einfach zu bedienen ist und mehr Anpassungsoptionen bietet als die kostenlose Plugin-Methode.
Schritt 1: Installieren Sie OptinMonster auf Ihrer Website
Zuerst müssen Sie sich auf der OptinMonster-Website anmelden, indem Sie auf die Schaltfläche „Get OptinMonster Now“ klicken.
Als Nächstes müssen Sie das kostenlose OptinMonster-Connector-Plugin auf Ihrer Website installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.
Nach der Aktivierung öffnet sich der OptinMonster-Einrichtungsassistent auf Ihrem Bildschirm. Dort müssen Sie auf die Schaltfläche „Vorhandenes Konto verbinden“ klicken. Dadurch wird Ihre WordPress-Website mit Ihrem OptinMonster-Konto verbunden.
Sobald Sie das getan haben, öffnet sich ein neues Fenster auf Ihrem Bildschirm.
Klicken Sie hier auf die Schaltfläche „Mit WordPress verbinden“, um fortzufahren.
Schritt 2: Erstellen und Anpassen der schwebenden Sticky Footer-Leiste
Jetzt, da Sie OptinMonster mit Ihrer Website verbunden haben, ist es an der Zeit, eine feste schwebende Fußzeilenleiste zu erstellen.
Um dies zu tun, müssen Sie die Seite OptinMonster » Templates in der WordPress-Admin-Seitenleiste aufrufen und 'Floating Bar' als Kampagnentyp auswählen.
Sobald Sie dies getan haben, werden alle vorgefertigten Vorlagen für die schwebende Leiste auf dem Bildschirm geladen. Von hier aus können Sie auf die Schaltfläche „Vorlage verwenden“ auf der gewünschten Vorlage klicken.
Dies öffnet die Aufforderung „Kampagne erstellen“ auf dem Bildschirm, wo Sie einen Namen für die schwebende Fußzeilenleiste hinzufügen können, die Sie erstellen möchten. Es kann alles sein, was Sie möchten, da der Name Ihren Besuchern nicht angezeigt wird.
Klicken Sie danach einfach auf die Schaltfläche „Mit dem Erstellen beginnen“.
Der Drag-and-Drop-Builder von OptinMonster wird nun auf Ihrem Bildschirm gestartet, wo Sie mit der Anpassung Ihrer schwebenden Fußzeile beginnen können. Hier sehen Sie eine Vorschau der schwebenden Leiste rechts mit Blöcken in der linken Spalte.
Sie können zum Beispiel einen Countdown-Timer-Block verwenden, wenn Ihre schwebende Footer-Leiste ein Rabattangebot bewirbt. Dies hilft, ein Gefühl der Dringlichkeit bei den Nutzern zu erzeugen und sie zum Handeln zu bewegen.
Sie können der Footer-Leiste auch einen CTA-, Video- oder Social-Media-Block hinzufügen. Detaillierte Anweisungen finden Sie in unserem Tutorial zum Erstellen einer Alert-Leiste in WordPress.
Sie können den Text in der Fußzeilenleiste auch bearbeiten, indem Sie darauf klicken. Dies öffnet die Blockeinstellungen in der linken Spalte, wo Sie diese nach Belieben anpassen können.
Wenn Sie beispielsweise das Rabattangebot in der Vorlage ändern möchten, können Sie den Schaltflächentext ändern. Danach können Sie die Option „An eine URL weiterleiten“ auswählen und den Seitenlink hinzufügen, zu dem Benutzer weitergeleitet werden sollen, wenn sie auf die Schaltfläche klicken.
Schritt 3: Konfigurieren Sie die Anzeigeregeln für Ihre schwebende Fußzeilenleiste
Sobald Sie mit der Anpassung Ihrer Footer-Leiste zufrieden sind, wechseln Sie einfach oben zum Tab 'Anzeigeregeln'.
Hier können Sie konfigurieren, wann die Leiste auf Ihrer Seite angezeigt werden soll. Wenn Sie die schwebende Fußzeilenleiste jederzeit anzeigen möchten, müssen Sie die Option 'Zeit auf der Seite' aus dem linken Dropdown-Menü auswählen.
Wählen Sie danach die Option „sofort“ aus dem Dropdown-Menü auf der rechten Seite.
Um die schwebende Footer-Leiste auf einer bestimmten Seite anzuzeigen, müssen Sie jedoch die Option „Seiten-Targeting“ aus dem rechten Dropdown-Menü auswählen.
Wählen Sie danach die Option „stimmt genau überein“ aus dem Dropdown-Menü in der Mitte und fügen Sie dann eine Seiten-URL hinzu. Sobald Sie dies getan haben, wird die schwebende Fußzeilenleiste nur auf der von Ihnen gewählten Seite angezeigt.
Zusätzlich können Sie die Option „Exit Intent“ auswählen, um die schwebende Fußzeilenleiste anzuzeigen, wenn der Benutzer Ihre Website verlassen möchte. Sie können dann die Empfindlichkeit des Exit Intents konfigurieren und die Geräte auswählen, auf denen die Fußzeilenleiste angezeigt werden soll. Dies kann nützlich sein, wenn Sie Ihre Absprungrate reduzieren möchten.
Sie können sogar die Option „Besuchergerät“ auswählen, wenn Sie die schwebende Fußzeilenleiste nur für Desktop-Besucher anzeigen möchten.
Sie können die Anzeigeregeln auch nach Datum, Uhrzeit oder Scroll-Distanz konfigurieren, indem Sie die Option „Wann“ aus der linken Spalte auswählen.
Eine Erklärung weiterer Anzeigeoptionen finden Sie in unserem vollständigen OptinMonster-Testbericht.
Schritt 4: Veröffentlichen Sie Ihre schwebende Fußzeilenleiste
Sobald Sie die Anzeigebedingungen für Ihre Fußzeilenleiste definiert haben, wechseln Sie oben zum Tab „Veröffentlichen“.
Klicken Sie hier einfach auf die Schaltfläche „Veröffentlichen“.
Vergessen Sie danach nicht, auf „Speichern“ zu klicken, um Ihre Änderungen live zu schalten.
Jetzt können Sie Ihren WordPress-Blog besuchen, um die schwebende Footer-Leiste in Aktion zu sehen.
Alternative: Sie können auch Thrive Ultimatum verwenden, um eine schwebende Footer-Leiste mit einem Countdown-Timer auf Ihrer Website anzuzeigen. Weitere Details finden Sie in unserem vollständigen Testbericht zur Thrive Themes Suite.
Methode 2: Erstellen Sie eine schwebende Sticky-Fußzeilenleiste mit einem kostenlosen Plugin
Wenn Sie nach einer kostenlosen Möglichkeit suchen, eine feste schwebende Fußzeilenleiste zu erstellen, dann ist diese Methode genau das Richtige für Sie. Beachten Sie jedoch, dass Sie im Vergleich zur Verwendung von OptinMonster nur begrenzte Anpassungsoptionen haben.
Zuerst müssen Sie das Plugin Firebox Popup Builder installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.
Besuchen Sie nach der Aktivierung die Seite Firebox » Campaigns im WordPress-Dashboard und klicken Sie auf die Schaltfläche '+ New Campaign'.
Dies öffnet die Firebox-Kampagnenbibliothek, in der Sie nach vorgefertigten Vorlagen für Sticky Floating Bars suchen können.
Klicken Sie anschließend einfach auf den Link „Einfügen“ unter der schwebenden Fußzeile, die Ihnen gefällt. Beachten Sie, dass Sie die Position einer ausgewählten Kopfzeile nicht ändern können. Sie müssen sicherstellen, dass die von Ihnen ausgewählte Vorlage für eine Fußzeile bestimmt ist.
Der Block-Editor wird nun auf Ihrem Bildschirm geöffnet, wo Sie mit der Eingabe eines Namens für Ihre schwebende Leiste beginnen können.
Danach können Sie den Text in der Fußzeile bearbeiten, indem Sie darauf klicken, und neue Blöcke hinzufügen, indem Sie auf die Schaltfläche „+“ klicken. Dies öffnet das Blockmenü, in dem Sie Bilder, Überschriften, Absätze, Videos, Zitate oder Listenblöcke hinzufügen können.
Wenn Sie beispielsweise Social-Media-Handles hinzufügen möchten, können Sie den Block „Social Icons“ auswählen. Danach können Sie Social-Media-Konten und Links über das Block-Panel hinzufügen.
Weitere Details finden Sie in unserem Tutorial zum Hinzufügen von Social-Media-Icons zu WordPress-Menüs.
Sie können auch den Text im Button-Block ändern und einen Link zu der Seite hinzufügen, auf die Sie Benutzer leiten möchten, indem Sie auf das Link-Symbol in der Block-Symbolleiste klicken.
Geben Sie danach die URL Ihrer Wahl ein und drücken Sie die Eingabetaste.
Als Nächstes können Sie nach unten zum Abschnitt „Firebox-Einstellungen“ scrollen.
Hier können Sie die Hintergrundfarbe, Textfarbe, Ausrichtung, Größe, Abstände und Ränder für die schwebende Footer-Leiste ändern.
Wechseln Sie danach im linken Bereich zum Tab „Verhalten“ und wählen Sie „Seitenaufruf“ als Auslöser für die schwebende Leiste.
Verwenden Sie dann den Schieberegler „Verzögerung“, um eine Verzögerungszeit für die schwebende Leiste auszuwählen. Wenn Sie beispielsweise den Schieberegler auf 15 Sekunden ziehen, wird die schwebende Fußzeilenleiste angezeigt, sobald der Benutzer 15 Sekunden auf Ihrer Website verbracht hat.
Wenn die klebrige schwebende Footer-Leiste sofort angezeigt werden soll, können Sie den Schieberegler auf 0 belassen.
Als Nächstes können Sie andere Einstellungen so belassen, wie sie sind, oder sie nach Ihren Wünschen konfigurieren.
Sobald Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken.
Besuchen Sie nun Ihre WordPress-Website, um die Sticky Floating Footer Bar in Aktion zu sehen.
So sah es auf unserer Demo-Website aus.
Bonus: Erstellen Sie ein Sticky Floating Navigationsmenü in WordPress
Abgesehen davon, dass Sie eine feste Fußzeilenleiste hinzufügen, möchten Sie vielleicht auch eine feste schwebende Navigationsleiste auf Ihrer WordPress-Website erstellen.
Ein Navigationsmenü enthält Links zu den wichtigsten Seiten Ihres WordPress-Blogs und dient als Organisationsstruktur für Ihre Website.
Wenn Sie dieses Menü fest machen, bleibt es jederzeit auf Ihrer Seite sichtbar, auch wenn der Benutzer auf Ihrem Bildschirm nach unten scrollt. Dies kann das Engagement erhöhen und die Navigation auf Ihrer Website erleichtern.
Um ein festes schwebendes Navigationsmenü zu erstellen, installieren und aktivieren Sie einfach das Plugin Sticky Menu & Sticky Header. Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Besuchen Sie nach der Aktivierung die Seite Einstellungen » Sticky Menu im WordPress-Dashboard und geben Sie #main-navigation neben der Option 'Sticky Element (erforderlich)' ein.
Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern. Sie haben nun erfolgreich ein klebriges schwebendes Navigationsmenü erstellt.
Detaillierte Anweisungen finden Sie in unserem Tutorial zur Erstellung eines Sticky Floating Navigationsmenüs in WordPress.
Häufig gestellte Fragen zu schwebenden Fußzeilenleisten
Hier sind einige Fragen, die unsere Leser häufig zu schwebenden Fußzeilenleisten stellen:
Funktioniert die schwebende Fußzeilenleiste auch auf Mobilgeräten?
Ja, die meisten schwebenden Fußzeilenleisten funktionieren gut auf Mobilgeräten. Es ist jedoch eine gute Idee, sie auf verschiedenen Bildschirmgrößen zu testen, um sicherzustellen, dass alles gut aussieht und richtig passt.
Einige Plugins ermöglichen es Ihnen sogar, die Leiste je nach Bedarf nur auf Mobilgeräten oder Desktops anzuzeigen. Auf diese Weise können Sie das Erlebnis für jeden Benutzer anpassen.
Kann ich steuern, wann die schwebende Fußzeilenleiste angezeigt wird?
Ja! Viele Plugins, wie z. B. OptinMonster, ermöglichen es Ihnen, Regeln festzulegen, wann die Leiste angezeigt wird. Zum Beispiel:
- Nach einigen Sekunden auf der Seite anzeigen
- Anzeigen, wenn der Benutzer nach unten scrollt
- Nur auf bestimmten Seiten anzeigen
Dies hilft Ihnen, die Aufmerksamkeit des Benutzers zum richtigen Zeitpunkt zu erregen, ohne aufdringlich zu sein.
Was sollte ich bei der Verwendung einer festen Footer-Leiste vermeiden?
Hier sind ein paar Tipps:
- Machen Sie die Leiste nicht zu hoch – sie sollte hilfreich und nicht ablenkend sein.
- Stellen Sie sicher, dass sie keine anderen wichtigen Inhalte verdeckt.
- Halten Sie die Nachricht kurz und bündig.
Verwenden Sie außerdem nicht zu viele Animationen oder grelle Farben. Ein klares, einfaches Design funktioniert normalerweise am besten.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach eine schwebende, klebrige Fußzeilenleiste in WordPress erstellen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger zum Thema Hinzufügen von Kopf- und Fußzeilen-Code in WordPress und unsere Checkliste mit Dingen, die Sie in die Fußzeile Ihrer WordPress-Website aufnehmen sollten sehen.
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.
Greg
Wie kann ich diese Sticky-Bar am oberen Rand der Seite positionieren? Mit CSS oder einer Einstellung, die ich übersehe? Entschuldigung, falls das schon beantwortet wurde. Danke!!
WPBeginner Support
For that you would want to use the header option instead of footer for most of these and that would place it at the top of the page
Admin
Moinuddin Waheed
Eine schwebende Fußzeilenleiste ist sehr effektiv für Marketing und Leadgenerierung.
Sie erzeugt eine ständige Verlockung im Bewusstsein des Nutzers über laufende Aktionen und Angebote.
Ich habe in der Vergangenheit Einkäufe getätigt, weil ich ständig daran erinnert wurde und die Angst hatte, dass dieses Angebot bald enden würde.
Vielen Dank für die Schritt-für-Schritt-Anleitung, wie wir eine für unsere Websites erstellen können.
WPBeginner Support
Gern geschehen, wir freuen uns, dass unser Leitfaden hilfreich war!
Admin
Hajjalah
Ich benutze das OptinMonster-Plugin, um eine schwebende Fußzeilenleiste mit meinen Social-Media-Links hinzuzufügen, was mein Social-Media-Publikum drastisch erhöht hat, dank dieses detaillierten Schritt-für-Schritt-Artikels.
Aber wenn ich fragen darf. Ist es möglich, Code hinzuzufügen, damit die OptinMonster-Plugin-Fußzeilenleiste nicht erscheint oder erst erscheint, wenn eine Fußzeilenanzeige wie Google AdSense-Fußzeilenanzeigen verfügbar ist?
WPBeginner Support
You would want to reach out to OptinMonster’s support and they can help you look into and/or set up something like that
Admin
Ahmed Omar
Ein exzellentes Tutorial zur Erstellung einer "sticky" schwebenden Footer-Leiste in WordPress
Ihr Schritt-für-Schritt-Leitfaden, insbesondere die erste Methode, ist klar und effektiv.
Ich verwende die erste Methode für diesen schwebenden Footer
Danke für diese praktische Lösung
WPBeginner Support
Gern geschehen!
Admin
Steve Alvi
Bitte ich möchte einen Schließen-Button für diese schwebende Fußzeilenleiste.
WPBeginner Support
OptinMonster wäre die Methode, mit der Sie am einfachsten eine Schließen-Schaltfläche haben können.
Admin
Jiří Vaněk
Ich benutze Optin Monster, wo ich das Schließen konfigurieren und sogar das Schließen messen kann. So weiß ich, wie viele Leute die schwebende Leiste benutzt und wie viele sie geschlossen haben, weil sie nicht interessiert waren.
Trendy Avinash
Hat wie am Schnürchen funktioniert, ohne Plugins.
Danke
WPBeginner Support
Glad our guide was helpful
Admin
Alejandro Ferguson
Der schwebende Fußzeilen-Code funktioniert wirklich. Danke
WPBeginner Support
Glad our guide could help set it up
Admin
John SMith
Wie fügt man einen FB-Sharing-Button in eine schwebende Leiste nur für Mobilgeräte, nicht für Desktops, ein.
WPBeginner Support
Sie sollten sich Option 2 unserer Social-Media-Plugins hier ansehen: https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Admin
wlepcha
So fügen Sie Menüs in die Sticky-Footer-Leiste anstelle von zufälligen Anzeigen ein.
WPBeginner Support
Sie sollten sich unseren Artikel hier ansehen: https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/
Admin
Marius
Sehr schönes Tutorial. Ich habe den manuellen Code implementiert und er hat wie am Schnürchen funktioniert. Ich brauche nur noch eine weitere Funktion... können wir auch ein X oder einen Schließen-Button haben, um die Floatingbar zu schließen und sie für den Rest des Besuchs so zu belassen? Ich weiß, Cookies sind involviert, aber vielleicht können Sie uns eine einfache Lösung anbieten. Danke!
Greg Guz
Sehr klares und leicht verständliches Tutorial.
Die schwebende Leiste scheint absolut in Ordnung zu funktionieren, aber ich erhalte folgende Fehlermeldung in der Chrome-Konsole:
Fehler beim Laden der Ressource: Der Server hat mit dem Status 404 (Nicht gefunden) geantwortet.
Irgendwelche Ideen?
Ankush jain
Sehr hilfreich Ihre Website
vielen Dank
Mark Rowles
Nur ein kurzer Hinweis: CSS funktioniert dafür nicht.
Sie haben fixedBar im HTML als Klassennamen (großes B) und Sie haben fixedbar im CSS (kleines b), sodass das CSS nicht angewendet wird.
Kann jemand bitte den Code korrigieren, um anderen zu helfen, die diesen Beitrag entdecken?
WPBeginner Support
Hallo Mark,
Danke, dass Sie darauf hingewiesen haben. Wir haben den Code aktualisiert.
Admin
Robi
Sehr geehrte WPBeginner und Freunde
Wenn ich einen bestimmten Abschnitt mit dem Elementor Page Builder erstellt habe, wie kann ich ihn als benutzerdefinierte Sticky-Fußzeile verwenden? (Er enthält mehr als eine Spalte, einige Schaltflächen und Text). Ich möchte diese Art von Sticky-Fußzeile anstelle von einfachem Text, wie in diesem Tutorial erklärt.
Danke..
Daniel
1) Code kurz vor dem Tag in der footer.php aus meinem Theme-Verzeichnis /wp-content/themes/mytheme/ hinzugefügt.
2) Code zu meinem Theme-Verzeichnis /wp-content/themes//mytheme/style.css hinzugefügt, funktioniert nicht, gelöscht und dann versuche ich, es über das Theme-Optionen-Menü für benutzerdefinierten CSS hinzuzufügen, dasselbe Problem, funktioniert nicht
3) floatingbar.js mit dem darin enthaltenen Code in /wp-content/themes/mytheme/js hinzugefügt
4) Code zuerst zu functions.php hinzugefügt, funktioniert nicht... habe es auch mit einem seitenbezogenen Plugin versucht, dasselbe Ergebnis
Ich habe es auf beiden Websites mit unterschiedlichen Themes ausprobiert, dasselbe Problem, es funktioniert nicht, es sitzt einfach da, es schwebt nicht
Etwas Hilfe wäre willkommen… Ich brauche das wirklich
WPBeginner Support
Hallo Daniel, versuchen Sie, das Inspect-Tool zu verwenden, um Probleme mit CSS zu beheben.
Admin
Daniel
Danke für die Antwort, aber für mich ist das Herumspielen mit CSS und JS wie der Bau eines Raumschiffs... ich werde versuchen herauszufinden, was falsch ist
Mit freundlichen Grüßen
Daniel
Daniel
Ich habe die Inspektor-Tools verwendet und sehe dort keine roten Linien...
Dueadla Framin
Ich habe das gleiche Problem! Der von Ihnen gepostete Code funktioniert nicht einmal im Standard-Twenty-Sixteen-Theme. Er schwebt nicht, er bleibt einfach am unteren Rand der Webseite kleben, nachdem man ganz nach unten gescrollt hat.
Igor
Es gibt einen Fehler in der Referenz fixedBar im CSS-Code (er bezieht sich auf „.fixedbar“, während er „.fixedBar“ sein sollte). Ändern Sie das und sehen Sie, ob es funktioniert.
henrykene
WpBeginner bitte, ich möchte es verwenden, um meine Adsense-Anzeigen auf mobilen Ansichten anzuzeigen. Wie gehe ich vor und welche Codes benötige ich, damit es eine Adsense-Sticky-Footer-Leiste für mobile Zuschauer anzeigt?
Nawaf
Super.
Aber es gibt einen Fehler. Wenn Sie es auf dem Handy öffnen. Das Band wird abgeschnitten. Und man sieht nur die Hälfte davon
Tipp
In meinem neuen Theme habe ich die Option, eine unendliche Scroll-Funktion zu nutzen. Das ist großartig, außer dass der Leser lange scrollen müsste, um zu meiner alten Fußzeile zu gelangen, wo ich die rechtlichen Hinweise usw. platziert habe.
Mit dieser schwebenden Fußzeilenleiste konnte ich die Links schön dort platzieren und jetzt kann ich die Infinite-Scroll-Funktion nutzen, ohne eine Reihe von erforderlichen Links neu positionieren zu müssen.
Danke für dieses Tutorial. Ich habe auch ein bisschen mehr PHP und CSS gelernt!
Sarah Noah
Ich habe einen Kunden, der auf jeder Seite einen Link zu „ANGEBOT ANFORDERN“ haben möchte. Als ich diesen Sticky-Footer sah, schien er perfekt, bis ich las, dass einige Benutzer ihn ärgerlich finden. Glauben Sie, dass „ANGEBOT ANFORDERN“ am unteren Rand jeder Seite angeheftet ist, nervig ist? Natürlich ist es das Wichtigste, was das Unternehmen vom Benutzer verlangt.
Roy E
Die Fußzeilenleiste wird in Firefox gut angezeigt, ist aber in IE11 nicht sticky, wo ich nach unten scrollen musste, um „Über WPBeginner“, „Website-Links“ und „Websites, die wir mögen“ zu sehen??
Roy E
Natürlich, als ich Enter auf dem vorherigen Kommentar gedrückt habe (IE-Problem), erschien die Sticky-Footer-Leiste. Ich bin mir nicht sicher, was passiert ist, aber das Problem ist verschwunden. Bitte ignorieren Sie diesen Kommentar und den vorherigen.
yugishtha
Haben wir auch ein Floating-Top-Bar-Menü-Plugin für WP?
Hutzel
Ich habe alles versucht, aber es zeigt mir nicht die feste Fußzeile an. Kann mir bitte jemand helfen oder mich unterstützen? Danke
Devendra Meena
Gibt es ein Plugin, das einige Skripte in einem schwebenden Feld haben kann und mit einem X-Button zum Schließen?
Khushal Rao
dies kann auch verwendet werden, um Anzeigen zu schalten..
Dick Sijtsma
Das Verringern der Deckkraft auf beispielsweise 0,60 gibt dem Besucher einen Einblick in den darunterliegenden Inhalt. Ich denke, das wäre ein schöner Effekt. Aber das Ändern der Deckkraft des Balkens ändert auch die Deckkraft des Textes. Und das 'verdünnt' die Botschaft. Gibt es einen Trick, um das zu verhindern?
Danke.
Jan dB
Wie bereits erwähnt, ist dies ein sehr einfacher Leitfaden und funktioniert auf den meisten Computern einwandfrei.
Ich habe jedoch auch Probleme mit mobilen Browsern.
Haben Sie dafür bereits eine Lösung gefunden?
Vielen Dank und weiter so!
Redaktion
Für mobile Browser, wenn Sie ein responsives Design haben, können Sie einfach Media Queries und display: none für die gesamte Fußzeile verwenden.
Admin
Theresa @DearCreatives
Nice. I am actually looking for a tutorial for adding script to top of post that is there every time I post for disclosure purposes. If you have one like that or know of a plugin can you send me an @DearCreatives on twitter or email me
thanks!!
Dick Sijtsma
Hallo, sieht gut aus, aber ich verstehe die Gründe, warum manche Leute diese Art von Footern sehr ablehnen, sehr gut. Trotzdem versuche ich, diesen Effekt auch zu erzielen.
Im Quellcode dieser Seite habe ich gesehen, dass Sie das JavaScript extern eingebunden haben. Sie haben es in die "main.js" JavaScript-Datei gelegt und diese "main"-Datei im Header mit der Seite verknüpft.
Soweit so gut, das kann ich handhaben. Aber ich kann die Stelle nicht finden, an der die Funktion 'randomtip' aufgerufen wird.
Kurz gesagt, meine Frage ist: Wie externisiere ich das JavaScript? Ich hoffe, von Ihnen zu hören.
Matthew
Tolle Anleitung. Ein Problem, auf das andere möglicherweise auch stoßen – ich habe nur einen Footer-Link (im Gegensatz zu mehreren, die rotieren) und diese Footer-Leiste wird auch auf der Seite angezeigt, zu der ich im Footer verlinke. Kennen Sie eine schnelle Möglichkeit, diese Fußzeile auf bestimmten Seiten nicht anzuzeigen? Oder sie vielleicht nur auf der Startseite anzuzeigen?
Redaktion
Sicher, umschließen Sie den Text einfach mit der bedingten Anweisung is_front_page().
Admin
Antonio
Here a true beginner. How do I actually do that? I totally new to WP and PHP. As far as I understand I have to put somewhere in the footer.php but I really have no idea where. Great article though. It managed to add it to my blog as well
Caio
Ich mag es, aber es ist ein wenig zu ablenkend. Vielleicht machen Sie es schön und leicht, indem Sie die Deckkraft reduzieren und dann eine Stil-Anweisung für den Hover-Effekt hinzufügen, um die Deckkraft wieder auf 0,9 zu erhöhen.
Sopheak
Wow! Das war ein großartiges Tutorial.
Pawan
Großartig, ich habe nach demselben gesucht.
Sai Kumar
Hallo, diese sticky schwebende Fußzeilenleiste ist wirklich großartig! Ich werde sie auf jeden Fall in meinen Blog einfügen. Vielen Dank fürs Teilen!!
Max Manroe
Wow, tolles Tutorial und ich denke, das ist großartig, ich werde es auf meinem Blog ausprobieren. Danke
Zseller Istvan
Leute, das ist das Einzige, was ich an WpBeginner wirklich hasse. Wenn ich Ihre Artikel auf meinem Tablet lese, bleibt mit Opera diese Fußzeilenleiste beim Scrollen sekundenlang mitten auf der Seite stehen. Es ist ein neues Tablet und leistungsstark genug. Die Fußzeilenleiste verdeckt den Inhalt, was wirklich nervig ist. Nach einiger Zeit bewegt sie sich an ihren Platz.
Redaktion
Wir arbeiten an einer mobilen/Tablet-Version. Dieses Problem wird bald behoben sein.
Admin
Salman Ahmad
Wow! Das ist großartig, danke fürs Teilen
Peter
Vielen Dank, dass Sie uns dieses großartige Tutorial zur Verfügung gestellt haben. Es wird mir auf jeden Fall helfen.
Amitabha Chakraborty
Hi
Nette Anleitung. Ich hätte mir einen „X“-Button gewünscht, um sie zu schließen, falls sie jemanden stört.
Mit freundlichen Grüßen
Amitabha
David
Ich mag eine Fußzeilenleiste. Ich denke, es ist ein großartiger Ort, um Social-Sharing-Buttons zu platzieren. Ich habe meine eigene auf der Website eines Kunden erstellt, aber sie hat die Option, geschlossen werden zu können. Sie enthält auch den Button „Nach oben gehen“. Ziemlich raffiniert. Allerdings klebt Ihre Fußzeilenleiste, wie die von mir erstellte, auf meinem HTC EVO 4G nicht unten, wie sie sollte. Sie klebt tatsächlich in der Mitte eines Artikels und ist wirklich nervig, weil sie einen Teil des Textes verdeckt. Die von mir erstellte Leiste kann geschlossen werden, sodass sie nur eine kurze Belästigung darstellt. Ihre Leiste kann das nicht, daher kann ich diesen Text nie lesen. Wiederum, das ist auf meinem Handy. Wenn Sie eine Lösung finden, lassen Sie es mich bitte wissen.
Ich bin über Ihren Newsletter, der großartig ist, auf diesen Artikel gestoßen. Danke dafür.
Michael
Ob man diese Art von Leisten mag oder nicht, es ist auf jeden Fall wertvoll zu sehen, wie der Code geschrieben ist, um so etwas zu implementieren. Ich benutze Hello Bar und die Wibya Bar auf mehreren meiner Websites und obwohl ich denke, dass manche Leute blind dafür geworden sind, mich eingeschlossen, und manche sie hassen, funktionieren sie immer noch, um Inhalte oft zu konvertieren und zu teilen.
Ich schätze, was ich als eine hilfreiche kleine Code-Lektion ansehe. Tolle Seite!
Taryn Fox
Ich persönlich finde, dass die schwebende Fußzeilenleiste eine extrem benutzerfeindliche Funktion ist, insbesondere eine wie Ihre, die a) nicht ausblendbar ist und b) sich auf die doppelte oder mehrfache Größe ausdehnt, wenn sie bei erhöhter Schriftgröße angezeigt wird.
Apropos, selbst mit Nosquint, das den Rest des Textes auf dieser Website vergrößert, ist der Text im Kommentarfeld winzig und schwer zu lesen, wenn Sie visuelle Zugänglichkeitsprobleme haben.
Apropos andere Barrierefreiheitsfragen: Die Aufforderung nach dem „echten Namen“ einer Person ist feindselig gegenüber jedem, der ein Pseudonym verwendet. Dazu gehören Transfrauen, Personen, die verfolgt werden, Personen, die ihre Online-Aktivitäten vor anderen verbergen, die ihnen schaden könnten, und Personen, die Pseudonyme bevorzugen und unter diesen bekannter sind als unter ihren rechtlichen oder Geburtsnamen (beides sind inklusivere und genauere Begriffe für das, was Sie als „echten Namen“ bezeichnen).
Außerdem haben Sie "meaningful" in der Benachrichtigung "Add a comment" falsch geschrieben.
Ich hatte nicht vor, einen langen, ausschweifenden kritischen Kommentar zu hinterlassen, aber ich habe das Gefühl, dass die meisten Leute eine Bannerblindheit für Footer-Leisten haben und ihnen gegenüber bestenfalls gleichgültig und schlimmstenfalls genervt sind. Die meisten Leute, die keine Webdesigner sind, jedenfalls. Ich dachte, vielleicht sollte jemand für die Leute sprechen, die tatsächlich davon betroffen sind. Dann bin ich auf die anderen Probleme gestoßen, als ich von Google Reader auf Ihre Website ging und versuchte, einen Kommentar zu hinterlassen.
Vielen Dank für Ihre Tutorials und ich hoffe, dass alles gut für Sie läuft.
Redaktion
Hallo Taryn,
Wir wissen Ihr wertvolles Feedback sehr zu schätzen. Es gibt definitiv Vor- und Nachteile bei einer schwebenden Fußzeilenleiste wie dieser. Die Nachteile haben Sie bereits aufgezeigt. Wir haben über eine Cookie-Tracking-Option nachgedacht, bei der normale Benutzer die Leiste schließen und sie nie wieder anzeigen lassen können. Aber selbst normale Benutzer verpassen dadurch manchmal großartige Angebote. Auch wenn sie den Cache ihres Browsers löschen oder einen anderen Computer verwenden, erscheint die Leiste wieder. Noch ein Nachteil des Cookie-Trackings. Wir haben uns ausführlich damit beschäftigt, Benutzerregistrierung und Personalisierung auf der Website anzubieten.
Was Kommentare angeht, so dient der Text „Echter Name“ im Feld nur einem Zweck: Spammer abzuwehren. Wenn Sie die Kommentarrichtlinien lesen, steht dort: „Wir erlauben keine Keywords, die in das Namensfeld gestopft werden. Sie müssen Ihren Namen oder Spitznamen für Kommentare verwenden.“ Oft verwenden Leute ihre Spitznamen, und das ist für uns völlig in Ordnung. Aber wenn Ihr Spitzname „beste Versicherungsgesellschaft“ oder so etwas ist… dann markieren wir ihn als Spam.
Danke, dass Sie auf den Tippfehler aufmerksam gemacht haben. Wir haben ihn behoben.
Admin
Partha Bhattacharya
Dies bezieht sich auf Taryns Kommentar oben:
„Ich glaube, die meisten Leute haben Bannerblindheit gegenüber Fußzeilenleisten und sind ihnen bestenfalls gleichgültig und schlimmstenfalls genervt.“
Da Sie sie weiterhin verwenden, besteht kein Zweifel, dass Sie davon profitieren, und die Leute klicken darauf, um auf dem Laufenden zu bleiben, genau wie ich gerade eben... von einer anderen Seite hierher gekommen.
Würden Sie bitte einige Statistiken / Einblicke teilen, wie effektiv die Footer-Leiste für Sie ist und wie effektiv sie im Vergleich zur Verwendung einer Header-Leiste ist!
staion
Danke für diese einfachen und erstaunlichen kleinen Tutorials! Ich habe es bereits auf meiner Website implementiert, aber ohne das jQuery-Ding, nur als Ankündigungen.
FreedomJackson
Super, danke fürs Teilen, Mann. Ich nehme gerade ein paar Aktualisierungen vor und habe versucht, eine gute Möglichkeit zu finden, diese Fußzeilenleiste hinzuzufügen.
mucho grande gracias senior