Comment ajouter une barre de défilement personnalisée à n'importe quel élément dans WordPress

De petites touches de design peuvent faire une énorme différence dans l'aspect professionnel de votre site web.

Les barres de défilement personnalisées sont l'un de ces détails que la plupart des visiteurs ne remarqueront pas consciemment, mais ils ressentiront certainement la cohérence visuelle améliorée lors de la navigation dans votre contenu.

La bonne nouvelle est que la personnalisation des barres de défilement dans WordPress ne nécessite pas de compétences avancées en codage, et les résultats peuvent vraiment améliorer l'expérience utilisateur globale de votre site.

D'après notre expérience dans la création de sites WordPress, nous avons constaté que les barres de défilement personnalisées aident à créer cet aspect soigné et intentionnel qui distingue les sites pour débutants des sites professionnels.

Nous allons vous montrer 2 méthodes simples pour ajouter des barres de défilement personnalisées à n'importe quel élément de votre site WordPress. Chaque méthode que nous aborderons a été testée dans des scénarios réels, vous pouvez donc choisir l'approche qui correspond le mieux à votre niveau de confort.

Quand ajouter une barre de défilement à des éléments spécifiques dans WordPress ?

L'ajout d'une barre de défilement pour les éléments WordPress peut grandement améliorer l'expérience utilisateur de votre site.

Mais quand devriez-vous utiliser cette fonctionnalité de conception WordPress ?

Voici quelques éléments WordPress courants qui peuvent bénéficier de barres de défilement personnalisées :

• Menus de navigation – Parfait pour les blogs avec plus de 20 catégories et sous-catégories qui s'étendraient autrement sur toute la page.
• Widgets de la barre latérale – Idéal pour les barres latérales riches en contenu où vous souhaitez conserver tous les widgets sans compromettre l'espace.
• Descriptions de produits – Maintient les détails longs des produits tout en conservant une mise en page épurée.
• Sections de commentaires – Affiche proprement des centaines de commentaires sans surcharger la page.
• Galeries d'images – Présente plusieurs images dans une galerie tout en maintenant l'accessibilité.

Dans cette optique, nous vous présenterons deux options pour ajouter une barre de défilement personnalisée à n'importe quel élément de votre site Web WordPress.

Nous vous recommandons de choisir l'option 1 si vous débutez avec votre site et que vous souhaitez utiliser un constructeur de pages avec une fonctionnalité de barre de défilement personnalisée. En effet, si vous utilisiez déjà un thème différent, vous devrez changer de thème pour cette méthode.

D'autre part, si vous aimez votre thème actuel, vous pouvez opter pour l'option 2 pour ajouter une barre de défilement personnalisée à l'aide de code CSS. Ne vous inquiétez pas, nous détaillerons le processus étape par étape afin qu'il soit facile à suivre pour tout le monde.

Vous pouvez utiliser les liens rapides ci-dessous pour accéder à votre méthode préférée :

• Option 1 : Utiliser un constructeur de pages avec des barres de défilement personnalisées spécifiques aux éléments (sans code)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Option 1 : Utiliser un constructeur de pages avec des barres de défilement personnalisées spécifiques aux éléments (sans code)

Une façon d'ajouter une barre de défilement personnalisée dans un élément spécifique est d'utiliser un constructeur de pages avec une fonctionnalité de barre de défilement. De cette façon, vous pouvez facilement personnaliser la barre de défilement sans toucher à aucun code.

Pour cette méthode, nous utiliserons Thrive Architect. En plus d'une fonctionnalité de barre de défilement, Thrive Architect propose plus de 300 modèles pour créer rapidement des pages d'aspect professionnel et des fonctionnalités de contenu dynamique pour personnaliser l'expérience de vos visiteurs.

De plus, nous avons trouvé que l'interface glisser-déposer était conviviale, ce qui la rend idéale pour les nouveaux utilisateurs de WordPress. Pour un examen plus détaillé de cet outil, consultez notre avis sur Thrive Architect.

Bien que Thrive Architect ne propose pas de version gratuite, vous pouvez utiliser notre code de réduction Thrive Themes spécial pour économiser jusqu'à 50 % sur votre achat initial.

Étape 1 : Configurer Thrive Architect et Thrive Themes

Pour commencer, nous devons installer le plugin Thrive Architect. Vous pouvez y accéder en vous connectant à votre compte sur le site Web de Thrive Themes.

Ensuite, téléchargez et installez le plugin Thrive Product Manager. Si vous avez besoin d'aide, consultez notre guide sur l'installation de plugins WordPress pour débutants.

Après avoir activé le plugin, accédez à Product Manager dans votre tableau de bord WordPress.

Cliquez sur « Se connecter à mon compte » pour lier votre site WordPress à votre compte Thrive Themes.

Vous devriez maintenant voir une liste des produits Thrive Themes disponibles dans votre compte.

Trouvez « Thrive Architect » et cochez la case « Installer le produit ».

Faites défiler vers le bas pour trouver « Thrive Theme Builder » et sélectionnez l'option « Installer le thème ».

Ensuite, cliquez sur « Installer les produits sélectionnés ». Cette étape est nécessaire car Thrive Architect fonctionne avec Thrive Theme Builder.

L'écran suivant affichera Thrive Product Manager en train d'installer et d'activer Thrive Theme Builder.

Une fois terminé, sélectionnez « Accéder au tableau de bord du Theme Builder ».

Il est maintenant temps de sélectionner un design de base pour votre site en utilisant la bibliothèque de thèmes de Thrive.

Si vous n'êtes pas sûr du choix, utilisez le bouton « Aperçu » pour voir à quoi ressemble chaque thème. Une fois que vous avez décidé, cliquez sur « Choisir ».

Vous entrerez maintenant dans l'assistant du Theme Builder.

Cet assistant vous guidera dans le téléchargement de votre logo, la sélection des couleurs de votre marque pour votre thème et la configuration de diverses structures et modèles de thème.

Assurez-vous de terminer l'assistant de configuration avant de passer à l'étape suivante.

Étape 2 : Ajoutez un élément de boîte de contenu à votre thème

Ajoutons maintenant un élément de boîte de contenu à votre thème WordPress, qui dispose de la fonctionnalité de barre de défilement par défaut.

Dans Thrive Themes, une boîte de contenu est un bloc que vous pouvez utiliser comme conteneur pour regrouper plusieurs blocs. Cela peut être utile si vous avez besoin qu'un ensemble d'éléments soit stylisé de la même manière ou géré comme un groupe.

Pour cet exemple, nous allons ajouter une boîte de contenu qui contient une longue liste de catégories d'articles de blog. Dans ce scénario, nous voulons pouvoir afficher toutes les catégories dans la barre latérale sans la rendre excessivement longue.

Tout d'abord, visitez n'importe quelle page ou publication sur votre blog WordPress où vous souhaitez que la barre de défilement apparaisse.

Ensuite, dans la barre d'administration supérieure, cliquez sur « Modifier le modèle de thème [nom] » ou « Modifier avec Thrive ».

Vous devriez maintenant arriver dans l'interface d'édition de Thrive Architect. Pour ajouter le bloc de boîte de contenu, cliquez sur le signe « + » sur le côté droit de la page et sélectionnez l'élément « Boîte de contenu ».

Ensuite, faites-le glisser et déposez-le où vous souhaitez placer l'élément avec la barre de défilement.

Vous pouvez maintenant ajouter d'autres éléments de contenu à la boîte de contenu. Par exemple, vous pouvez cliquer à nouveau sur le signe « + » et y ajouter le bloc « Texte ». Ensuite, vous pouvez taper le texte de votre choix.

Thrive Themes propose des tonnes d'éléments visuels, des plus basiques comme le texte et les images aux formulaires et tableaux de prix.

Comme nous voulons ajouter une liste de catégories à la barre latérale, nous allons également ajouter l'élément « Liste stylisée dynamique » à la boîte de contenu.

Ce bloc extrait des données de votre site Web pour afficher dynamiquement une liste, telle que des catégories, des étiquettes ou des auteurs. Le bloc se mettra automatiquement à jour au fur et à mesure que vous construirez votre site Web.

Une fois que vous avez fait glisser et déposé la liste de style dynamique dans la zone de contenu, cliquez sur le bouton « Sélectionner le type de liste ».

Ensuite, cliquez sur « Liste des catégories ».

Désormais, votre liste de catégories, votre bloc de texte et tous les autres éléments que vous ajoutez à la zone de contenu se trouvent dans le même conteneur.

Et comme vous pouvez le voir, la liste est assez longue, c'est pourquoi nous voulons y ajouter une barre de défilement.

Étape 3 : Activer la barre de défilement dans la zone de contenu

Si vous sélectionnez ce conteneur et cliquez sur la flèche bleue à gauche, vous verrez de nombreuses options pour personnaliser votre zone de contenu.

Les paramètres pour ajouter une barre de défilement se trouvent dans l'onglet « Mise en page et position ». C'est ici que vous pouvez ajuster le remplissage, la marge, la largeur, la hauteur, l'alignement, etc. de la boîte.

La première chose que nous avons faite a été de cliquer sur la flèche blanche à l'intérieur de la zone de remplissage bleue, juste en dessous de la section « Marges et remplissage ». Nous l'avons fait uniquement pour nous assurer que la zone de contenu s'aligne avec le reste des éléments de la barre latérale.

N'hésitez pas à explorer d'autres options ici pour vous assurer que votre boîte est bien proportionnée.

Ensuite, faisons défiler vers le bas jusqu'à la section Hauteur. Cliquez sur le bouton « Max » et changez la hauteur en pixels pour un nombre beaucoup plus petit. Dans ce cas, nous sommes passés de 617px à 300px.

Cela rendra la zone de contenu beaucoup plus courte, faisant disparaître les noms des catégories dans la section inférieure.

Une fois cela fait, descendez à nouveau dans le panneau et ouvrez l'onglet « Avancé ». Sélectionnez ensuite « Défilement » dans les paramètres de débordement et activez l'option « Style barre de défilement ».

Une barre de défilement devrait être automatiquement ajoutée à votre bloc de zone de contenu.

Et c'est tout pour l'ajout d'une barre de défilement personnalisée avec Thrive Architect. Vous pouvez continuer à modifier votre thème WordPress, votre page ou votre article, ou cliquer sur « Enregistrer le travail » en bas pour publier vos modifications.

Voici à quoi ressemble notre barre de défilement sur le site de démonstration :

Option 2 : Utiliser du code CSS pour ajouter une barre de défilement personnalisée à un élément spécifique

Si modifier votre thème WordPress et utiliser un constructeur de pages pour créer une barre de défilement personnalisée vous semble trop compliqué, vous pouvez utiliser du code CSS à la place. Cette méthode vous permet de personnaliser la barre de défilement directement sur votre page WordPress.

Ne vous inquiétez pas si vous débutez avec les extraits de code. Nous vous guiderons étape par étape, ce qui vous permettra d'activer facilement cette fonctionnalité sur votre site WordPress.

Tout d'abord, comprenons comment fonctionne le CSS. CSS signifie Cascading Style Sheets (feuilles de style en cascade). C'est un langage qui indique aux navigateurs web comment afficher les éléments sur une page web. Dans notre cas, nous utiliserons le CSS pour ajouter et styliser une barre de défilement personnalisée.

Pour utiliser du CSS personnalisé, nous avons besoin de deux choses :

1. Une classe CSS : C'est comme une étiquette nominative pour un élément de votre page. Nous l'ajoutons à l'élément que nous voulons modifier.
2. Du code CSS : C'est l'ensemble des instructions qui indiquent au navigateur comment styliser l'élément avec la classe CSS.

Donc, pour ajouter une barre de défilement personnalisée, nous allons d'abord donner une classe CSS à l'élément que nous voulons modifier. Ensuite, nous ajouterons du code CSS qui crée la barre de défilement pour les éléments ayant cette classe. 

Vous ajouterez la classe CSS scroll-bar à votre élément. Nous vous montrerons comment faire ci-dessous. Et voici l'extrait de code CSS complet qui ajoutera la barre de défilement :

.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 */
}

Étape 1 : Ajoutez la classe CSS à votre élément

Il existe plusieurs façons d'ajouter une classe CSS à un élément sur votre site WordPress.

Si vous utilisez l'éditeur de blocs ou l'éditeur complet de site, vous pouvez simplement cliquer sur n'importe quel bloc sur votre page, article ou modèle de thème de bloc. Ensuite, dans la barre latérale des paramètres du bloc, ouvrez l'onglet « Avancé » et insérez votre classe CSS dans le champ « Classes CSS supplémentaires ».

Une fois terminé, cliquez simplement sur Mettre à jour, Publier ou Enregistrer.

Si vous utilisez un thème classique, ce processus fonctionne également avec l'éditeur de widgets basé sur des blocs. Allez dans Apparence » Widgets, et cliquez sur le bloc que vous souhaitez ajouter la classe CSS.

Après cela, vous verrez le même onglet Avancé dans la barre latérale des paramètres du bloc. Entrez simplement la classe CSS dans le champ « Classes CSS supplémentaires » comme précédemment.

Étape 2 : Ajouter le code CSS à votre thème

Maintenant, ajoutons notre code CSS personnalisé. Nous vous montrerons 3 façons de le faire : en utilisant le personnalisateur de thème, l'éditeur de site complet et WPCode.

La première option est pour les utilisateurs de thèmes classiques. De plus, c'est une fonctionnalité intégrée, vous n'avez donc pas besoin d'un plugin pour insérer le code ni même ouvrir vos fichiers de thème.

Pour ce faire, vous pouvez ouvrir le personnalisateur de thème WordPress en allant dans Apparence » Personnaliser.

Remarque : Si vous ne voyez pas ce paramètre sur votre WordPress, vous utilisez probablement un thème basé sur des blocs et pouvez utiliser la méthode suivante à la place. Pour plus d'informations, consultez notre guide sur comment corriger le personnalisateur de thème manquant dans WordPress.

Méthode 1 : Ajouter du CSS aux thèmes classiques

Dans le personnalisateur, trouvez et cliquez sur « CSS supplémentaire ».

Ici, collez simplement le code que nous vous avons montré précédemment.

Vous verrez automatiquement les modifications sur votre thème une fois que vous aurez ajouté le code.

Comme vous pouvez le voir, l'élément auquel vous avez ajouté la classe CSS a maintenant une barre de défilement. Ensuite, vous pouvez simplement cliquer sur « Publier ».

Méthode 2 : Ajouter du CSS à l'aide de l'éditeur de site complet

Si vous avez un thème bloc, vous devrez ajouter du code CSS en utilisant l'éditeur complet du site, puis allez simplement dans Apparence » Éditeur.

Vous trouverez quelques options de menu pour personnaliser votre thème bloc.

Ici, cliquez sur « Styles ».

Sur cette page, il devrait y avoir des designs de thèmes blocs parmi lesquels choisir.

Nous allons simplement ignorer cela et cliquer sur le bouton « Modifier ». Il a la forme d'un crayon.

Vous êtes maintenant dans l'interface d'édition.

Dans le panneau latéral droit, cliquez sur le menu à trois points à côté de l'icône des révisions et sélectionnez « CSS additionnel ».

Maintenant, il vous suffit de coller l'extrait de code de tout à l'heure. Vous devriez voir vos modifications automatiquement.

Une fois terminé, cliquez sur « Enregistrer ».

Un inconvénient de l'utilisation du personnaliseur de thème et de l'éditeur complet du site pour insérer votre CSS est que si vous décidez de mettre à jour ou de changer votre thème, vous risquez de perdre votre personnalisation CSS.

C'est pourquoi nous recommandons d'utiliser WPCode pour modifier le CSS de votre site, surtout si vous utilisez l'éditeur complet du site et un thème basé sur des blocs. Vous pouvez suivre cette méthode ci-dessous, et elle fonctionnera également avec les thèmes classiques.

Méthode 3 : Ajouter du CSS avec WPCode

Si vous avez peur de personnaliser votre site en utilisant du code, alors WPCode est la solution parfaite pour vous. Ce plugin d'extraits de code permet d'insérer du code personnalisé en toute sécurité, car vous n'aurez pas besoin d'interagir directement avec les fichiers de votre thème.

En cas d'erreur, WPCode détectera et désactivera automatiquement le code à l'origine du problème. Ainsi, il y a très peu de chances que vous cassiez votre site.

Tout d'abord, installez le plugin WPCode sur votre site Web. Vous pouvez consulter notre guide pour débutants sur comment installer un plugin WordPress pour plus d'informations.

Ensuite, allez dans Extraits de code » + Ajouter un extrait dans votre tableau de bord WordPress. Choisissez ‘Ajouter votre code personnalisé (Nouvel extrait)’ et cliquez sur ‘+ Ajouter un extrait personnalisé’.

Maintenant, donnez un nom à votre nouvel extrait de code personnalisé. Il peut s'agir de quelque chose de simple comme ‘Barre de défilement CSS’.

Après cela, changez le Type de code en ‘Extrait CSS’.

Dans la boîte Aperçu du code, collez l'extrait que nous vous avons montré précédemment.

Une fois terminé, faites défiler la page jusqu'à la section « Insertion ». Assurez-vous que la méthode d'insertion est « Insertion automatique » et que l'emplacement est « En-tête du site ».

Une fois cela fait, basculez simplement le bouton en haut à droite pour qu'il affiche « Actif » et cliquez sur « Enregistrer l'extrait ».

Vous devriez maintenant voir une barre de défilement sur l'élément auquel vous avez ajouté la classe CSS.

Voici un exemple où nous ajoutons une barre de défilement à une liste d'articles récents :

Comment ajouter une barre de défilement personnalisée à un élément de menu avec plusieurs sous-menus

L'une des choses qui intéressent les lecteurs est la façon d'ajouter la barre de défilement à votre élément de menu de navigation qui a une longue liste de sous-menus.

Le processus est en fait assez similaire à celui que nous venons de vous montrer. Mais il y a quelques petites modifications ici et là en fonction du thème que vous utilisez.

Si vous utilisez un thème classique, vous ne devez ajouter la classe scroll-bar qu'à votre élément de menu principal. Vous n'avez pas besoin de l'ajouter à vos éléments de sous-menu.

Pour ajouter une classe CSS à votre menu, vous pouvez ouvrir le personnalisateur de thème.

Ensuite, cliquez sur le bouton « Menus ».

Ensuite, cliquez sur l'icône d'engrenage « Paramètres », puis sélectionnez « Classes CSS ».

Cela vous permet d'ajouter une classe CSS à chaque élément de menu.

Maintenant, descendez dans le panneau latéral.

Ensuite, ouvrez votre menu principal.

À ce stade, vous pouvez sélectionner l'élément de menu auquel vous souhaitez ajouter la classe CSS et cliquer pour le développer.

Il devrait y avoir un champ appelé « Classes CSS », et vous pouvez y ajouter la classe.

Par ailleurs, vous devez vous assurer d'ajouter la classe sub-menu après chaque mention de la classe scroll-bar dans votre code CSS, comme ceci :

.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 */

Voici à quoi devrait ressembler le menu de navigation :

Le même principe s'applique aux thèmes de blocs.

Il vous suffit d'ajouter la classe scroll-bar à votre élément de menu principal, pas aux sous-menus.

Maintenant, voici où les choses diffèrent. Vous devez visiter votre site Web WordPress et ouvrir l'outil d'inspection de votre navigateur.

Pour les utilisateurs de Chrome, faites simplement un clic droit sur votre élément de menu avec des sous-menus et sélectionnez « Inspecter ».

Sur votre clavier, appuyez sur CTRL/Commande + F pour activer la fonction Rechercher. Ensuite, localisez le code HTML <ul></ul> qui contient la classe scroll-bar.

Le code exact sera différent d'un thème à l'autre, mais voici à quoi ressemble le nôtre :

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

Vous saurez que vous sélectionnez la bonne ligne de code si tous les éléments du sous-menu sont mis en surbrillance.

Maintenant, vous voulez copier toutes ces classes CSS entre class=" et ">.

Dans le code CSS, remplacez la classe scroll-bar par toutes ces classes et un point (.) avant pour indiquer qu'il s'agit d'une classe. Il est également bon d'ajouter !important à chaque ligne qui personnalise la barre de défilement pour vous assurer que le thème ne remplace pas ces paramètres.

Voici un exemple :

.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 */

Une fois que vous avez ajouté ce code, votre menu de navigation devrait ressembler à ceci :

Comment personnaliser le design de la barre de défilement personnalisée

Maintenant que vous avez ajouté une barre de défilement personnalisée, vous voudrez peut-être qu'elle corresponde au design de votre site Web. Vous pouvez facilement modifier l'apparence de la barre de défilement à l'aide de CSS. Voyons comment personnaliser sa taille, sa couleur et sa forme.

Supposons que vous souhaitiez modifier la hauteur maximale de l'élément auquel vous ajoutez une barre de défilement. Dans ce cas, vous pouvez modifier le nombre dans max-height: en haut par le nombre de votre choix, tant qu'il est en pixels.

Vous pouvez également ajuster le nombre dans width: pour rendre la largeur de l'élément avec la barre de défilement plus large ou plus étroite.

Pour ajuster la taille de la barre de défilement, recherchez la ligne width: 10px; sous le sélecteur .scroll-bar::-webkit-scrollbar.

Augmentez ce nombre pour rendre la barre de défilement plus large, ou diminuez-le pour la rendre plus étroite. Par exemple, width: 15px; créera une barre de défilement plus large, tandis que width: 5px; la rendra plus fine.

Pour changer la couleur de la barre de défilement, recherchez la ligne qui dit background: grey; sous le sélecteur .scroll-bar::-webkit-scrollbar-thumb.

Remplacez 'grey' par la couleur de votre choix, comme 'blue' ou toute couleur utilisant le code hexadécimal de couleur (par exemple, #0000FF).

Si vous souhaitez rendre la barre de défilement plus arrondie, recherchez la propriété border-radius.

Plus le nombre est élevé, plus les coins seront arrondis. Essayez de changer border-radius: 15px; en border-radius: 20px; pour un aspect plus arrondi, ou border-radius: 0px; pour des coins nets.

Notez que les modifications ci-dessus n'affecteront que les navigateurs basés sur Webkit comme Chrome et Safari.

Pour Firefox, vous devrez ajuster la propriété scrollbar-color. La première couleur est pour la poignée (la partie que vous faites glisser), et la seconde est pour la piste (l'arrière-plan). Par exemple, scrollbar-color: blue #eaeaea créera une barre de défilement bleue sur une piste gris clair dans Firefox.

Après avoir effectué ces modifications, enregistrez votre CSS et actualisez votre page WordPress pour voir la nouvelle barre de défilement personnalisée en action. N'hésitez pas à expérimenter avec différentes couleurs et tailles jusqu'à ce que vous trouviez le look parfait pour votre site web.

Apprenez d'autres façons d'améliorer la conception de votre site web WordPress

Maintenant que vous avez appris à ajouter des barres de défilement personnalisées à votre site WordPress, pourquoi ne pas explorer d'autres façons d'améliorer la conception et la fonctionnalité de votre site web ? Voici quelques guides utiles pour faire passer vos compétences WordPress au niveau supérieur :

• Si vous cherchez à présenter vos pages d'une manière visuellement attrayante, consultez notre tutoriel sur comment afficher facilement une liste de pages avec des miniatures dans WordPress.
• Pour les blogs avec beaucoup de contenu, le défilement infini peut grandement améliorer l'expérience utilisateur. Apprenez comment ajouter cette fonctionnalité étape par étape.
• Pour ajouter une touche visuelle, essayez d'ajouter un effet de parallaxe à votre thème WordPress. C'est plus facile que vous ne le pensez.
• Pour une meilleure accessibilité, envisagez d'ajouter un redimensionneur de police à votre site. Nous avons un guide simple pour vous aider à faire exactement cela.
• Si vous n'êtes pas satisfait de la position actuelle de votre barre latérale, nous pouvons vous montrer comment changer le côté de la barre latérale dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de défilement personnalisée à n'importe quel élément de votre site WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de thèmes WordPress et notre guide sur comment ajouter une barre de progression de lecture dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.