Si vous construisez un site Elementor et que le texte „ne respire pas vraiment“ ou que les titres sont trop serrés sur les paragraphes, c'est presque toujours l'interaction entre le line-height et la marge. Les deux sont liés, les deux se règlent séparément dans l'interface d'Elementor — et les deux sont souvent confondus dans la pratique. Dans cet article, je passe en revue la logique, je montre des valeurs concrètes qui ont fait leurs preuves sur plus de 50 projets, et j'aborde les pièges typiques (en particulier sur mobile). Si vous souhaitez approfondir le design dans Elementor de manière générale, mon article Top 10 des conseils de design pour Elementor est la bonne étape suivante.
Prérequis : Elementor 3.20+ ou plus récent. La plupart des conseils valent aussi pour Elementor Pro — lorsque des fonctionnalités spécifiques à Pro entrent en jeu, je le signale.
Line-height vs. marge : où se situe la différence
Deux concepts liés, mais distincts :
Le line-height est l'espacement à l'intérieur d'un bloc de texte — entre deux lignes du même paragraphe. Si votre texte courant paraît „tassé“, le line-height est le réglage sur lequel vous devez agir.
La marge est l'espacement entre les éléments — par exemple entre un paragraphe et le titre suivant. Si deux paragraphes „se collent“ ou qu'un titre „est posé sur le paragraphe“, c'est la marge qui constitue le levier.
Des règles empiriques qui fonctionnent dans la pratique :
- Line-height du texte courant : 1.5–1.7 (parfois en Em, parfois sans unité — Elementor permet les deux)
- Line-height des titres : 1.1–1.3 (les grands titres ont besoin de moins d'air)
- Marge entre les paragraphes : 1em–1.5em (soit environ une hauteur de ligne)
- Marge entre un titre et le texte qui suit : 0.5em (serré, ils vont ensemble)
- Marge entre un paragraphe et un nouveau titre qui suit : 2em (de l'espace, nouveau sujet)
Ces valeurs ne sont pas un dogme — adaptez-les à votre choix de police. Une police à empattements étroite (par ex. Lora) demande plus de line-height, une grotesque large (par ex. Inter, Source Sans) en demande moins.
Typographie globale : régler une fois, utiliser partout
La plus grande erreur que je vois dans les projets Elementor : le line-height est défini par widget au lieu de l'être globalement. Le résultat : 47 line-heights différents répartis sur le site, aucune cohérence, et chaque modification devient un travail de Sisyphe.
À la place : utilisez la typographie globale.
Dans Elementor → menu hamburger en haut à gauche → „Site Settings“ → „Typography“. Vous y définissez :
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (corps de texte)
- Accent Text (par ex. les textes d'accroche)
Pour chaque style, vous fixez la Font Family, le Weight, la Size, le Line-Height et le Letter-Spacing. Ils sont ensuite applicables d'un clic dans chaque widget — et si vous changez plus tard le line-height de 1.6 à 1.55, cela change partout sur le site, et pas seulement à un endroit.
Valeurs par défaut recommandées :
| Style | Font Size (Desktop) | Line-Height | Margin-Bottom |
|---|---|---|---|
| Primary Heading (H1) | 48 px | 1.15 | 0.5em |
| Secondary Heading (H2) | 32 px | 1.2 | 0.6em |
| Tertiary Heading (H3) | 24 px | 1.3 | 0.5em |
| Body Text | 17 px | 1.6 | 1.2em |
| Accent / Lead | 20 px | 1.5 | 1.5em |
Ces valeurs sont un point de départ pour les sites tech/services modernes. Pour les magazines, les blogs et les textes de lecture plus longs, je réglerais le line-height du corps de texte sur 1.7 ou même 1.8 — la fluidité de lecture l'emporte sur la densité.
Section Pro : interligne pour les titres vs. le corps de texte
Les titres tolèrent peu de line-height, car ils n'ont pas de caractère de fluidité de lecture entre les lignes — ils sont courts, percutants, faits pour tenir ensemble. Si vous réglez un H1 sur deux lignes avec un line-height de 1.6, on dirait que quelqu'un a écrit deux phrases séparées.
Le corps de texte, en revanche, est du texte de lecture. Ici, les lignes ont besoin d'air pour que l'œil puisse sauter à la ligne suivante sans perdre le fil. Règle empirique : plus la longueur de vos lignes est grande, plus il faut de line-height. Une colonne de texte de 800 pixels de large avec 65 caractères par ligne tolère 1.6 sans problème ; une colonne étroite de 400 pixels avec 35 caractères par ligne devrait plutôt être à 1.4.
Astuce pratique : dans les réglages du widget Elementor, sous „Style“ → „Typography“, vous voyez un curseur „Line Height“. Basculez-le sur „Unit-less“ (le petit menu déroulant à droite du curseur). Un line-height sans unité s'adapte à la taille de la police — si vous changez plus tard la Font-Size, l'interligne s'ajuste automatiquement. Avec des valeurs en „Em“ ou „px“, cela ne fonctionne pas.
Widget Spacing vs. marge CSS : quand utiliser quoi ?
Elementor offre trois moyens de créer de l'espacement vertical :
- Marge sur l'élément (onglet Style → Advanced → Margin)
- Padding sur le conteneur (onglet Layout → Padding)
- Widget Spacer (un widget dédié que l'on insère entre les éléments)
Quel est le bon choix ? Cela dépend du contexte.
J'utilise la marge pour :
- Les espacements standard entre les éléments de texte
- La cohérence globale (définie dans la typographie globale)
J'utilise le padding pour :
- Les espacements entre sections (padding haut/bas sur le conteneur)
- Lorsque l'arrière-plan/background joue un rôle (le padding déplace le contenu, pas la zone colorée)
J'utilise le widget Spacer pour :
- Des espacements ponctuels, très spécifiques, qui ne rentrent pas dans la logique standard
- Des tests rapides en mode design
Ce que j'évite :
- Plusieurs balises
vides dans l'éditeur de texte pour créer de l'espace. C'est un hack HTML de 2007 — non sémantique, mauvais pour les lecteurs d'écran, et il se comporte autrement qu'on ne l'attend en responsive. - Des spacers réglés au pixel près sur chaque section. Un spacer de 73 px semble exact dans l'éditeur, mais c'est un cauchemar de maintenance.
Interligne sur mobile : ce qui dérape sur tablette/téléphone
Le piège d'espacement mobile le plus fréquent : sur desktop, vous avez un H1 de 48 px avec un line-height de 1.15. Sur le téléphone, la Font-Size se réduit automatiquement à 32 px — mais le line-height de 1.15 rend soudain le bloc de titre trop serré, car les titres sur mobile passent souvent à la ligne.
Solution : Elementor permet des valeurs responsives par breakpoint. Cliquez sur l'icône d'appareil à côté de chaque valeur et réglez :
- Desktop H1 : line-height 1.15
- Tablet H1 : line-height 1.2
- Mobile H1 : line-height 1.25
De même pour le corps de texte :
- Desktop Body : line-height 1.6
- Mobile Body : line-height 1.55 (les lignes plus courtes en demandent moins)
Sur mobile, la marge devrait être plus petite que sur desktop. Si vous avez 2em entre un H2 et un paragraphe sur desktop, vous devriez descendre à 1.2em sur mobile — sinon le site ressemble, sur un écran de 5 pouces, à quelque chose où chaque section aurait été séparée par trois lignes vides.
Conseil bonus pour les utilisateurs Pro : avec Elementor Pro, vous pouvez définir vos propres breakpoints sous „Site Settings“ → „Layout“. Par défaut, ce sont Mobile (≤767 px), Tablet (768–1024 px), Desktop. Si votre cible compte beaucoup d'iPad Pro, un breakpoint supplémentaire à 1200 px vaut la peine.
Note sur la performance : pas d'orgies de CSS inline
Chaque valeur d'espacement que vous définissez par widget dans Elementor se retrouve sous forme de classe CSS générée dans le HTML — et cela peut s'accumuler. Une page avec 200 widgets stylés individuellement compte 200 règles CSS supplémentaires dans le head. Ce n'est pas un crime, mais c'est inutile.
Bonnes pratiques pour une performance propre :
- Définir la typographie globale (voir plus haut) plutôt que de styler par widget.
- Réutiliser des templates de section préconçus plutôt que de styler chaque section de zéro.
- Définir des Custom CSS Classes (Elementor Pro) — par ex. une classe
.spacing-mediumqui applique 2em de margin-bottom, puis l'appliquer là où c'est nécessaire. - Désactiver les widgets inutilisés. Elementor charge le CSS de chaque widget activé — même si vous ne l'utilisez pas. Vous pouvez faire le ménage sous „Settings“ → „Features“.
Pour des conseils de performance plus poussés sur Elementor, consultez mon article Optimisation de la performance d'Elementor. Et si vous débutez tout juste et souhaitez apprendre Elementor de façon structurée, Tutoriel Elementor pour débutants est une lecture obligatoire.
Forcer un retour à la ligne — sans nouveau paragraphe
Étroitement lié à l'interligne, il y a le retour à la ligne. Parfois, vous voulez passer à la ligne sans commencer un tout nouveau paragraphe (avec son espacement supplémentaire) — par exemple pour une adresse, un slogan ou une mention sur plusieurs lignes. Dans l'éditeur de texte d'Elementor, vous contrôlez cela ainsi :
- Maj + Entrée crée un simple retour à la ligne (
<br>) — même hauteur de ligne, pas d'espacement de paragraphe supplémentaire. - Un Entrée normal crée un nouveau paragraphe (
<p>) avec l'espacement de paragraphe plus grand, que vous contrôlez plus haut via la marge.
C'est précisément cette distinction qui est l'écueil le plus fréquent : qui appuie partout sur Entrée obtient trop d'espace et s'étonne de blocs de texte déchirés. Avec Maj+Entrée, vous gardez le contrôle — et combiné au bon interligne vu plus haut, le texte paraît enfin posé.
Besoin d'un contrôle de design ou d'une formation ?
Si votre site Elementor „ne va pas vraiment“ côté espacement, je regarde par-dessus votre épaule en 60 minutes et je mets au jour les lacunes les plus fréquentes — le plus souvent, une heure suffit pour poser proprement la typographie et instaurer de la cohérence. Écrivez-moi un mot et je conviens avec vous d'un coaching individuel ou d'un petit audit.
→ Demander un coaching : Prendre contact
Tags