Schnelle Möglichkeiten zum Erstellen einer benutzerdefinierten Bildlaufleiste in WordPress

Man kann mit Sicherheit sagen, dass Sie aus irgendeinem Grund möchten, dass Ihre Website auffällt. Mit einer solchen Plattform wird sichergestellt, dass das, was Sie präsentieren, länger im Gedächtnis des Besuchers bleibt, und das ist fast ausschließlich eine gute Sache. Neben den Inhalten Ihrer Website ist eine weitere Möglichkeit, die Aufmerksamkeit auf Ihr Produkt zu lenken, der visuelle Aspekt. Dabei handelt es sich keineswegs um neue Erkenntnisse. Es gibt einen Grund, warum McDonald's rot und gelb und Facebook blau ist. Hier werden wir jedoch über einen kleinen Teil der Erfahrung sprechen, die Ihre Website bietet. Es ist ein Teil, das vielleicht nicht allzu wichtig erscheint, aber wir glauben, dass es immer noch seinen Wert hat – die Bildlaufleiste. In den folgenden Zeilen lernen Sie einige schnelle Möglichkeiten zum Erstellen einer benutzerdefinierten Bildlaufleiste in WordPress kennen.

Einfache Möglichkeiten zum Erstellen einer benutzerdefinierten Bildlaufleiste in WordPress

Das Erstellen einer benutzerdefinierten Bildlaufleiste ist ein wesentlicher Schritt beim Erstellen eines benutzerdefinierten Designs für Ihre Website. Wenn Sie also daran interessiert sind, Ihre Website in jeder Hinsicht hervorzuheben, lassen Sie uns Ihnen die erste Methode vorstellen, mit der Sie diese Bildlaufleiste einzigartig machen können.

Fügen Sie eine benutzerdefinierte Bildlaufleiste in WordPress mit einem Plugin hinzu

Wie bei den meisten Dingen, die Sie in WordPress tun möchten, ist die Verwendung eines Plugins als Mittel zum Erstellen einer eleganten Bildlaufleiste ein guter Weg. Der Grund, warum diese Methode für die meisten Benutzer sehr zu empfehlen ist, ist ihre Einfachheit. Mit ein paar einfachen Klicks sehen Sie eine Bildlaufleiste, die Ihrem Stil entspricht. Dennoch ist es erwähnenswert, einen kleinen Fehler zu erwähnen, der mit dieser Methode einhergeht. Dieses Plugin unterstützt nämlich keine mobilen Browser. Wenn dies jedoch kein großer Verlust zu sein scheint, fahren Sie mit dem Lesen fort.

Zunächst müssen Sie das Advanced Scrollbar-Plugin installieren und aktivieren . Diese Aktion ist einfach genug:

1. Besuchen Sie die Plugins und gehen Sie dann zur Seite „Neu hinzufügen“ in Ihrem WordPress-Adminbereich. Geben Sie den Namen des besagten Plugins in die Suchleiste ein und drücken Sie die Eingabetaste.
2. Sobald Sie das Plugin gefunden haben, klicken Sie auf die Schaltfläche „Jetzt installieren“. WordPress lädt dann das Plugin herunter und installiert es für Sie. Danach können Sie feststellen, dass sich die Schaltfläche „Jetzt installieren“ in die Schaltfläche „Aktivieren“ geändert hat.
3. Klicken Sie auf die Schaltfläche „Aktivieren“ und Sie können loslegen.

Nachdem Sie das erforderliche Plugin installiert und aktiviert haben, müssen Sie es konfigurieren. Während dieses Wort einschüchternd klingen mag, ist der Prozess super einfach. Gehen Sie einfach zu Einstellungen > Benutzerdefinierte Farb-Scrollbar-Einstellungen. Sobald Sie dort angekommen sind, können Sie die Farbe Ihrer Bildlaufleiste sowie die Hintergrundfarben der Schiene ändern. Sie können dann den Maus-Scroll-Schritt auswählen, der die Scroll-Geschwindigkeit des Mausrads wäre. Das Tolle an diesem Plugin ist auch, dass Sie auswählen können, ob Sie die Bildlaufleiste automatisch ausblenden oder immer anzeigen möchten.

Sie haben auch die Möglichkeit, die Option „Nur Cursor“ auszuwählen, wodurch die Bildlaufleiste ohne die Schaltfläche angezeigt wird. Darunter finden Sie Optionen zum Einstellen der Bildlaufgeschwindigkeit, zum Ändern der Schienenausrichtung (links oder rechts) und zum Aktivieren des Berührungsverhaltens.

Nachdem Sie alle Optionen durchgegangen sind, mit Farben gespielt und gefunden haben, welche Kombination am besten zu Ihrem Stil und Ihren Vorlieben passt, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um all diese Arbeit zu speichern. Anschließend können Sie Ihre Website besuchen, um diese wunderschönen benutzerdefinierten Bildlaufleistenfarben in Aktion zu sehen.

Fügen Sie mithilfe von CSS benutzerdefinierte Bildlaufleistenfarben in WordPress hinzu

Wie Sie dem Untertitel entnehmen können, verwendet diese Methode CSS, um Ihre Bildlaufleiste zu gestalten. Diese Methode hat sich schneller bewährt als die, bei der Sie jQuery verwenden. Es ist jedoch wichtig zu erwähnen, dass es nur auf Desktop-Browsern funktioniert, die WebKit-Rendering-Engines wie Google Chrome, Safari und Opera verwenden. Es wird leider keine Auswirkungen auf mobile Browser oder Firefox und Edge auf Desktop-Computern haben. Wenn dies die Option ist, für die Sie sich entscheiden möchten, finden Sie hier die Vorgehensweise.

Beginnen Sie, indem Sie zu Themen > Benutzerdefinierte Seite gehen. Diese Aktion startet die WordPress-Theme-Customizer-Oberfläche. Sie können die Live-Vorschau Ihrer Website mit einer Reihe von Optionen auf der linken Ebene Ihres Bildschirms sehen . Fahren Sie fort, indem Sie im linken Bereich auf die Registerkarte Zusätzliches CSS klicken. Die Registerkarte zeigt Ihnen gerne ein einfaches Feld, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können. Sobald Sie eine gültige CSS-Regel hinzufügen, wird diese auf das Live-Vorschaufenster Ihrer Website angewendet. Was diese gültige CSS-Regel betrifft, sollten Sie Folgendes hinzufügen, damit Ihre Bildlaufleiste für Änderungen anfällig ist:

::-webkit-scrollbar {

-webkit-erscheinungsbild: keine ;

}

::-webkit-scrollbar {

Breite: 10px;

}

::-webkit-scrollbar-track {

Hintergrund: #ffb400 ;

borger : 1px solid #ccc ;

}

::-webkit-scrollbar-thumb {

Hintergrund: #cc00ff ;

borger : 1px solid #eee ;

Höhe: 100px;

Randradius: 5px ;

}

::-webkit-scrollbar-thumb:hover {

Hintergrund: blau ;

Denken Sie daran, dass jedes benutzerdefinierte CSS, das Sie mit dem Design-Anpasser hinzufügen, nur mit diesem bestimmten Design verfügbar ist. Wenn Sie ein Design ändern, aber diese benutzerdefinierte Bildlaufleiste beibehalten möchten, müssen Sie diese CSS-Regel mit derselben Methode kopieren und in Ihr neues Design einfügen.

Obwohl dies ein großartiges Mittel ist, um Ihre Website hervorzuheben, müssen wir einen Nachteil der Erstellung einer benutzerdefinierten Bildlaufleiste in WordPress erwähnen. CSS enthält nämlich standardmäßig keinen Regelsatz, mit dem Sie die Eigenschaften der Bildlaufleiste ändern können. Es gibt einige Vorschläge, diese Option hinzuzufügen, aber sie werden derzeit von den meisten Browsern nicht unterstützt. Um dieses Problem zu umgehen, verwenden Designer und Entwickler browserspezifische Pseudoelemente oder JavaScrip, um das standardmäßige Erscheinungsbild der Bildlaufleiste zu überschreiben. Das sind die Techniken, die wir Ihnen beschrieben haben. Sie müssen jedoch bedenken, dass Sie Ihre Website mit verschiedenen Browsern und Geräten testen müssen, um sicherzustellen, dass sie auf allen Browsern so funktioniert, wie Sie es sich vorgestellt haben. Sobald Sie das abgedeckt haben, können Sie mit Sicherheit sagen, dass Sie wissen, wie man eine benutzerdefinierte Bildlaufleiste in WordPress erstellt.