Cum să adăugați sau să eliminați spațiu gol între blocurile WordPress (4 moduri)

Un spațiu bun poate face o mare diferență în modul în care conținutul dvs. arată și se simte. Când spațiile dintre blocurile WordPress sunt prea strânse sau prea largi, acest lucru poate afecta lizibilitatea și poate face ca aspectul dvs. să pară neterminat.

Am văzut mulți utilizatori WordPress întâmpinând aceleași probleme de spațiere iar și iar, ceea ce are sens, deoarece opțiunile de spațiere a blocurilor nu sunt întotdeauna evidente la prima vedere.

Vestea bună este că WordPress oferă mai multe modalități de a ajusta spațierea blocurilor fără a atinge niciun cod.

În acest ghid, vă vom prezenta patru metode simple pentru a remedia problemele de spațiere dintre blocurile WordPress. Aceste sfaturi vă vor ajuta să creați conținut care arată mai profesionist și menține cititorii implicați.

De ce să adăugați sau să eliminați spațiu gol între blocurile WordPress?

Deși editorul de blocuri WordPress face crearea de conținut ușoară, s-ar putea să constatați că spațierea implicită nu este întotdeauna perfectă.

Ajustarea spațiului alb dintre blocurile dvs. este o modalitate simplă de a îmbunătăți designul site-ului dvs. și experiența utilizatorului.

Controlul adecvat al spațierii blocurilor vă ajută să:

• Creează un design profesional: Având control complet asupra aspectului tău, îți permite să creezi un aspect mai finisat și personalizat pentru site-ul tău web.
• Ghidează atenția vizitatorilor: Folosește spațiul pentru a grupa vizual conținutul relevant împreună sau pentru a separa secțiuni diferite, făcând aspectul tău mai intuitiv.
• Îmbunătățește lizibilitatea: Separarea textelor lungi cu spațiu alb face conținutul tău mai puțin intimidant și mai ușor de citit pentru vizitatori.

Acum, să vedem cum să adăugați sau să eliminați spațiu gol între blocurile WordPress de pe site-ul dvs.

Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Adăugarea spațiului gol între blocurile WordPress cu editorul de blocuri
• Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
• Metoda 3: Adăugarea sau eliminarea spațiului gol între blocurile WordPress cu CSS Hero
• Metoda 4: Adăugarea sau eliminarea spațiului gol între blocurile WordPress cu SeedProd
• Întrebări frecvente despre spațierea blocurilor

Metoda 1: Adăugarea spațiului gol între blocurile WordPress cu editorul de blocuri

Cel mai simplu mod de a adăuga spațiu gol între blocurile tale este folosind editorul de blocuri Gutenberg. Există un bloc de spațiere încorporat care îți permite să adaugi spațiu gol cu câteva clicuri.

Pentru a utiliza acest lucru, deschideți postarea sau pagina pe care doriți să o editați și faceți clic pe butonul „Plus” pentru a adăuga un bloc.

Apoi, căutați „Spacer” și selectați blocul.

Aceasta va insera automat un spațiator pe pagină. 

Poți să-l faci mai mare sau mai mic trăgând blocul în sus sau în jos.

Odată ce ați terminat, pur și simplu faceți clic pe butonul „Actualizare” pentru a salva modificările.

Dacă utilizați o temă bloc, puteți folosi și Editorul complet al site-ului pentru a ajusta spațierea blocurilor în șabloanele temei dumneavoastră.

Consultați ghidul nostru pentru începători despre editarea completă a site-ului WordPress pentru mai multe informații.

Pe lângă inserarea blocurilor de spațiere, puteți, de asemenea, mări marginea blocurilor dvs. pentru a pune mai mult spațiu între ele și alte blocuri. Puteți explora aceste opțiuni în bara laterală a setărilor blocului.

Poți ajusta și padding-ul blocului. Padding-ul este spațiul *din interiorul* marginii blocului, între margine și conținutul propriu-zis.

Reducerea acestuia va diminua spațiul gol din interiorul blocului, ceea ce este diferit de ajustarea marginii dintre blocuri.

Reține că aceste controale pentru margini și padding sunt cel mai frecvent disponibile în temele de blocuri care utilizează Editorul Complet al Site-ului și s-ar putea să nu fie vizibile pentru toate blocurile atunci când folosești teme clasice.

Pentru mai multe detalii, puteți consulta ghidul nostru despre padding vs. margin în WordPress.

S-ar putea să vrei să consulți și aceste ghiduri pentru mai multe modalități de a profita la maximum de editorul de blocuri:

• Cum să folosești corect blocul More în WordPress
• Cum să adăugați o linie nouă în WordPress (spațiere nouă între linii)
• Cum să selectați și să utilizați blocuri imbricate în WordPress
• Cum să adăugați conținut pe mai multe coloane în postările WordPress (fără HTML necesar)

Metoda 2: Adăugarea sau eliminarea spațiului gol între blocurile WordPress prin adăugarea de CSS personalizat

O altă modalitate de a adăuga și elimina spațiu gol între blocurile tale este prin adăugarea de cod CSS personalizat la tema ta.

Dacă nu ați mai făcut acest lucru înainte, vă recomandăm să consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress înainte de a începe.

Apoi, deschideți pagina sau postarea pe care doriți să o editați și apoi faceți clic pe blocul unde doriți să adăugați sau să eliminați spațiul gol.

Apoi, faceți clic pe elementul de meniu „Bloc” în panoul de opțiuni din dreapta.

După aceea, derulați în jos la meniul derulant „Avansat” și faceți clic pe el. Aceasta va afișa un set de opțiuni suplimentare pentru acel bloc.

În caseta „Clase CSS suplimentare”, tastează următorul nume de clasă:

.add-remove-bottom-space

Această acțiune conferă blocului un nume unic, permițându-ți să îl țintești cu CSS personalizat.

După aceea, apasă pe butonul „Actualizare” pentru a salva modificările.

Apoi, navigați la Aspect » Personalizare pentru a deschide personalizatorul de teme WordPress.

Apoi, derulați în jos și faceți clic pe opțiunea de meniu „CSS suplimentar”.

Acest lucru va afișa un câmp unde puteți adăuga cod CSS.

Apoi, lipește următorul snippet de cod în casetă:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Acest fragment de cod setează marginea inferioară la zero și va elimina spațiul gol din bloc.

Observați punctul (.) dinaintea numelui. În CSS, punctul este folosit pentru a viza orice element care are acel nume de clasă specific.

Dacă doriți să adăugați spațiu în partea de jos, atunci pur și simplu schimbați „0” cu ceva de genul „20px”.

Odată ce ați făcut modificările, asigurați-vă că faceți clic pe butonul „Publicare” pentru a face modificările live. 

Dacă folosiți o temă bloc, puteți citi ghidul nostru despre cum să remediați lipsa personalizatorului de temă în WordPress pentru a afla unde să adăugați codul CSS.

Salvarea codului CSS personalizat folosind un plugin

Prin adăugarea de CSS personalizat în personalizatorul de temă WordPress, acesta va fi salvat doar pentru tema pe care o utilizați în prezent. Dacă schimbați tema WordPress, va trebui să copiați codul CSS în noua temă.

Dacă doriți ca CSS-ul dvs. personalizat să se aplice indiferent de tema pe care o utilizați, atunci va trebui să folosiți un plugin.

WPCode este cel mai bun plugin pentru fragmente de cod care vă permite să adăugați PHP, CSS și multe altele pe site-ul dvs. WordPress fără a strica nimic.

Folosim noi înșine WPCode și am constatat că este cea mai ușoară și sigură modalitate de a adăuga cod personalizat. Pentru a afla mai multe, consultați recenzia detaliată WPCode.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, trebuie să accesați Snippets de cod » + Adăugați un snippet din tabloul de bord de administrare WordPress.

Aici, treceți cursorul peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” din biblioteca de fragmente de cod și faceți clic pe butonul „Utilizați fragmentul”.

Trebuie să introduceți un nume pentru fragmentul dvs. de cod și apoi să lipiți CSS-ul personalizat în caseta „Previzualizare cod”.

Asigurați-vă că alegeți „CSS Snippet” din meniul derulant „Tip cod”.

Apoi, asigurați-vă că faceți clic pe glisorul din partea de sus pentru a face ca fragmentul dumneavoastră să fie „Activ” și apăsați „Salvează fragmentul” pentru a-l executa pe site-ul dumneavoastră WordPress.

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress.

Alternativ, puteți utiliza pluginul Simple Custom CSS. La activare, pur și simplu accesați Aspect » CSS personalizat și adăugați codul CSS personalizat.

Când ați terminat, faceți clic pe butonul „Actualizați CSS personalizat” pentru a salva modificările.

Metoda 3: Adăugarea sau eliminarea spațiului gol între blocurile WordPress cu CSS Hero

O altă modalitate ușor de utilizat pentru începători de a adăuga sau elimina spațiu gol între blocurile WordPress este utilizarea unui plugin WordPress CSS personalizat. Acesta vă permite să faceți modificări vizuale la blogul dvs. WordPress fără a edita niciun cod CSS.

Vă recomandăm să folosiți pluginul CSS Hero. Acesta vă permite să editați aproape fiecare stil CSS de pe site-ul dvs. WordPress fără a scrie o singură linie de cod. 

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul. Pentru mai multe detalii, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

La activare, trebuie să faceți clic pe butonul „Continuare la activarea produsului” pentru a activa pluginul. Veți găsi butonul direct deasupra listei de pluginuri instalate.

Aceasta vă va duce la un ecran unde trebuie să introduceți numele de utilizator și parola. Apoi, urmați instrucțiunile de pe ecran și veți fi redirecționat înapoi la tabloul de bord odată ce contul dvs. este verificat.

Apoi, trebuie să deschideți pagina sau postarea pe care doriți să o editați, apoi faceți clic pe butonul „CSS Hero” din partea de sus a barei de instrumente de administrare WordPress.

Aceasta va deschide aceeași pagină cu CSS Hero rulând deasupra ei. Pluginul folosește un editor vizual, astfel veți putea face modificările în timp real.

Când faceți clic pe orice element de pe pagina dvs., va apărea o bară de instrumente în partea stângă a paginii pentru a face personalizări.

Pentru a elimina sau adăuga spațiu gol între blocurile dvs., pur și simplu faceți clic pe opțiunea „Spațieri” și apoi derulați în jos la secțiunea „Margine-Jos”.

Aici poți muta cursorul în sus sau în jos pentru a adăuga sau elimina spațiu gol.

Orice modificări pe care le faceți se vor afișa automat pe pagina dvs.

Odată ce ai terminat de făcut modificări, trebuie să apeși butonul „Salvează” pentru a face modificările live. 

Metoda 4: Adăugarea sau eliminarea spațiului gol între blocurile WordPress cu SeedProd

SeedProd este cel mai bun constructor de pagini drag-and-drop, folosit de peste 1 milion de site-uri web.

Am folosit chiar noi SeedProd în multe proiecte și câteva dintre brandurile noastre partenere și-au creat întregul site web folosind acest instrument. Pentru detalii, consultați recenzia completă SeedProd.

Pluginul are o bibliotecă de peste 300 de șabloane pentru a crea pagini 404 personalizate, pagini de vânzări, pagini de destinație și multe altele.

Puteți chiar să-l folosiți pentru a crea o temă WordPress personalizată fără a scrie cod.

Cu constructorul drag-and-drop, aveți control complet asupra designului site-ului dvs. și puteți elimina sau adăuga cu ușurință spațiere oricărui element al site-ului web.

Pentru a afla mai multe, consultă ghidul nostru despre cum să creezi o pagină personalizată în WordPress.

Pe măsură ce vă personalizați pagina, puteți adăuga spațiu oriunde utilizând blocul Spacer.

Pur și simplu trage-l și plasează-l oriunde pe pagină unde vrei să adaugi mai mult spațiu între blocuri.

Apoi, puteți folosi glisorul pentru a-i ajusta înălțimea.

Puteți controla, de asemenea, spațiul dintre oricare bloc. Pentru a face acest lucru, faceți clic pe orice bloc de la care doriți să adăugați sau să eliminați spațiu.

Aceasta va deschide panoul de opțiuni din stânga. Apoi, faceți clic pe fila „Avansat”.

Apoi, derulează în jos la meniul 'Spațiere' și dă clic pe el.

Aceasta deschide un meniu unde puteți controla „Marginea”. Pur și simplu introduceți un număr în caseta marginii inferioare pentru a adăuga spațiu sau ștergeți numărul pentru a elimina orice spațiu gol existent.

După ce ați terminat de făcut modificările, faceți clic pe butonul „Salvare”.

Apoi, selectați meniul derulant „Publicare” pentru a face modificările live.

Tutorial video

Dacă nu preferați instrucțiuni scrise, atunci urmăriți tutorialul nostru video.

Întrebări frecvente despre spațierea blocurilor

Iată câteva întrebări pe care cititorii noștri le pun frecvent despre adăugarea sau eliminarea spațiului gol între blocuri în WordPress:

Care este diferența dintre margin și padding în WordPress?

Gândește-te la un bloc ca la un tablou. Spațierea interioară (padding) este spațiul dintre tablou și rama în sine (în interiorul chenarului). Marginea (margin) este spațiul pe perete dintre acel tablou și orice alte tablouri agățate lângă el (în afara chenarului).

Cum adaug spațiu orizontal între coloane în WordPress?

Metodele de mai sus sunt în mare parte pentru spațierea verticală. Pentru a ajusta spațiul orizontal, ar trebui să utilizați blocul încorporat WordPress Columns.

După adăugarea coloanelor, puteți selecta blocul principal Columns, iar în setările blocului din dreapta, veți găsi o opțiune „Spațiere bloc” care vă permite să controlați spațiul dintre coloane.

Îmi voi pierde modificările CSS dacă schimb tema WordPress?

Da, dacă adăugați codul CSS direct în personalizatorul temei dvs. (sub Aspect » Personalizare » CSS suplimentar), acel cod este legat de temă. Dacă schimbați temele, va trebui să copiați acel cod.

Pentru a face CSS-ul dvs. independent de temă, vă recomandăm să utilizați WPCode pentru a adăuga fragmentele dvs.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați sau să eliminați spațiu gol între blocurile WordPress. S-ar putea să doriți să consultați și ghidul nostru despre reviziile postărilor WordPress și selecțiile noastre de experți ale celor mai bune plugin-uri de blocuri Gutenberg.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.