Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress

Die Verbesserung der visuellen Attraktivität Ihrer WordPress Website kann die Benutzererfahrung erheblich verbessern, und ein oft übersehenes Element ist die Bildlaufleiste.

Durch die individuelle Anpassung Ihrer Bildlaufleiste können Sie Ihrer Website eine einzigartige Note verleihen, sie optisch ansprechender gestalten und sie an Ihre allgemeine Designästhetik anpassen.

Bei WPBeginner haben wir Hunderte von Artikeln über WordPress-Design geschrieben und auch verschiedene Funktionen zur individuellen Anpassung genutzt, um das Engagement auf unserer Website zu steigern.

Eine individuell angepasste Bildlaufleiste kann das Erscheinungsbild Ihrer Website verbessern und die Navigation für die Besucher reibungsloser und intuitiver gestalten.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen können.

Warum eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen?

Im Jahr 2018 erarbeitete die WC3 einen Vorschlag, der es Website-Besitzern erlaubt, das Aussehen der Bildlaufleiste mit CSS anzupassen.

Heute unterstützen viele moderne Browser benutzerdefinierte Bildlaufleisten.

Deshalb sollten Sie die Bildlaufleiste ändern, damit sie besser zum Farbschema oder Branding Ihrer Website passt. Viele Websites verwenden auch eine individuell angepasste Bildlaufleiste, um die Aufmerksamkeit der Besucher zu erregen, was die Zahl der Seitenaufrufe erhöhen und die Absprungrate verringern kann.

Beachten Sie jedoch, dass jeder Browser benutzerdefinierte Bildlaufleisten anders handhabt. Viele Browser unterstützen die Anpassung nur teilweise, während einige Ihr benutzerdefiniertes Styling überhaupt nicht anzeigen.

Daher ist es wichtig, Ihre Website mit verschiedenen Browsern und Geräten zu testen, um zu sehen, wie die Bildlaufleiste in möglichst vielen Browsern aussieht.

Schauen wir uns also an, wie man in WordPress eine benutzerdefinierte Bildlaufleiste hinzufügt. Verwenden Sie einfach die nachstehenden Links, um zu der gewünschten Methode zu springen:

Methode 1: Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress mit einem Plugin (einfach)

Der einfachste Weg, die Bildlaufleiste individuell anzupassen, ist die Verwendung der Advanced Scrollbar. Mit diesem kostenlosen Plugin können Sie die Breite der Bildlaufleiste, die Farbe, die Bildlaufgeschwindigkeit und vieles mehr ändern, ohne eine einzige Zeile Code schreiben zu müssen.

Als Erstes müssen Sie das Advanced Scrollbar-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Einstellungen “ Erweiterte Bildlaufleisteneinstellungen.

Hier können Sie das Farbschema der Bildlaufleiste und die Hintergrundfarbe der Leiste ändern.

In der folgenden Abbildung haben wir eine blaue Bildlaufleiste erstellt.

Sie können auch den Mausbildlaufschritt ändern, indem Sie eine neue Zahl in das Feld „Mausbildlaufschritt“ eingeben.

Bei einem niedrigeren Wert wird der Bildlauf langsamer, bei einem höheren Wert schneller.

Sie können auch festlegen, ob die Bildlaufleiste automatisch ausgeblendet werden soll, so dass sie nur erscheint, wenn der Besucher einen Bildlauf durchführt.

Dies kann nützlich sein, wenn Sie eine bunte Bildlaufleiste erstellt haben und befürchten, dass sie vom restlichen Inhalt ablenken könnte.

Standardmäßig erscheint die Bildlaufleiste auf der rechten Seite des Browser-Fensters. Sie können sie jedoch mit den Einstellungen für „Schienenausrichtung“ auf die linke Seite verschieben, wenn Sie dies bevorzugen.

Wenn Sie mit der Konfiguration der Bildlaufleiste zufrieden sind, denken Sie daran, auf „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie können nun Ihre WordPress-Website besuchen, um die benutzerdefinierte Bildlaufleiste in Aktion zu sehen.

Methode 2: Hinzufügen von benutzerdefinierten Scrollbar-Farben in WordPress mit CSS

Wenn Sie weitergehende Änderungen an Ihrer Bildlaufleiste vornehmen möchten, können Sie auch CSS verwenden.

Mit dieser Methode können Sie jeden Teil der Bildlaufleiste anpassen, aber sie funktioniert nur auf Desktop-Browsern mit WebKit. Das bedeutet, dass Ihre Änderungen nicht in allen Browsern angezeigt werden, auch nicht in mobilen Browsern.

Um Ihre Bildlaufleiste mit CSS anzupassen, gehen Sie zu Darstellung “ Anpassen.

Klicken Sie im WordPress-Customizer auf „Zusätzliche CSS“.

Sie können nun Ihren Code in den kleinen Editor eingeben, der erscheint.

Hier ist ein Beispiel für einen Code, der das Aussehen der Bildlaufleiste ändert:

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Sie können jeden gewünschten Code hinzufügen. Weitere Informationen zu CSS finden Sie in unserer vollständigen Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem WordPress-Theme.

Wenn Sie mit Ihrem Code zufrieden sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“. Sie können Ihr WordPress-Blog nun in einem WebKit-Browser besuchen, um Ihre Änderungen in Aktion zu sehen.

Bonus: Hinzufügen eines Scroll-to-Top-Effekts in WordPress

Neben der Erstellung einer benutzerdefinierten Bildlaufleiste können Sie auf Ihrer WordPress-Website auch einen „Scroll-to-top“-Effekt hinzufügen. Dies kann sehr hilfreich sein, wenn Sie längere Blogbeiträge haben und den Nutzern eine schnelle Möglichkeit bieten möchten, zum Anfang zurückzukehren.

Um diese Funktion hinzuzufügen, müssen Sie das WPFront Scroll Top-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung die Seite Einstellungen “ Nach oben scrollen im WordPress-Dashboard auf und aktivieren Sie das Kästchen „Aktiviert“, um den Effekt „Nach oben scrollen“ zu aktivieren.

Danach können Sie von hier aus den Scroll-Offset, die Schaltflächengröße, die Deckkraft, die Überblenddauer, die Scrolldauer und vieles mehr bearbeiten.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie haben nun erfolgreich einen Scroll-to-Top-Effekt zu Ihrer Website hinzugefügt. Ausführlichere Anweisungen finden Sie in unserem Tutorial über das Hinzufügen eines glatten Scroll-to-Top-Effekts in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Erstellen einer Landing Page in WordPress oder für unsere Expertenauswahl der besten Drag-and-Drop-Seitenersteller.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.