Cum să redimensionați blocurile în WordPress

Editorul de blocuri Gutenberg, introdus oficial în WordPress 5.0, oferă utilizatorilor posibilitatea de a-și personaliza pe deplin conținutul și site-urile WordPress. Nu mai este constrâns de necesitatea de a crea într-un instrument WYSIWYG precum TinyMCE Classic Editor, Gutenberg oferă blocuri individuale pentru fiecare element din conținutul postării sau al paginii. Cu control asupra setărilor pentru fiecare bloc specific, utilizatorii pot proiecta conținut WordPress mai ușor ca niciodată. Și una dintre cele mai simple modalități de a face ca desenele să iasă în evidență este să le duci dincolo de setările implicite. Deci, vom analiza cum să redimensionați blocurile din WordPress, astfel încât să puteți începe să gândiți (și să proiectați) în afara casetei.

Majoritatea redimensionării din editorul de blocuri este încă limitată la zona de conținut a site-ului, datorită naturii receptive a blocurilor. Dacă ați setat zona de conținut a paginii pe lățime completă, veți lucra în acel spațiu. Dacă aveți o zonă de conținut postată de la 580 px sau 1200 px, de exemplu, veți lucra acolo. Metodele pe care le folosim pentru a vă învăța cum să redimensionați blocurile în WordPress se bazează pe ideea că veți rămâne în limitele containerului unui anumit bloc.

Cum să redimensionați blocurile în editor

Unele blocuri - dar nu toate - au opțiuni de redimensionare încorporate. Acestea sunt cele mai ușor de redimensionat din motive evidente. Cu toate acestea, în funcție de bloc, opțiunile de redimensionare vor fi în locuri diferite.

Exemplul # 1: Blocul de imagini

Dacă faceți clic pe bloc, va apărea meniul contextual, iar opțiunile de redimensionare de aici sunt de fapt opțiuni de spațiere. Cu toate acestea, lățimea lată și lățimea completă vor schimba dimensiunea blocului de imagine fie la lățimea containerului (lată), fie la lățimea întregii pagini (plină).

De asemenea, puteți redimensiona blocul de imagine utilizând setările blocului din bara laterală din dreapta. Secțiunea Dimensiune imagine numită în mod corespunzător are o serie de opțiuni cu care puteți redimensiona blocul.

WordPress are o listă verticală pentru redimensionare rapidă și puteți alege presetări din miniatură , medie , mare și dimensiune completă. Selectarea dimensiunii complete va varia în funcție de temă, indiferent dacă se afișează complet sau se potrivește cu zona de conținut.

De asemenea, puteți ajusta în mod specific lățimea și înălțimea cu pixeli. Sub aceasta vă puteți ajusta în procente. Procentul se bazează pe valoarea numerică din câmpurile de lățime și înălțime . Nu dimensiunea presetată a imaginii pe care ați selectat-o ​​din meniul derulant.

Și, în cele din urmă, puteți face clic pe imagine în sine pentru a afișa o margine albastră cu ancore circulare albe . Puteți să le trageți pentru a redimensiona blocul.

Pur și simplu veți face clic și trageți pe oricare dintre ancore pentru a scala imaginea. Dacă faceți acest lucru, se va ajusta dimensiunea în câmpurile de înălțime și lățime din meniul de setări bloc.

Exemplul 2: Blocul evenimentelor

Pentru blocul de evenimente, setările de redimensionare se află exclusiv în meniul contextual din editorul propriu-zis. (Blocul de evenimente este un plugin separat de Automattic pe care îl veți instala și nu face parte din editorul de bază Gutenberg.)

La fel ca unele dintre opțiunile de blocare a imaginilor, opțiunile de redimensionare de aici sunt opțiuni de distanțare tehnică. Dar cele două opțiuni sunt Align Center și Wide Width. Puteți alege unul pentru a fi centrat în container sau pentru a avea lățimea completă pe ecran.

Reglarea înălțimii blocului în editorul în sine este cam ciudat, dar funcționează. Dacă apăsați pur și simplu Enter / Return în câmpul de blocare goală, puteți extinde înălțimea inserând blocuri de paragrafe goale și goale.

Este o soluție mai puțin decât ideală. Dar este rapid și funcționează într-o ciupire - mai ales având în vedere absența unei opțiuni reale de reglare a înălțimii pentru blocul de evenimente.

Exemplul 3 #: Utilizarea coloanelor pentru redimensionarea blocurilor în WordPress

Dacă blocul pe care trebuie să îl redimensionați nu vine cu opțiuni de redimensionare în panoul său de setări sau în meniul contextual, utilizarea coloanelor editorului de blocuri este un alt mod în care puteți redimensiona orice bloc. Pur și simplu căutați blocul Coloane apăsând pe oricare dintre butoanele + pentru a adăuga un bloc nou.

În cadrul blocului Coloană, puteți adăuga orice alte blocuri dorite. În opțiunile de căutare, apar și modelele editorului de blocuri. Acestea sunt șabloane pe care le puteți insera în postarea sau pagina dvs. cu conținut deja dimensionat și plasat, așteptând ca conținutul dvs. să înlocuiască substituentul.

De la început, blocul Coloane vă permite să alegeți dimensiunea coloanei în sine. Este împărțit în 6 orientări diferite, fiecare cu un procent diferit din pagina utilizată pentru coloane individuale.

Acestea nu sunt singurele configurații pe care le puteți utiliza. Puteți utiliza butonul albastru + din interiorul blocului pentru a adăuga o coloană nouă în orice moment. Fiecare coloană individuală are propriul său panou de setări, în care puteți regla lățimea singură cu procente.

Este posibil să fie nevoie de unele experimentări pentru a obține dimensiunea corectă pentru designul dvs. Cu toate acestea, când este terminat, puteți avea un conținut bine proiectat și bine spațiat pe prima pagină. Rețineți că toate coloanele goale pe care le aveți în editorul de blocuri se vor afișa, de asemenea, goale pe partea frontală.

Reglând lățimea, amplasarea și numărul de coloane diferite, blocurile dvs. pot fi redimensionate și plasate în aproape orice mod.

Aveți nevoie de mai multe opțiuni de dimensionare? Luați în considerare un Generator de pagini mai avansat

Ne dăm seama că unele dintre aceste metode de redimensionare a blocurilor se pot simți limitative. Dacă descoperiți că sunt prea limitative pentru dvs., ar putea fi timpul să vă uitați la un constructor de pagini mai avansat.

Propriul nostru Divi, de exemplu, are opțiuni de dimensionare și transformare pentru fiecare modul (bloc) care vă oferă un control mult mai mare asupra formei, dimensiunii și spațiului decât este posibil în Gutenberg. Și majoritatea constructorilor de pagini avansați o fac, așa că, dacă descoperiți că opțiunile lui Gutenberg sunt prea limitative, verificarea a ceva de genul Divi poate fi cel mai bun pas următor.

Cum să redimensionați blocurile în WordPress folosind CSS

Fiecare bloc are o secțiune CSS în panoul de setări din Setări avansate . Alături de orice alte setări avansate specifice blocurilor, fiecare are un câmp pentru Clase CSS suplimentare . Puteți atribui orice selector dorit acestui bloc individual, indiferent dacă există deja pe site-ul dvs. sau dacă îl creați special pentru acest bloc.

În mod normal, vă sugerăm să utilizați coduri CSS în loc de clase pentru blocuri individuale, dar acest lucru nu este acceptat de editorul de blocuri (cel puțin implicit). Deci, veți dori să utilizați doar mai multe clase pentru a ține pasul cu blocurile individuale, mai degrabă decât cu ID-urile. Clasele sunt menite să acopere categorii mari de tipuri de elemente, în timp ce ID-urile sunt destinate elementelor individuale. În acest caz, vă sugerăm să utilizați o convenție clară de denumire pentru a menține lucrurile drepte în codul dvs.

Indiferent, veți introduce pur și simplu clasa în câmpul de text. Nu includeți punctul / punctul din fața numelui clasei în acest câmp .

Acum, ar trebui să navigați la Aspect - Personalizați și găsiți secțiunea CSS suplimentară în partea de jos. Scrieți sau lipiți codul CSS pentru a redimensiona blocul după cum doriți.

Vă sugerăm să evitați utilizarea măsurătorilor în pixeli (px), deoarece acestea sunt absolute. De preferință, veți utiliza fie vw (lățimea ferestrei) , vh (înălțimea ferestrei) sau % (procent) pentru a regla blocul. Acestea vor fi scalate în funcție de dispozitiv și / sau alt conținut din jurul acestuia.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Rețineți că și % și vw / vh sunt diferite, deși funcționează similar. Toate funcționează în procente, dar acestea sunt relative la ancore diferite.

Măsurarea procentuală este în raport cu containerul în care este ținut elementul. Deci, dacă secțiunea sau rândul în care se află elementul nu merge la marginile ecranului, chiar și setarea lățimii: 100% nu va atinge limitele.

Cu toate acestea, folosirea vh / vw va fi relativă la fereastra dispozitivului în sine, nu la elementele site-ului. Folosind înălțimea: 80vh , vă puteți asigura întotdeauna că acest bloc ocupă 80% din înălțimea ecranului, indiferent dacă este afișat pe un dispozitiv mobil, desktop sau tabletă.

Concluzie

Editorul de blocuri din WordPress oferă utilizatorilor un număr mare de opțiuni de personalizare care anterior nu erau disponibile (în cadrul editorului în sine, adică). Știind cum să redimensionați blocurile în WordPress este esențială pentru a putea utiliza editorul de blocuri la maximum. Și cu editarea pe site completă acum în repertoriul său, aceasta este o abilitate care va fi mai utilă doar pe măsură ce trece timpul.

Care sunt câteva sfaturi și trucuri pe care le puteți împărtăși despre redimensionarea blocurilor în WordPress?

Imagine prezentată de articol de la 3rieart / shutterstock.com