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

Obtenir un espacement parfait de votre contenu est important pour la lisibilité et l'attrait visuel.

Après des années d'aide aux utilisateurs de WordPress pour perfectionner leurs designs, nous avons identifié les moyens les plus efficaces de contrôler l'espacement des blocs.

Que vous ayez trop d'espace entre les blocs ou que vous ayez besoin d'ajouter plus d'espace blanc, WordPress offre plusieurs options pour obtenir une mise en page parfaite.

Le mieux dans tout ça, c'est que vous pouvez faire ces ajustements sans toucher à aucun code.

Dans ce guide, nous allons partager 4 méthodes éprouvées pour ajuster l'espace entre les blocs WordPress. Ces techniques vous aideront à créer un contenu plus soigné et professionnel qui maintiendra l'engagement de vos lecteurs.

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

WordPress facilite la création de pages et d'articles personnalisés grâce à l'éditeur de blocs WordPress intégré.

Cependant, vous pourriez remarquer que lorsque vous ajoutez certains blocs, l'espacement est trop important ou insuffisant. En ajoutant ou en supprimant un espace vide entre vos blocs WordPress, vous pouvez créer des mises en page personnalisées exactement comme vous le souhaitez.

En ajustant l'espace entre les blocs, vous pouvez regrouper le contenu connexe ou séparer différentes sections. Cela aide à guider l'attention de vos visiteurs et rend clairs les éléments qui sont connectés.

De plus, un espacement approprié permet de segmenter le contenu, ce qui facilite la lecture et la compréhension de vos informations par les visiteurs.

Dans l'ensemble, avoir plus de contrôle sur la conception finale de votre site Web WordPress peut conduire à une meilleure expérience utilisateur.

Cela dit, 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
• Méthode 2 : Ajouter ou supprimer de l'espace vide entre les blocs WordPress en ajoutant du CSS personnalisé
• 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
• Tutoriel vidéo

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. Plus le remplissage est petit, moins il y a d'espace entre les blocs, et certains blocs ont un remplissage supplémentaire par défaut. Vous pouvez donc le considérer comme un moyen de supprimer un peu d'espace entre les blocs.

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.

Ensuite, dans la zone « Classes CSS supplémentaires », ajoutez simplement le code suivant :

.add-remove-bottom-space

Cet extrait de code crée une nouvelle classe CSS spécifiquement pour ce bloc. 

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.

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.

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 révisions d'articles 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.