So fügen Sie eine benutzerdefinierte Scrollleiste zu jedem Element in WordPress hinzu

Kleine Design-Akzente können einen großen Unterschied darin machen, wie professionell Ihre Website aussieht.

Benutzerdefinierte Scrollbalken sind eines jener Details, die die meisten Besucher nicht bewusst wahrnehmen werden, aber sie werden definitiv die verbesserte visuelle Konsistenz beim Navigieren durch Ihre Inhalte spüren.

Die gute Nachricht ist, dass die Anpassung von Scrollleisten in WordPress keine fortgeschrittenen Programmierkenntnisse erfordert und die Ergebnisse die allgemeine Benutzererfahrung Ihrer Website wirklich verbessern können.

Aus unserer Erfahrung beim Erstellen von WordPress-Websites wissen wir, dass benutzerdefinierte Scrollleisten dazu beitragen, diesen polierten, durchdachten Look zu erzielen, der Anfänger-Websites von professionellen Websites unterscheidet.

Wir zeigen Ihnen 2 einfache Möglichkeiten, benutzerdefinierte Scrollbalken zu jedem Element auf Ihrer WordPress-Website hinzuzufügen. Jede Methode, die wir behandeln, wurde in realen Szenarien getestet, sodass Sie den Ansatz wählen können, der am besten zu Ihrem Komfortniveau passt.

Wann sollte man einer bestimmten Elementen in WordPress eine Scrollbar hinzufügen?

Das Hinzufügen einer Scrollleiste für WordPress-Elemente kann die Benutzererfahrung Ihrer Website erheblich verbessern.

Aber wann sollten Sie dieses WordPress-Designmerkmal verwenden?

Hier sind einige gängige WordPress-Elemente, die von benutzerdefinierten Scrollbalken profitieren können:

• Navigationsmenüs – Perfekt für Blogs mit über 20 Kategorien und Unterkategorien, die sonst die gesamte Seite einnehmen würden.
• Seitenleisten-Widgets – Ideal für inhaltsreiche Seitenleisten, in denen Sie alle Widgets beibehalten möchten, ohne Platz zu opfern.
• Produktbeschreibungen – Hält lange Produktdetails übersichtlich und sorgt für ein sauberes Layout.
• Kommentarbereiche – Zeigt Hunderte von Kommentaren übersichtlich an, ohne die Seite zu überladen.
• Bildergalerien – Zeigt mehrere Bilder in einer Galerie an und behält dabei die Barrierefreiheit bei.

In diesem Sinne zeigen wir Ihnen zwei Optionen, um jedem Element auf Ihrer WordPress-Website eine benutzerdefinierte Scrollleiste hinzuzufügen.

Wir empfehlen Option 1, wenn Sie gerade erst mit Ihrer Website beginnen und einen Page Builder mit benutzerdefinierter Scrollbalken-Funktionalität verwenden möchten. Das liegt daran, dass Sie, wenn Sie bereits ein anderes Theme verwenden, Ihr Theme ändern müssen, um diese Methode anzuwenden.

Wenn Sie Ihr aktuelles Theme mögen, können Sie mit Option 2 eine benutzerdefinierte Scrollleiste mit CSS-Code hinzufügen. Keine Sorge, wir werden den Prozess Schritt für Schritt aufschlüsseln, damit er für jeden leicht nachvollziehbar ist.

Sie können die folgenden Schnelllinks verwenden, um zu Ihrer bevorzugten Methode zu springen:

• Option 1: Verwenden Sie einen Page Builder mit elementbezogenen benutzerdefinierten Scrollbalken (ohne Code)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Option 1: Verwenden Sie einen Page Builder mit elementbezogenen benutzerdefinierten Scrollbalken (ohne Code)

Eine Möglichkeit, eine benutzerdefinierte Scrollleiste in einem bestimmten Element hinzuzufügen, ist die Verwendung eines Page Builders mit einer Scrollleistenfunktion. Auf diese Weise können Sie die Scrollleiste einfach anpassen, ohne Code anfassen zu müssen.

Für diese Methode verwenden wir Thrive Architect. Neben einer Scrollbar-Funktion bietet Thrive Architect über 300 Vorlagen, um schnell professionell aussehende Seiten zu erstellen, und dynamische Inhaltsfunktionen, um das Erlebnis Ihrer Besucher zu personalisieren.

Außerdem haben wir festgestellt, dass die Drag-and-Drop-Oberfläche benutzerfreundlich ist, was sie ideal für WordPress-Neulinge macht. Eine detailliertere Ansicht dieses Tools finden Sie in unserem Thrive Architect Testbericht.

Obwohl Thrive Architect keine kostenlose Version anbietet, können Sie unseren speziellen Thrive Themes Rabattcode verwenden, um bis zu 50% auf Ihren ersten Kauf zu sparen.

Schritt 1: Thrive Architect und Thrive Themes einrichten

Zuerst müssen wir das Thrive Architect Plugin installieren. Sie können darauf zugreifen, indem Sie sich auf der Thrive Themes Website in Ihr Konto einloggen.

Laden Sie als Nächstes das Thrive Product Manager Plugin herunter und installieren Sie es. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zum Installieren von WordPress-Plugins für Anfänger.

Navigieren Sie nach der Aktivierung des Plugins zum Produktmanager in Ihrem WordPress-Dashboard.

Klicken Sie auf „In mein Konto einloggen“, um Ihre WordPress-Site mit Ihrem Thrive Themes-Konto zu verknüpfen.

Sie sollten nun eine Liste der Thrive Themes-Produkte sehen, die in Ihrem Konto verfügbar sind.

Suchen Sie nach 'Thrive Architect' und aktivieren Sie das Kontrollkästchen 'Produkt installieren'.

Scrollen Sie nach unten, um „Thrive Theme Builder“ zu finden und wählen Sie die Option „Theme installieren“.

Klicken Sie dann auf „Ausgewählte Produkte installieren“. Dieser Schritt ist notwendig, da Thrive Architect mit Thrive Theme Builder zusammenarbeitet.

Der nächste Bildschirm zeigt die Installation und Aktivierung von Thrive Theme Builder durch Thrive Product Manager.

Wenn Sie fertig sind, wählen Sie „Zum Theme Builder Dashboard gehen“.

Jetzt ist es an der Zeit, ein Basisdesign für Ihre Website aus der Thrives Theme-Bibliothek auszuwählen.

Wenn Sie unsicher sind, welche Sie wählen sollen, verwenden Sie die Schaltfläche „Vorschau“, um zu sehen, wie jedes Thema aussieht. Sobald Sie sich entschieden haben, klicken Sie auf „Wählen“.

Sie gelangen nun zum Theme Builder Assistenten.

Dieser Assistent führt Sie durch das Hochladen Ihres Logos, die Auswahl von Markenfarben für Ihr Theme und die Einrichtung verschiedener Theme-Strukturen und Vorlagen.

Stellen Sie sicher, dass Sie den Einrichtungsassistenten abschließen, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Fügen Sie Ihrer Vorlage ein Inhaltsbox-Element hinzu

Fügen wir nun ein Inhaltsbox-Element zu Ihrem WordPress-Theme hinzu, das standardmäßig über die Scrollleistenfunktion verfügt.

In Thrive Themes ist eine Inhaltsbox ein Block, den Sie als Container verwenden können, um mehrere Blöcke zusammenzufassen. Dies kann praktisch sein, wenn Sie eine Gruppe von Elementen auf die gleiche Weise gestalten oder als Gruppe verwalten müssen.

Für dieses Beispiel fügen wir eine Inhaltsbox hinzu, die eine lange Liste von Blog-Kategorien enthält. In diesem Szenario möchten wir alle Kategorien in der Seitenleiste anzeigen können, ohne dass diese übermäßig lang wird.

Besuchen Sie zuerst eine beliebige Seite oder einen Beitrag auf Ihrem WordPress-Blog, auf dem der Scrollbalken angezeigt werden soll.

Klicken Sie dann in der oberen Admin-Symbolleiste auf „Theme-Vorlage [Name] bearbeiten“ oder „Mit Thrive bearbeiten“.

Sie sollten nun in der Bearbeitungsoberfläche von Thrive Architect ankommen. Um den Inhaltsblock hinzuzufügen, klicken Sie auf das '+'-Symbol auf der rechten Seite der Seite und wählen Sie das Element 'Content Box'.

Ziehen Sie es dann per Drag & Drop dorthin, wo das Element mit der Scrollleiste platziert werden soll.

Sie können nun weitere Inhaltselemente zur Inhaltsbox hinzufügen. Sie könnten zum Beispiel erneut auf das „+“-Zeichen klicken und den „Text“-Block hinzufügen. Dann könnten Sie beliebigen Text eingeben.

Thrive Themes bietet unzählige visuelle Elemente, von grundlegenden wie Text und Bildern bis hin zu Formularen und Preistabellen.

Da wir eine Liste von Kategorien zur Seitenleiste hinzufügen möchten, werden wir auch das Element 'Dynamisch gestylte Liste' zur Inhaltsbox hinzufügen.

Dieser Block ruft im Grunde Daten von Ihrer Website ab, um dynamisch eine Liste anzuzeigen, z. B. Kategorien, Tags oder Autoren. Der Block aktualisiert sich automatisch, während Sie Ihre Website erstellen.

Sobald Sie die dynamisch gestaltete Liste in die Inhaltsbox gezogen und abgelegt haben, klicken Sie auf die Schaltfläche 'Listentyp auswählen'.

Klicken Sie dann auf 'Kategorienliste'.

Jetzt sind Ihre Kategorieliste, Ihr Textblock und alle anderen Elemente, die Sie zur Inhaltsbox hinzufügen, im selben Container.

Und wie Sie sehen können, ist die Liste ziemlich lang, und deshalb möchten wir eine Bildlaufleiste hinzufügen.

Schritt 3: Scrollbalken in der Inhaltsbox aktivieren

Wenn Sie diesen Container auswählen und auf den blauen Pfeil auf der linken Seite klicken, sehen Sie viele Optionen, um Ihre Inhaltsbox anzupassen.

Die Einstellungen zum Hinzufügen einer Scrollleiste befinden sich im Tab „Layout & Position“. Hier können Sie den Abstand, Innenabstand, die Breite, Höhe, Ausrichtung usw. des Feldes anpassen.

Das Erste, was wir taten, war, auf den weißen Pfeil im blauen Auffüllbereich direkt unter dem Abschnitt „Ränder & Auffüllung“ zu klicken. Wir haben dies nur getan, um sicherzustellen, dass die Inhaltsbox mit den übrigen Elementen in der Seitenleiste übereinstimmt.

Erkunden Sie hier gerne weitere Optionen, um sicherzustellen, dass Ihre Box gut proportioniert aussieht.

Scrollen wir als Nächstes zum Abschnitt Höhe. Klicken Sie auf die Schaltfläche 'Max' und ändern Sie die Pixelhöhe auf eine viel kleinere Zahl. In diesem Fall sind wir von 617px auf 300px gegangen.

Dies macht die Inhaltsbox viel kürzer, sodass die Kategorienamen im unteren Bereich verschwinden.

Wenn das erledigt ist, gehen Sie wieder nach unten im Bedienfeld und öffnen Sie den Tab „Erweitert“. Wählen Sie dann unter „Überlauf“ die Option „Scrollen“ und aktivieren Sie die Option „Scrollleiste gestalten“.

Eine Scrollleiste sollte automatisch zu Ihrem Inhaltsblock hinzugefügt werden.

Und das war's für das Hinzufügen einer benutzerdefinierten Scrollleiste mit Thrive Architect. Sie können mit der Bearbeitung Ihres WordPress-Themes, Ihrer Seite oder Ihres Beitrags fortfahren oder unten auf „Save Work“ klicken, um Ihre Änderungen zu veröffentlichen.

So sieht unsere Scrollleiste auf der Demoseite aus:

Option 2: CSS-Code verwenden, um eine benutzerdefinierte Scrollleiste zu einem bestimmten Element hinzuzufügen

Wenn das Ändern Ihres WordPress-Themes und die Verwendung eines Page Builders zum Erstellen einer benutzerdefinierten Scrollleiste zu viel erscheint, können Sie stattdessen CSS-Code verwenden. Diese Methode ermöglicht es Ihnen, die Scrollleiste direkt auf Ihrer WordPress-Seite anzupassen.

Machen Sie sich keine Sorgen, wenn Sie neu im Umgang mit Code-Snippets sind. Wir führen Sie Schritt für Schritt durch den Prozess und machen es einfach, diese Funktion auf Ihrer WordPress-Website zu aktivieren.

Zuerst wollen wir verstehen, wie CSS funktioniert. CSS steht für Cascading Style Sheets. Es ist eine Sprache, die Webbrowsern sagt, wie Elemente auf einer Webseite angezeigt werden sollen. In unserem Fall werden wir CSS verwenden, um eine benutzerdefinierte Scrollleiste hinzuzufügen und zu gestalten.

Um benutzerdefiniertes CSS zu verwenden, benötigen wir zwei Dinge:

1. Eine CSS-Klasse: Das ist wie ein Namensschild für ein Element auf Ihrer Seite. Wir fügen dies dem Element hinzu, das wir ändern möchten.
2. CSS-Code: Dies ist die Anweisungssammlung, die dem Browser mitteilt, wie das Element mit der CSS-Klasse gestylt werden soll.

Um eine benutzerdefinierte Scrollleiste hinzuzufügen, geben wir zuerst dem Element, das wir ändern möchten, eine CSS-Klasse. Dann fügen wir CSS-Code hinzu, der die Scrollleiste für Elemente mit dieser Klasse erstellt. 

Sie fügen die CSS-Klasse scroll-bar zu Ihrem Element hinzu. Wir zeigen Ihnen unten, wie das geht. Und hier ist der vollständige CSS-Code-Schnipsel, der die Scrollleiste hinzufügt:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Schritt 1: Fügen Sie die CSS-Klasse zu Ihrem Element hinzu

Es gibt mehrere Möglichkeiten, einer Klasse zu einem Element auf Ihrer WordPress-Site hinzuzufügen.

Wenn Sie sich im Block-Editor oder im Full-Site-Editor befinden, können Sie einfach auf einen beliebigen Block auf Ihrer Seite, Ihrem Beitrag oder Ihrer Block-Theme-Vorlage klicken. Öffnen Sie dann in der Seitenleiste der Blockeinstellungen den Tab „Erweitert“ und fügen Sie Ihre CSS-Klasse in das Feld „Zusätzliche CSS-Klasse(n)“ ein.

Wenn Sie fertig sind, klicken Sie einfach auf Aktualisieren, Veröffentlichen oder Speichern.

Wenn Sie ein klassisches Theme verwenden, funktioniert dieser Prozess auch mit dem blockbasierten Widget-Editor. Gehen Sie zu Darstellung » Widgets und klicken Sie auf den Block, dem Sie die CSS-Klasse hinzufügen möchten.

Danach sehen Sie denselben Reiter „Erweitert“ in der Seitenleiste der Blockeinstellungen. Geben Sie einfach die CSS-Klasse in das Feld „Zusätzliche CSS-Klassen“ ein, wie zuvor.

Schritt 2: Fügen Sie den CSS-Code zu Ihrem Theme hinzu

Nun fügen wir unseren benutzerdefinierten CSS-Code hinzu. Wir zeigen Ihnen 3 Möglichkeiten, dies zu tun: über den Theme Customizer, den Full-Site-Editor und WPCode.

Die erste Option ist für Benutzer von klassischen Themes. Außerdem ist es eine integrierte Funktion, sodass Sie kein Plugin benötigen, um den Code einzufügen oder gar Ihre Theme-Dateien zu öffnen.

Um dies zu tun, können Sie den WordPress Theme Customizer öffnen, indem Sie zu Darstellung » Anpassen gehen.

Hinweis: Wenn Sie diese Einstellung in Ihrem WordPress nicht sehen, verwenden Sie wahrscheinlich ein Block-Theme und können stattdessen die nächste Methode verwenden. Weitere Informationen finden Sie in unserem Leitfaden, wie Sie fehlende Theme-Customizer in WordPress beheben.

Methode 1: CSS zu klassischen Themes hinzufügen

Suchen und klicken Sie im Customizer auf „Additional CSS“.

Fügen Sie hier einfach den Code ein, den wir Ihnen zuvor gezeigt haben.

Sie werden die Änderungen an Ihrem Theme automatisch sehen, sobald Sie den Code hinzugefügt haben.

Wie Sie sehen können, hat das Element, dem Sie die CSS-Klasse hinzugefügt haben, nun eine Scrollleiste. Dann können Sie einfach auf 'Veröffentlichen' klicken.

Methode 2: CSS mit dem Full-Site-Editor hinzufügen

Wenn Sie ein Block-Theme haben, müssen Sie CSS-Code über den Voll-Site-Editor hinzufügen und dann zu Darstellung » Editor gehen.

Sie finden einige Menüoptionen, um Ihr Block-Theme anzupassen.

Klicken Sie hier auf „Stile“.

Auf dieser Seite sollten einige Block-Theme-Designs zur Auswahl stehen.

Wir ignorieren das einfach und klicken auf die Schaltfläche „Bearbeiten“. Sie ist wie ein Bleistift geformt.

Sie befinden sich nun in der Bearbeitungsoberfläche.

Klicken Sie im rechten Bedienfeld auf das Drei-Punkte-Menü neben dem Revisionssymbol und wählen Sie 'Zusätzliches CSS'.

Fügen Sie nun einfach den Code-Schnipsel von vorhin ein. Sie sollten Ihre Änderungen automatisch sehen.

Wenn Sie fertig sind, klicken Sie auf „Speichern“.

Ein Nachteil bei der Verwendung des Theme-Customizers und des Full-Site-Editors zum Einfügen Ihres CSS ist, dass Sie beim Aktualisieren oder Ändern Ihres Themes Gefahr laufen, Ihre CSS-Anpassungen zu verlieren.

Deshalb empfehlen wir die Verwendung von WPCode zum Bearbeiten des CSS Ihrer Website, insbesondere wenn Sie den Full-Site-Editor und ein Block-basiertes Theme verwenden. Sie können diese Methode unten befolgen, und sie funktioniert auch mit klassischen Themes.

Methode 3: CSS mit WPCode hinzufügen

Wenn Sie Angst haben, Ihre Website mit Code anzupassen, dann ist WPCode die perfekte Lösung für Sie. Dieses Code-Snippet-Plugin ermöglicht das sichere Einfügen von benutzerdefiniertem Code, da Sie nicht direkt mit Ihren Theme-Dateien interagieren müssen.

Wenn ein Fehler auftritt, erkennt und deaktiviert WPCode den fehlerhaften Code automatisch. Auf diese Weise besteht nur ein minimales Risiko, dass Ihre Website beschädigt wird.

Installieren Sie zuerst das WPCode-Plugin auf Ihrer Website. Lesen Sie unseren Anfängerleitfaden unter so installieren Sie ein WordPress-Plugin für weitere Informationen.

Gehen Sie dann in Ihrem WordPress-Dashboard zu Code Snippets » + Snippet hinzufügen . Wählen Sie "Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)" und klicken Sie auf "+ Benutzerdefiniertes Snippet hinzufügen".

Geben Sie Ihrem neuen benutzerdefinierten Code-Snippet nun einen Namen. Es kann etwas Einfaches sein wie „CSS-Scrollleiste“.

Ändern Sie danach den Code-Typ zu 'CSS-Snippet'.

Fügen Sie im Feld „Code-Vorschau“ den von uns zuvor gezeigten Ausschnitt ein.

Wenn Sie fertig sind, scrollen Sie die Seite nach unten zum Abschnitt 'Einfügen'. Stellen Sie dort sicher, dass die Einfügemethode auf 'Automatisch einfügen' und der Speicherort auf 'Website-weit Header' eingestellt ist.

Wenn das erledigt ist, schalten Sie einfach den Schalter in der oberen rechten Ecke um, sodass dort 'Aktiv' steht, und klicken Sie auf 'Snippet speichern'.

Sie sollten nun eine Scrollleiste für das Element sehen, dem Sie die CSS-Klasse hinzugefügt haben.

Hier ist ein Beispiel dafür, wie wir einer Liste von aktuellen Beiträgen eine Scrollleiste hinzufügen:

So fügen Sie einem Menüpunkt mit mehreren Untermenüs einen benutzerdefinierten Scrollbalken hinzu

Eines der Dinge, über die Leser neugierig sind, ist, wie man den Scrollbalken zu seinem Navigationsmenüpunkt hinzufügt, der eine lange Liste von Untermenüs hat.

Der Prozess ist eigentlich ziemlich ähnlich zu dem, den wir Ihnen gerade gezeigt haben. Aber es gibt einige kleine Anpassungen hier und da, je nachdem, welches Theme Sie verwenden.

Wenn Sie ein klassisches Theme verwenden, sollten Sie die Klasse scroll-bar nur zu Ihrem Hauptmenüpunkt hinzufügen. Sie müssen sie nicht zu Ihren Untermenüpunkten hinzufügen.

Um Ihrer Navigation eine CSS-Klasse hinzuzufügen, können Sie den Theme-Customizer öffnen.

Klicken Sie dann auf die Schaltfläche „Menüs“.

Klicken Sie als Nächstes auf das Zahnradsymbol „Einstellungen“ und wählen Sie dann „CSS-Klassen“ aus.

Dies ermöglicht es Ihnen, jedem Menüpunkt eine CSS-Klasse hinzuzufügen.

Bewegen Sie sich nun im Seitenleistenbereich nach unten.

Öffnen Sie dann Ihr primäres Menü.

In diesem Schritt können Sie das Menüelement auswählen, dem Sie die CSS-Klasse hinzufügen möchten, und darauf klicken, um es zu erweitern.

Es sollte ein Feld namens 'CSS-Klassen' geben, und Sie können die Klasse dort hinzufügen.

Ansonsten sollten Sie sicherstellen, dass Sie die Klasse sub-menu nach jeder Erwähnung der Klasse scroll-bar in Ihrem CSS-Code hinzufügen, wie folgt:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Hier sollte das Navigationsmenü aussehen:

Das gleiche Prinzip gilt für Block-Themes.

Sie müssen nur die Klasse scroll-bar zu Ihrem Hauptmenüpunkt hinzufügen, nicht zu den Untermenüs.

Nun, hier unterscheiden sich die Dinge. Sie müssen Ihre WordPress-Website besuchen und das Inspektionstool Ihres Browsers öffnen.

Für Chrome-Benutzer klicken Sie einfach mit der rechten Maustaste auf Ihr Menüelement mit Untermenüs und wählen Sie 'Untersuchen'.

Drücken Sie auf Ihrer Tastatur STRG/Befehl + F, um die Suchfunktion zu aktivieren. Suchen Sie dann den HTML-Code <ul></ul>, der die Klasse scroll-bar enthält.

Der genaue Code unterscheidet sich von Theme zu Theme, aber hier ist, wie unserer aussieht:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Sie wissen, dass Sie die richtige Codezeile auswählen, wenn alle Untermenüelemente hervorgehoben sind.

Jetzt möchten Sie alle diese CSS-Klassen zwischen class=" und "> kopieren.

Ersetzen Sie im CSS-Code die Klasse scroll-bar durch all diese Klassen und setzen Sie einen Punkt (.) davor, um anzuzeigen, dass es sich um eine Klasse handelt. Es ist auch gut, !important zu jeder Zeile hinzuzufügen, die den Scrollbalken anpasst, um sicherzustellen, dass das Theme diese Einstellungen nicht überschreibt.

Hier ist ein Beispiel:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Sobald Sie diesen Code hinzugefügt haben, sollte Ihr Navigationsmenü wie folgt aussehen:

So passen Sie das Design des benutzerdefinierten Scrollbalkens an

Nachdem Sie nun eine benutzerdefinierte Scrollleiste hinzugefügt haben, möchten Sie sie vielleicht an das Design Ihrer Website anpassen. Sie können das Erscheinungsbild der Scrollleiste einfach mit CSS ändern. Schauen wir uns an, wie Sie Größe, Farbe und Form anpassen können.

Angenommen, Sie möchten die maximale Höhe des Elements ändern, dem Sie eine Scrollleiste hinzufügen. In diesem Fall können Sie die Zahl in max-height: am Anfang auf jede gewünschte Zahl ändern, solange sie in Pixeln angegeben ist.

Sie können auch die Zahl in width: anpassen, um die Breite des Elements mit der Scrollleiste breiter oder schmaler zu machen.

Um die Größe der Scrollleiste anzupassen, suchen Sie die Zeile width: 10px; unter dem Selektor .scroll-bar::-webkit-scrollbar.

Erhöhen Sie diese Zahl, um die Scrollleiste breiter zu machen, oder verringern Sie sie, um sie schmaler zu machen. Zum Beispiel erstellt width: 15px; eine breitere Scrollleiste, während width: 5px; sie dünner macht.

Um die Farbe der Scrollleiste zu ändern, suchen Sie die Zeile background: grey; unter dem Selektor .scroll-bar::-webkit-scrollbar-thumb.

Ersetzen Sie „grey“ durch eine beliebige Farbe, die Ihnen gefällt, z. B. „blue“ oder eine beliebige Farbe mit dem Hex-Farbfeld (z. B. #0000FF).

Wenn Sie die Scrollleiste runder gestalten möchten, suchen Sie nach der Eigenschaft border-radius.

Je höher die Zahl, desto abgerundeter sind die Ecken. Versuchen Sie, border-radius: 15px; in border-radius: 20px; für einen runderen Look oder border-radius: 0px; für scharfe Ecken zu ändern.

Beachten Sie, dass die obigen Änderungen nur Webkit-basierte Browser wie Chrome und Safari betreffen.

Für Firefox müssen Sie die Eigenschaft scrollbar-color anpassen. Die erste Farbe ist für den Daumen (den Teil, den Sie ziehen), und die zweite ist für die Spur (den Hintergrund). Zum Beispiel erstellt scrollbar-color: blue #eaeaea eine blaue Scrollleiste auf einer hellgrauen Spur in Firefox.

Nachdem Sie diese Änderungen vorgenommen haben, speichern Sie Ihr CSS und aktualisieren Sie Ihre WordPress-Seite, um die neue, angepasste Scrollleiste in Aktion zu sehen. Experimentieren Sie ruhig mit verschiedenen Farben und Größen, bis Sie das perfekte Aussehen für Ihre Website gefunden haben.

Erfahren Sie mehr Wege, um Ihr WordPress Webdesign zu verbessern

Jetzt, da Sie gelernt haben, wie Sie benutzerdefinierte Scrollbalken zu Ihrer WordPress-Website hinzufügen, warum erkunden Sie nicht andere Möglichkeiten, das Design und die Funktionalität Ihrer Website zu verbessern? Hier sind einige hilfreiche Anleitungen, um Ihre WordPress-Kenntnisse auf die nächste Stufe zu heben:

• Wenn Sie Ihre Seiten auf visuell ansprechende Weise präsentieren möchten, lesen Sie unsere Anleitung, wie Sie ganz einfach eine Seitenliste mit Thumbnails in WordPress anzeigen.
• Für Blogs mit vielen Inhalten kann unendliches Scrollen die Benutzererfahrung erheblich verbessern. Erfahren Sie, wie Sie diese Funktion Schritt für Schritt hinzufügen.
• Um etwas visuelles Flair hinzuzufügen, versuchen Sie, einen Parallax-Effekt zu Ihrem WordPress-Theme hinzuzufügen. Es ist einfacher, als Sie vielleicht denken.
• Für verbesserte Barrierefreiheit sollten Sie erwägen, eine Schriftgrößenänderung zu Ihrer Website hinzuzufügen. Wir haben eine einfache Anleitung, die Ihnen dabei hilft.
• Wenn Sie mit der aktuellen Position Ihrer Seitenleiste nicht zufrieden sind, können wir Ihnen zeigen, wie Sie die Seitenleiste in WordPress ändern.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie jedem Element auf Ihrer WordPress-Website eine benutzerdefinierte Scrollleiste hinzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WordPress Theme Builder und unseren Leitfaden zum Thema Hinzufügen einer Lesefortschrittsleiste in WordPress.

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.