Come modificare l’interlinea del testo in WordPress

Un’adeguata spaziatura delle righe non è solo una questione estetica, ma influisce direttamente sulla leggibilità, sull’esperienza dell’utente e anche sul modo in cui i visitatori interagiscono con i vostri contenuti. Che si tratti di un blog personale o della gestione di siti web commerciali ad alto traffico, l’ottimizzazione dell’interlinea in WordPress può migliorare notevolmente la struttura visiva del sito.

In questa guida vi illustreremo i modi più efficaci per modificare l’interlinea in WordPress, con e senza codice, utilizzando sia l’editor classico che quello a blocchi (Gutenberg). Imparerete anche ad applicare CSS personalizzati e a risolvere i problemi di formattazione più comuni.

Perché l’interlinea è importante

• Migliora la leggibilità, soprattutto su mobile
• Riduce la frequenza di rimbalzo rendendo i testi lunghi più facili da scansionare
• Migliora la coerenza del design tra temi e dispositivi
• Si allinea alle migliori pratiche SEO (contenuti chiari e strutturati = migliore coinvolgimento)

Vediamo come controllarlo.

Metodo 1: Regolare l’interlinea nell’editor Gutenberg

Nell’editor di blocchi predefinito (Gutenberg), è possibile gestire l’interlinea utilizzando le impostazioni del blocco “Paragrafo” o tramite classi CSS personalizzate.

➤ Passi:

• Aprire il post o la pagina nell’editor di WordPress.
• Selezionate un blocco Paragrafo.
• Nella barra laterale destra, trovare l’opzione Tipografia > Altezza linea.
• Regolare il valore (ad esempio, 1,6, 2, 2,2).

Nota: se l’opzione non è disponibile, procedere con il CSS personalizzato (metodo 3).

Metodo 2: Editor classico (TinyMCE)

L’editor classico non include un’opzione diretta per l’altezza delle linee. Tuttavia, è possibile:

• Utilizzare l’Invio Maiusc per le interruzioni di riga manuali (senza spaziatura)
• Utilizzare plugin come TinyMCE Advanced (ora parte di “Strumenti per l’editor avanzato”) per aggiungere controlli di spaziatura

Per uno stile coerente, si consiglia di impostare l’altezza delle righe tramite i CSS.

Metodo 3: CSS personalizzato (pratica migliore per un controllo completo)

Questo metodo offre un controllo preciso, funziona con tutti i blocchi e i temi ed evita gli spostamenti di layout.

Esempio 1: altezza di riga globale per tutti i paragrafi

p {
  line-height: 1,8;
}

Esempio 2: Applicare solo a una classe specifica

.custom-text {
  line-height: 2.2;
}

Dove inserire il CSS:

• Aspetto → Personalizza → CSS aggiuntivo, oppure
• All’interno dello style.css del tema figlio, oppure
• Attraverso un plugin come Simple Custom CSS

Metodo 4: Costruttori di pagine (Elementor, WPBakery, ecc.)

Per Elementor:

• Modificare la sezione o il widget di testo.
• In Stile → Tipografia, regolare il campo Altezza linea.
• È possibile impostarla in em, px o in unità relative.

Per WPBakery:

• Utilizzare le opzioni di progettazione o aggiungere CSS personalizzati direttamente nelle impostazioni di riga o colonna.

Metodo 5: Interlinea adatta ai dispositivi mobili

• Una buona spaziatura delle righe su desktop può sembrare angusta su mobile. La maggior parte degli editor (compresi Gutenberg ed Elementor) consente impostazioni responsive. Sempre:
• Anteprima delle modifiche su tablet e mobile
• Impostare un’interlinea leggermente maggiore per gli schermi piccoli (ad esempio, 2 invece di 1,6)
• Problemi e correzioni comuni

L’altezza delle righe non cambia dopo l’aggiornamento dei CSS?

• Assicurarsi che il tema o il plugin non stia sovrascrivendo gli stili.
• Provare a utilizzare !important nella regola CSS:

p {
  line-height: 2 !important;
}

Le modifiche sono visibili nel Customizer ma non dal vivo?

• Cancellare la cache del sito e del browser.
• Se si utilizza un plugin per la cache, svuotare tutte le cache.

Riepilogo