WordPress : comment supprimer l’espace blanc (overflow) sur le coté de votre page
Lorsque vous gérez un site WordPress, l’apparence est cruciale. Un problème fréquent est cet espace blanc ennuyeux qui déborde sur les pages de votre site, appelé « overflow » ou débordement. Découvrez 3 méthodes pour résoudre ce problème rapidement pour avoir un site responsive !
Sommaire
ToggleAvant de plonger dans la solution, comprenons ce qu’est cet espace blanc gênant. L’overflow se produit lorsque le contenu dépasse les limites de la fenêtre du navigateur, créant cet espace vide non désiré.
3 solutions pour éliminer l’Espace Blanc sur WordPress
1. Trouver l’élement qui déborde
En effet, la première solution consiste à chercher d’où vient le problème. Une image trop grande ? Un bouton trop décalé ? Il suffit de vérifier quel élément dépasse de votre page web créant ainsi cette marge blanche.
Une fois le fameux coupable trouvé, il suffit de réduire sa taille, augmenter la marge (padding) aux deux extrémités gauche et droite ou toute autre solution qui vous vient en-tête. Cependant si vous ne voulez pas toucher à l’esthétique de votre page, la deuxième solution va mieux vous convenir.
Ici le problème est dù à l'ombre de cet élement :
2. Masquer le débordement de la section sur Elementor
Eh oui, le constructeur de page Elementor a une option parfaite pour ce type de problème. Il suffit de modifier la page avec élementor puis de sélectionner chaque section et aller dans la mise en page de ces dernières ! Vous trouverez une option nommée « débordement » il faudra choisir l’option « masquée ».
Si malgré vos efforts l’espace blanc est toujours présent il faudra passer aux grands moyens !
3. Utiliser du CSS pour forcer la fonction Overflow Hidden pour se débarrasser de la marge blanche
En effet, comme indiquer sur la vidéo nous allons ici se retrouver dans la Personnalisation du thème puis dans CSS additionnel. L’objectif ici est de ciblée la page qu’on souhaite modifiée en retrouvant son Id puis en l’ajoutant au code suivant :
#post-ID body{
width: 100%;
overflow: hidden !important;
}
Ce bout de code va nous permettre de masquer le débordement de la page séléctionnée.
Pour retrouver CSS additionnel suivez les étapes suivantes :
1. Aller dans Personnaliser
2. Puis scroller plus bas et cliquer sur CSS additionnel
Réponses aux questions
- Pourquoi devrais-je m’inquiéter de l’overflow sur mon site? L’overflow peut altérer l’apparence de votre site et nuire à l’expérience utilisateur. Il est essentiel de le résoudre pour maintenir une présentation esthétiquement plaisante.
- Que faire si les étapes suggérées ne résolvent pas le problème? Si les étapes fournies ne résolvent pas le problème d’overflow, vous pouvez nous joindre pour résoudre le problème.
Les problèmes d’overflow affectent-ils le référencement de mon site? Bien que l’overflow lui-même n’ait pas d’impact direct sur le référencement, une présentation esthétique peut influencer l’expérience utilisateur, un facteur important pour les moteurs de recherche.
Votre site wordpress à seulement 600€
Si vous êtes actuellement entrain de créer votre site, alors sachez que nous proposons de créer votre site web avec toutes les fonctionnalités nécessaires à partir de 600€ seulement !
Découvrez nos réalisations.
Conclusion
Enfin en suivant ces étapes simples, vous pouvez dire adieu à l’espace blanc indésirable sur votre site WordPress. Gardez une esthétique sans faille pour offrir une expérience utilisateur optimale. N’oubliez pas de tester régulièrement votre site pour détecter tout problème potentiel. Optimisez votre site, attirez plus de visiteurs et offrez-leur une expérience visuelle exceptionnelle .