Comprendre ce que sont les marges dans WordPress
Les marges, c’est l’espace extérieur autour d’un élément. Genre, tu veux que ton paragraphe ne colle pas à ton image, ou que ton bouton ait un peu de souffle autour. Bah c’est là que les marges entrent en jeu.
Et selon le thème ou le constructeur que tu utilises (Gutenberg, Elementor, ou un page builder chelou que ton client t’a imposé...), les choses peuvent changer.
Modifier les marges dans l’éditeur de blocs (Gutenberg)
Alors là, attention, c’est à la fois simple et frustrant.
Utiliser les options intégrées
Si tu bosses avec Gutenberg (l’éditeur par défaut de WordPress maintenant), tu peux modifier les marges directement via l’inspecteur de bloc sur la droite. Mais – et c’est un gros "mais" – ça dépend du bloc ET du thème.
Par exemple, j’ai bossé sur un site avec le thème Twenty Twenty-Three, et y’avait des blocs qui avaient l’option "Marges", et d'autres... que dalle. Vraiment rien. J’ai même cru que j’avais pété mon WordPress.
Bref. Si l’option est là, tu verras un petit champ pour "Marge supérieure", "Marge inférieure", etc. Tu mets une valeur, genre 20px ou 2rem, et boum. Ça marche (normalement).
Quand l’option n’est pas dispo
Bah là, faut bidouiller un peu. Tu peux ajouter une classe CSS personnalisée au bloc (c’est tout en bas dans le panneau latéral), et ensuite ajouter du CSS dans le personnalisateur ou dans ton thème enfant.
Exemple :
Tu mets une classe ma-marge-perso et tu ajoutes :
css.ma-marge-perso { margin-top: 30px; margin-bottom: 30px;}
Pas sorcier, mais faut savoir où le foutre ce code. (Je te dis plus bas).
Modifier les marges avec Elementor (ou autre page builder)
Alors là, on passe en mode luxe. Elementor, c’est plus visuel, plus simple... mais parfois aussi plus capricieux.
Glisser-déposer, cliquer-ajuster
Tu cliques sur un élément > onglet "Avancé" > section "Marge". Et là tu peux mettre ce que tu veux en pixels, pour chaque côté. Hyper pratique. T’as même une petite chaîne pour lier ou délier les côtés. Honnêtement, j’adore.
Une fois, mon pote Hugo voulait un "effet d’air autour d’une section". J’ai augmenté les marges extérieures, et il m’a dit "Ah ouais, ça respire mieux !"
Attention aux marges négatives
Oui, tu peux mettre des marges négatives. Genre -20px. Et ça décale ton bloc. Mais fais gaffe, ça peut tout péter sur mobile. Teste bien tes modifs en responsive. J’ai cassé une mise en page comme ça une fois… le footer était dans le header, j’exagère à peine.
Ajouter du CSS pour modifier les marges
Franchement, y’a des fois où faut sortir les outils de dev. Genre vraiment. Si ton thème est limité ou que le bloc que tu veux modifier refuse de coopérer, tu peux injecter du CSS.
Où écrire le CSS ?
Plusieurs options :
Apparence > Personnaliser > CSS additionnel → rapide, efficace
Via un thème enfant si tu veux du propre et pérenne (ou si t’es maniaque comme moi)
Avec un plugin type “Simple CSS” si t’as pas envie de te prendre la tête
Et là tu mets ton code comme vu plus haut :
css.mon-element { margin: 50px 0;}
Tu peux cibler les blocs avec leur classe automatique aussi, genre .wp-block-paragraph ou .wp-block-image. Mais attention à pas tout casser globalement.
Les erreurs fréquentes à éviter
Alors là, laisse-moi te faire une petite liste vite fait. Parce que j’ai fait TOUTES ces erreurs. Vraiment.
Confondre marge (margin) et padding → padding c’est l’intérieur, margin c’est l’extérieur
Oublier les unités →
20ne veut rien dire, faut20pxou2emAppliquer une marge globale à tout et tout décaler sans comprendre pourquoi
Modifier des marges sur desktop sans vérifier le responsive (grave erreur, je te jure)
Tiens, une fois, j’ai mis margin: 100px sur un bloc dans un header. Sur mobile ? Le logo était tellement loin qu’il sortait de l’écran. Pfff… j’ai mis 20 minutes à comprendre pourquoi.
Conclusion : bidouille, test, recommence
Alors oui, modifier les marges sur WordPress, c’est faisable. Mais faut un peu mettre les mains dans le cambouis, surtout si t’as un thème capricieux ou un client qui veut "que tout soit centré, mais pas trop".
Mon conseil ? Joue avec les options, ose essayer, fais des sauvegardes, et surtout : regarde le site en mobile ET en tablette. Parce que ce qui marche bien sur ton écran 27 pouces peut être un cauchemar sur iPhone.
Et si vraiment t’es bloqué, bah écris-moi. Ou demande à Hugo, lui il adore les marges.