Una buona spaziatura può fare una grande differenza nell'aspetto e nella sensazione dei tuoi contenuti. Quando gli spazi tra i blocchi di WordPress sono troppo stretti o troppo larghi, ciò può compromettere la leggibilità e far sembrare il tuo layout incompiuto.
Abbiamo visto molti utenti di WordPress incontrare ripetutamente gli stessi problemi di spaziatura, il che ha senso perché le opzioni di spaziatura dei blocchi non sono sempre ovvie a prima vista.
La buona notizia è che WordPress offre diversi modi per regolare la spaziatura dei blocchi senza toccare alcun codice.
In questa guida, ti illustreremo quattro semplici metodi per risolvere i problemi di spaziatura tra i blocchi di WordPress. Questi suggerimenti ti aiuteranno a creare contenuti dall'aspetto più professionale e a mantenere i lettori coinvolti.
💡Risposta rapida: Aggiungere o rimuovere spazio vuoto tra i blocchi
Puoi controllare facilmente lo spazio tra i blocchi di WordPress utilizzando uno dei quattro metodi. Ecco un rapido riepilogo su quale scegliere:
- Usa l'editor a blocchi: Per le regolazioni più veloci e semplici, usa il blocco Spacer integrato per aggiungere spazio. Puoi anche regolare le impostazioni di margine e padding nella barra laterale del blocco, il che è più efficace nei temi a blocchi moderni.
- Usa CSS personalizzato: Per modifiche precise e riutilizzabili, applica una classe CSS personalizzata a un blocco. Questa è l'opzione migliore quando vuoi applicare le stesse regole di spaziatura a più blocchi sul tuo sito.
- Usa un plugin CSS: Per ottenere la potenza del CSS senza scrivere codice, usa un plugin come CSS Hero. Ti offre un'interfaccia visiva point-and-click per modificare la spaziatura.
- Usa un Page Builder: Quando crei un layout di pagina completamente personalizzato, un page builder come SeedProd è la scelta migliore. Include i propri controlli di spaziatura per ogni elemento della pagina.
Perché aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress?
Mentre l'editor a blocchi di WordPress rende facile la creazione di contenuti, potresti scoprire che lo spazio predefinito non è sempre perfetto.
Regolare lo spazio bianco tra i tuoi blocchi è un modo semplice per migliorare il design del tuo sito e l'esperienza utente.
Il controllo corretto della spaziatura dei blocchi ti aiuta a:
- Crea un Design Professionale: Avere il pieno controllo del tuo layout ti permette di creare un aspetto più rifinito e personalizzato per il tuo sito web.
- Guida l'Attenzione del Visitatore: Usa lo spazio per raggruppare visivamente contenuti correlati o per separare diverse sezioni, rendendo il tuo layout più intuitivo.
- Migliora la Leggibilità: Suddividere lunghi blocchi di testo con spazio bianco rende i tuoi contenuti meno intimidatori e più facili da leggere per i visitatori.
Ora, diamo un'occhiata a come aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress sul tuo sito web.
Simply use the quick links below to jump straight to the method you want to use:
- Metodo 1: Aggiungere spazio vuoto tra i blocchi di WordPress con l'editor a blocchi
- Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
- Metodo 3: Aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress con CSS Hero
- Metodo 4: Aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress con SeedProd
- Domande Frequenti sulla Spaziatura dei Blocchi
Metodo 1: Aggiungere spazio vuoto tra i blocchi di WordPress con l'editor a blocchi
Il modo più semplice per aggiungere spazio vuoto tra i tuoi blocchi è utilizzare l'editor a blocchi di Gutenberg. C'è un blocco spaziatore integrato che ti consente di aggiungere spazio vuoto con un paio di clic.
Per utilizzarlo, apri il post o la pagina che desideri modificare e fai clic sul pulsante 'Più' per aggiungere un blocco.
Quindi, cerca 'Spacer' e seleziona il blocco.
Questo inserirà automaticamente uno spaziatore nella pagina.
Puoi renderlo più grande o più piccolo trascinando il blocco verso l'alto o verso il basso.
Una volta terminato, fai semplicemente clic sul pulsante 'Aggiorna' per salvare le modifiche.
Se stai utilizzando un tema a blocchi, puoi anche utilizzare l'Editor del sito completo per regolare la spaziatura dei blocchi nei modelli del tuo tema.
Dai un'occhiata alla nostra guida per principianti all'editing completo del sito di WordPress per maggiori informazioni.
Oltre a inserire blocchi Spacer, puoi anche aumentare il margine dei tuoi blocchi per creare più spazio tra essi e altri blocchi. Puoi esplorare queste opzioni nella barra laterale delle impostazioni del blocco.
Puoi anche regolare il padding del blocco. Il padding è lo spazio all'interno del bordo del blocco, tra il bordo e il contenuto stesso.
Ridurre questo diminuirà lo spazio vuoto all'interno del blocco, il che è diverso dalla regolazione del margine tra i blocchi.
Tieni presente che questi controlli di margine e padding sono più comunemente disponibili nei temi a blocchi che utilizzano l'Editor del Sito Completo e potrebbero non essere visibili per tutti i blocchi quando si utilizzano temi classici.
Per maggiori dettagli, puoi consultare la nostra guida su padding vs. margin in WordPress.
Potresti anche voler consultare queste guide per scoprire altri modi per sfruttare al meglio l'editor a blocchi:
- Come usare correttamente il blocco More in WordPress
- Come aggiungere un'interruzione di riga in WordPress (spaziatura tra nuove righe)
- Come selezionare e utilizzare blocchi nidificati in WordPress
- Come aggiungere contenuti a più colonne nei post di WordPress (senza bisogno di HTML)
Metodo 2: Aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress aggiungendo CSS personalizzato
Un altro modo per aggiungere e rimuovere spazio vuoto tra i tuoi blocchi è aggiungere codice CSS personalizzato al tuo tema.
Se non l'hai mai fatto prima, ti consigliamo di consultare la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress prima di iniziare.
Successivamente, apri la pagina o il post che desideri modificare e fai clic sul blocco in cui desideri aggiungere o rimuovere lo spazio vuoto.
Quindi, fai clic sulla voce di menu 'Blocco' nel pannello delle opzioni a destra.
Dopodiché, scorri verso il basso fino al menu a discesa 'Avanzate' e fai clic su di esso. Questo aprirà una serie di opzioni aggiuntive per quel blocco.
Nella casella ‘Classi CSS aggiuntive’, digita il seguente nome di classe:
.add-remove-bottom-space
Questa azione conferisce al blocco un nome univoco, permettendoti di indirizzarlo con CSS personalizzato.
Dopodiché, fai clic sul pulsante ‘Aggiorna’ per salvare le modifiche.
Successivamente, naviga su Aspetto » Personalizza per aprire il personalizzatore del tema di WordPress.
Quindi, scorri verso il basso e fai clic sull'opzione di menu 'CSS aggiuntivo'.
Questo aprirà un campo in cui puoi aggiungere codice CSS.
Successivamente, incolla il seguente snippet di codice nella casella:
.add-remove-bottom-space {
margin-bottom: 0;
}
Questo snippet di codice imposta il margine inferiore a zero e rimuoverà lo spazio vuoto dal blocco.
Nota il punto (.) prima del nome. In CSS, il punto viene utilizzato per selezionare qualsiasi elemento che abbia quel nome di classe specifico.
Se desideri aggiungere spazio in basso, cambia semplicemente lo '0' con qualcosa come '20px'.
Una volta apportate le modifiche, assicurati di fare clic sul pulsante 'Pubblica' per rendere effettive le tue modifiche.
Se stai usando un tema a blocchi, puoi leggere la nostra guida su come correggere il personalizzatore del tema mancante in WordPress per scoprire dove aggiungere il codice CSS.
Salvataggio del codice CSS personalizzato tramite un plugin
Aggiungendo CSS personalizzato al personalizzatore del tema di WordPress, questo verrà salvato solo per il tema che stai attualmente utilizzando. Se cambi il tema di WordPress, dovrai copiare il codice CSS nel tuo nuovo tema.
Se desideri che il tuo CSS personalizzato si applichi indipendentemente dal tema che stai utilizzando, allora dovrai usare un plugin.
WPCode è il miglior plugin per snippet di codice che ti consente di aggiungere PHP, CSS e altro al tuo sito web WordPress senza rompere nulla.
Usiamo noi stessi WPCode e lo abbiamo trovato il modo più semplice e sicuro per aggiungere codice personalizzato. Per saperne di più, consulta la nostra recensione dettagliata di WPCode.
La prima cosa che devi fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida su come installare un plugin WordPress.
Dopo l'attivazione, devi andare su Snippet di codice » + Aggiungi snippet dalla dashboard di amministrazione di WordPress.
Qui, passa il mouse sopra l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ nella libreria degli snippet di codice e fai clic sul pulsante ‘Usa snippet’.
Devi inserire un nome per il tuo snippet di codice e quindi incollare il tuo CSS personalizzato nella casella ‘Anteprima codice’.
Assicurati di scegliere ‘Snippet CSS’ dal menu a discesa ‘Tipo di codice’.
Quindi, assicurati di fare clic sullo slider in alto per rendere il tuo snippet ‘Attivo’ e premi ‘Salva snippet’ per eseguirlo sul tuo sito web WordPress.
Per maggiori dettagli, puoi consultare la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.
In alternativa, puoi utilizzare il plugin Simple Custom CSS. Dopo l'attivazione, vai semplicemente su Aspetto » CSS personalizzato e aggiungi il tuo codice CSS personalizzato.
Al termine, fai semplicemente clic sul pulsante ‘Aggiorna CSS personalizzato’ per salvare le modifiche.
Metodo 3: Aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress con CSS Hero
Un altro modo semplice per principianti per aggiungere o rimuovere spazi vuoti tra i blocchi di WordPress è utilizzare un plugin CSS personalizzato per WordPress. Questo ti permette di apportare modifiche visive al tuo blog WordPress senza modificare alcun codice CSS.
Ti consigliamo di utilizzare il plugin CSS Hero. Ti permette di modificare quasi ogni stile CSS sul tuo sito WordPress senza scrivere una singola riga di codice.
Ottima offerta: I lettori di WPBeginner possono ottenere uno sconto del 40% utilizzando il nostro codice coupon CSS Hero.
La prima cosa da fare è installare e attivare il plugin. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.
Dopo l'attivazione, devi fare clic sul pulsante 'Procedi all'attivazione del prodotto' per attivare il plugin. Troverai il pulsante direttamente sopra l'elenco dei plugin installati.
Questo ti porterà a una schermata in cui devi inserire il tuo nome utente e password. Quindi, segui le istruzioni sullo schermo e verrai reindirizzato alla tua dashboard una volta verificato il tuo account.
Successivamente, devi aprire la pagina o il post che desideri modificare, quindi fare clic sul pulsante 'CSS Hero' nella parte superiore della tua barra degli strumenti di amministrazione di WordPress.
Questo aprirà la stessa pagina con CSS Hero in esecuzione sopra di essa. Il plugin utilizza un editor visivo, quindi sarai in grado di apportare le tue modifiche in tempo reale.
Quando fai clic su qualsiasi elemento della tua pagina, apparirà una barra degli strumenti sul lato sinistro della pagina per apportare personalizzazioni.
Per rimuovere o aggiungere spazio vuoto tra i tuoi blocchi, fai semplicemente clic sull'opzione 'Spaziatura' e quindi scorri fino alla sezione 'Margine inferiore'.
Qui puoi spostare il cursore su o giù per aggiungere o rimuovere spazio vuoto.
Qualsiasi modifica apportata verrà visualizzata automaticamente sulla tua pagina.
Una volta terminate le modifiche, è necessario fare clic sul pulsante 'Salva' per rendere attive le modifiche.
Metodo 4: Aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress con SeedProd
SeedProd è il miglior costruttore di pagine drag-and-drop, utilizzato da oltre 1 milione di siti web.
Abbiamo effettivamente utilizzato SeedProd in molti progetti, e alcuni dei nostri marchi partner hanno creato interi siti web utilizzando lo strumento. Per i dettagli, consulta la nostra recensione completa di SeedProd.
Il plugin dispone di una libreria di oltre 300 modelli per creare pagine 404 personalizzate, pagine di vendita, landing page e molto altro.
Puoi persino usarlo per creare un tema WordPress personalizzato senza scrivere codice.
Con il costruttore drag-and-drop, hai il pieno controllo sul design del tuo sito e puoi facilmente rimuovere o aggiungere spaziatura a qualsiasi elemento del sito web.
Per saperne di più, consulta la nostra guida su come creare una pagina personalizzata in WordPress.
Mentre personalizzi la tua pagina, puoi aggiungere spazio ovunque utilizzando il blocco Spacer.
Trascinalo e rilascialo semplicemente ovunque sulla pagina dove vuoi aggiungere più spazio tra i blocchi.
Quindi, puoi usare il cursore per regolarne l'altezza.
Puoi anche controllare lo spazio tra qualsiasi blocco. Per farlo, fai semplicemente clic su qualsiasi blocco da cui vuoi aggiungere o rimuovere spazio.
Questo aprirà il pannello delle opzioni a sinistra. Quindi, fai clic sulla scheda 'Avanzate'.
Successivamente, scorri verso il basso fino al menu a discesa 'Spaziatura' e fai clic su di esso.
Questo aprirà un menu dove puoi controllare il 'Margine'. Inserisci semplicemente un numero nella casella del margine inferiore per aggiungere spazio o elimina il numero per rimuovere qualsiasi spazio vuoto esistente.
Una volta terminate le modifiche, fai clic sul pulsante 'Salva'.
Quindi, seleziona il menu a discesa 'Pubblica' per rendere effettive le tue modifiche.
Tutorial video
Se non preferisci istruzioni scritte, guarda il nostro video tutorial.
Domande Frequenti sulla Spaziatura dei Blocchi
Ecco alcune domande che i nostri lettori pongono frequentemente sull'aggiunta o la rimozione di spazio vuoto tra i blocchi in WordPress:
Qual è la differenza tra margine e padding in WordPress?
Pensa a un blocco come a una cornice. Il padding è lo spazio tra l'immagine e la cornice stessa (all'interno del bordo). Il margine è lo spazio sul muro tra quella cornice e qualsiasi altra cornice appesa accanto ad essa (all'esterno del bordo).
Come aggiungo spazio orizzontale tra le colonne in WordPress?
I metodi sopra descritti sono per lo più per lo spazio verticale. Per regolare lo spazio orizzontale, dovresti usare il blocco Colonne di WordPress integrato.
Dopo aver aggiunto le tue colonne, puoi selezionare il blocco Colonne principale e nelle impostazioni del blocco a destra troverai un'opzione "Spaziatura blocchi" che ti permette di controllare lo spazio tra le colonne.
Perderò le mie modifiche CSS se cambio tema di WordPress?
Sì, se aggiungi il codice CSS direttamente nel personalizzatore del tuo tema (sotto Aspetto » Personalizza » CSS aggiuntivo), quel codice è legato al tema. Se cambi tema, dovrai copiare quel codice.
Per rendere il tuo CSS indipendente dal tema, ti consigliamo di utilizzare WPCode per aggiungere i tuoi snippet.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere o rimuovere spazio vuoto tra i blocchi di WordPress. Potresti anche voler consultare la nostra guida alle revisioni dei post di WordPress e le nostre scelte esperte dei migliori plugin per blocchi Gutenberg.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Kircho Svircho
Sto cercando un modo per gestire in massa tutto lo spazio predefinito tra i blocchi in WordPress. Lo spazio predefinito tra i paragrafi è troppo piccolo e voglio sapere come cambiare le impostazioni "alla radice" e renderlo più ampio. Nessun margine, nessuna impostazione di dimensione appare nel mio tema.
Voglio chiederti come creare uno spazio tra i paragrafi come il tuo, senza inserire spazi vuoti tra ogni blocco, ogni volta. Mi ci vogliono 10 minuti per pagina per farlo ed è fastidioso
Supporto WPBeginner
To have the effect across the entire site, you would want to use CSS and target the paragraphs or use the plugins to simplify the process
Amministratore
Jennifer Gould
Ho provato a usare questo CSS per rimuovere lo spazio tra i blocchi di paragrafo, tuttavia non funziona nulla. Ho persino copiato e incollato il CSS direttamente dalla tua pagina, e ancora non funziona. Questo metodo funziona anche quando applicato ai blocchi di paragrafo invece che ai blocchi immagine?
Supporto WPBeginner
Dovrebbe ancora funzionare con altri blocchi, se i nostri suggerimenti non aiutano, allora il tuo tema specifico potrebbe avere uno stile che sta sovrascrivendo altri stili. Se verifichi con il supporto del tuo tema specifico, dovrebbero essere in grado di aiutarti!
Amministratore