Comment ajouter ou supprimer un espace vide entre les blocs WordPress (4 méthodes)

Un bon espacement peut faire une grande différence dans l'apparence et la sensation de votre contenu. Lorsque les écarts entre les blocs WordPress sont trop serrés ou trop larges, cela peut nuire à la lisibilité et donner une impression d'inachevé à votre mise en page.

Nous avons vu de nombreux utilisateurs de WordPress rencontrer les mêmes problèmes d'espacement à maintes reprises, ce qui est logique car les options d'espacement des blocs ne sont pas toujours évidentes au premier coup d'œil.

La bonne nouvelle est que WordPress offre plusieurs façons d'ajuster l'espacement des blocs sans toucher au code.

Dans ce guide, nous vous présenterons quatre méthodes simples pour résoudre les problèmes d'espacement entre les blocs WordPress. Ces astuces vous aideront à créer un contenu plus professionnel et à maintenir l'engagement des lecteurs.

Pourquoi ajouter ou supprimer un espace vide entre les blocs WordPress ?

Bien que l'éditeur de blocs WordPress facilite la création de contenu, vous pourriez constater que l'espacement par défaut n'est pas toujours parfait.

Ajuster l'espace blanc entre vos blocs est un moyen simple d'améliorer la conception de votre site et l'expérience utilisateur.

Un contrôle approprié de l'espacement des blocs vous aide à :

• Créez un design professionnel : Avoir un contrôle total sur votre mise en page vous permet de créer un aspect plus soigné et personnalisé pour votre site web.
• Guidez l'attention des visiteurs : Utilisez l'espace pour regrouper visuellement le contenu lié ou pour séparer différentes sections, rendant votre mise en page plus intuitive.
• Améliorez la lisibilité : Rompre les longs blocs de texte avec de l'espace blanc rend votre contenu moins intimidant et plus facile à lire pour les visiteurs.

Maintenant, examinons comment ajouter ou supprimer de l'espace vide entre les blocs WordPress sur votre site Web.

Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Ajouter de l'espace vide entre les blocs WordPress avec l'éditeur de blocs
• Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
• Méthode 3 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress avec CSS Hero
• Méthode 4 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress avec SeedProd
• Foire aux questions sur l'espacement des blocs

Méthode 1 : Ajouter de l'espace vide entre les blocs WordPress avec l'éditeur de blocs

Le moyen le plus simple d'ajouter de l'espace vide entre vos blocs est d'utiliser l'éditeur de blocs Gutenberg. Il existe un bloc d'espacement intégré qui vous permet d'ajouter de l'espace vide en quelques clics.

Pour l'utiliser, ouvrez l'article ou la page que vous souhaitez modifier et cliquez sur le bouton « Plus » pour ajouter un bloc.

Ensuite, recherchez « Espaceur » et sélectionnez le bloc.

Cela insérera automatiquement un espaceur dans la page. 

Vous pouvez l'agrandir ou le réduire en faisant glisser le bloc vers le haut ou vers le bas.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Mettre à jour » pour enregistrer vos modifications.

Si vous utilisez un thème de blocs, vous pouvez également utiliser l'éditeur complet de site pour ajuster l'espacement des blocs dans vos modèles de thème.

Consultez notre guide pour débutants sur l'édition complète de site WordPress pour plus d'informations.

En plus d'insérer des blocs Espace, vous pouvez également augmenter la marge de vos blocs pour créer plus d'espace entre eux et d'autres blocs. Vous pouvez explorer ces options dans la barre latérale des paramètres du bloc.

Vous pouvez également ajuster le remplissage (padding) du bloc. Le remplissage est l'espace à l'intérieur de la bordure du bloc, entre la bordure et le contenu lui-même.

Réduire cela diminuera l'espace vide à l'intérieur du bloc, ce qui est différent de l'ajustement de la marge entre les blocs.

Gardez à l'esprit que ces contrôles de marge et de remplissage sont le plus souvent disponibles dans les thèmes de blocs utilisant l'éditeur de site complet et peuvent ne pas être visibles pour tous les blocs lors de l'utilisation de thèmes classiques.

Pour plus de détails, vous pouvez consulter notre guide sur le remplissage et la marge dans WordPress.

Vous voudrez peut-être aussi consulter ces guides pour découvrir d'autres façons de tirer le meilleur parti de l'éditeur de blocs :

• Comment utiliser correctement le bloc Plus dans WordPress
• Comment ajouter un saut de ligne dans WordPress (espacement de nouvelle ligne)
• Comment sélectionner et utiliser des blocs imbriqués dans WordPress
• Comment ajouter du contenu en plusieurs colonnes dans les articles WordPress (sans HTML)

Méthode 2 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress en ajoutant du CSS personnalisé

Une autre façon d'ajouter et de supprimer de l'espace vide entre vos blocs est d'ajouter du code CSS personnalisé à votre thème.

Si vous ne l'avez jamais fait auparavant, nous vous recommandons de consulter notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress avant de commencer.

Ensuite, ouvrez la page ou l'article que vous souhaitez modifier, puis cliquez sur le bloc où vous souhaitez ajouter ou supprimer l'espace vide.

Ensuite, cliquez sur l'élément de menu « Bloc » dans le panneau d'options de droite.

Après cela, faites défiler jusqu'à la liste déroulante « Avancé » et cliquez dessus. Cela affiche un ensemble d'options supplémentaires pour ce bloc.

Dans la boîte « Classes CSS supplémentaires », tapez le nom de classe suivant :

.add-remove-bottom-space

Cette action donne au bloc un nom unique, vous permettant de le cibler avec du CSS personnalisé.

Après cela, cliquez sur le bouton « Mettre à jour » pour enregistrer vos modifications.

Ensuite, accédez à Apparence » Personnaliser pour afficher le personnaliseur de thème WordPress.

Ensuite, faites défiler et cliquez sur l'option de menu « CSS supplémentaire ».

Cela affiche un champ où vous pouvez ajouter du code CSS.

Ensuite, collez l'extrait de code suivant dans la boîte :

.add-remove-bottom-space {
 margin-bottom: 0;
}

Cet extrait de code définit la marge inférieure à zéro et supprimera l'espace vide du bloc.

Remarquez le point (.) avant le nom. En CSS, le point est utilisé pour cibler tout élément portant ce nom de classe spécifique.

Si vous souhaitez ajouter de l'espace en bas, changez simplement le « 0 » par quelque chose comme « 20px ».

Une fois que vous avez apporté vos modifications, assurez-vous de cliquer sur le bouton « Publier » pour rendre vos modifications visibles. 

Si vous utilisez un thème bloc, vous pouvez consulter notre guide sur comment corriger le personnaliseur de thème manquant dans WordPress pour savoir où ajouter le code CSS.

Enregistrer le code CSS personnalisé à l'aide d'un plugin

En ajoutant du CSS personnalisé au personnaliseur de thème WordPress, il ne sera enregistré que pour le thème que vous utilisez actuellement. Si vous changez de thème WordPress, vous devrez alors copier le code CSS dans votre nouveau thème.

Si vous souhaitez que votre CSS personnalisé s'applique quel que soit le thème que vous utilisez, vous devrez utiliser un plugin.

WPCode est le meilleur plugin de snippets de code qui vous permet d'ajouter du PHP, du CSS, et plus encore à votre site Web WordPress sans rien casser.

Nous utilisons WPCode nous-mêmes, et nous avons trouvé que c'était le moyen le plus simple et le plus sûr d'ajouter du code personnalisé. Pour en savoir plus, consultez notre avis détaillé sur WPCode.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.

Après l'activation, vous devez aller dans Snippets de code » + Ajouter un snippet depuis le tableau de bord d'administration de WordPress.

Ici, survolez l'option « Ajouter votre code personnalisé (nouveau fragment) » dans la bibliothèque de fragments de code et cliquez sur le bouton « Utiliser le fragment ».

Vous devez entrer un nom pour votre fragment de code, puis coller votre CSS personnalisé dans la zone « Aperçu du code ».

Assurez-vous de sélectionner « Fragment CSS » dans la liste déroulante « Type de code ».

Ensuite, assurez-vous de cliquer sur le curseur en haut pour « Activer » votre fragment et appuyez sur « Enregistrer le fragment » pour l'exécuter sur votre site WordPress.

Pour plus de détails, vous pouvez consulter notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

Alternativement, vous pouvez utiliser le plugin Simple Custom CSS.  Après activation, allez simplement dans Apparence » CSS personnalisé et ajoutez votre code CSS personnalisé.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Mettre à jour le CSS personnalisé » pour enregistrer vos modifications.

Méthode 3 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress avec CSS Hero

Une autre façon conviviale pour les débutants d'ajouter ou de supprimer un espace vide entre les blocs WordPress est d'utiliser un plugin CSS personnalisé pour WordPress. Cela vous permet d'apporter des modifications visuelles à votre blog WordPress sans modifier aucun code CSS.

Nous recommandons d'utiliser le plugin CSS Hero. Il vous permet de modifier presque tous les styles CSS de votre site WordPress sans écrire une seule ligne de code. 

La première chose à faire est d'installer et d'activer le plugin. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, vous devez cliquer sur le bouton « Continuer vers l'activation du produit » pour activer le plugin. Vous trouverez le bouton directement au-dessus de votre liste de plugins installés.

Cela vous amène à un écran où vous devez entrer votre nom d'utilisateur et votre mot de passe. Ensuite, suivez les instructions à l'écran, et vous serez redirigé vers votre tableau de bord une fois votre compte vérifié.

Ensuite, vous devez ouvrir la page ou l'article que vous souhaitez modifier, puis cliquer sur le bouton « CSS Hero » en haut de votre barre d'administration WordPress.

Cela ouvrira la même page avec CSS Hero en cours d'exécution par-dessus. Le plugin utilise un éditeur visuel, vous pourrez donc apporter vos modifications en temps réel.

Lorsque vous cliquez sur un élément de votre page, une barre d'outils apparaîtra sur le côté gauche de la page pour vous permettre d'effectuer des personnalisations.

Pour supprimer ou ajouter un espace vide entre vos blocs, cliquez simplement sur l'option « Espacements », puis faites défiler jusqu'à la section « Marge-Bas ».

Ici, vous pouvez déplacer le curseur vers le haut ou vers le bas pour ajouter ou supprimer de l'espace vide.

Toutes les modifications que vous apportez s'afficheront automatiquement sur votre page.

Une fois que vous avez terminé d'apporter des modifications, vous devez cliquer sur le bouton « Enregistrer » pour que vos modifications soient en ligne. 

Méthode 4 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress avec SeedProd

SeedProd est le meilleur constructeur de pages par glisser-déposer, utilisé par plus d'un million de sites Web.

Nous avons nous-mêmes utilisé SeedProd sur de nombreux projets, et certaines de nos marques partenaires ont créé l'intégralité de leurs sites Web à l'aide de cet outil. Pour plus de détails, consultez notre avis complet sur SeedProd.

Le plugin dispose d'une bibliothèque de plus de 300 modèles pour créer des pages 404 personnalisées, des pages de vente, des pages de destination, et bien plus encore.

Vous pouvez même l'utiliser pour créer un thème WordPress personnalisé sans écrire une seule ligne de code.

Avec le constructeur par glisser-déposer, vous avez un contrôle total sur la conception de votre site, et vous pouvez facilement supprimer ou ajouter de l'espacement à n'importe quel élément du site Web.

Pour en savoir plus, consultez notre guide sur la création d'une page personnalisée dans WordPress.

Pendant que vous personnalisez votre page, vous pouvez ajouter de l'espace n'importe où en utilisant le bloc Espaceur.

Faites simplement glisser et déposez-le n'importe où sur la page où vous souhaitez ajouter plus d'espace entre les blocs.

Ensuite, vous pouvez utiliser le curseur pour ajuster sa hauteur.

Vous pouvez également contrôler l'espacement entre n'importe quel bloc. Pour ce faire, cliquez simplement sur le bloc à partir duquel vous souhaitez ajouter ou supprimer de l'espace.

Cela fait apparaître le panneau d'options à gauche. Cliquez ensuite sur l'onglet « Avancé ».

Ensuite, faites défiler vers le bas jusqu'au menu déroulant « Espacement » et cliquez dessus.

Cela ouvre un menu où vous pouvez contrôler la « Marge ». Entrez simplement un nombre dans la zone de marge inférieure pour ajouter de l'espace ou supprimez le nombre pour supprimer tout espace vide existant.

Une fois que vous avez terminé d'apporter des modifications, cliquez sur le bouton « Enregistrer ».

Ensuite, sélectionnez le menu déroulant « Publier » pour rendre vos modifications publiques.

Tutoriel vidéo

Si vous ne préférez pas les instructions écrites, regardez simplement notre tutoriel vidéo.

Foire aux questions sur l'espacement des blocs

Voici quelques questions que nos lecteurs posent fréquemment sur l'ajout ou la suppression d'espace vide entre les blocs dans WordPress :

Quelle est la différence entre la marge et le rembourrage dans WordPress ?

Pensez à un bloc comme à un cadre photo. Le remplissage (padding) est l'espace entre l'image et le cadre lui-même (à l'intérieur de la bordure). La marge (margin) est l'espace sur le mur entre ce cadre photo et tout autre cadre accroché à côté (à l'extérieur de la bordure).

Comment ajouter de l'espace horizontalement entre les colonnes dans WordPress ?

Les méthodes ci-dessus concernent principalement l'espacement vertical. Pour ajuster l'espace horizontal, vous devriez utiliser le bloc Colonnes WordPress intégré.

Après avoir ajouté vos colonnes, vous pouvez sélectionner le bloc principal Colonnes, et dans les paramètres du bloc à droite, vous trouverez une option « Espacement des blocs » qui vous permet de contrôler l'écart entre les colonnes.

Perderai-je mes modifications CSS si je change de thème WordPress ?

Oui, si vous ajoutez le code CSS directement dans le personnaliseur de votre thème (sous Apparence » Personnaliser » CSS additionnel), ce code est lié au thème. Si vous changez de thème, vous devrez copier ce code.

Pour rendre votre CSS indépendant du thème, nous vous recommandons d'utiliser WPCode pour ajouter vos extraits.

Nous espérons que cet article vous a aidé à apprendre comment ajouter ou supprimer de l'espace vide entre les blocs WordPress. Vous voudrez peut-être aussi consulter notre guide sur les révisions de publication WordPress et nos sélections d'experts des meilleurs plugins de blocs Gutenberg.

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.