Comment modifier les marges externes dans WordPress (Guide du débutant)

Voulez-vous modifier les marges externes dans WordPress ?

Les marges sont l’un des éléments de conception les plus importants qui peuvent améliorer de manière significative l’expérience des utilisateurs/utilisatrices et l’attrait esthétique de toute conception. Elles ajoutent de l’espace entre les éléments afin que votre contenu soit lisible et que tout soit facilement identifiable.

Dans ce guide pour débutants, nous allons vous afficher comment ajouter et modifier les marges externes dans WordPress. Nous vous afficherons différentes méthodes pour modifier les marges dans différentes zones de votre site WordPress.

Qu’est-ce que les marges externes dans WordPress et la conception de sites web ?

Les marges externes sont l’espace ajouté autour d’une page web ou d’autres éléments à l’intérieur d’une page web.

Imaginez une page web typique comme une feuille de papier vide. Les marges sont l’espace blanc ou vierge autour des bords du papier.

L’utilisation de marges externes permet de s’assurer que les éléments d’une page web ne sont pas trop serrés les uns contre les autres.

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

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

Dans cet article, nous allons couvrir un grand nombre de sujets. Cliquez sur les liens ci-dessous pour accéder à la section de votre choix.

Quelle est la différence entre marge externe et marge interne ?

La marge externe et la marge interne sont toutes deux utilisées pour ajouter de l’espace blanc dans la conception d’un site web. Cependant, elles sont utilisées de manière très différente.

Les marges externes ajoutent un espace vide à l’extérieur d’un élément, tandis que les marges internes ajoutent un espace vide à l’intérieur de l’élément.

Les marges externes sont utilisées pour ajouter de l’espace à l’extérieur d’un élément. Elles vous permettent de veiller à ce qu’il y ait suffisamment d’espace entre les éléments d’une page web.

Exemples :

1. Ajout de marges externes pour augmenter l’espace entre une image et le texte d’un article.

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

La marge interne, quant à elle, est utilisée pour ajouter un espace tampon entre le contenu et les bords d’une boîte ou d’un élément.

Exemples :

1. Ajuster la marge interne pour augmenter l’espace de coussin dans vos boutons d’appel à l’action.

2. Augmenter la marge interne d’une colonne de texte

La marge interne et la marge externe sont toutes deux largement utilisées dans la conception de sites web.

L’utilisation d’espaces vides permet de donner de l’air à toute conception, ce qui la rend plus conviviale et plus élégante.

Pourquoi avez-vous besoin d’ajouter ou de modifier les marges externes dans WordPress ?

Les marges externes sont un aspect crucial de la conception d’un site web. Elles donnent à votre site un aspect agréable et facile à utiliser pour vos utilisateurs/utilisatrices.

Les thèmes WordPress s’occupent de la conception de votre site WordPress. La plupart d’entre eux font déjà un excellent travail en définissant des règles CSS pour garantir un espace blanc important en utilisant des marges dans la mise en page de votre thème.

Cependant, il peut arriver que vous ayez besoin d’ajouter des marges externes pour ajuster les choses.

Par exemple, il se peut que vous n’aimiez pas la marge externe autour de vos menus de navigation ou que vous souhaitiez ajouter une marge externe autour de vos boutons d’appel à l’action.

De même, vous pouvez parfois avoir l’impression que les articles sont trop proches ou trop éloignés les uns des autres.

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

Comment ajouter des marges externes dans WordPress ?

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

En fonction de l’endroit où vous souhaitez ajouter de la marge externe et des options disponibles dans votre thème WordPress, vous devrez choisir une méthode qui vous convienne.

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

Ajout de marges externes dans WordPress à l’aide de l’éditeur du site complet

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

Tout d’abord, vous devez vous rendre dans la rubrique Apparence  » Éditeurs/éditrices pour lancer l’éditeur de site.

Une fois dans l’éditeur/éditrices de site, cliquez pour choisir un Modèle dans la colonne de gauche ou cliquez n’importe où dans la fenêtre de prévisualisation.

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

Au fur et à mesure que vous ajustez les marges externes, l’éditeur met en évidence la zone de marge.

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

Ajout de marges externes dans l’éditeur de blocs

Si vous travaillez sur une publication de blog ou une page, vous utiliserez l’éditeur de blocs.

L’éditeur de blocs de WordPress vous permet d’ajouter et de modifier les marges des différents blocs.

Il vous suffit de cliquer sur le bloc dans lequel vous souhaitez ajouter/ajuster des marges. Sous les Réglages du bloc, passez à l’onglet Style et défilez vers le bas jusqu’à l’option Dimensions ou Marges.

Ajout de marges externes dans WordPress avec SeedProd

SeedProd est la meilleure extension de constructeur de page WordPress sur le marché. Il vous permet de créer facilement des pages personnalisées pour votre site. Vous pouvez même l’utiliser pour créer un thème WordPress personnalisé à partir de zéro.

Le constructeur de page intuitif de SeedProd, basé sur le principe du glisser-déposer, vous permet d’ajuster facilement les marges externes de n’importe quel élément à l’intérieur de l’éditeur.

Tout d’abord, vous devez installer et activer l’extension SeedProd. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Ensuite, vous devez vous rendre dans la section SeedProd  » Pages d’atterrissage, puis cliquer sur le bouton Ajouter une nouvelle page d’atterrissage.

Ensuite, 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 d’atterrissage.

Ceci lancera le constructeur de page de SeedProd.

Vous verrez une Prévisualisation directe 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 article de la page pour le modifier.

En cliquant sur un élément, vous le sélectionnez et ses options s’affichent dans la colonne de gauche. Passez à l’onglet Avancé et cliquez sur l’option Espacement.

Vous pouvez modifier les marges externes et les marges internes de l’élément sélectionné.

Une fois que vous avez fini de modifier votre page, n’oubliez pas de cliquer sur le bouton Enregistrer et publier en haut à droite.

Ensuite, vous pouvez visiter votre site pour voir les modifications en action.

Modifier les marges externes à l’aide de Thrive Architect

Thrive Architect est l’un des meilleurs outils de constructeur de page WordPress qui vous permet d’utiliser une interface de glisser-déposer pour concevoir des pages WordPress.

Il est livré avec plus de 300+ modèles que vous pouvez utiliser comme point de départ. De plus, vous pouvez également l’utiliser pour modifier vos publications et pages WordPress, en empruntant la mise en page et le style de votre thème WordPress existant.

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

À partir de là, vous devez télécharger et installer l’extension Thrive Product Manager. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page du gestionnaire de produits Thrive.

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.

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

Thrive Product Manager va maintenant installer l’extension 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.

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 normale ou un modèle de Page d’atterrissage prédéfini.

Si vous choisissez une option de Page d’atterrissage prédéfinie, alors l’extension vous affichera un tas de modèles à choisir.

Il suffit de cliquer pour sélectionner celui qui ressemble à ce que vous voulez créer.

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

Vous verrez une Prévisualisation en direct de votre page avec une barre d’outils sur la droite et un panneau de Réglages sur la gauche.

Vous pouvez pointer sur un élément pour le sélectionner. Ou cliquer sur le bouton d’ajout [+] dans la barre d’outils pour ajouter un nouveau module.

Lorsque vous cliquez pour sélectionner et modifier un élément, ses Réglages apparaissent dans la colonne de gauche.

À partir de là, cliquez sur l’onglet Mise en page et position pour modifier les marges externes et les marges internes.

Vous verrez une représentation visuelle de la marge externe et de la marge interne.

Placez votre souris sur n’importe quel côté de la marge externe et faites glisser la poignée pour augmenter ou réduire la marge.

Vous pouvez répéter le processus pour modifier les marges sur n’importe lequel 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 l’éditeur de texte.

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

Modifier les marges externes de WordPress à l’aide du code CSS

Cette méthode nécessite l’ajout d’un 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 externes.

Ajouté et modifié les marges en utilisant le CSS personnalisé dans le thème WordPress

WordPress vous permet d’enregistrer des CSS personnalisés dans les options de votre thème WordPress. Cependant, en fonction de votre thème WordPress, il y a plusieurs façons de le faire.

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

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

body { 
margin:50px; 
}

Le moyen le plus simple de trouver l’élément à cibler est d’utiliser l’outil Inspecter de votre navigateur.

Ouvrez votre site dans un nouvel onglet du navigateur et passez la souris sur l’élément dont vous souhaitez modifier les marges externes. Ensuite, cliquez à droite et sélectionnez Inspecter dans le menu du navigateur.

L’écran de votre navigateur sera divisé et vous verrez le code HTML et le CSS qui se cachent derrière la page.

Vous pouvez passer votre souris sur le code, et votre navigateur mettra en évidence la zone concerné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é.

Vous pouvez même essayer vos marges externes ici pour en avoir un aperçu.

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

Voyons les différentes façons d’enregistrer cette CSS personnalisée dans WordPress.

Utilisation d’un CSS personnalisé pour modifier les marges dans l’éditeur de site

Si vous utilisez un thème bloc avec un support complet des éditeurs/éditrices de site. Voici comment ajouter des CSS personnalisés à votre thème.

Tout d’abord, rendez-vous sur la page Apparence  » Éditeur pour lancer l’éditeur de site, puis passez au panneau Styles.

En bas du panneau Styles, cliquez sur l’onglet Additional CSS.

Un éditeur/éditrices de texte s’affiche alors, dans lequel vous pouvez ajouter votre code CSS personnalisé. Votre code CSS s’appliquera immédiatement et vous pourrez voir les modifications apparaître à l’écran.

Lorsque vous êtes satisfait des modifications, n’oubliez pas de cliquer sur le bouton Enregistrer pour stocker vos modifications.

Ajout de marges externes à l’aide de CSS dans le personnalisateur de thème

Si vous utilisez un thème classique (sans support de l’éditeur de site), vous pouvez enregistrer votre CSS personnalisé dans le personnalisateur de thème.

Allez dans la page Apparence  » Personnaliser pour lancer le client/cliente de personnalisation du thème.

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

Vous devez cliquer sur l’onglet Additional CSS pour le déplier.

L’onglet se diapositive pour afficher une boîte simple 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 de prévisualisation directe de votre site.

Lorsque vous êtes satisfait des modifications, cliquez sur le bouton Publier pour stocker vos modifications.

Modifier les marges avec un code CSS personnalisé en utilisant WPCode

La manière la plus simple d’ajouter du code CSS personnalisé dans WordPress est d’utiliser l’extension WPCode.

C’est la meilleure extension d’extraits de code WordPress qui vous permet d’ajouter n’importe quel code CSS/HTML/PHP/JavaScript à votre site WordPress sans le casser.

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

Note : Il existe également une version gratuite de WPCode que vous pouvez utiliser.

La première chose à faire est d’installer et d’activer l’extension WPCode. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Une fois activé, rendez-vous sur la page Extraits de code  » + Ajouter une nouvelle « .

Placez 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 à votre extrait CSS personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier le code.

Ensuite, écrivez ou collez votre CSS personnalisé dans la zone « Prévisualisation 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 de l’ensemble du corps de la page web, vous pouvez utiliser le code CSS suivant :

body { 
margin:50px;
}

Sélectionné, défilez jusqu’à la section  » Insertion  » et sélectionnez la méthode  » Auto-Insert  » 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 « Code court ».

Vous devez maintenant retourner en haut de la page et permuter le commutateur sur « Actif ».

Enfin, cliquez sur le bouton « Enregistrer l’extrait » pour stocker vos modifications.

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

Nous espérons que cet article vous a aidé à apprendre comment ajouter ou modifier des marges externes dans WordPress. Vous pouvez également consulter notre antisèche complète sur le développement de thèmes WordPress ou jeter un coup d’œil à notre guide sur la personnalisation des thèmes WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.