Wenn es ein Wort gibt, das Sie mit WordPress verbinden würden, wäre es „Anpassbarkeit“. Dafür sind alle Kernfunktionen, Plugins und Themes da – um das Erscheinungsbild und das Verhalten Ihrer Website zu formen und sie Ihren Wünschen und Bedürfnissen anzupassen. Aus diesem Grund können Sie großartige Dinge tun, z. B. die Farben der Website anpassen, verschiedene Elemente wie Preislisten hinzufügen und im Allgemeinen die Dinge verwenden, die Sie benötigen, um die Website aussehen zu lassen und die Rolle zu spielen, die Sie sich vorstellen.
Es gibt natürlich einige anpassbare Elemente, die die Leute übersehen. Die Bildlaufleiste, die Leiste in Ihrem Browser, die sich beim Scrollen einer Seite bewegt und Sie schneller durch lange Seiten navigieren lässt, ist eine davon. Wenn Sie möchten, dass die Besucher Ihrer Website eine Bildlaufleiste erhalten, die zumindest dem Farbschema Ihrer Website entspricht, können Sie dies tun.
In diesem Artikel zeigen wir Ihnen:
Wenn Sie darüber nachdenken, Ihrer WordPress-Website eine benutzerdefinierte Bildlaufleiste hinzuzufügen, Die beiden wichtigsten Optionen, die Sie haben, sind die Auswahl eines Plugins oder die Anpassung der Bildlaufleiste mit CSS. Beide Optionen haben ihre Vor- und Nachteile, die Ihre Wahl beeinflussen können.
Wenn Sie das Plugin verwenden, um eine benutzerdefinierte Bildlaufleiste hinzuzufügen, erstellen Sie eine dauerhafte Änderung – solange das Plugin installiert ist. Es ist ganz einfach, ein Plugin zu installieren und mit den Einstellungen herumzuspielen, bis Sie gefunden haben, was für Sie am besten funktioniert.
Der Nachteil der Verwendung des Plugins ist, dass es Ihre Website verlangsamen kann. Selbst wenn es nur Millisekunden sind, summieren sich diese tendenziell, wenn Sie genug von diesen kleinen und scheinbar belanglosen Plugins verwenden.
Sie werden jedoch keine Geschwindigkeitsprobleme haben, wenn Sie CSS verwenden. Sie müssen nichts installieren – Sie können alle Änderungen über den Auftritt Kunde unter vornehmen Darstellung > Anpassen > Zusätzliches CSS. Der Code ist auch nicht allzu schwer zu erlernen. Der Customizer zeigt Ihnen die Änderungen in Echtzeit an, was ein netter Bonus ist.
Das Problem bei dieser Methode besteht jedoch darin, dass Sie bei einem Theme-Update riskieren, Ihre Anpassungen zu verlieren. Aus diesem Grund wird im Allgemeinen empfohlen, ein untergeordnetes Thema zu verwenden, wenn Sie diese Art von Änderungen vornehmen.
Es gibt einige kostenlose Plugins, mit denen Sie Ihrer WordPress-Website eine benutzerdefinierte Bildlaufleiste hinzufügen können. Wir werden die verwenden Scroll-Styler Plugin, da Sie bis zu vier Farben auf Ihrer Bildlaufleiste einstellen können. Gehe rüber zu Plugins > Neu hinzufügen, suchen Sie nach „Scroll Styler“ und installieren und aktivieren Sie ihn auf Ihrer Website.
Gehen Sie nach der Installation des Plugins zu Einstellungen > Scroll-Styler um auf die Plugin-Optionen zuzugreifen. Die beiden obersten sind die Breite der Bildlaufleiste und das Auffüllen der Bildlaufleiste. Der erste der beiden ändert die Breite Ihrer Bildlaufleiste in Pixel. Der zweite ändert die Polsterung um den Scrollbar-Daumen.
Mit den nächsten vier Optionen können Sie die verschiedenen Farben für die Bildlaufleiste einstellen. Die Hintergrundfarbe der Bildlaufleistenspur ist die Farbe der Bildlaufleistenspur und ändert sich nicht. Die Farbe des Daumens hingegen schon. „Hintergrundfarbe“ ist die Farbe des Daumens, wenn er nicht aktiv ist. Wenn Sie mit dem Cursor über den Daumen fahren, ändert sich seine Farbe in „Hover-Hintergrundfarbe“. Wenn Sie den Daumen drücken, um die Seite zu scrollen, ändert sie ihre Farbe in „aktive Hintergrundfarbe“.
Mit der letzten Option können Sie den Randradius der Bildlaufleiste einstellen. Auf diese Weise können Sie die Daumenecken effektiv abrunden.
Nachdem Sie die Optionen ausgewählt haben, vergessen Sie nicht, die Einstellungen zu speichern, und Sie werden die Änderung auf Ihrer Website sehen.
Auch wenn die Auswahl an Optionen, die das Plugin bietet, etwas bescheiden sein mag, kann es mehr als ausreichen, eine Bildlaufleiste zu erstellen, die zum Farbschema Ihrer Website passt.
Ihre zweite Möglichkeit wäre, benutzerdefiniertes CSS zu verwenden, um das Aussehen der Bildlaufleiste zu ändern. Wie bereits erwähnt, müssen Sie zu navigieren Darstellung > Anpassen > Zusätzliches CSS um irgendwelche Änderungen vorzunehmen.
Die Möglichkeit, benutzerdefiniertes CSS zum Ändern der Bildlaufleiste zu verwenden, besteht darin, Pseudoelemente zu verwenden, um bestimmte Teile der Bildlaufleiste anzupassen. Sie können anpassen:
Wenn Sie also eine benutzerdefinierte Bildlaufleiste erstellen möchten, können Sie diese Pseudoelemente wie folgt verwenden:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Dadurch wird die standardmäßige graue Bildlaufleiste in etwas umgewandelt, das besser zu diesem speziellen Thema passt.
Denken Sie daran, dass Sie Schatten hinzufügen, den Radius der Elemente ändern und zusätzliche Dinge tun können, um Ihre benutzerdefinierte Bildlaufleiste wirklich zu etwas Besonderem zu machen. Sie benötigen fortgeschrittene CSS-Kenntnisse, um diese Methode zum Anpassen der Bildlaufleiste in vollem Umfang nutzen zu können. Andererseits, wenn Sie genügend Zeit haben und bereit sind, durch Ausprobieren zu lernen, werden Sie sicherlich einige interessante Kombinationen finden.
Lass es uns einwickeln!
Die Bildlaufleiste – ein nützliches Element, das oft übersehen wird, wenn es darum geht, das Aussehen Ihrer Website anzupassen. Wenn dies ein Fehler ist, den Sie korrigieren möchten, haben Sie zwei Möglichkeiten, dies zu tun – entweder mit einem Plugin oder durch Hinzufügen von benutzerdefiniertem CSS. Jeder der beiden hat seine Vor- und Nachteile. Daher kann es ratsam sein, zu prüfen, welche Browser Ihr Publikum am häufigsten verwendet, bevor Sie die Wahl treffen. Danach müssen Sie nur noch an den Optionen oder dem Code herumbasteln, bis Sie zufriedenstellende Ergebnisse erhalten.
Unterstützen Sie unsere Arbeit ❤️
Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.
