Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hinzufügen einer benutzerdefinierten Bildlaufleiste in WordPress

Haben Sie bemerkt, dass einige Websites diese eleganten, individuell angepassten Bildlaufleisten haben, die perfekt zu ihren Markenfarben passen? 🤩

Auch uns ist diese Funktion aufgefallen. Und viele unserer Benutzer haben uns gefragt, wie sie diese auffälligen individuellen Scrollbars auf ihren eigenen WordPress Websites erstellen können.

Die gute Nachricht? Das Anpassen Ihrer WordPress-Scrollbar ist viel einfacher, als Sie vielleicht denken. Ganz gleich, ob Sie die Farben Ihrer Marke anpassen, die Navigation verbessern oder Ihrer Website einen professionellen Touch verleihen möchten, wir zeigen Ihnen genau, wie Sie das machen können. Keine Programmiererfahrung erforderlich!

Adding a custom scrollbar in WordPress

Was Sie wissen sollten, bevor Sie eine individuelle Bildlaufleiste hinzufügen 💡.

Sie möchten also Ihre WordPress-Scrollbar individuell anpassen. Doch bevor Sie loslegen, sollten Sie ein paar wichtige Dinge wissen, um sicherzustellen, dass Sie die richtige Entscheidung für Ihre WordPress-Website treffen.

Erstens: Individuelle Bildlaufleisten sehen zwar toll aus, werden aber nicht von allen Browsern gleich dargestellt. Moderne Browser wie Chrome unterstützen sie gut, aber andere zeigen möglicherweise nur eine begrenzte oder gar keine individuelle Anpassung – insbesondere auf mobilen Geräten.

Der Schlüssel ist, subtil zu beginnen. Wir empfehlen immer, mit kleinen Anpassungen zu beginnen, die zum Farbschema Ihrer Marke passen, anstatt auffällige Vorlagen zu erstellen, die von Ihrem Inhalt ablenken könnten. Denken Sie daran: Ihre Bildlaufleiste sollte das Erlebnis des Benutzers verbessern, nicht ihm die Show stehlen.

Wenn es richtig gemacht wird, kann dieses WordPress-Design-Element Ihrer Website einen besonders professionellen Touch verleihen. Stellen Sie sicher, dass Sie Ihre Änderungen in verschiedenen Browsern testen, um ein einheitliches Erlebnis für alle Ihre Besucher zu gewährleisten.

Da Sie nun wissen, was Sie erwartet, sehen wir uns an, wie Sie Ihrer WordPress Website eine individuelle Bildlaufleiste hinzufügen können. Verwenden Sie einfach die unten stehenden Links, um zu der gewünschten Methode zu springen:

🔎 Möchten Sie individuelle Scrollbars zu bestimmten Elementen wie Boxen oder Seitenleisten hinzufügen? In unserer Anleitung erfahren Sie, wie Sie individuelle Bildlaufleisten zu jedem Element in WordPress hinzufügen können.

Option 1: Advanced Scrollbar Plugin verwenden (kostenlos + einfach)

Der einfachste Weg, die Bildlaufleiste in WordPress individuell anzupassen, ist die Verwendung der Advanced Scrollbar. Mit diesem kostenlosen Plugin können Sie die Breite der Bildlaufleiste, die Farbe, die Bildlaufgeschwindigkeit und vieles mehr ändern, ohne eine einzige Zeile Code schreiben zu müssen.

Als Erstes müssen Sie das Advanced Scrollbar-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Einstellungen “ Erweiterte Bildlaufleisteneinstellungen.

The Advanced Scrollbar WordPress plugin

Hier können Sie das Design der Bildlaufleiste ändern, wie z. B. das Farbschema und die Hintergrundfarbe der Leiste.

In der folgenden Abbildung haben wir eine blaue Bildlaufleiste erstellt.

An example of a custom scrollbar

Sie können auch den Mausbildlaufschritt ändern, indem Sie eine neue Zahl in das Feld „Mausbildlaufschritt“ eingeben.

Bei einem niedrigeren Wert wird der Bildlauf langsamer, bei einem höheren Wert schneller.

Changing the scrollbar speed in WordPress

Sie können auch festlegen, ob die Bildlaufleiste automatisch ausgeblendet werden soll, so dass sie nur erscheint, wenn der Besucher einen Bildlauf durchführt.

Dies kann nützlich sein, wenn Sie eine bunte Bildlaufleiste erstellt haben und befürchten, dass sie vom restlichen Inhalt ablenken könnte.

Hiding the WordPress scrollbar

Standardmäßig erscheint die Bildlaufleiste auf der rechten Seite des Browser-Fensters. Sie können sie jedoch mit den Einstellungen für „Schienenausrichtung“ auf die linke Seite verschieben, wenn Sie dies bevorzugen.

Wenn Sie mit der Konfiguration der Bildlaufleiste zufrieden sind, denken Sie daran, auf „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie können nun Ihren WordPress-Blog besuchen, um die individuell angepasste Bildlaufleiste in Aktion zu sehen.

Option 2: CSS-Rollbalken erstellen (Erweitert)

Wenn Sie weitergehende Änderungen an Ihrer Bildlaufleiste vornehmen möchten, können Sie auch CSS verwenden.

Wenn Sie eine individuelle Bildlaufleiste mit CSS erstellen, können Sie jeden Teil des Elements anpassen, aber es funktioniert nur auf Desktop-Browsern mit WebKit. Das bedeutet, dass Ihre Änderungen nicht in allen Browsern angezeigt werden, auch nicht in mobilen Browsern.

Um Ihre Bildlaufleiste mit CSS anzupassen, gehen Sie zu Darstellung “ Anpassen.

Hinweis: Wenn Sie ein Blockthema verwenden, steht Ihnen diese Option nicht zur Verfügung. In diesem Fall können Sie den Customizer öffnen, indem Sie die URL https://example.com/wp-admin/customize.php eintippen. Denken Sie daran, example.com durch den Domainnamen Ihrer eigenen Website zu ersetzen.

Weitere Informationen finden Sie in unserer Anleitung zur Behebung des fehlenden Theme Customizers im WordPress-Admin.

The WordPress customizer

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

Sie können nun Ihren Code in den kleinen Editor eingeben, der erscheint.

How to customize the scrollbar using the WordPress Customizer

Hier ist ein Beispiel für einen Code, der das Aussehen der Bildlaufleiste ändert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
::-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 gewünschten Code hinzufügen. Weitere Informationen zu CSS finden Sie in unserer vollständigen Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem WordPress-Theme.

Wenn Sie mit Ihrem Code zufrieden sind, klicken Sie einfach auf den Button „Veröffentlichen“. Sie können nun Ihre WordPress Website in einem WebKit Browser besuchen, um Ihre Änderungen in Aktion zu sehen.

An example of a custom scrollbar in WordPress

Bonus-Tipp: Einen Scroll-to-Top-Effekt in WordPress hinzufügen

Neben der Erstellung einer benutzerdefinierten Bildlaufleiste können Sie auf Ihrer WordPress-Website auch einen „Scroll-to-top“-Effekt hinzufügen. Dies kann sehr hilfreich sein, wenn Sie längere Blogbeiträge haben und den Nutzern eine schnelle Möglichkeit bieten möchten, zum Anfang zurückzukehren.

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

Rufen Sie nach der Aktivierung die Seite Einstellungen “ Nach oben scrollen im WordPress-Dashboard auf und aktivieren Sie das Kästchen „Aktiviert“, um den Effekt „Nach oben scrollen“ zu aktivieren.

Danach können Sie von hier aus den Scroll-Offset, die Schaltflächengröße, die Deckkraft, die Überblenddauer, die Scrolldauer und vieles mehr bearbeiten.

Edit the plugin settings for adding the scroll to top effect

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. Ausführlichere Anweisungen finden Sie in unserem Tutorial über das Hinzufügen eines glatten Scroll-to-Top-Effekts in WordPress.

Scroll to top button preview

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie eine individuelle Bildlaufleiste in WordPress hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Drag-and-drop Page-Builder für WordPress und unseren ultimativen Leitfaden zum Bearbeiten einer WordPress-Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13 KommentareLeave a Reply

  1. Marcos

    Thank you! The CSS is plug&play.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

  2. Luqman Essam

    THank You! It helped me!

    • WPBeginner Support

      Glad our guide was helpful! :)

      Admin

  3. Victor

    Is there any plugin for WP that will display sequential art as in a comic strip where installments can be posted on a weekly basis?

  4. ash

    it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own ;)

    ===

    ::-webkit-scrollbar {
    width: 14px;
    background-color: silver;
    }

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: silver;
    }

    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: #0099cc;
    }

    • Vas

      Excellent…The cleanest solution.
      It would be nice to post the code for Firefox…if there is such option.

      Thanks for sharing.

  5. Karen

    What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!

  6. Vernon Trent

    please correct your link to the plugin.
    there is a missing S in the url „pluginS“

  7. Guest

    Hi the link in the post seems broken may affect your site rank.
    Please place correct link for „Dewdrop Custom Scrollbar“ plugin.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.