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.
Ralph
Questo era un grosso problema nel vecchio creator. Non sapevo mai come sarebbe apparso e dovevo premere anteprima ogni poche righe, ma penso che con Gutenberg sia molto più facile e ho imparato a usare semplicemente shift+invio. Lo faccio automaticamente e quasi senza coscienza. Non so perché, ma alcuni siti web non consentono shift+invio, solo invio o niente, e allora penso "PERCHÉ non funziona"!
Deepak Sahani
Ottimo video e post hanno risolto la mia domanda.
Supporto WPBeginner
Glad our guide could be helpful!
Amministratore
Jennyfer
Grazie mille per queste informazioni! Molto utile. Proprio quello che stavo cercando.
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Colleen Cochran
Alla fine ho capito la cosa di shift-invio per le righe a spazio singolo nella poesia, ma quando il post viene pubblicato e inviato via email ai follower, perde la formattazione e tutte le righe si uniscono. Come posso risolvere?
Supporto WPBeginner
Dovresti verificare con lo strumento utilizzato per inviare la notifica per lo stile per risolvere questo problema.
Amministratore
Luiz
Grazie! Molto utile!
Supporto WPBeginner
You’re welcome
Amministratore
Robin
Molto utile! Grazie!!
Supporto WPBeginner
You’re welcome
Amministratore
Dhirendra
C'è un'opzione per ridurre lo spazio tra le immagini...
Supporto WPBeginner
Dipenderebbe dall'immagine specifica, ma come punto di partenza per trovare cosa causa lo spazio, dovresti dare un'occhiata alla nostra guida qui sotto:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore
jan van den hoed
Grazie per la spiegazione. Una domanda però. Come posso fare la stessa cosa su uno smartphone. Sto modificando il mio blog in viaggio e non ho un laptop disponibile. Ho provato a fare shift invio ma non ha funzionato
Supporto WPBeginner
A causa delle limitazioni dei dispositivi mobili, probabilmente dovrai utilizzare il metodo CSS.
Amministratore
Val
Grazie mille, è stato di grande aiuto. Mi sono tormentato per lo spazio!
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Stephen
Grazie, ha aiutato molto.
Supporto WPBeginner
Glad our article was helpful
Amministratore
Douglas Daniel
Per cambiare il CSS mi dice che devo acquistare un piano premium. Sono senza speranza?
Supporto WPBeginner
Sembra che tu sia su WordPress.com e questo tutorial sia per siti WordPress.org:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
saresti purtroppo limitato alle altre opzioni come shift+invio per spaziare il contenuto su una singola riga.
Amministratore
SOO
Grazie! Utile!!
Supporto WPBeginner
You’re welcome, glad our article could help
Amministratore
Rebecca
Non ha funzionato per me. Ci sono motivi per cui non dovrebbe funzionare?
Supporto WPBeginner
Se stai usando un plugin page builder, potrebbero avere un metodo diverso per la spaziatura singola/doppia. Altrimenti, potrebbe essere un conflitto di plugin/tema per cui dovresti disabilitare i tuoi plugin e/o cambiare il tuo tema per verificare
Amministratore
Tim G
Vorrei ridurre lo spazio tra le normali righe di paragrafo — IMHO, c'è troppo spazio bianco di default. Vorrei anche aggiungere mezza riga alla fine di un paragrafo, piuttosto che una riga intera: Wordpress di default sembra fare solo l'equivalente di un doppio ritorno a capo, che è piuttosto del ventesimo secolo e non emula ciò che Word può fare. Qualche idea?
Supporto WPBeginner
You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing
Amministratore
sofar ahmad
TQ tantissimo
molto utile
Supporto WPBeginner
Glad our guide could be helpful
Amministratore
Sumeet
grazie era quello che stavo cercando, mi è stato d'aiuto…
Supporto WPBeginner
Glad our article helped
Amministratore
Jen
Dio ti benedica! Sono così grata che tu abbia pubblicato questo con il CSS! Chi l'avrebbe mai detto che bastasse questo per cambiare lo spazio! Cercavo qualcosa del genere da molto tempo! Grazie mille!
Supporto WPBeginner
Glad our article could help you
Amministratore
Kathy
Sto usando il metodo "shift" enter ma non mi permette di avere font di dimensioni diverse quando lo faccio. C'è una soluzione?
Supporto WPBeginner
Ciao Kathy,
Si prega di consultare la nostra guida su come cambiare le dimensioni dei font in WordPress.
Amministratore
Lora Staples
Ottimo video. Mi è piaciuto il contenuto, il ritmo e il tono dell'oratore. GRAZIE!
Kunal Khandelwal
Thank you so much for this suggestion. Didn’t know it was so easy
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