So fügen Sie eine benutzerdefinierte Scrollleiste in WordPress hinzu

Haben Sie bemerkt, wie manche Websites diese eleganten, benutzerdefinierten Scrollbalken haben, die perfekt zu ihren Markenfarben passen? 🤩

Wir haben dieses Feature auch bemerkt. Und viele unserer Nutzer haben uns gefragt, wie sie diese auffälligen benutzerdefinierten Scrollbalken auf ihren eigenen WordPress-Websites erstellen können.

Die gute Nachricht? Das Anpassen Ihrer WordPress-Scrollleiste ist viel einfacher, als Sie vielleicht denken. Egal, ob Sie Ihre Markenfarben anpassen, die Navigation verbessern oder Ihrer Website einen professionellen Touch verleihen möchten, wir zeigen Ihnen genau, wie es geht. Keine Programmierkenntnisse erforderlich!

Was Sie wissen sollten, bevor Sie eine benutzerdefinierte Scrollleiste hinzufügen 💡

Sie sind also daran interessiert, Ihre WordPress-Scrollleiste anzupassen. Aber bevor Sie loslegen, gibt es ein paar wichtige Dinge, die Sie wissen sollten, um sicherzustellen, dass Sie die richtige Entscheidung für Ihre WordPress-Website treffen.

Erstens, obwohl benutzerdefinierte Scrollbalken fantastisch aussehen können, zeigen nicht alle Browser sie auf die gleiche Weise an. Moderne Browser wie Chrome unterstützen sie gut, aber andere zeigen möglicherweise nur begrenzte Anpassungsmöglichkeiten oder gar keine an – insbesondere auf Mobilgeräten.

Der Schlüssel ist, subtil zu beginnen. Wir empfehlen immer, mit kleineren Anpassungen zu beginnen, die zum Farbschema Ihrer Marke passen Farbschema, anstatt auffällige Designs zu erstellen, die von Ihren Inhalten ablenken könnten. Denken Sie daran: Ihre Scrollleiste sollte das Benutzererlebnis verbessern, nicht die Show stehlen.

Wenn dieses WordPress-Designelement richtig gemacht ist, kann es Ihrer Website diesen zusätzlichen professionellen Touch verleihen. Stellen Sie einfach sicher, dass Sie Ihre Änderungen in verschiedenen Browsern testen, um eine konsistente Erfahrung für alle Ihre Besucher zu gewährleisten.

Jetzt, da Sie wissen, was Sie erwartet, sehen wir uns an, wie Sie Ihrer WordPress-Website eine benutzerdefinierte Scrollleiste hinzufügen. Verwenden Sie einfach die Schnelllinks unten, um zu der Methode zu springen, die Sie verwenden möchten:

• Option 1: Verwenden Sie das Plugin „Advanced Scrollbar“ (kostenlos + einfach)
• Option 2: CSS-Scrollleiste erstellen (Erweitert)
• Bonustipp: Fügen Sie einen Scroll-to-Top-Effekt in WordPress hinzu

Option 1: Verwenden Sie das Plugin „Advanced Scrollbar“ (kostenlos + einfach)

Der einfachste Weg, die Scrollleiste in WordPress anzupassen, ist die Verwendung von Advanced Scrollbar. Dieses kostenlose Plugin ermöglicht es Ihnen, die Breite, Farbe, Scrollgeschwindigkeit und mehr der Scrollleiste zu ändern, ohne eine einzige Codezeile schreiben zu müssen.

Das erste, was Sie tun müssen, ist das Advanced Scrollbar Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins für Anfänger.

Nach der Aktivierung gehen Sie zu Einstellungen » Erweiterte Scrollbar-Einstellungen.

Hier können Sie das Scrollbar-Design ändern, wie z. B. das Farbschema und den Hintergrund Hintergrundfarbe.

Im folgenden Bild haben wir eine blaue Scrollleiste erstellt.

Sie können auch die Maussprungweite ändern, indem Sie eine neue Zahl in das Feld 'Maussprungweite' eingeben.

Eine niedrigere Zahl lässt Ihre Website langsamer scrollen, und eine höhere Zahl lässt sie schneller scrollen.

Sie können auch auswählen, ob Sie die Scrollleiste automatisch ausblenden möchten, sodass sie nur angezeigt wird, wenn der Besucher scrollt.

Dies kann nützlich sein, wenn Sie eine farbenfrohere Scrollleiste erstellt haben und befürchten, dass diese vom Rest Ihres Inhalts ablenken könnte.

Standardmäßig erscheint die Scrollleiste auf der rechten Seite des Browserfensters. Sie können sie jedoch mit den Einstellungen „Rail Align“ auf die linke Seite verschieben, wenn Sie dies bevorzugen.

Wenn Sie mit der Konfiguration der Scrollleiste zufrieden sind, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu sichern.

Sie können jetzt Ihren WordPress-Blog besuchen, um die benutzerdefinierte Scrollleiste in Aktion zu sehen.

Option 2: CSS-Scrollleiste erstellen (Erweitert)

Wenn Sie erweiterte Änderungen an Ihrer Scrollleiste vornehmen möchten, ist eine weitere Option die Verwendung von CSS.

Das Erstellen einer benutzerdefinierten Scrollleiste mit CSS ermöglicht es Ihnen, jeden Teil des Elements anzupassen, aber es funktioniert nur in Desktop-Browsern, die WebKit verwenden. Das bedeutet, dass Ihre Änderungen nicht in allen Browsern, einschließlich mobiler Browser, angezeigt werden.

Um Ihre Scrollleiste mit CSS anzupassen, gehen Sie zu Darstellung » Anpassen.

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

Sie können Ihren Code jetzt in den kleinen Editor einfügen, der erscheint.

Hier ist ein Beispiel für Code, der das Aussehen der Scrollleiste ä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 beliebigen Code hinzufügen. Weitere Informationen zu CSS finden Sie in unserem vollständigen Leitfaden zum einfachen 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 Ihre WordPress-Website jetzt in einem WebKit-Browser besuchen, um Ihre Änderungen in Aktion zu sehen.

Bonustipp: Fügen Sie einen Scroll-to-Top-Effekt in WordPress hinzu

Abgesehen davon, dass Sie eine benutzerdefinierte Scrollleiste erstellen, möchten Sie vielleicht auch einen Scroll-to-Top-Effekt auf Ihrer WordPress-Website hinzufügen. Dies kann sehr hilfreich sein, wenn Sie längere Blogbeiträge haben und den Benutzern eine schnelle Möglichkeit bieten möchten, wieder nach oben zu gelangen.

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

Nach der Aktivierung besuchen Sie die Seite Einstellungen » Scroll Top im WordPress-Dashboard und aktivieren Sie das Kontrollkästchen „Aktiviert“, um den Scroll-to-Top-Effekt zu aktivieren.

Danach können Sie hier den Scroll-Offset, die Button-Größe, die Deckkraft, die Fade-Dauer, die Scroll-Dauer und 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. Detailliertere Anweisungen finden Sie in unserem Tutorial zum Hinzufügen eines sanften Scroll-to-Top-Effekts in WordPress mit jQuery.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine benutzerdefinierte Scrollleiste in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl für die besten WordPress Drag-and-Drop-Seitenersteller und unseren ultimativen Leitfaden zum Bearbeiten einer WordPress-Website 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.