Comment ajouter ou supprimer de l'espace entre les blocs WordPress 

Vous avez créé une page dans WordPress et quelque chose semble étrange. Deux blocs sont trop éloignés, ou un espace ne se ferme pas, peu importe combien de fois vous définissez la marge à zéro.

J'ai vu de nombreux débutants lutter avec des pages qui semblent « étranges » sans réaliser que le problème vient de l'espacement. Trop d'espace donne une impression de déconnexion, trop peu semble encombré.

Vous pouvez ajouter ou supprimer de l'espace entre les blocs dans WordPress vous-même, avec ou sans code. Je vais vous montrer d'abord comment trouver d'où vient un espace, puis comment le corriger avec SeedProd, l'éditeur de blocs, l'espacement des blocs ou un peu de CSS.

Pourquoi ajouter ou supprimer de l'espace entre les blocs WordPress

La plupart des pages à l'aspect désordonné que l'on m'a demandé de corriger n'ont pas de problème de police ou de couleur. Elles ont un problème d'espacement.

L'espace blanc n'est pas un espace perdu. C'est ce qui aide les gens à se concentrer sur votre contenu et à comprendre le flux de votre page.

La plupart des thèmes WordPress ajoutent leur propre remplissage ou marges par défaut, ce qui peut rendre les sections inégales. Ajuster ces espaces vous donne plus de contrôle sur la façon dont chaque partie de votre page se connecte.

Des recherches montrent que l'espace blanc peut améliorer la compréhension de près de 20 %. Cela signifie que quelques petits ajustements d'espacement peuvent rendre votre contenu plus facile à lire et plus agréable à parcourir.

Voici pourquoi vous pourriez vouloir affiner l'espacement de vos blocs :

• Regrouper le contenu lié pour une meilleure clarté.
• Séparer les différentes sections pour améliorer le flux.
• Rendre les pages plus faciles à lire et à naviguer.

Trouver d'où vient l'espace

Avant de changer quoi que ce soit, découvrez d'où vient réellement l'espace. La plupart des problèmes d'espacement remontent à l'un des quelques endroits, et corriger le mauvais est la raison pour laquelle les espaces ne bougent pas.

Je commence toujours par la Vue Liste, car un bloc Espaceur oublié est le coupable plus souvent que n'importe quel réglage de thème. Voici l'ordre dans lequel je vérifie les choses :

• Vérifiez le bloc au-dessus de l'espace : Cliquez dessus et regardez sa marge inférieure et son remplissage sous Dimensions.
• Vérifiez le bloc ci-dessous : Cliquez dessus et vérifiez sa marge supérieure et son remplissage.
• Ouvrez la Vue Liste : Recherchez un bloc Espaceur superflu ou un paragraphe vide que vous pouvez supprimer.
• Vérifiez le bloc parent : Si les blocs se trouvent à l'intérieur d'un bloc Groupe ou Colonnes, sélectionnez le parent et regardez son Espacement des blocs.
• Éliminez votre thème : Si l'éditeur semble correct mais que la page en direct ne l'est pas, l'espace provient du CSS du thème. Faites un clic droit sur l'espace sur la page en direct et choisissez Inspecter pour voir la règle qui l'ajoute.

Nommer la source avant de toucher un seul réglage est ce qui sépare une correction de cinq minutes d'une heure d'essais et d'erreurs.

L'espace blanc entre votre en-tête et votre corps tombe généralement dans cette dernière catégorie. Il est défini par votre thème ou modèle, vous l'ajusterez donc dans l'éditeur de site ou avec un peu de CSS, pas sur vos blocs de contenu.

Ajouter ou supprimer de l'espace entre les blocs WordPress avec SeedProd

Le moyen le plus simple de gérer l'espace blanc dans WordPress est d'utiliser SeedProd, un constructeur de sites web par glisser-déposer qui vous permet de concevoir des pages et des thèmes complets sans toucher à aucun code. Il est utilisé par plus d'un million de propriétaires de sites web qui souhaitent un contrôle visuel complet de leurs mises en page.

J'utilise moi-même SeedProd pour créer mon propre site web, et je ne suis pas designer. Ce que j'aime, c'est que je peux voir chaque changement en direct, y compris ajuster l'espace, déplacer des sections et équilibrer les mises en page jusqu'à ce que tout soit parfait.

Après avoir installé et activé le plugin, ouvrez SeedProd » Pages de destination depuis votre tableau de bord WordPress.

À partir d'ici, vous pouvez créer une nouvelle page ou modifier une page existante pour lancer le constructeur visuel.

Dans le constructeur, vous pouvez faire glisser et déposer des blocs directement sur votre mise en page et voir instantanément à quoi ressemble votre page.

Pour ajouter de l'espace supplémentaire, faites glisser le bloc Espaceur dans votre mise en page.

Utilisez le curseur de hauteur dans le panneau de gauche pour augmenter ou diminuer l'espace blanc où vous en avez besoin. J'ajoute souvent un peu d'espace entre les sections comme les bannières principales, les témoignages et les appels à l'action pour que chacune d'elles se démarque.

Vous pouvez également ajuster l'espacement de chaque bloc individuellement. Cliquez sur le bloc, ouvrez l'onglet Avancé dans le panneau de gauche, et recherchez la section Espacement.

Ici, vous pouvez ajuster la Marge (espace à l'extérieur du bloc) ou le Rembourrage (espace à l'intérieur). De petites modifications ici peuvent rendre votre conception beaucoup plus équilibrée et professionnelle.

Lorsque vous êtes satisfait des résultats, cliquez sur Enregistrer puis sur Publier pour mettre votre page en ligne. Vous pouvez également prévisualiser votre mise en page sur mobile pour vérifier l'apparence de l'espacement sur différents appareils.

Pour obtenir de l'aide sur la création de votre première page personnalisée, consultez notre guide complet sur la création d'une page de destination dans WordPress.

Ajouter ou supprimer de l'espace à l'aide de l'éditeur de blocs WordPress

L'éditeur de blocs WordPress (également appelé Gutenberg) dispose d'outils intégrés pour contrôler l'espace blanc. Le bloc qui ajoute un espace vide entre d'autres blocs est le bloc Espaceur, et vous pouvez l'ajuster sans plugins WordPress supplémentaires.

J'utilise l'éditeur de blocs pour des corrections d'espacement rapides sur les articles où je n'ai pas besoin du constructeur complet. Pour commencer, ouvrez l'article ou la page que vous souhaitez modifier et cliquez sur le bouton + Ajouter un bloc, puis tapez « Espaceur » et sélectionnez le bloc Espaceur.

Cela insère un bloc vide dans votre mise en page. Faites glisser la poignée en bas du bloc, ou utilisez les paramètres de la barre latérale, pour ajuster la hauteur. Plus la valeur de hauteur est grande, plus l'espace blanc apparaît entre vos blocs.

Pour des ruptures visuelles plus petites, essayez plutôt le bloc Séparateur. Il ajoute une ligne de division subtile qui aide à diviser les sections sans créer trop d'espace vide.

Vous pouvez également affiner l'espacement de n'importe quel bloc individuel. Sélectionnez le bloc, ouvrez le panneau Paramètres à droite, et recherchez les options Marge ou Rembourrage sous « Dimensions ».

Si vous remarquez des espacements incohérents, ouvrez le panneau Vue Liste. Il affiche chaque bloc de votre page, ce qui permet de repérer facilement les blocs Espaceur en double ou les écarts qui nécessitent un ajustement. Lorsque vous trouvez un Espaceur errant ou un paragraphe vide, supprimez-le pour combler l'écart.

Lorsque tout semble équilibré, cliquez sur Mettre à jour pour enregistrer vos modifications. Prévisualisez toujours votre page sur ordinateur et sur mobile afin que l'espacement soit naturel sur tous les appareils.

Supprimer l'espace entre les paragraphes

Appuyer sur Entrée dans l'éditeur crée un tout nouveau bloc de paragraphe, qui ajoute une ligne complète d'espace entre les paragraphes. Pour maintenir deux lignes serrées ensemble, appuyez plutôt sur Maj + Entrée, ce qui ajoute un saut de ligne à l'intérieur du même bloc.

Pour l'écart entre les paragraphes distincts, sélectionnez-en un et réduisez sa marge dans le panneau Dimensions.

Ajuster l'espacement des blocs pour fermer les espaces entre les blocs

Lorsque la marge et le rembourrage des blocs individuels ne font rien, l'écart est défini par l'Espacement des blocs, l'espace qu'un bloc parent met entre ses enfants. C'est la correction que les débutants manquent le plus souvent.

Je l'utilise chaque fois qu'un écart ne se ferme pas à partir des paramètres du bloc lui-même, et cela fonctionne généralement. Sélectionnez les deux blocs dans la Vue Liste, faites un clic droit et choisissez Grouper.

Avec le groupe sélectionné, ouvrez le panneau Dimensions et trouvez le contrôle Espacement des blocs. Faites-le glisser vers 0 pour fermer l'écart, ou définissez une valeur personnalisée pour espacer les blocs uniformément.

Le même réglage contrôle l’espacement entre les colonnes. Sélectionnez le bloc Colonnes parent, ouvrez les Dimensions et ajustez son Espacement des blocs pour élargir ou resserrer l’écart entre chaque colonne.

Sur un bloc Colonnes, vous pouvez désolidariser les côtés pour définir séparément les écarts horizontaux et verticaux. La valeur verticale est ce qui contrôle l’espacement lorsque vos colonnes s’empilent sur mobile.

Ajouter ou supprimer de l'espace entre les blocs avec du CSS personnalisé

Si vous souhaitez un contrôle plus précis de l’espacement, vous pouvez utiliser du CSS personnalisé pour définir des valeurs de marge ou de remplissage exactes pour vos blocs. Je n’utilise le CSS que lorsque j’ai besoin du même espacement sur chaque page, car les options visuelles sont plus rapides pour des corrections ponctuelles.

Pour l’espacement sur l’ensemble de votre site, un thème de blocs vous offre une voie plus rapide que le CSS. Allez dans Apparence » Éditeur » Styles » Mise en page et ajustez l’Espacement des blocs global là-bas, ce qui met à jour chaque page à la fois.

Les développeurs peuvent définir les mêmes valeurs directement dans le fichier theme.json du thème. Le CSS personnalisé via le personnaliseur est le bon outil pour les thèmes classiques (non-blocs), ou lorsque vous avez besoin d’une valeur exacte sur des blocs spécifiques.

Pour utiliser une classe, commencez par sélectionner le bloc que vous souhaitez ajuster dans l’éditeur. Dans la barre latérale droite, ouvrez la section Avancé et recherchez le champ intitulé Classes CSS supplémentaires.

Ici, vous pouvez attribuer un nom de classe personnalisé, comme custom-spacing.

Ensuite, allez dans Apparence » Personnaliser » CSS supplémentaire dans votre tableau de bord WordPress. Cette option n’apparaît que sur les thèmes classiques qui n’utilisent pas l’éditeur de site. Si votre thème inclut l’éditeur de site, ajoutez votre CSS avec un plugin comme WPCode à la place.

Dans l’éditeur CSS, entrez une règle simple comme celle-ci :

.custom-spacing { margin-bottom: 20px; }

Cet exemple ajoute 20 pixels d’espace sous tout bloc portant cette classe. Pour supprimer complètement l’espacement, remplacez la valeur par 0. Vous pouvez expérimenter avec différentes valeurs pour ajuster l’espacement à votre mise en page.

Lorsque vous avez terminé, cliquez sur Publier pour enregistrer vos modifications. Si vous utilisez des plugins de mise en cache, videz votre cache par la suite afin que les nouveaux styles apparaissent correctement.

Le CSS personnalisé est idéal lorsque vous avez besoin d’un espacement précis pour des éléments spécifiques, mais pour la plupart des utilisateurs, les options visuelles de SeedProd ou l’éditeur de blocs sont plus rapides et plus faciles.

Bonnes pratiques pour l’espacement des blocs WordPress

L’erreur que je vois le plus souvent est un écart différent dans chaque section, ce qui donne une impression de désordre même à un bon contenu. Une fois que vous comprenez comment fonctionne l’espacement, cela vaut quelques minutes supplémentaires pour le maintenir cohérent sur vos pages.

Le bon espace blanc ne consiste pas à utiliser la même quantité partout. Il s’agit de créer un équilibre pour que votre contenu soit facile à lire et visuellement connecté.

• Maintenez la cohérence de l’espacement : Utilisez des écarts similaires entre les sections liées, comme le texte et les images, pour que votre conception semble intentionnelle.
• Utilisez plus d’espace pour les zones clés : Les appels à l’action, les témoignages et les sections en vedette ressortent davantage lorsqu’ils sont entourés d’un espace blanc supplémentaire.
• Resserrez les éléments groupés : À l’intérieur des colonnes ou des boîtes de contenu, réduisez les marges et le remplissage pour maintenir les éléments visuellement liés.
• Prévisualisez sur tous les appareils : Une mise en page qui semble parfaite sur ordinateur peut sembler trop étroite ou trop lâche sur mobile. Vérifiez toujours la prévisualisation mobile.
• Pensez à la marge et au rembourrage : La marge ajoute de l'espace à l'extérieur d'un bloc, tandis que le rembourrage ajoute de l'espace à l'intérieur. Ajustez chacun en fonction des besoins de votre mise en page.
• Restez proportionnel : En règle générale, utilisez 40 à 60 px entre les sections principales et des espaces plus petits au sein du contenu groupé.

FAQ sur l’espacement des blocs WordPress

Voici quelques réponses rapides aux questions courantes sur l’ajout ou la suppression d’espace entre les blocs dans WordPress.

Quel bloc ajoute un espace vide entre d'autres blocs ?

Le bloc Espaceur. Dans l'éditeur WordPress, ajoutez un bloc Espaceur partout où vous souhaitez un espace, puis définissez sa hauteur en pixels pour contrôler la quantité d'espace qui apparaît.

Pour une fine ligne de séparation au lieu d'un espace vide, utilisez le bloc Séparateur. Les deux sont intégrés, vous n'avez donc pas besoin de plugin.

Comment supprimer l'espace blanc entre l'en-tête et le corps dans WordPress ?

Cet espace est presque toujours un espacement du thème ou du modèle, pas quelque chose sur vos blocs de contenu.

Dans un thème de bloc, ouvrez Apparence » Éditeur » Styles » Mise en page et réduisez l'espacement global des blocs, ou modifiez la partie du modèle d'en-tête. Dans un thème classique, supprimez-le avec une petite règle CSS personnalisée ciblant l'en-tête ou la zone de contenu principale.

Pourquoi y a-t-il toujours un espace après que j'ai défini la marge et le rembourrage à 0 ?

Parce que l'espace ne provient pas de ce bloc. Il est généralement défini par l'espacement des blocs du groupe ou des colonnes parent, un bloc Espaceur restant, ou les CSS par défaut de votre thème.

Sélectionnez le bloc parent et vérifiez son espacement de bloc, ouvrez la vue Liste pour trouver les espaceurs égarés, puis utilisez l'outil d'inspection du navigateur si l'espace n'apparaît que sur la page en direct.

L’espacement dans WordPress affecte-t-il le référencement ?

Pas directement, mais des mises en page épurées améliorent la lisibilité et l'expérience utilisateur. Plus vos pages sont faciles à lire et à naviguer, plus les visiteurs sont susceptibles de rester longtemps, ce qui peut indirectement soutenir de meilleurs signaux d'engagement.

Obtenez le bon espacement de vos blocs

Obtenir le bon espacement modifie la façon dont tout votre site se présente. Lorsque votre contenu a de l'espace pour respirer, il est plus facile à lire et semble plus soigné.

Que vous utilisiez l'éditeur de blocs, un peu de CSS ou que vous construisiez visuellement, la clé est la cohérence. Si vous préférez voir chaque changement en direct pendant que vous espacez les choses, construisez vos pages avec SeedProd et évitez les conjectures.

Si vous souhaitez continuer à améliorer vos mises en page, voici quelques guides utiles à explorer ensuite :

• Comment ajouter une ombre portée dans WordPress
• Comment masquer les titres de page dans WordPress
• Comment changer la mise en page d'un blog dans WordPress
• Comment rendre une page pleine largeur dans WordPress

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.