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?

În timp ce editorul de blocuri WordPress facilitează adăugarea de conținut, dimensiunile implicite ale blocurilor s-ar putea să nu se potrivească întotdeauna cu designul pe care îl ai î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 tale.

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.
• Asigură responsivitatea: Dimensionarea corectă a blocurilor ajută conținutul tău 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.

Acestea fiind spuse, 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
• Metoda 2: Schimbă lățimea blocului folosind blocul Coloane
• Metoda 3: Schimbați înălțimea și lățimea blocului folosind blocul Grup
• Metoda 4: Modificați înălțimea blocului folosind blocul Copertă
• Bonus: Creați pagini frumoase folosind blocuri avansate în SeedProd

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.

În prezent, WordPress nu oferă aceleași opțiuni de redimensionare pentru toate blocurile. Cu toate acestea, editorul de blocuri oferă multe modalități de a redimensiona înălțimea și lățimea diferitelor blocuri.

Să începem cu blocul Imagine în WordPress.

Mai întâi, puteți schimba alinierea blocului Imagine făcând clic pe butonul „Aliniere” din bara de instrumente de deasupra blocului.

Aici, alegerea opțiunii „Lățime Mare” va face ca blocul să aibă aceeași lățime ca și containerul. Sau, opțiunea de aliniere „Lățime Completă” va face ca blocul să ocupe întreaga lățime a paginii.

De asemenea, puteți redimensiona un bloc accesând panoul „Setări bloc” din dreapta și derulând în jos la secțiunea „Setări”. De aici, puteți redimensiona un bloc din meniul derulant „Dimensiune imagine”.

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. Este un container unde puteți adăuga diferite blocuri în fiecare coloană. Apoi, puteți redimensiona acele blocuri ajustând înălțimea și lățimea coloanelor.

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

De asemenea, puteți ajusta lățimea și înălțimea blocurilor folosind blocul Grup. Acesta vă permite să grupați blocurile dorite și să le stilizați împreună.

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 faceți acest lucru, blocul Grup va afișa trei opțiuni diferite de aspect. Pentru acest tutorial, vom folosi aspectul „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.

Schimbarea layout-ului va schimba și diferitele dimensiuni ale blocurilor. 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ă.

Odată 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 Cover.

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ă folosești blocul Cover, s-ar putea să vrei să consulți ghidul nostru pentru începători despre Cover Image vs. Featured Image î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 extrem de ușor de personalizat și redimensionat în funcție de nevoile dvs.

Mai multe dintre mărcile noastre 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.

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 să instalați 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.

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 pre-făcute 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.

Aceasta 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.

De asemenea, puteți ajusta dimensiunea și poziția imaginii comutând la fila „Avansat” din partea de sus a panoului de setări.

Apoi, pur și simplu faceți clic pe panoul Spațiere pentru a extinde setările acestuia.

Aici, pur și simplu adaugă valori pentru a ajusta marginile și spațierea interioară ale blocului conform nevoilor tale.

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

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.

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 modifica înălțimea blocului trăgând glisorul „Padding vertical”.

Pentru a modifica lățimea, trage cursorul „Padding Orizontal” din coloana din stânga.

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

Sperăm că acest articol v-a ajutat să învățați cum să modificați lățimea și înălțimea blocurilor în WordPress. De asemenea, ați putea dori 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ă ț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.