Möchten Sie eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen? Das Ändern des Erscheinungsbilds der Bildlaufleiste kann Ihnen dabei helfen, sich besonders abzuheben, wenn Sie ein benutzerdefiniertes Design für Ihre Website erstellen.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen. Wir zeigen Ihnen zwei Lösungen und Sie können die für Sie am besten geeignete auswählen.
Probleme mit benutzerdefinierten Scrollbar-Farben
CSS enthält standardmäßig keinen Regelsatz, mit dem Sie die Eigenschaften der Bildlaufleiste ändern können. Es gibt einige Vorschläge, dies hinzuzufügen, aber sie werden derzeit von den meisten Browsern nicht unterstützt.
Um dies zu umgehen, verwenden Designer und Entwickler browserspezifische PSeduo-Elemente oder JavaScript, um das standardmäßige Erscheinungsbild der Bildlaufleiste zu überschreiben.
Wir zeigen Ihnen beide Techniken. Beachten Sie jedoch, dass Sie Ihre Website mit verschiedenen Browsern und Geräten testen müssen, um sicherzustellen, dass sie auf allen Browsern ordnungsgemäß funktioniert.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie benutzerdefinierte Scrollbar-Farben in WordPress hinzufügen.
Methode 1. Fügen Sie eine benutzerdefinierte Bildlaufleiste in WordPress mit einem Plugin hinzu
Diese Methode ist einfacher und wird für die meisten Benutzer empfohlen. Es unterstützt jedoch keine mobilen Browser.
Zuerst müssen Sie das installieren und aktivieren Erweiterte Bildlaufleiste Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie zu . gehen Einstellungen » Benutzerdefinierte Farblaufleisteneinstellungen Seite zum Konfigurieren des Plugins.
Von hier aus können Sie die Farbe der Bildlaufleiste und die Hintergrundfarben der Bildlaufleiste ändern. Sie können dann den Maus-Scroll-Schritt auswählen, bei dem es sich um die Scroll-Geschwindigkeit des Mausrads handelt.
Sie können auch auswählen, ob Sie die Bildlaufleiste automatisch ausblenden oder immer anzeigen möchten.
Sie haben die Möglichkeit, die Option „Nur Cursor“ auszuwählen, die die Bildlaufleiste, aber nicht die Schaltfläche anzeigen würde.
Darunter finden Sie Optionen zum Einstellen der Scroll-Geschwindigkeit, zum Ändern der Schienenausrichtung (links oder rechts) und zum Aktivieren des Berührungsverhaltens.
Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.
Sie können jetzt Ihre Website besuchen, um Ihre benutzerdefinierten Farben für die Bildlaufleiste in Aktion zu sehen.
Methode 2. Fügen Sie mit CSS benutzerdefinierte Scrollbar-Farben in WordPress hinzu
Diese Methode verwendet CSS, um Ihre Bildlaufleiste zu gestalten, was schneller ist als die Verwendung von jQuery.
Es funktioniert jedoch nur auf Desktop-Browsern, die die WebKit-Rendering-Engine wie Google Chrome, Safari, Opera und mehr verwenden.
Es hat keine Auswirkungen auf mobile Browser oder Firefox und Edge auf Desktop-Computern.
Sie müssen Ihrem WordPress-Theme das folgende benutzerdefinierte CSS hinzufügen.
::-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; }
Fühlen Sie sich frei, Farben und andere CSS-Eigenschaften zu ändern.
Wenn Sie zufrieden sind, vergessen Sie nicht, Ihre Änderungen zu speichern. Danach können Sie es in einem unterstützten Browser in der Vorschau anzeigen.
So sah es auf unserer Demo-Website aus, während es in Google Chrome auf einem Mac-Computer angezeigt wurde.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine benutzerdefinierte Bildlaufleiste in WordPress hinzufügen. Vielleicht möchten Sie auch unsere Anleitung zum einfachen Erstellen eines benutzerdefinierten WordPress-Themes lesen, ohne Code zu schreiben.