Comment désactiver le dépassement dans WordPress (supprimer le défilement horizontal)

Une barre de défilement horizontale apparaît lorsqu'un élément de cette page est trop large pour être affiché et dépasse l'écran. La plupart des thèmes WordPress n'utilisent pas le défilement horizontal car il peut perturber la mise en page de votre site et confondre les utilisateurs.

C'est frustrant pour vous en tant que propriétaire de site, et croyez-nous, c'est encore plus frustrant pour vos visiteurs qui essaient de naviguer dans votre contenu.

Heureusement, d'après notre expérience, désactiver le dépassement et supprimer cette barre de défilement est généralement simple et fait une grande différence dans l'apparence de votre site et sa facilité d'utilisation.

Dans cet article, nous vous montrerons comment désactiver facilement le dépassement dans WordPress et supprimer la barre de défilement horizontale. Nos instructions simples sont conviviales et faciles à suivre, même si vous n'êtes pas un expert en codage.

Qu'est-ce qui cause la barre de défilement horizontale ou le dépassement dans WordPress ?

Lors de la configuration de votre site Web WordPress, il est important de le rendre convivial et accessible à tous.

WordPress affichera une barre de défilement horizontale si un élément est plus large que la mise en page de votre site Web. C'est ce qu'on appelle le « dépassement ». Avoir une barre de défilement horizontale peut perturber votre conception et rendre votre site Web moins convivial.

Une page Web avec des barres de défilement horizontales et verticales peut également désorienter le visiteur et rendre la navigation difficile. Cela peut entraîner le départ des personnes de votre site, entraînant une baisse des conversions et des ventes.

Désactiver le dépassement rendra votre site plus convivial, créera une mise en page de largeur fixe et améliorera la réactivité globale de votre site.

Dans cette optique, examinons comment désactiver facilement la barre de défilement horizontal de débordement dans WordPress :

• Méthode 1 : Ajouter un extrait CSS via le personnaliseur de thème
• Méthode 2 : Ajouter un extrait CSS via WPCode
• Bonus : Ajouter une barre de défilement personnalisée dans WordPress

Méthode 1 : Ajouter un extrait CSS via le personnaliseur de thème

Vous pouvez désactiver le débordement dans WordPress en ajoutant simplement du code CSS dans l'option « CSS additionnel » du personnaliseur de thème.

Tout ce que vous avez à faire est de visiter la page Apparence » Personnaliser depuis le tableau de bord WordPress.

Une fois sur la page Personnaliser, cliquez sur l'onglet « CSS additionnel ».

Ensuite, copiez et collez simplement le code suivant :

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

Après cela, tout débordement sera supprimé, et vous pourrez le voir appliqué dans le panneau d'aperçu en direct de votre site web.

N'oubliez pas de cliquer sur le bouton « Publier » en haut de la page lorsque vous avez terminé !

Méthode 2 : Ajouter un extrait CSS via WPCode

Vous pouvez également ajouter le code CSS via un extrait de code en utilisant le plugin WPCode.

WPCode est le meilleur plugin d'extraits de code WordPress du marché, utilisé par plus d'un million de sites web.

Nous recommandons cette méthode car ce plugin permet d'ajouter facilement du code personnalisé à WordPress sans avoir à modifier les fichiers de votre thème.

Tout d'abord, installez et activez le plugin WPCode sur votre site web. Pour plus de détails, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, visitez la page Snippets de code » + Ajouter des snippets depuis le tableau de bord WordPress.

Ici, cliquez sur le bouton « + Ajouter un snippet personnalisé » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».

Ensuite, vous devez sélectionner « Snippet CSS » comme type de code dans la liste des options qui apparaissent à l'écran.

Maintenant, vous serez dirigé vers la page « Créer un snippet personnalisé », où vous pouvez commencer par entrer un titre pour votre snippet de code.

Ce nom ne sera pas affiché aux utilisateurs et sert uniquement à votre identification.

Après cela, copiez et collez le snippet de code CSS suivant dans la boîte « Aperçu du code » :

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

Une fois que vous avez fait cela, faites défiler vers le bas jusqu'à la section « Insertion », où vous trouverez deux options : « Insertion automatique » et « Shortcode ».

À partir de là, sélectionnez le mode « Insertion automatique » pour exécuter automatiquement votre code lors de l'activation.

Cependant, si vous souhaitez simplement désactiver la barre de défilement horizontale sur certaines pages spécifiques, vous pouvez sélectionner le mode « Shortcode ».

En faisant cela, WPCode vous fournira un shortcode lors de l'activation du snippet que vous pourrez coller sur une zone ou une page spécifique du site web pour supprimer le dépassement.

Une fois que vous avez choisi votre option, allez en haut de la page et basculez l'interrupteur de « Inactif » à « Actif » dans le coin supérieur droit.

Ensuite, cliquez simplement sur le bouton « Enregistrer le snippet ».

C'est tout ! Vous venez de supprimer toutes les barres de défilement de dépassement horizontal sur votre site.

Bonus : Ajouter une barre de défilement personnalisée dans WordPress

Une fois que vous avez désactivé la barre de défilement horizontale, vous pouvez également ajouter une barre de défilement personnalisée.

Par exemple, si votre site utilise une palette de couleurs spécifique correspondant aux couleurs de votre marque, vous pouvez utiliser cette même couleur pour votre barre de défilement. Cela sera visuellement attrayant et encouragera les utilisateurs à explorer votre site.

Pour créer une barre de défilement personnalisée, installez et activez le plugin Advanced Scrollbar. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, visitez la page Paramètres » Paramètres de la barre de défilement avancée depuis le tableau de bord WordPress. À partir de là, vous pouvez maintenant changer la couleur de la barre de défilement selon vos préférences.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres. Pour plus d'informations, consultez notre tutoriel sur comment ajouter une barre de défilement personnalisée dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment désactiver le débordement sur votre site WordPress. Vous voudrez peut-être aussi consulter nos sélections d'experts pour les meilleurs extraits de code à utiliser sur votre site WordPress et notre guide pour débutants sur comment supprimer le CSS inutilisé 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.