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.

Wichtige Überlegungen zu benutzerdefinierten Scrollleisten:

• Browserkompatibilität: Während moderne Browser wie Chrome, Safari und Edge (WebKit-basierte Browser für CSS) benutzerdefinierte Scrollleisten gut unterstützen, bieten andere möglicherweise nur begrenzte Anpassungsmöglichkeiten oder gar keine. Testen Sie Ihre Änderungen immer in verschiedenen Browsern, um eine konsistente Erfahrung zu gewährleisten.
• Einschränkungen auf Mobilgeräten: Auf Mobilgeräten werden herkömmliche Scrollleisten oft durch intuitive Touch-Gesten (Wischen) ersetzt. Das bedeutet, dass benutzerdefinierte Scrollleisten normalerweise nicht auf Smartphones oder Tablets angezeigt werden.
• Benutzererfahrung & Barrierefreiheit: Ihre Scrollleiste sollte Ihren Inhalt verbessern und nicht davon ablenken. Übermäßig auffällige oder schwer erkennbare Designs können die Benutzernavigation  negativ beeinflussen. Streben Sie subtile Anpassungen an, die zu Ihren Markenfarben passen und den Gesamtfluss Ihrer Website verbessern.
• Auswirkungen auf die Leistung: Obwohl im Allgemeinen minimal, kann das Hinzufügen von Plugins oder umfangreichem CSS die Ladezeit der Website  geringfügig beeinträchtigen. Wählen Sie optimierte Lösungen und halten Sie Ihren Code sauber, um eine gute Leistung aufrechtzuerhalten.
• Testen ist entscheidend: Unabhängig von der gewählten Methode sollten Sie Ihre benutzerdefinierte Scrollleiste gründlich auf verschiedenen Browsern, Geräten und Bildschirmgrößen testen, um sicherzustellen, dass sie effektiv funktioniert.

Richtig gemacht, kann dieses WordPress-Designelement Ihrer Website diesen zusätzlichen professionellen Touch verleihen und gleichzeitig eine hervorragende Benutzerfreundlichkeit beibehalten.

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)

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 unter Verwendung der ::-webkit-scrollbar Pseudo-Elemente (wie im folgenden Beispiel) ermöglicht es Ihnen, viele Teile des Elements anzupassen.

Diese spezifischen CSS-Regeln funktionieren jedoch hauptsächlich in WebKit-basierten Desktop-Browsern wie Chrome, Safari und dem neuen Microsoft Edge.

Das bedeutet, dass Ihre benutzerdefinierte Scrollleiste in anderen Browsern (wie Firefox) oder auf den meisten mobilen Geräten möglicherweise nicht angezeigt wird oder anders aussieht.

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.

Häufig gestellte Fragen zum Hinzufügen einer benutzerdefinierten Scrollleiste in WordPress

Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen einer benutzerdefinierten Scrollleiste in WordPress gestellt haben:

Wie füge ich eine Scrollleiste in WordPress hinzu?

Sie können eine Scrollleiste hinzufügen, indem Sie benutzerdefiniertes CSS oder ein Plugin wie Advanced Scrollbar verwenden, das scrollbare Inhaltsbereiche innerhalb von Beiträgen, Seiten oder Widgets in WordPress ermöglicht.

Wie füge ich einen Slider in WordPress ein?

Sie können einen Slider einfügen, indem Sie ein Slider-Plugin wie Soliloquy verwenden, Ihren Slider erstellen und ihn dann mit einem Block zu einer Seite hinzufügen. Weitere Informationen finden Sie in unserem Tutorial zum Erstellen eines responsiven Sliders in WordPress.

Was ist das beste Slider-Plugin für WordPress?

Soliloquy ist das beste WordPress-Slider-Plugin, da es anfängerfreundlich, flexibel ist und gut mit den meisten Themes und Page Buildern funktioniert.

Wie erstelle ich ein benutzerdefiniertes Banner?

Sie können OptinMonster verwenden, um mit seinen vorgefertigten Vorlagen ein benutzerdefiniertes Banner zu erstellen. Das Plugin ermöglicht es Ihnen auch, den Inhalt vollständig anzupassen, CTAs hinzuzufügen und verschiedene Farben nach Ihren Wünschen zu verwenden. Detaillierte Anweisungen finden Sie in unserem Tutorial zum Erstellen eines Banners in WordPress.

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.