Se sta costruendo un sito con Elementor e il testo „non respira“ o i titoli stanno troppo stretti sui paragrafi, quasi sempre si tratta dell'interazione tra line-height e margin. Sono collegati tra loro, entrambi vengono impostati separatamente nell'interfaccia di Elementor — ed entrambi, nella pratica, vengono spesso confusi. In questo articolo ripercorro la logica, mostro valori concreti che si sono rivelati efficaci in oltre 50 progetti e affronto le trappole tipiche (soprattutto su mobile). Se desidera approfondire in generale il design con Elementor, il mio articolo I 10 migliori consigli di design per Elementor è il passo successivo ideale.
Requisito: Elementor 3.20+ o versione successiva. La maggior parte dei consigli vale anche per Elementor Pro — dove entrano in gioco funzioni specifiche di Pro, lo segnalo.
Line-height vs. margin: dove sta la differenza
Due concetti correlati, ma distinti:
La line-height è lo spazio all'interno di un blocco di testo — tra due righe dello stesso paragrafo. Se il Suo body text appare „compresso“, la line-height è la vite su cui agire.
Il margin è lo spazio tra gli elementi — ad esempio tra un paragrafo e il titolo successivo. Se due paragrafi „sono appiccicati“ o un titolo „siede sul paragrafo“, il margin è la leva giusta.
Regole pratiche che funzionano:
- Line-height del body text: 1.5–1.7 (a volte in em, a volte senza unità — Elementor consente entrambe)
- Line-height dei titoli: 1.1–1.3 (i titoli grandi hanno bisogno di meno aria)
- Margin tra i paragrafi: 1em–1.5em (quindi circa un'altezza di riga)
- Margin tra titolo e testo che segue: 0.5em (stretto, appartengono insieme)
- Margin tra paragrafo e nuovo titolo successivo: 2em (distanza, nuovo argomento)
Questi valori non sono un dogma — li adatti alla Sua scelta tipografica. Un carattere serif stretto (ad es. Lora) richiede più line-height, un carattere grottesco largo (ad es. Inter, Source Sans) di meno.
Tipografia globale: impostare una volta, usare ovunque
L'errore più grande che vedo nei progetti Elementor: la line-height viene impostata per ogni widget, invece che globalmente. Il risultato: 47 line-height diverse sparse per il sito, nessuna coerenza, ogni modifica diventa una fatica di Sisifo.
Invece: usi la tipografia globale.
In Elementor → menu hamburger in alto a sinistra → „Site Settings“ → „Typography“. Lì definisce:
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (body)
- Accent Text (ad es. testi lead)
Per ogni stile imposta Font Family, Weight, Size, line-height e Letter-Spacing. Questi diventano poi applicabili con un clic in ogni widget — e se in seguito modifica la line-height da 1.6 a 1.55, il cambiamento si applica ovunque sul sito, non solo in un punto.
Valori predefiniti consigliati:
| Stile | 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 |
Questi valori sono un punto di partenza per moderni siti tech/service. Per riviste, blog, testi di lettura più lunghi imposterei la line-height del body su 1.7 o persino 1.8 — la fluidità di lettura batte la densità.
Sezione Pro: interlinea per titoli vs. body
I titoli tollerano poca line-height, perché tra le righe non hanno un carattere di fluidità di lettura — sono brevi, incisivi, devono stare uniti. Se imposta un H1 su due righe con line-height 1.6, sembra che qualcuno abbia scritto due frasi separate.
Il body text, al contrario, è testo di lettura. Qui le righe hanno bisogno di respiro, affinché l'occhio possa saltare alla riga successiva senza perdere il filo. Regola pratica: più è lunga la Sua lunghezza di riga, più line-height serve. Una colonna di testo larga 800 pixel con 65 caratteri per riga tollera 1.6 senza problemi; una colonna stretta di 400 pixel con 35 caratteri per riga dovrebbe avere piuttosto 1.4.
Trucco pratico: nelle impostazioni del widget Elementor, sotto „Style“ → „Typography“, vede uno slider „Line Height“. Lo imposti su „Unit-less“ (il piccolo dropdown a destra dello slider). La line-height unit-less scala con la dimensione del carattere — se in seguito modifica la font-size, l'interlinea si adatta automaticamente. Con valori in „Em“ o „px“ questo non avviene.
Spacing-Widget vs. CSS margin: quando usare cosa?
Elementor offre tre modi per creare spaziatura verticale:
- Margin sull'elemento (Style-Tab → Advanced → Margin)
- Padding sul container (Layout-Tab → Padding)
- Spacer-Widget (un widget a sé che si inserisce tra gli elementi)
Quale via è quella giusta? Dipende dal contesto.
Il margin lo uso per:
- Spaziature standard tra elementi di testo
- Coerenza globale (definita nella tipografia globale)
Il padding lo uso per:
- Spaziature tra sezioni (padding sopra/sotto sul container)
- Quando lo sfondo/background ha un ruolo (il padding sposta il contenuto, non l'area colorata)
Lo Spacer-Widget lo uso per:
- Spaziature singole, molto specifiche, che non rientrano nella logica standard
- Test rapidi in modalità design
Ciò che evito:
- Più tag
vuoti nell'editor di testo per creare spazio. È un trucco HTML del 2007 — non semantico, scadente per gli screen reader, si comporta in modo diverso da quanto ci si aspetta nel responsive. - Spacer al pixel su ogni sezione. Uno spacer da 73 px appare perfetto nell'editor, ma è un incubo di manutenzione.
Interlinea su mobile: cosa va storto su tablet/telefono
La trappola di spaziatura mobile più comune: sul desktop ha un H1 con font-size 48 px e line-height 1.15. Sul telefono la font-size si riduce automaticamente a 32 px — ma la line-height 1.15 rende lì il blocco del titolo improvvisamente troppo stretto, perché i titoli su mobile spesso vanno a capo.
Soluzione: Elementor consente valori responsive per ogni breakpoint. Clicchi sull'icona del dispositivo accanto a ogni valore e imposti:
- Desktop H1: line-height 1.15
- Tablet H1: line-height 1.2
- Mobile H1: line-height 1.25
Allo stesso modo per il body text:
- Desktop body: line-height 1.6
- Mobile body: line-height 1.55 (le righe più corte ne richiedono meno)
Su mobile il margin dovrebbe essere più piccolo che su desktop. Chi ha 2em tra H2 e paragrafo su desktop, su mobile dovrebbe scendere a 1.2em — altrimenti su un display da 5 pollici il sito sembra che qualcuno abbia separato ogni sezione con tre righe vuote.
Bonus per gli utenti Pro: con Elementor Pro può definire breakpoint personalizzati sotto „Site Settings“ → „Layout“. Quelli standard sono Mobile (≤767 px), Tablet (768–1024 px), Desktop. Se il Suo pubblico ha molti iPad Pro, vale la pena aggiungere un breakpoint a 1200 px.
Nota sulle prestazioni: niente orge di CSS inline
Ogni valore di spaziatura che imposta in Elementor per ogni widget finisce come classe CSS generata nell'HTML — e può accumularsi. Una pagina con 200 widget stilizzati individualmente ha 200 regole CSS aggiuntive nell'head. Non è un crimine, ma è inutile.
Best practice per prestazioni pulite:
- Definire la tipografia globale (vedi sopra) invece di stilizzare per ogni widget.
- Riutilizzare template di sezione pre-costruiti invece di stilizzare ogni sezione da capo.
- Definire Custom CSS Classes (Elementor Pro) — ad es. una classe
.spacing-mediumche imposta 2em di margin-bottom, da applicare poi dove serve. - Disattivare i widget non utilizzati. Elementor carica il CSS per ogni widget attivato — anche se non lo usa. Sotto „Settings“ → „Features“ può fare pulizia.
Per consigli più approfonditi sulle prestazioni di Elementor consulti il mio articolo Ottimizzazione delle prestazioni di Elementor. E se è proprio all'inizio e vuole imparare Elementor in modo strutturato, il mio Tutorial Elementor per principianti è lettura obbligatoria.
Forzare un'interruzione di riga — senza un nuovo paragrafo
Strettamente legata all'interlinea è l'interruzione di riga. A volte vuole andare a capo senza iniziare un intero nuovo paragrafo (con spaziatura aggiuntiva) — ad esempio per un indirizzo, uno slogan o una dicitura su più righe. Nell'editor di testo di Elementor lo controlla così:
- Shift + Invio crea una semplice interruzione di riga (
<br>) — stessa altezza di riga, nessuna spaziatura di paragrafo aggiuntiva. - Un normale Invio crea un nuovo paragrafo (
<p>) con la spaziatura di paragrafo maggiore, che controlla più in alto tramite il margin.
Proprio questa distinzione è lo scoglio più frequente: chi preme Invio ovunque ottiene troppo spazio e si stupisce dei blocchi di testo spezzati. Con Shift+Invio mantiene il controllo — e, combinata con la giusta altezza di riga di cui sopra, il testo finalmente appare calmo.
Vuole un controllo del design o una formazione?
Se il Suo sito Elementor „non torna del tutto“ a livello di spaziatura, Le guardo dietro le spalle per 60 minuti e scopro le lacune più frequenti — di solito basta un'ora per impostare la tipografia in modo pulito e creare coerenza. Mi scriva due righe e fisserò con Lei un coaching 1:1 o un piccolo audit.
→ Richiedere un coaching: Mettiti in contatto
Tag