Si vous avez déjà essayé de déplacer des éléments dans WordPress mais que vous n'avez pas trouvé comment ajouter plus d'espace, vous n'êtes pas seul. L'une des questions les plus fréquentes concernant la mise en page est la façon de modifier les marges d'une page.
Les marges créent un espace de respiration entre les blocs, les images et les sections. Elles rendent votre contenu plus facile à lire et vos pages plus soignées.
Dans ce tutoriel, je vais vous expliquer comment modifier les marges dans WordPress, étape par étape et de manière conviviale pour les débutants.
Dans ce guide :
Qu'est-ce qu'une marge dans WordPress ?
Dans WordPress, une marge est l'espace autour des bords des éléments d'une page, la distinguant des autres. Ces éléments peuvent inclure des images, des titres, des widgets et des boutons, entre autres.
De même, les marges s'appliquent également à l'espace autour de la mise en page, comme l'en-tête, le pied de page et la zone de contenu.
Modifier les marges d'une page ou d'un élément est une partie cruciale de la conception d'un site Web et peut affecter considérablement la fonctionnalité et l'apparence de votre site.
La différence entre les marges et le rembourrage
Les marges et le rembourrage sont tous deux liés à l'espacement dans votre conception, mais chacun remplit un objectif unique.
Les marges sont les espaces qui se trouvent à l'extérieur d'un élément.
Elles créent une zone tampon autour de votre contenu, le séparant des autres éléments de la page. Cela peut aider à améliorer la lisibilité et à organiser efficacement votre conception.
D'autre part, le rembourrage fait référence à l'espace qui se trouve à l'intérieur d'un élément.
Le rembourrage peut être considéré comme le « coussin » entre le contenu (comme du texte ou une image) et le bord de son élément conteneur. Cela rend souvent votre contenu plus agréable à regarder.
Essentiellement, si vous souhaitez une zone tampon autour du bord extérieur de votre élément, vous ajusterez la marge. Mais, si c'est l'espacement à l'intérieur d'un élément qui nécessite un ajustement, vous regarderez le rembourrage.
Cela dit, examinons comment modifier les marges dans WordPress.
Comment modifier les marges dans WordPress avec SeedProd
Tout d'abord, voyons comment utiliser SeedProd pour modifier vos marges WordPress.
SeedProd est l'un des meilleurs constructeurs de sites Web par glisser-déposer. Avec son éditeur visuel, vous pouvez créer des pages personnalisées pour votre site et même créer un thème WordPress personnalisé sans codage.
Les paramètres de pointage et de clic du constructeur de pages de SeedProd vous permettent de modifier les paramètres de marge de n'importe quel élément en quelques clics.
Pour commencer, vous devrez installer et activer le plugin SeedProd.
Si vous avez besoin d'aide pour cela, vous pouvez consulter notre guide sur comment installer SeedProd Pro. Il vous guidera à travers le processus d'installation et comment activer votre clé de licence.
Après l'installation, accédez à SeedProd » Pages de destination depuis votre tableau de bord WordPress et cliquez sur le bouton Ajouter une nouvelle page de destination.
Vous verrez maintenant une bibliothèque de modèles de pages de destination prédéfinis pour servir de point de départ à votre page. Si vous préférez commencer à partir de zéro, il existe également un modèle de page vierge.
Après avoir choisi un modèle, nommez votre page et cliquez sur le bouton Enregistrer et commencer à modifier la page. Cela lancera le modèle dans le constructeur de pages par glisser-déposer de SeedProd.
En ouvrant la page, vous verrez un aperçu du design sur le côté droit et les éléments de la page sur la gauche. Vous pouvez ajouter n'importe quel élément à votre page en cliquant sur l'un d'eux et en le faisant glisser vers l'aperçu.
De plus, cliquer sur un élément dans l'aperçu ouvre ses paramètres dans la barre latérale gauche.
Dans l'onglet « Avancé » de n'importe quel élément, vous pouvez voir plus d'options de personnalisation. Cela inclut des options pour ajuster l'espacement, le remplissage, la visibilité sur les appareils, et plus encore.
Dans ce panneau, cliquez pour développer l'onglet Espacement. Ici, tapez vos valeurs personnalisées dans les champs de marge pour modifier les marges de cet élément.
Faites cela pour chaque élément dont vous souhaitez modifier les marges. Vous pouvez également consulter notre guide étape par étape pour plus de détails sur la création d'une page de destination dans WordPress.
Lorsque vous êtes satisfait des modifications, enregistrez et publiez votre page.
Maintenant, vous pouvez visiter la page pour voir à quoi ressemblent vos nouvelles marges.
Méthodes alternatives pour modifier les marges dans WordPress
La beauté de WordPress réside dans sa polyvalence. Si, pour une raison quelconque, vous ne souhaitez pas ou ne pouvez pas utiliser SeedProd, ne vous inquiétez pas.
Ensuite, nous examinerons quelques méthodes alternatives pour modifier les marges de votre site WordPress.
Modification des marges avec l'éditeur de blocs WordPress
Depuis l'introduction de Gutenberg, la modification des marges du site est devenue beaucoup plus facile. Pas besoin d'expertise en codage ni de télécharger des plugins WordPress supplémentaires.
Tout d'abord, allez dans Pages » Toutes les pages depuis votre tableau de bord WordPress et modifiez la page dont vous souhaitez modifier les marges.
Ensuite, cliquez sur le bloc souhaité pour ouvrir le panneau des paramètres du bloc dans la barre latérale droite. Dans cet exemple, nous voulons modifier les marges du bloc de bouton.
Dans la barre latérale des paramètres, passez à l'onglet styles en cliquant sur son icône. Ensuite, dans la section dimensions, cliquez sur l'option marge pour modifier les marges du bouton.
Après avoir effectué vos ajustements, n'oubliez pas de cliquer sur le bouton Mettre à jour pour enregistrer vos modifications.
Modification des marges dans WordPress avec du code CSS
Pour cette méthode, vous aurez besoin d'une compréhension générale du HTML et du CSS. Elle nécessite également d'ajouter du code à votre thème WordPress. Pour un rappel, vous pouvez consulter ce guide sur : comment ajouter du CSS personnalisé dans WordPress.
Cependant, si vous êtes à l'aise avec un peu de codage, le CSS peut vous donner un contrôle inégalé sur la conception de votre site.
Identification de la classe CSS d'un élément
Avant de modifier les marges avec CSS, vous devrez décider quel élément cibler avec votre code. La manière la plus simple de le faire est d'utiliser l'outil d'inspection de votre navigateur.
Commencez par faire un clic droit sur l'élément de la page pour lequel vous souhaitez personnaliser les marges. Dans le menu qui apparaît, sélectionnez « Inspecter ». Cela ouvrira le panneau des outils de développement de votre navigateur.
Vous verrez ici le code HTML de votre page Web et le CSS de la page. Vous pouvez mettre en surbrillance l'élément sur lequel vous avez cliqué en déplaçant le curseur de votre souris sur le code.
Dans la section « Styles » du panneau, vous verrez l'élément HTML ou la classe CSS à cibler avec votre CSS personnalisé.
Dans cet exemple, il vous suffit de copier le code suivant et de modifier la valeur de la marge en pixels :
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
Pour ce guide, nous allons modifier la valeur à 100px.
Maintenant, enregistrez ce code dans un document vierge ou un bloc-notes, puis passez à l'étape suivante : ajouter le code CSS personnalisé à votre site Web.
Ajouter et modifier les marges avec CSS dans l'éditeur de site
Si vous utilisez un thème WordPress basé sur des blocs qui prend en charge l'éditeur de site WordPress, vous pouvez ajouter votre code CSS au panneau CSS additionnel.
Pour le trouver, allez dans Apparence » Éditeur et basculez vers l'onglet Styles de l'éditeur de site. Ensuite, cliquez sur les trois points dans la barre latérale droite pour afficher plus de paramètres et cliquez sur l'option « CSS additionnel ».
Dans la boîte qui apparaît, collez votre CSS personnalisé, puis cliquez sur Enregistrer pour sauvegarder vos modifications.
Lorsque vous visualisez votre site Web, vous verrez immédiatement les modifications de marge.
Modifier les marges avec CSS en utilisant le personnaliseur de thème
Si vous utilisez un thème WordPress classique qui n'inclut pas la prise en charge de l'éditeur de site, vous pouvez ajouter votre CSS personnalisé à l'aide du personnaliseur de thème WordPress.
Pour ce faire, accédez à Apparence » Thèmes et cliquez sur Personnaliser.
Vous verrez ici diverses options, en fonction du thème que vous utilisez. L'option dont vous avez besoin est celle intitulée CSS additionnel.
Collez votre CSS personnalisé dans la boîte, et vous verrez les marges changer dans WordPress dans l'aperçu en direct.
Maintenant, cliquez sur le bouton Publier pour enregistrer vos modifications.
Ensuite, plus d'astuces de conception WordPress
Modifier les marges dans WordPress peut faire passer la conception de votre site au niveau supérieur. Que vous utilisiez SeedProd ou l'une de ces méthodes alternatives, vous avez maintenant les connaissances nécessaires pour le faire.
N'oubliez pas que toute bonne conception commence par une bonne mise en page. C'est pourquoi le contrôle des marges de votre site Web sera toujours crucial pour obtenir une conception de site réactive et agréable à regarder.
Pour plus d'astuces de conception WordPress, veuillez consulter nos autres guides :
- Comment rendre une page pleine largeur dans WordPress
- Comment changer les polices dans les thèmes WordPress
- Comment créer des arrière-plans animés Particle.js dans WordPress
- Comment créer une barre de navigation verticale dans WordPress
- Comment ajouter une barre de recherche personnalisée à 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.
