Hai mai notato come alcuni siti web abbiano contenuti perfettamente spaziati e facili da scansionare, mentre altri sembrano affollati e difficili da leggere?
Il segreto spesso si riduce a qualcosa di semplice: interruzioni di riga e spaziatura corrette.
Se hai mai aggiunto interruzioni di riga nel tuo editor di WordPress solo per scoprire che non vengono visualizzate sulla tua pagina pubblicata, non sei assolutamente solo. WordPress gestisce la spaziatura in modo leggermente diverso rispetto ai word processor come Google Docs o Microsoft Word.
Una volta che capisci come funziona, però, avrai il controllo completo sull'aspetto dei tuoi contenuti.
Ti mostreremo diversi metodi affidabili per aggiungere interruzioni di riga in WordPress, dalle scorciatoie rapide alle opzioni di formattazione più avanzate.
Perché aggiungere un'interruzione di riga in WordPress (spaziatura tra nuove righe)?
A prima vista, un'interruzione di riga potrebbe sembrare una piccola scelta di formattazione, ma può avere un grande impatto sulle prestazioni dei tuoi contenuti.
Dal miglioramento della leggibilità al potenziamento dell'esperienza utente, l'aggiunta di una spaziatura corretta rende le tue pagine pulite e professionali. Ecco perché è importante:
- Migliore leggibilità: Interrompe blocchi di testo per una scansione più facile.
- Ottimizzato per dispositivi mobili: Mantiene i contenuti chiari su schermi più piccoli.
- Corregge il testo incollato: Pulisce la formattazione da altre fonti.
- Attira l'attenzione: Aiuta i suggerimenti e le CTA a risaltare.
In breve, le interruzioni di riga rendono il tuo contenuto più facile da leggere e più coinvolgente, sia per i visitatori che per i motori di ricerca.
Nota: Prima di iniziare, è importante sapere che lo spazio tra le righe è controllato dal tema WordPress che utilizzi.
Ti mostreremo come aggiungere spazio tra i blocchi nell'editor a blocchi, e poi come regolare lo spazio tra le righe nel tuo tema se non sei soddisfatto dei risultati predefiniti.
Detto questo, diamo un'occhiata a come aggiungere facilmente un'interruzione di riga in WordPress.
- Come aggiungere uno spazio tra doppie righe tra i blocchi
- Come aggiungere uno spazio tra righe singole
- Il modo più semplice: usare il blocco Spaziatore
- Modifying the Line Height and Spacing
- Tutorial video
Come aggiungere uno spazio tra doppie righe tra i blocchi
Quando premi il tasto Invio per Windows o il tasto Return per Mac sulla tastiera per aggiungere un'interruzione di riga, WordPress lo considera un nuovo paragrafo.
Ciò significa che aggiungerà automaticamente uno spazio di doppia riga. La quantità di spaziatura è controllata dal tuo tema e questo stile è una funzionalità standard in tutti i buoni temi WordPress.
Vai semplicemente all'editor di contenuti, premi il tasto Invio o Return dopo la riga, e poi digita qualcos'altro nella riga successiva.
Semplicemente facendo ciò, in base allo stile del tuo tema, dovresti vedere una chiara distinzione tra i paragrafi.
Come aggiungere uno spazio tra righe singole
Ora, se stai scrivendo qualcosa come un indirizzo, allora probabilmente vuoi che sia a spaziatura singola invece che a spaziatura doppia sul tuo sito WordPress.
In questo caso, è necessario premere il tasto SHIFT + INVIO su Windows o il tasto SHIFT + RETURN su Mac.
Questo dice a WordPress che vuoi iniziare una nuova riga all'interno dello stesso paragrafo. Questa azione crea una singola interruzione di riga invece del doppio spazio utilizzato per un nuovo paragrafo.
Il modo più semplice: usare il blocco Spaziatore
Per un modo semplice e senza codice per aggiungere spazio extra tra due blocchi qualsiasi, il metodo più semplice è utilizzare il blocco Spaziatore integrato.
Fai semplicemente clic sul pulsante 'Aggiungi blocco' nell'editor per aggiungere un nuovo blocco e cerca 'Spaziatore'. Una volta aggiunto, apparirà un nuovo spazio vuoto sulla tua pagina.
Puoi quindi fare clic sullo spaziatore e trascinare la maniglia blu su o giù per regolarne l'altezza.
Questo ti dà un controllo preciso sulla spaziatura verticale direttamente nell'editor.
Modifica dell'altezza e dello spazio tra le righe
A volte, anche quando aggiungi la spaziatura corretta nell'editor, non viene visualizzata come desideri nel tuo tema.
Ci sono due modi per risolvere il problema:
- Utilizzo di un plugin (il modo più semplice)
- Manualmente con codice CSS (più avanzato)
Diamo un'occhiata prima al metodo più semplice.
Aggiungere spaziatura tra le righe utilizzando un plugin
Se desideri apportare modifiche stilistiche al tuo tema senza dover imparare a programmare, l'utilizzo di un plugin come CSS Hero è il modo migliore per farlo.
CSS Hero rende facile cambiare il design del tuo sito WordPress senza conoscere alcun codice.
Puoi vedere maggiori dettagli nella nostra recensione completa di CSS Hero.
Se desideri apportare modifiche più importanti al tuo tema, come spostare una barra laterale o aggiungere un piè di pagina, allora un plugin per page builder drag-and-drop sarebbe un'opzione migliore. Un plugin per page builder ti permetterebbe anche di apportare piccole modifiche come cambiare i colori dei font o aggiungere interruzioni di riga in WordPress.
Non vuoi usare un plugin, o hai solo bisogno di apportare questa singola modifica? Allora, l'opzione del codice CSS manuale potrebbe essere la migliore per te.
Modificare la spaziatura dei paragrafi manualmente con codice CSS
Per aggiungere interruzioni di riga manualmente senza un plugin, devi aggiungere del CSS al tuo tema.
Il CSS è fondamentalmente come la funzione di formattazione in Microsoft Word. Invece di fare clic sui pulsanti, scriverai del semplice codice CSS. Non è così spaventoso come alcuni principianti potrebbero pensare. Il CSS è molto facile da capire se segui le istruzioni.
Per aggiungere CSS personalizzato al tuo tema, devi visitare la pagina Aspetto » Personalizza. Questo avvierà il personalizzatore del tema di WordPress, dove dovrai fare clic sulla scheda 'CSS aggiuntivo' dalla colonna di sinistra.
Se non vedi queste opzioni di menu, potresti utilizzare un tema a blocchi. Si prega di consultare il nostro articolo su come correggere il personalizzatore del tema mancante nell'amministrazione di WordPress.
Nella casella CSS personalizzato, devi aggiungere il seguente codice CSS:
Questo codice si rivolge a tutti gli elementi di paragrafo (p) specificamente all'interno dell'area di contenuto principale dei tuoi post, che WordPress spesso identifica con la classe .post. Ciò garantisce che influenzi solo i tuoi articoli.
.post p{line-height: 1.5em;}La regola CSS mostrata sopra cambierà l'interlinea del contenuto dei paragrafi a 1,5em. Em è un'unità di larghezza per la tipografia.
Ora, questo cambia solo lo spaziatura di singola interlinea.
Se vuoi cambiare la spaziatura dei paragrafi in WordPress (cioè, doppia interlinea), dovrai aggiungere del padding.
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
Sentiti libero di regolare i numeri in questo codice CSS. La modifica del valore padding-bottom cambierà lo spazio tra i tuoi paragrafi.
Puoi anche aggiungere CSS personalizzato al tuo sito utilizzando il plugin WPCode. Il plugin rende molto facile inserire e gestire il codice sul tuo sito.
Per maggiori dettagli, consulta la nostra guida su come aggiungere CSS personalizzato al tuo sito WordPress.
Se non ti piace leggere le istruzioni, guarda il nostro video tutorial.
Tutorial video
Per una guida visiva, puoi guardare il nostro video tutorial qui sotto. Copre tutti i metodi che abbiamo discusso per aggiungere spaziatura di riga singola e doppia nel tuo contenuto.
Speriamo che questo articolo ti abbia aiutato ad aggiungere un'interruzione di riga in WordPress. Potresti anche voler consultare la nostra guida su come usare i pattern di blocchi di WordPress e il nostro elenco dei migliori temi WordPress compatibili con Gutenberg.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
phil rooksby
Non ho CSS aggiuntivo. Ho provato tutti i tipi di altri modi per modificare lo spazio tra i paragrafi ma niente funziona, sembra un vero pasticcio. Aiuto per favore!!!
Norm
Grazie per l'aiuto. Ho cercato ovunque e volevo farlo con un plugin. L'hai reso così facile. Ancora, grazie mille.
Maria
Ciao! Voglio avere uno spazio semplice tra i miei paragrafi e anche dopo aver premuto invio (per il doppio spazio), quando visualizzo l'anteprima della bozza non è cambiato nulla (è ancora tutto un paragrafo). Qualcuno potrebbe aiutarmi?
Rashmi
Ciao
Vorrei modificare l'altezza della linea e la spaziatura. Tuttavia, non c'è nessuna icona 'editor' (Aspetto » Editor) dal file CSS del tema.
Quindi, cosa posso fare?
Grazie per la tua risposta!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
Grazie! Molto più facile!
Donna
Grazie, grazie, grazie!
Ero in un altro editor HTML e non riuscivo a capire come fare lo spazio singolo.
You saved the day!
Gerard
Brillante e un salvavita eterno.
Stavo lottando con lo spazio su uno dei siti dei miei clienti ed è assolutamente incredibile che tu avessi la risposta esatta quasi a portata di mano. Ora sto diventando un abbonato permanente
Elandre
Grazie per tutti i consigli su Wordpress. Questo sito mi ha aiutato molto con la maggior parte delle difficoltà che ho avuto
LR
Sto usando il tema Pilcrow e non ho idea di come creare lo spazio doppio tra i paragrafi. A volte succede nei miei post, ma a volte no. Quando guardo nel file HTML non vedo alcun post p o padding. Vedo solo il risultato finale di come apparirà il post ed è allora che so che il doppio spazio non ha funzionato. Posso ancora tornare indietro, modificare e correggere? Ultimo ma non meno importante, dove dici di andare dai menu aspetto all'editor, non ho quelle opzioni.
Sotto aspetto ho le seguenti opzioni: temi, personalizza, widget, menu, intestazione, sfondo, AMP, opzioni tema, mobile.
Per favore aiutami.
Supporto WPBeginner
Ciao LR,
Puoi aggiungere il CSS visitando Aspetto->Personalizza e quindi facendo clic sulla scheda CSS aggiuntivo nel personalizzatore. Vedi la nostra guida su come aggiungere CSS personalizzato in WordPress.
Se ritieni che sia un problema del tema, prova a passare temporaneamente a un tema WordPress predefinito. Se il problema scompare, puoi chiedere supporto allo sviluppatore del tuo tema.
Amministratore
Derek Cummings
Il mio tema è rotto, nel senso che non ha il doppio spazio per impostazione predefinita. Il tema è bloccato in modalità shift+enter in altre parole. Quindi in relazione al seguente codice:
.post p { line-height: 1.5em; padding-bottom: 15px; }
15px è uno spazio doppio predefinito normale? Quanti pixel dovrebbe essere per impostazione predefinita? Inoltre, non importa dove metto questo codice? Grazie!
Femi
Grazie per il suggerimento su Maiusc + Invio. Non l'ho mai saputo per anni. Il tuo sito è sempre stato un salvataggio quando mi blocco.
Lyn
Ciao: Come si ottiene uno spaziatura personalizzata tra le righe (ad esempio, 1,5em) per una singola istanza su una pagina invece di modificare il CSS dell'intero tema? Vedo che altre due persone hanno posto la stessa domanda senza risposta, almeno non che io abbia trovato. Grazie!
Denise B
Ho impostato i margini di p a zero. Nel tuo CSS, sarebbe qualcosa come p {margini: 0; }
Los Hundlos
Maiusc+Invio per evitare un enorme spazio tra le righe nell'editor wysiwyg tinye mce in wordpress. Funziona!!!! Fantastico!
Cat
Che ne dici di aggiungere semplicemente del testo e cambiare il colore del testo in bianco (se lo sfondo è bianco)? Questo dovrebbe rendere molto più facile creare e personalizzare gli spazi tra le righe (a meno che, ovviamente, lo sfondo non sia un'immagine di qualcosa che non può essere abbinato al colore del carattere).
Tim
Grazie mille! Mi hai salvato la vita!
Michael Rich
Ciao staff di WPBeginner,
Ho una domanda diversa. Uso Visual Composer e ho aggiunto molti separatori con divisori di testo tra le intestazioni delle mie sezioni sulla mia homepage. Vorrei che anche queste intestazioni di testo diventassero un link a quella sezione.
Tuttavia, ogni volta che aggiungo il link, perdo il testo identificativo della sezione che avevo nel separatore e viene magicamente sostituito dal testo predefinito "TITOLO".
Per provare a renderlo un link, sto aggiungendo il codice di collegamento all'interno di questa parentesi:
[vc_text_separator title="AUTO ANNI '50"]
Mi sto grattando la testa così forte che penso di essere calvo. Qualsiasi aiuto ti farà guadagnare una vita di gratitudine!!!
Grazie,
Mike
Anthony Cooper
Sto usando il tema WordPress ‘Divi’ e ho scoperto che se si preme invio (o maiusc + invio) due volte, per creare uno spazio maggiore, questo viene ignorato. Per ovviare a questo problema, premi invio una volta, digita un carattere sulla riga (non importa quale), evidenzialo e cambia il colore del carattere in bianco, quindi premi di nuovo invio; questo risulterà nello spazio desiderato tra le righe senza dover modificare il tema. Lo stesso vale per spazi aggiuntivi in una riga; inserisci quanti caratteri desideri, evidenziali e cambia il loro colore in bianco, quindi continua con il colore del carattere desiderato.
Julie
Suggerimento brillante! Grazie mille per questo, mi hai salvato da molti grattacapi e problemi, Anthony!
Robin Brinkler
Ricorda che alcuni motori di ricerca potrebbero trattare il testo "nascosto" in questo modo come spam.
Ellen
Questo è stato davvero utile, grazie!
Christy
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
Christy
P.S. ~ HA! Non avevo idea che i miei due punti e parentesi si trasformassero in una faccina sorridente. LOL
Linda Paul
Oh sì! Mi hai appena aiutato a risolvere un problema (paragrafi forzati a spazio singolo) che mi tormenta da anni!
Supporto WPBeginner
Glad you found it helpful
Amministratore
David M. Ebersole Sr.
Sono un abbonato a WP Beginner.
Avevo una domanda riguardo all'inserimento dei dati di ingegneria per il mio prodotto sul mio sito. Lo spazio nelle tabelle sembrava troppo grande sulla pagina. Ho cercato il supporto di Wordpress e tutto ciò che ho visto sono state risposte sgarbate alla domanda di spaziatura a riga singola.
Sei il primo a rispondere alla domanda, ed è ovviamente corretta. Grazie.
Cordialmente,
Dave
Supporto WPBeginner
Glad you found it helpful
Amministratore
Mark
E su Android? L'ultimo aggiornamento ha forzato una doppia spaziatura (nuovo paragrafo). Non è molto buono per chi scrive poesie. C'è un modo per ripristinarlo al singolo?
Cheryl
Uso il tema Omega e Ctrl/Invio non funziona. C'è qualcos'altro che posso fare? Non riesco a trovare post.p nel file CSS.
Becky
Molto utile, grazie!
Adnan Khan
Grazie, questo è un consiglio molto utile per i nuovi utenti di wp
Tina Gleisner
Grazie per "Maiusc" e Invio per la spaziatura a riga singola, dato che volevo scoprirlo da anni... e non sono mai riuscito a trovare la soluzione.
Ian
Ciao,
Questo ha funzionato per me ma il CSS non fa nulla sulla mia pagina...
Will
È successa la stessa cosa anche a me. Esiste un codice aggiornato da inserire?
A. Lougheed
Sto cercando ovunque una risposta... quando aggiungo un
nell'editor di testo, viene rimosso nell'editor visuale. Mi fa impazzire. wpbeginner ha una raccomandazione?
Dovrei aggiungere un plugin per fermare questo?
Ho provato un plugin anni fa, ma ho dovuto tornare indietro e riformattare ogni post.
Qualsiasi link con tutorial o consigli è molto apprezzato!
Supporto WPBeginner
Actually it is also removed from your comment.
Si prega di consultare la nostra guida su Come aggiungere caratteri speciali nei post di WordPress.
Amministratore
Jessica
Qual è il codice per regolare l'interlinea per un singolo post?
Bharadwaj
Grazie, utile
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
Neal Umphred
Grazie! Questo mi ha aiutato a rendere più compatti i miei post, tranne il primo paragrafo di ogni post. Per qualche motivo, le righe sembrano avere una spaziatura doppia. C'è uno snippet di codice che potrei aggiungere a Modifica CSS che mi permetterebbe di renderle più compatte?
Neal Umphred
Grazie! Aggiungere lo snippet (.post p{line-height: 1.5em;}) al mio Modifica CSS ha reso il mio testo molto più facile da leggere. Ora, ecco il mio problema: il paragrafo iniziale di ogni post di WordPress ha una spaziatura tra le righe molto più ampia rispetto al resto dei paragrafi, e NON è influenzato da questo pezzo di codice per l'interlinea. C'è un altro snippet di codice che potrei aggiungere a Modifica CSS che renderebbe più compatte quelle righe iniziali?
tiffany
Grazie mille. Il tuo sito è straordinario. Mi ha aiutato tantissimo. Iscritto!! Continua così con il tuo ottimo lavoro!!
Supporto WPBeginner
Grazie per le gentili parole. Siamo felici di aiutare.
Amministratore
Joe Simmons
Grazie! Non sapevo nemmeno della cosa "shift+enter".
Debby
Shift + Invio. Chi l'avrebbe mai detto che fosse così semplice! Grazie, grazie, grazie!
Gamo Nana
grazie per la spaziatura a riga singola con MAIUSC + Invio
Bob M.
Vorrei ringraziarti anche per questo consiglio (Shift+Invio)!
JE
Grazie per il tutorial. Tuttavia, come posso regolare la spaziatura tra le righe di un singolo paragrafo? Ho un titolo di 3 parole, centrato e impilato su 3 righe. Tutte le righe hanno dimensioni del carattere diverse, quindi le spaziatura tra le righe sono incoerenti. Sto cercando un modo per regolare facilmente tramite uno strumento di editor di testo o un plugin.
Qualche idea?
Syed Balkhi
Abbiamo appena usato la casella di ricerca del browser che puoi trovare premendo Ctrl + F
Mx
Trovando .post p hai usato una casella di ricerca. Mi dirai come trovare quella casella di ricerca? Grazie4
Jun Han
Questo è molto utile.
Grazie.
http://www.digitalgrog.com.au/
Era il mio cruccio fino ad ora... grazie, ora posso spaziare correttamente... a proposito, ho fatto una lista di host, dai un'occhiata
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
Karen Surfy Mum
Fantastico!! Anch'io volevo scoprire come fare da secoli!!! Così semplice quando lo sai… saluti xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
“Se non trovi il tag .post p, allora creane uno.”
Dove? Devo semplicemente copiarlo/incollarlo ovunque nel file css?
Staff di WPBeginner
preferibilmente in fondo al file css.
Mx
Scusa, ma ancora non capisco dove metterlo. È possibile spiegarlo più dettagliatamente? Grazie
James
Mi sono sempre chiesto come fare. Grazie per la formazione.
Valerie
Non sono nemmeno una vera "principiante" ma ci sono delle lacune nella mia conoscenza e tu hai appena risolto una delle cose più frustranti di WP per questa scrittrice e utente di Word… Grazie per questo e per tutte le tue fantastiche informazioni… Continuo ad imparare grandi cose dai tuoi post e dal tuo sito. Grazie e saluti!
kelly
almost four years of blogging and finally!
so awesome, thanks!!