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 !

Avant 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 :

problème espace blanc ou marge blanche ou overflow déborde de la page web

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 ».

Wordpress : comment supprimer l'espace blanc (overflow) sur le coté de votre page : fonction débordement masquer sur élementor, overflow hidden

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 :

bouton personnaliser sur WordPress

1. Aller dans Personnaliser

Css additionnel thème astra WordPress

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 .

Panier