Cum să schimbi înălțimea și lățimea blocurilor în WordPress

Obținerea dimensiunii exacte potrivite pentru blocurile dvs. WordPress necesita anterior CSS personalizat sau soluții complexe.

Știm acest lucru deoarece am petrecut nenumărate ore ajutând utilizatorii cu această problemă exactă. Dar, datorită actualizărilor recente WordPress, controlul dimensiunilor blocurilor a devenit mult mai simplu.

Ceea ce surprinde mulți oameni este că există, de fapt, mai multe moduri încorporate de a ajusta dimensiunile blocurilor în WordPress. Prin multă experimentare, am identificat cele mai fiabile metode care funcționează în diferite situații și teme.

În acest ghid, vom împărtăși cele mai ușoare moduri de a modifica înălțimile și lățimile blocurilor în WordPress.

De ce să schimbați înălțimea și lățimea blocurilor în WordPress?

Deși editorul de blocuri WordPress face ușoară adăugarea de conținut, dimensiunile implicite ale blocurilor s-ar putea să nu se potrivească întotdeauna cu designul pe care îl aveți în minte. Ajustarea înălțimii și lățimii unui bloc este o modalitate simplă de a obține mai mult control asupra aspectului paginii dvs.

Iată câteva motive cheie pentru care ai dori să schimbi dimensiunea unui bloc:

• Îmbunătățește aspectul vizual: Poți crea designuri mai echilibrate și cu aspect profesional controlând dimensiunea exactă a elementelor tale.
• Îmbunătățește lizibilitatea: Ajustarea lățimii blocurilor de text poate face conținutul tău mai ușor de citit, în special pe ecranele late.
• Asigurați responsivitatea: dimensionarea corectă a blocurilor ajută conținutul dvs. să arate grozav pe toate dispozitivele, de la desktopuri la telefoane mobile.
• Creează accent: Mărirea sau micșorarea unui bloc poate atrage atenția asupra unor apeluri la acțiune importante sau informații cheie.

Înțelegerea dimensionării blocurilor WordPress

Înainte de a intra în detalii despre metode, este util să înțelegi diferitele moduri în care WordPress îți permite să definești dimensiunile blocurilor:

Termen	Ce înseamnă	Când să o utilizați
Pixeli (px)	O unitate de dimensiune fixă care nu se schimbă în funcție de dimensiunea ecranului.	Folosește pixeli atunci când vrei ca ceva să rămână exact la aceeași dimensiune peste tot.
Procente (%)	O unitate flexibilă care se ajustează în funcție de containerul părinte.	Folosește procente pentru a face ca aspectul tău să arate bine pe toate dimensiunile ecranului.
Lățime mare	O aliniere WordPress care face un bloc mai lat decât zona de conținut, dar nu pe tot ecranul.	Folosește acest lucru pentru a face secțiunile să iasă în evidență fără a se întinde pe toată pagina.
Lățime completă	O aliniere WordPress care extinde un bloc de la un capăt la altul al ecranului.	Încearcă acest lucru pentru secțiuni de tip hero, bannere sau imagini de fundal mari.
Înălțime minimă	Setează cea mai mică înălțime pe care o poate avea un bloc, dar îi permite să crească dacă este necesar.	Optează pentru acest lucru atunci când vrei ca secțiunile (cum ar fi blocurile Copertă) să păstreze o înălțime constantă.

Acum, să vedem cum poți schimba cu ușurință înălțimea și lățimea blocurilor în WordPress.

Vom acoperi câteva metode diferite și puteți folosi linkurile rapide de mai jos pentru a sări la cea pe care doriți să o utilizați:

Metoda 1: Modificați înălțimea și lățimea blocului folosind setările blocului

În această metodă, vă vom arăta cum să modificați înălțimea și lățimea unui bloc folosind setările implicite ale WordPress.

Deși WordPress nu oferă exact aceleași opțiuni de redimensionare pentru fiecare bloc în parte, editorul de blocuri oferă mai multe modalități puternice de a ajusta înălțimea și lățimea diferitelor blocuri.

Să începem cu blocul Imagine în WordPress.

Pentru un bloc Imagine, poți ajusta lățimea acestuia folosind opțiunile de aliniere. Fă clic pe butonul „Aliniere” din bara de instrumente de deasupra blocului.

Alegerea „Lățime mare” va face ca imaginea să ocupe cea mai mare parte a zonei de conținut, în timp ce „Lățime completă” o va extinde pe întregul ecran.

Poți ajusta, de asemenea, dimensiunea de afișare a imaginii accesând panoul „Setări bloc” din dreapta.

În secțiunea „Setări”, folosește meniul derulant „Dimensiune imagine” pentru a alege dintre opțiuni predefinite precum Miniatură, Medie, Mare sau Dimensiune completă.

Aceasta va schimba dimensiunile imaginii pentru a se potrivi presetării selectate.

Poți, de asemenea, să ajustezi lățimea și înălțimea blocului tastând dimensiunea preferată în pixeli în casetele „Lățime” și „Înălțime” din secțiunea „Dimensiuni imagine”.

Mai jos, puteți ajusta, de asemenea, dimensiunea blocului în procente.

O altă modalitate de a redimensiona un bloc Imagine este să faceți clic pe imaginea în sine, ceea ce va afișa o bordură albastră cu ancore circulare.

Apoi, pur și simplu trageți aceste ancore pentru a modifica înălțimea și lățimea blocului de imagine.

Odată ce ai terminat, dă clic pe butonul „Actualizează” sau „Publică” pentru a stoca setările tale.

Metoda 2: Schimbă lățimea blocului folosind blocul Coloane

Dacă blocul pe care dorești să îl redimensionezi nu are controale de dimensiune încorporate, cum ar fi blocul Paragraf, atunci această metodă este pentru tine. Acționează ca o soluție prin plasarea blocului tău într-un container pe care îl poți controla.

Pentru această metodă, vom plasa blocul nostru în interiorul blocului Coloane. Acesta este un container unde puteți adăuga diferite blocuri în fiecare coloană.

Apoi, puteți controla în principal lățimea blocurilor din interior prin ajustarea lățimii coloanelor. Înălțimea coloanei se va ajusta automat pentru a se potrivi conținutului său.

Mai întâi, faceți clic pe butonul „Adăugare Bloc” (+) din colțul din stânga sus al ecranului.

De aici, localizează și adaugă blocul Coloane în editorul Gutenberg. Apoi, ți se va cere să alegi o variație.

După aceea, layout-ul coloanei va fi afișat pe ecran și acum puteți adăuga blocul dorit făcând clic pe butonul „Adăugare bloc (+)” din interiorul unei coloane.

Odată ce blocul a fost adăugat, puteți controla lățimea acestuia ajustând coloana în care se află.

Pur și simplu selectați coloana, iar în panoul de setări al blocului din dreapta, puteți modifica lățimea coloanei în secțiunea „Setări”. Acest lucru va redimensiona, la rândul său, blocul din interiorul acesteia.

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

Așa arăta conținutul pe site-ul nostru demo după redimensionarea și alinierea a două blocuri de paragrafe într-un bloc cu două coloane.

Metoda 3: Schimbați înălțimea și lățimea blocului folosind blocul Grup

Blocul Grup este excelent pentru organizarea mai multor blocuri și gestionarea aspectului și spațierii acestora. Deși nu setează direct înălțimea și lățimea blocurilor individuale din interior, puteți controla dimensiunile generale ale grupului și modul în care este aranjat conținutul său.

Mai întâi, trebuie să faceți clic pe butonul „Adăugare bloc” (+) din partea de sus. Apoi, localizați și adăugați blocul Grup în editorul de conținut.

Odată ce îl adăugați, blocul Grup va oferi opțiuni de aspect precum „Grup”, „Rând” sau „Stivă”. Pentru acest tutorial, vom folosi aspectul implicit „Grup”.

După aceea, butonul „Adăugare bloc” va fi afișat pe ecran. Acum puteți adăuga orice bloc doriți.

În acest tutorial, vom adăuga și redimensiona un bloc Titlu, un bloc Paragraf și un bloc Imagine.

Pentru a adăuga mai multe blocuri la Grup, faceți clic pe butonul „Selectare Grup” din bara de instrumente a blocului.

Odată ce Grupul este selectat, pur și simplu faceți clic pe butonul „Adăugare Bloc” (+) din partea de jos.

Odată ce faci acest lucru, bara laterală cu setările blocului din dreapta se va deschide. De aici, poți ajusta cu ușurință aspectul, justificarea și orientarea tuturor blocurilor.

Ajustarea acestor setări de aspect va influența modul în care sunt aranjate blocurile și cât spațiu ocupă în cadrul grupului. Puteți configura aceste setări până când sunteți mulțumit de rezultat.

Odată ce ai terminat, dă clic pe butonul „Actualizează” sau „Publică” pentru a stoca setările tale.

Așa arăta blocul Grup pe site-ul nostru demo.

Metoda 4: Modificați înălțimea blocului folosind blocul Copertă

Această metodă de redimensionare este pentru dvs. dacă doriți să utilizați blocul Copertă și să setați o înălțime minimă specifică pentru o secțiune. Este ideal pentru crearea de bannere pe toată lățimea sau imagini de antet care au text și alt conținut deasupra.

Mai întâi, faceți clic pe butonul „Adăugare bloc” (+) din partea de sus și găsiți blocul Copertă.

După ce ați făcut acest lucru, vi se va cere să alegeți o culoare sau să încărcați o imagine din biblioteca media WordPress. Această imagine sau culoare va fi folosită ca fundal pentru blocul Copertă.

Apoi, pur și simplu trage și plasează orice bloc dorești în blocul Cover.

După aceea, trebuie să faceți clic pe blocul Copertă pentru a deschide setările blocului în coloana din dreapta.

De aici, derulați în jos la panoul „Dimensiuni”, unde puteți ajusta înălțimea blocului Copertă folosind pixeli.

În final, nu uita să dai clic pe butonul „Salvează modificările” pentru a stoca setările tale.

Pentru instrucțiuni mai detaliate despre cum să utilizați blocul Copertă, poate doriți să consultați ghidul nostru pentru începători despre Copertă vs. Imagine de prezentare în editorul de blocuri WordPress.

Bonus: Creați pagini frumoase folosind blocuri avansate în SeedProd

Puteți crea cu ușurință pagini frumoase și plăcute din punct de vedere estetic folosind pluginul SeedProd.

Este cel mai bun constructor de pagini WordPress de pe piață, care vă permite să creați pagini de destinație folosind blocuri, care sunt foarte ușor de personalizat și redimensionat în funcție de nevoile dvs.

Mai multe dintre mărcile partenere au folosit acest instrument pentru a-și proiecta întregul site web, iar utilizatorii lor au apreciat aspectul proaspăt și modern. Pentru a afla mai multe, consultați recenzia SeedProd.

Pasul 1: Instalați și activați SeedProd

Mai întâi, va trebui să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, puteți citi ghidul nostru despre cum se instalează un plugin WordPress.

După activare, trebuie să accesezi pagina SeedProd » Setări din tabloul de bord WordPress și să introduci cheia de licență în caseta „Cheie de licență”.

Poți găsi cheia de licență pe pagina contului tău de pe site-ul SeedProd.

Pasul 2: Creați o nouă pagină de destinație

Apoi, accesați ecranul SeedProd » Landing Pages din bara laterală de administrare pentru a începe crearea unei pagini de destinație.

De aici, pur și simplu faceți clic pe butonul „Adăugare pagină de destinație nouă”.

Veți fi acum direcționat către ecranul „Alegeți un șablon nou de pagină”. SeedProd oferă multe șabloane predefinite din care puteți alege.

După ce ați selectat un șablon, vi se va cere să furnizați un nume și un URL pentru pagina dvs. de destinație.

După adăugarea acestor detalii, pur și simplu dă clic pe butonul „Salvează și începe editarea paginii” pentru a continua.

Pasul 3: Redimensionați dimensiunile blocului Imagine

Acest lucru va lansa constructorul de pagini drag-and-drop al SeedProd, unde puteți începe acum să editați pagina. Pentru instrucțiuni detaliate, consultați ghidul nostru despre cum să creați o pagină de destinație cu WordPress.

Pentru acest tutorial, vom adăuga și redimensiona un bloc Imagine și un bloc Buton.

Mai întâi, va trebui să trageți blocul Imagine din panoul de blocuri din stânga și să-l plasați oriunde doriți pe pagină.

Apoi, faceți clic pe blocul Imagine pentru a deschide setările blocului în coloana din stânga. De aici, puteți încărca o imagine din biblioteca dvs. media.

Apoi, poți modifica înălțimea și lățimea blocului folosind pixeli sau procente.

Puteți, de asemenea, să ajustați fin spațierea din jurul și din interiorul blocului imagine comutând la fila „Avansat” din partea de sus a panoului de setări.

Apoi, faceți clic pe panoul „Spațiere” pentru a extinde setările acestuia.

Aici, puteți adăuga valori pentru a ajusta marginea blocului (spațiu în afara blocului) și paddingul (spațiu în interiorul blocului) conform nevoilor dumneavoastră.

Puteți ajusta marginea și spațierea pentru zonele de sus, jos, stânga și dreapta ale blocului.

Pasul 4: Ajustați înălțimea blocului Distanțier

Cu Seedprod, puteți adăuga, de asemenea, un bloc Spacer între două blocuri diferite pentru a crea spațiu între ele.

Mai întâi, va trebui să localizați și să adăugați blocul „Spațiator” din coloana din stânga. Apoi, faceți clic pe el pentru a deschide setările sale.

Acum, puteți controla înălțimea spațiatorului folosind glisorul „Înălțime”.

Blocul spațiator vă poate ajuta să creați un site web fără dezordine.

Pasul 5: Configurați paddingul blocului Buton

De asemenea, puteți modifica lățimea și înălțimea altor blocuri în același mod, inclusiv blocurile Video, Titlu și Buton.

Pur și simplu găsiți blocul Buton în coloana din stânga și trageți-l pe pagina dvs.

Apoi, va trebui să faceți clic pe Buton pentru a deschide setările blocului său.

De aici, comutați la fila „Avansat” din partea de sus. Puteți crește dimensiunea verticală a butonului glisând cursorul „Padding Vertical”, care adaugă spațiu deasupra și dedesubtul textului butonului.

Pentru a-i crește dimensiunea orizontală, glisați cursorul „Padding Orizontal”, adăugând spațiu la stânga și la dreapta textului.

Odată ce ați terminat, nu uitați să faceți clic pe butonul „Salvați”.

Întrebări frecvente despre schimbarea lățimii și înălțimii blocurilor

Iată câteva întrebări pe care cititorii noștri le-au pus frecvent despre schimbarea lățimii și înălțimii blocurilor în WordPress:

Cum reduc dimensiunea unui bloc în WordPress?

Puteți reduce dimensiunea unui bloc în WordPress ajustând lățimea, paddingul sau dimensiunea fontului în setările blocului. Începeți prin a selecta blocul și a reduce dimensiunile sau spațierea până când arată corect.

Cum să redimensionați un bloc de text în WordPress?

Puteți redimensiona un bloc de text în WordPress prin schimbarea dimensiunii fontului în setările de Tipografie. Puteți, de asemenea, ajusta înălțimea liniei sau spațierea dacă textul pare încă prea mare.

Cum să ajustați spațierea blocurilor în WordPress?

Puteți ajusta spațierea blocurilor în WordPress editând setările de margine și padding. Recomandăm reducerea mai întâi a paddingului dacă există prea mult spațiu în interiorul blocului.

Cum redimensionați o pagină web în WordPress?

Puteți redimensiona o pagină web în WordPress schimbând setările de aspect din tema sau constructorul de pagini. Puteți încerca să comutați între aspectele în cutie și cele pe lățime completă, în funcție de designul dorit.

Cum micșorez dimensiunea unui site web în WordPress?

Puteți reduce dimensiunea unui site web în WordPress prin reducerea dimensiunilor fonturilor, a spațiului și a lățimii containerelor. Începeți prin a face ajustări mici în diferite elemente, în loc să schimbați totul odată.

Sperăm că acest articol v-a ajutat să învățați cum să schimbați lățimea și înălțimea blocurilor în WordPress. De asemenea, poate doriți să consultați articolul nostru despre cum să adăugați și să aliniați imagini în editorul de blocuri WordPress și selecțiile noastre de top pentru cele mai bune teme WordPress compatibile cu Gutenberg.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.