Comment modifier les marges dans WordPress (Guide pour débutants)

Modifier les marges dans WordPress est un moyen simple d'améliorer la conception de votre site. Les marges créent de l'espace entre les éléments, rendant votre contenu plus lisible et visuellement attrayant.

Par bonne pratique générale, nous utilisons toujours les marges et l'espacement lors de la conception de nos sites WordPress. Nous avons constaté que cela a un impact positif sur la façon dont les utilisateurs interagissent avec nos pages Web et notre contenu.

Dans ce guide pour débutants, nous vous montrerons comment ajouter et ajuster les marges dans WordPress. Nous vous enseignerons différentes méthodes pour modifier les marges dans diverses zones de votre site Web WordPress.

Que sont les marges dans WordPress et la conception Web ?

Les marges sont l'espace ajouté autour d'une page Web ou d'autres éléments à l'intérieur d'une page Web.

Pensez à une page Web typique comme à une feuille de papier vierge. Les marges sont l'espace blanc ou vide autour des bords du papier.

Le but de l'utilisation des marges est de s'assurer que les éléments à l'intérieur d'une page Web n'ont pas l'air écrasés ensemble.

De même, les marges peuvent être utilisées autour de différents éléments à l'intérieur de la mise en page.

Par exemple, vous pouvez modifier les marges autour des images afin qu'elles ne soient pas trop proches du texte ou ajouter une marge pour laisser de l'espace entre votre zone de contenu et la barre latérale.

Dans cet article, nous allons couvrir beaucoup d'informations. Cliquez sur les liens ci-dessous pour accéder à la section de votre choix.

• Quelle est la différence entre marge et remplissage (padding) ?
• Pourquoi pourriez-vous avoir besoin d'ajouter ou de modifier des marges dans WordPress ?
• Comment ajouter des marges dans WordPress ?
• Ajouter des marges dans WordPress en utilisant l'éditeur de site complet
• Ajouter des marges dans l'éditeur de blocs
• Ajouter des marges dans WordPress en utilisant SeedProd
• Modifier les marges en utilisant Thrive Architect
• Modifier les marges dans WordPress en utilisant du code CSS
• Ajout et modification des marges à l'aide de CSS personnalisé dans un thème WordPress
• Utilisation de CSS personnalisé pour modifier les marges dans l'éditeur de site
• Ajout de marges avec CSS dans le personnaliseur de thème
• Modifier les marges avec du code CSS personnalisé à l'aide de WPCode
• Foire aux questions sur les marges dans WordPress

Quelle est la différence entre marge et remplissage (padding) ?

Les marges et le remplissage sont tous deux utilisés pour ajouter de l'espace blanc dans la conception Web. Cependant, ils sont utilisés de manière très différente.

Les marges ajoutent de l'espace vide à l'extérieur d'un élément, et le remplissage ajoute de l'espace vide à l'intérieur de celui-ci.

Les marges sont utilisées pour ajouter de l'espace à l'extérieur d'un élément. Elles vous permettent de vous assurer qu'il y a beaucoup d'espace entre les éléments d'une page Web.

Maintenant, jetons un coup d'œil à quelques exemples d'utilisation des marges.

1. Ajouter des marges pour augmenter l'espace entre une image et le texte d'un article.

2. Ajuster les marges pour ajouter de l'espace entre les sections, comme l'en-tête et la zone de contenu.

Le rembourrage (padding), quant à lui, est utilisé pour ajouter un espace de coussin entre le contenu et les bords d'une boîte ou d'un élément.

Voici quelques exemples de situations où vous pourriez vouloir utiliser un rembourrage supplémentaire.

1. Ajuster le rembourrage pour augmenter l'espace de coussin dans vos boutons d'appel à l'action.

2. Augmenter le rembourrage dans une colonne de texte

Le rembourrage et les marges sont largement utilisés dans la conception web.

L'utilisation d'espaces vides ajoute de l'espace de respiration à toute conception, ce qui la rend plus conviviale et élégante.

Pour plus de détails, consultez notre tutoriel sur la différence entre le rembourrage et les marges dans WordPress.

Pourquoi pourriez-vous avoir besoin d'ajouter ou de modifier des marges dans WordPress ?

Les marges sont un aspect crucial de la conception web. Elles rendent votre site web agréable et facile à utiliser.

D'après notre expérience dans la réalisation de tests A/B, nous avons constaté que l'utilisation stratégique de l'espace blanc a souvent un impact positif sur les conversions.

Lorsque vous créez une conception plus propre et plus organisée, les utilisateurs sont plus susceptibles de rester plus longtemps sur le site et d'accomplir les actions souhaitées.

Les thèmes WordPress gèrent l'aspect de la conception de votre site web WordPress. La plupart d'entre eux font déjà un excellent travail en définissant des règles CSS pour assurer beaucoup d'espace blanc en utilisant des marges dans la mise en page de votre thème.

Cela dit, vous pourriez occasionnellement avoir besoin d'ajouter des marges pour ajuster certaines choses.

Par exemple, vous pourriez ne pas aimer la marge autour de vos menus de navigation ou vouloir ajouter plus de marge autour de vos boutons d'appel à l'action.

De même, vous pourriez parfois avoir l'impression que les éléments sont trop proches les uns des autres ou trop éloignés.

Dans ce cas, vous devrez modifier les marges dans WordPress vous-même.

Comment ajouter des marges dans WordPress ?

Il existe de nombreuses façons d'ajouter des marges dans WordPress.

Selon l'endroit où vous souhaitez ajouter une marge et les options disponibles dans votre thème WordPress, vous devrez choisir une méthode qui vous convient.

Commençons par les options intégrées par défaut dans WordPress lui-même, car elles sont les plus faciles pour les débutants.

Ajouter des marges dans WordPress en utilisant l'éditeur de site complet

Si vous utilisez un thème basé sur des blocs avec prise en charge de l'éditeur complet de site, vous pouvez utiliser l'éditeur de site intégré pour modifier les marges n'importe où sur votre site WordPress.

Un moyen simple de vérifier est de regarder votre tableau de bord WordPress. Si vous voyez Apparence » Éditeur, alors vous avez un thème basé sur des blocs. Si vous voyez Apparence » Personnaliser à la place, alors vous pouvez passer à une autre méthode ci-dessous.

Tout d'abord, vous devez aller dans Apparence » Éditeur pour lancer l'éditeur de site.

Une fois dans l'éditeur de site, cliquez pour choisir un modèle dans la colonne de gauche ou cliquez n'importe où dans la fenêtre d'aperçu.

Ensuite, cliquez sur la zone ou l'élément où vous souhaitez modifier les marges. Dans la colonne de droite, vous verrez l'option pour ajuster les marges sous l'onglet « Style ».

Lorsque vous ajustez les marges, l'éditeur mettra en surbrillance la zone de marge.

Vous pouvez également choisir d'ajouter des marges en haut, en bas, à droite ou à gauche.

Ajouter des marges dans l'éditeur de blocs

Si vous travaillez sur un article de blog ou une page, vous utiliserez l'éditeur de blocs.

L'éditeur de blocs dans WordPress vous permet d'ajouter et de modifier les marges pour divers blocs.

Cliquez simplement sur le bloc où vous souhaitez ajouter/ajuster les marges. Sous les paramètres du bloc, passez à l'onglet « Style » et faites défiler jusqu'à l'option « Dimensions » ou « Marges ».

Ajouter des marges dans WordPress en utilisant SeedProd

SeedProd est le meilleur plugin de création de pages WordPress du marché. Il vous permet de créer facilement des pages personnalisées pour votre site Web.

Vous pouvez même l'utiliser pour créer un thème WordPress personnalisé à partir de zéro.

Plusieurs de nos marques partenaires ont conçu l'intégralité de leurs sites Web avec SeedProd, et elles adorent l'utiliser. Pour en savoir plus, consultez notre avis complet sur SeedProd.

Le constructeur de pages intuitif par glisser-déposer de SeedProd vous permet d'ajuster facilement les marges de n'importe quel élément à l'intérieur de l'éditeur.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre tutoriel sur comment installer un plugin WordPress.

Ensuite, vous devez visiter SeedProd » Pages de destination, puis cliquer sur le bouton « Ajouter une nouvelle page de destination ».

Après cela, il vous sera demandé de choisir un modèle pour votre page.

SeedProd est livré avec des dizaines de modèles prêts à l'emploi que vous pouvez utiliser comme point de départ, ou vous pouvez commencer avec un modèle vierge.

Cliquez pour choisir votre modèle, puis donnez un nom à votre page de destination.

Cela lancera le constructeur de pages de SeedProd.

Vous verrez un aperçu en direct de votre page sur le côté droit. Et les éléments que vous pouvez ajouter à votre page dans la colonne de gauche.

Vous pouvez pointer et cliquer sur n'importe quel élément de la page pour le modifier.

Cliquer sur un élément le sélectionnera, et vous verrez ses options dans la colonne de gauche. De là, passez à l'onglet 'Avancé' et cliquez sur l'option 'Espacement'.

Vous pouvez modifier les marges et le remplissage de l'élément sélectionné à partir d'ici.

Une fois que vous avez terminé de modifier votre page, n'oubliez pas de cliquer sur le bouton 'Enregistrer' et 'Publier' dans le coin supérieur droit.

Après cela, vous pouvez visiter votre site Web pour voir les changements en action.

Modifier les marges en utilisant Thrive Architect

Thrive Architect est un constructeur de pages WordPress convivial qui vous permet d'utiliser une interface glisser-déposer pour concevoir des pages WordPress.

Lors des tests, nous avons constaté qu'il propose plus de 300 modèles que vous pouvez utiliser comme point de départ. De plus, vous pouvez également l'utiliser pour modifier vos articles et pages WordPress, en empruntant la mise en page et le style de votre thème WordPress existant.

Pour en savoir plus, consultez notre avis complet sur Thrive Architect.

Pour installer Thrive Architect, vous devrez d'abord vous connecter à votre compte sur le site Web de Thrive Themes.

À partir de là, vous devez télécharger et installer le plugin Thrive Product Manager. Pour plus de détails, consultez notre tutoriel sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page Thrive Product Manager.

Cliquez sur le bouton « Se connecter à mon compte » pour connecter WordPress à votre compte Thrive Themes.

Une fois connecté, vous verrez la liste des produits Thrive Themes disponibles sous votre compte.

Cliquez sur la case à cocher « Installer le produit » sous Thrive Architect, puis cliquez sur le bouton « Installer les produits sélectionnés » en bas.

Le gestionnaire de produits Thrive va maintenant installer le plugin Thrive Architect pour vous.

Après cela, vous pouvez modifier ou créer un nouvel article ou une nouvelle page WordPress et cliquer sur le bouton « Modifier avec Thrive Architect » ou « Lancer Thrive Architect ».

Thrive Architect vous demandera de choisir un modèle s'il s'agit d'une nouvelle page.

Vous pouvez utiliser votre modèle de thème pour créer une page « Page normale » ou un modèle de page « Page de destination pré-construite ».

Si vous choisissez l'option « Page de destination pré-construite », le plugin vous présentera un grand nombre de modèles parmi lesquels choisir.

Cliquez simplement pour sélectionner celui qui ressemble à ce que vous souhaitez créer.

Qu'il s'agisse d'une page normale (utilisant les styles de votre thème) ou d'une page de destination, le constructeur de pages de Thrive Architect aurait les mêmes fonctionnalités.

Vous verrez un aperçu en direct de votre page avec une barre d'outils à droite et un panneau de configuration à gauche.

Vous pouvez pointer et cliquer sur un élément pour le sélectionner. Ou cliquez sur le bouton Ajouter [+] dans la barre d'outils pour ajouter un nouvel élément.

Une fois que vous avez cliqué pour sélectionner et modifier un élément, ses paramètres apparaîtront dans la colonne de gauche.

À partir de là, cliquez sur l'onglet « Mise en page et position » pour modifier les marges et le remplissage.

Vous verrez une représentation visuelle des marges et du remplissage.

Passez votre souris sur n'importe quel côté de la marge et faites glisser la poignée pour augmenter ou diminuer la marge.

Vous pouvez répéter le processus pour modifier les marges sur l'un des quatre côtés.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton Enregistrer le travail, puis de sélectionner l'option Enregistrer et quitter vers l'éditeur de publication.

Vous pouvez maintenant cliquer sur le bouton « Publier » ou « Enregistrer » pour enregistrer votre article ou votre page WordPress.

Modifier les marges dans WordPress en utilisant du code CSS

Cette méthode nécessite que vous ajoutiez du code CSS à votre thème WordPress. Vous aurez également besoin d'une compréhension très basique du HTML et du CSS.

Cependant, cette méthode vous offre plus de flexibilité car vous pouvez choisir manuellement la zone où vous souhaitez ajouter ou ajuster les marges.

Ajout et modification des marges à l'aide de CSS personnalisé dans un thème WordPress

WordPress vous permet d'enregistrer du CSS personnalisé dans les options de votre thème WordPress. Cependant, selon votre thème WordPress, il existe plusieurs façons de le faire.

Avant d'ajouter ou de modifier des marges à l'aide de CSS, vous devrez peut-être déterminer quel élément vous devez cibler avec votre code CSS.

Par exemple, si vous souhaitez modifier les marges autour du corps de la page, vous pouvez utiliser le code suivant :

body { 
margin:50px; 
}

Dans ce code, « px » signifie pixels, une unité de mesure courante pour les écrans. L'utilisation de la propriété margin avec une seule valeur comme celle-ci définit la marge pour les quatre côtés (haut, droite, bas et gauche) en même temps.

La façon la plus simple de trouver l'élément à cibler est d'utiliser l'outil Inspecter dans votre navigateur.

Ouvrez votre site web dans un nouvel onglet de navigateur et placez le curseur sur l'élément dont vous souhaitez modifier les marges. Ensuite, faites un clic droit et sélectionnez « Inspecter » dans le menu du navigateur.

Cela divisera l'écran de votre navigateur, et vous verrez le code HTML et le CSS derrière la page.

Vous pouvez déplacer votre curseur sur le code, et votre navigateur mettra en surbrillance la zone affectée par celui-ci.

Dans le code, vous pouvez voir l'élément HTML ou la classe CSS que vous devez cibler avec votre CSS personnalisé. Pensez-y comme à l'« adresse » de la partie spécifique de la page que vous souhaitez styliser.

Vous pouvez même essayer vos marges ici pour prévisualiser à quoi cela ressemblera.

Cependant, ces modifications ne sont pas enregistrées dans votre thème et disparaîtront lorsque vous actualiserez ou fermerez l'onglet du navigateur.

Passons en revue les différentes façons d'enregistrer ce CSS personnalisé dans WordPress.

Utilisation de CSS personnalisé pour modifier les marges dans l'éditeur de site

Si vous utilisez un thème basé sur des blocs avec la prise en charge de l'éditeur de site complet. Alors, voici comment vous pouvez ajouter du CSS personnalisé à votre thème.

Tout d'abord, allez à la page Apparence » Éditeur pour lancer l'éditeur de site, puis basculez vers le panneau « Styles ».

En bas du panneau « Styles », cliquez sur l'onglet « CSS supplémentaire ».

Cela ouvrira un éditeur de texte où vous pourrez ajouter votre code CSS personnalisé. Votre code CSS s'appliquera immédiatement et vous pourrez voir les modifications apparaître à l'écran.

Une fois que vous êtes satisfait des modifications, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos changements.

Ajout de marges avec CSS dans le personnaliseur de thème

Si vous utilisez un thème classique (sans prise en charge de l'éditeur de site), vous pouvez enregistrer votre CSS personnalisé dans le personnaliseur de thème.

Accédez à la page Apparence » Personnaliser pour lancer le personnaliseur de thème.

Le personnaliseur affichera différentes options en fonction de votre thème WordPress.

Vous devez cliquer sur l'onglet CSS additionnel pour le développer.

L'onglet se déroulera pour vous montrer une simple boîte où vous pouvez ajouter votre CSS personnalisé.

Dès que vous ajoutez une règle CSS valide, vous pourrez la voir appliquée dans le volet d'aperçu en direct de votre site web.

Une fois que vous êtes satisfait des modifications, cliquez sur le bouton « Publier » pour sauvegarder vos changements.

Modifier les marges avec du code CSS personnalisé à l'aide de WPCode

La façon la plus simple d'ajouter du code CSS personnalisé dans WordPress est d'utiliser le plugin WPCode.

C'est le meilleur plugin d'extraits de code WordPress qui vous permet d'ajouter n'importe quel code CSS/HTML/PHP/JavaScript à votre site web WordPress sans le casser.

Lors de notre évaluation, nous l'avons trouvé très convivial. Pour en savoir plus sur notre expérience, consultez notre avis détaillé sur WPCode.

L'avantage d'utiliser WPCode est que vous ne perdrez pas vos modifications CSS lorsque vous changerez de thème WordPress.

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

Après l'activation, allez à la page Extraits de code » + Ajouter nouveau.

Passez la souris sur l'option « Ajouter votre code personnalisé (Nouvel extrait) » dans la bibliothèque d'extraits de code, et cliquez sur le bouton « Utiliser l'extrait ».

Ensuite, en haut de la page, ajoutez un titre pour votre extrait CSS personnalisé. Cela peut être n'importe quoi qui vous aide à identifier le code.

Après cela, écrivez ou collez votre CSS personnalisé dans la boîte « Aperçu du code » et définissez le « Type de code » en choisissant l'option « Extrait CSS » dans le menu déroulant.

Par exemple, si vous souhaitez ajouter ou modifier les marges autour du corps de la page Web entière, vous pouvez utiliser le code CSS suivant :

body { 
margin:50px;
}

Ensuite, faites défiler vers le bas jusqu'à la section « Insertion » et sélectionnez la méthode « Auto-insertion » pour exécuter le code sur l'ensemble de votre site WordPress.

Si vous souhaitez uniquement exécuter le code sur certaines pages ou publications, vous pouvez choisir la méthode « Shortcode ».

Maintenant, vous devez revenir en haut de la page et basculer l'interrupteur sur « Actif ».

Enfin, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos modifications.

Vous pouvez maintenant visiter votre site Web pour voir votre CSS personnalisé en action.

Foire aux questions sur les marges dans WordPress

Voici quelques questions que nos lecteurs posent fréquemment sur l'ajout de marges dans WordPress :

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

La marge est l'espace à l'extérieur de la bordure d'un élément, qui crée une distance entre celui-ci et les autres éléments. Le remplissage (padding) est l'espace à l'intérieur de la bordure d'un élément, créant un coussin entre le contenu et la bordure elle-même.

Pensez à la marge comme à l'espacement entre les cadres de tableaux sur un mur, et au remplissage comme à la marie-louise à l'intérieur d'un seul cadre de tableau.

Pour plus d'informations, vous pouvez également consulter notre guide sur la marge et le padding dans WordPress.

Comment puis-je modifier les marges spécifiquement pour les appareils mobiles ?

Pour ajuster les marges pour le mobile, vous pouvez utiliser des requêtes média CSS. Cela vous permet d'appliquer des styles spécifiques pour différentes tailles d'écran.

Les constructeurs de pages comme SeedProd offrent également des contrôles spécifiques à l'appareil, vous permettant de modifier facilement les marges pour les vues de bureau, de tablette et de mobile.

Pourquoi l'option de marge n'apparaît-elle pas pour un bloc spécifique dans l'éditeur WordPress ?

Tous les blocs WordPress n'ont pas de contrôles de marge intégrés, car cela peut dépendre de votre thème.

Si l'option est manquante, vous pouvez envelopper le bloc dans un bloc Groupe, qui possède des réglages de marge et de padding. Vous pouvez également utiliser l'une des méthodes CSS personnalisées pour cibler le bloc directement.

Est-il préférable d'utiliser un plugin ou du CSS personnalisé pour modifier les marges ?

Pour les débutants, un plugin de construction de pages comme SeedProd est souvent plus facile car il fournit une interface visuelle.

Pour les utilisateurs plus avancés ou pour effectuer des ajustements sur l'ensemble du site, le CSS personnalisé vous donne un contrôle plus précis.

L'utilisation d'un plugin comme WPCode pour ajouter votre CSS est un excellent choix car il protège votre code lorsque vous mettez à jour ou changez votre thème.

Nous espérons que cet article vous a aidé à apprendre comment ajouter ou modifier les marges dans WordPress. Vous pourriez également vouloir apprendre comment mettre des images côte à côte dans WordPress ou comment ajouter des boutons de soulignement et de justification de texte dans WordPress.

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.