Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să adăugați și să aliniați imagini în editorul de blocuri WordPress (Gutenberg)

Când am trecut inițial la editorul de blocuri WordPress, chiar și sarcini simple precum adăugarea și alinierea imaginilor păreau diferite.

După ce am ajutat atât de mulți utilizatori prin WPBeginner, am observat că acesta este unul dintre cele mai frecvente obstacole cu care se confruntă oamenii atunci când trec la Gutenberg.

Vestea bună este că lucrul cu imaginile în editorul de blocuri a devenit de fapt mai intuitiv – odată ce știi unde să cauți.

În acest ghid, vă vom arăta exact cum să adăugați și să aliniați imagini în editorul de blocuri WordPress. Acestea sunt aceleași tehnici pe care le folosim zilnic pe WPBeginner, explicate în termeni simpli pe care oricine le poate urma.

Adăugarea și alinierea corectă a imaginilor în WordPress

Alinierea imaginilor în editorul WordPress

Anterior, WordPress folosea o zonă de text cu butoane de editare ca editor implicit. O problemă particulară în editorul vechi era alinierea imaginilor, ceea ce putea face dificilă alinierea corectă a elementelor pe site-ul dvs. WordPress.

Chiar dacă existau opțiuni pentru alinierea imaginilor la stânga, la dreapta sau la centru, acestea nu arătau întotdeauna bine. Uneori, imaginile nu se aliniau, aveau dimensiunea greșită sau pur și simplu arătau ciudat.

WordPress 5.0 a introdus un nou editor de articole WordPress numit editorul de blocuri Gutenberg. Acesta a rezolvat mai multe probleme ale editorului vechi, inclusiv problemele de aliniere a imaginilor.

În secțiunile următoare, vom explica cum să adăugați și să aliniați ușor imaginile în noul editor pentru a crea layout-uri frumoase pentru postările și paginile blogului dvs. WordPress.

Iată o prezentare generală rapidă a tuturor subiectelor pe care le vom împărtăși:

Să începem!

Cum să adăugați și să aliniați imagini în WordPress

Editorul vine cu mai multe blocuri pe care le puteți utiliza pentru a adăuga imagini la postările și paginile dvs. WordPress. În acest ghid, ne vom concentra pe cele mai populare:

  • Imagine
  • Galerie
  • Media & Text
  • Copertă

Să începem mai întâi cu un simplu bloc de imagini.

Puteți face clic pe butonul „Adăugați un bloc nou” sau puteți tasta /imagine în editorul de postări pentru a insera un bloc de imagini.

Adăugarea unui nou bloc de imagini în editorul de postări WordPress

Aceasta va activa cele 3 butoane din interiorul blocului de imagine gol.

Acum, puteți încărca o imagine de pe computer, selecta o imagine deja încărcată din biblioteca media sau insera o imagine furnizând URL-ul fișierului imagine.

Apoi, faceți clic pe butonul „Încărcare” și apoi selectați imaginea pe care doriți să o încărcați de pe computer.

Imediat ce selectați imaginea, WordPress o va încărca în biblioteca dvs. media și o va insera în blocul de imagini.

Adăugarea unei imagini folosind blocul imagine

Acum, veți observa o bară de instrumente deasupra imaginii dvs. și unele setări ale blocului de imagini în coloana din dreapta.

Pentru a vă alinia imaginea, veți folosi bara de instrumente care apare deasupra imaginii.

Butoane de aliniere a imaginilor în editorul de postări WordPress

Blocul imagine vă oferă mai multe opțiuni de aliniere. În funcție de tema dvs. WordPress, este posibil să vedeți toate cele de mai jos:

  • Niciuna: Alinierea implicită, care plasează imaginea în linie cu textul dvs.
  • Aliniază la stânga: Împinge imaginea spre stânga, permițând textului să se înfășoare în jurul părții sale drepte.
  • Aliniere centru: Centrează imaginea în coloana principală de conținut.
  • Aliniere la dreapta: Mută imaginea în dreapta, permițând textului să se înfășoare în jurul părții stângi a acesteia.
  • Lățime mare: Face imaginea mai lată decât zona de conținut principal pentru un aspect mai dinamic.
  • Lățime completă: Întinde imaginea pentru a umple întreaga lățime a browserului, de la margine la margine.
Centrează o imagine în WordPress

Continuați și faceți clic pe butonul „Aliniere centru” pentru a centra imaginea în postarea dvs.

Cum să aliniezi perfect o imagine lângă text

De multe ori, este posibil să fie necesar să aliniați perfect o imagine lângă text. Editorul de blocuri WordPress face acest lucru ușor cu blocul Media & Text.

Acest bloc adaugă practic o zonă cu două coloane – o coloană pentru imagini (media) și a doua coloană pentru conținut text.

Bloc media și text în editorul de postări WordPress

Pur și simplu încărcați imaginea făcând clic pe butonul „Încărcare”.

Apoi, puteți adăuga textul pe care doriți să îl afișați lângă acesta.

Adăugarea de media și text la bloc

Dacă aveți nevoie de o descriere mai lungă, continuați și tastați-o.

Alinierea imaginii se va ajusta automat la înălțimea textului din coloana următoare.

Dimensiunea imaginii se ajustează pentru aliniere verticală

Editorul de blocuri WordPress include, de asemenea, un bloc pentru adăugarea de galerii de imagini. Acest lucru vă permite să afișați cu ușurință imagini într-o grilă de rânduri și coloane.

Blocul Galerie vine cu opțiuni de aliniere similare în bara de instrumente. Implicit, blocul va afișa imaginile într-un aspect cu 3 coloane.

Deci, galeria dvs. de imagini ar putea arăta cam așa:

O galerie cu 3 coloane

Puteți ajusta aspectul galeriei prin deplasarea glisorului spre stânga sau spre dreapta. Alternativ, puteți pur și simplu să introduceți numărul de coloane dorit în casetă.

Aici am încercat layout-ul pe 4 coloane:

O galerie cu 4 coloane

Dacă galeria dvs. nu arată bine din cauza diferențelor de dimensiuni ale imaginilor, va trebui să ajustați alinierea acesteia.

În editorul de postări, puteți face clic pe galerie. Apoi, puteți face clic pe pictograma „Selectați blocul părinte: Galerie” pentru a deschide panoul de personalizare.

Pictograma Galerie: Selectați blocul părinte

De aici, să ne asigurăm că activăm opțiunea „Decupați imaginile pentru a se potrivi”.

Imediat ce faceți acest lucru, WordPress va ajusta galeria la centru.

Decupează imaginile pentru a se potrivi, astfel încât galeria ta să arate îngrijit

Funcționalitatea implicită de galerie din WordPress este destul de bună. Cu toate acestea, dacă adăugați în mod regulat galerii foto la postările și paginile dvs. WordPress, luați în considerare utilizarea unui plugin pentru galerii foto precum Envira Gallery.

Aceste plugin-uri vă vor oferi mai multe opțiuni pentru a alinia imaginile în galeriile dvs. foto, a le afișa în popup și a le stiliza diferit.

Pentru mai multe detalii, consultați tutorialul nostru despre cum să adăugați o galerie de imagini în WordPress.

Cum să adăugați două imagini una lângă alta în WordPress

Cel mai simplu mod de a afișa 2 imagini una lângă alta într-o postare WordPress este să adăugați ambele imagini într-un bloc Galerie.

Afișați două imagini una lângă alta în postările și paginile WordPress

Pentru a deschide opțiunea de personalizare a blocului Galerie, puteți face clic pe galerie și apoi încă o dată pe pictograma „Selectați blocul părinte: Galerie”.

Aceasta va deschide panoul de personalizare din partea dreaptă.

Pictograma blocului Galerie pentru a deschide opțiunile de personalizare

De aici, selectați pur și simplu un layout pe 2 coloane pentru blocul galeriei, pentru a afișa ambele imagini una lângă alta.

De asemenea, puteți activa opțiunea „Decupați imaginile pentru a se potrivi” pentru a vă asigura că ambele imagini au aceeași dimensiune și sunt centrate.

Decupare imagini pentru a se potrivi activată

Mai multe moduri de a adăuga și alinia imagini în WordPress

Pe lângă blocurile pe care le-am acoperit deja, puteți utiliza și blocul Cover.

Scopul său principal este de a vă permite să plasați text direct deasupra unei imagini, ceea ce este perfect pentru crearea de anteturi de secțiune atrăgătoare și apeluri la acțiune.

Blocul Copertă are aceleași opțiuni de aliniere ca o imagine obișnuită.

Puteți adăuga, de asemenea, o suprapunere de culoare pentru a face textul mai ușor de citit și chiar să bifați opțiunea „Fundal fix”, care creează un efect de defilare parallax interesant.

Imagine de copertă în WordPress

Pentru a afla mai multe despre utilizarea imaginilor de copertă, consultați articolul nostru despre diferența dintre imaginile de prezentare și cele de copertă în WordPress.

Până acum, am vorbit despre adăugarea imaginilor direct în postările și paginile dvs. Ce zici de imaginile de pe site-uri terțe?

Editorul de blocuri face acest lucru ușor. Puteți adăuga imagini de pe site-uri populare de partajare socială, inclusiv Instagram, Facebook, Flickr, Imgur, Photobucket și multe altele.

De exemplu, dacă doriți să adăugați o fotografie de pe Instagram, pur și simplu adăugați blocul Instagram la editorul de postări și introduceți URL-ul postării pe care doriți să o partajați.

Încorporare Instagram în WordPress

Apoi, puteți pur și simplu să faceți clic pe alinierea dorită în bara de instrumente. Blocurile de încorporare vă permit, de asemenea, să încorporați ușor videoclipuri în WordPress.

Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să încorporați Instagram în WordPress.

Sfat bonus: Cum să centrezi un videoclip în WordPress

La fel ca în cazul imaginilor, s-ar putea să doriți să schimbați alinierea videoclipurilor dvs. Din fericire, blocurile video din WordPress folosesc exact aceleași instrumente de aliniere.

Indiferent dacă încorporați un videoclip YouTube sau încărcați propriul videoclip, faceți pur și simplu clic pe blocul video. Veți vedea bara de instrumente de aliniere familiară apărând în partea de sus.

Alinierea videoclipului la centru

Pur și simplu faceți clic pe butonul „Aliniază centru” pentru a centra întregul player video în zona de conținut. Acest lucru creează un aspect mult mai curat și mai rafinat pentru pagina dvs.

Pentru a afla mai multe, puteți citi ghidul nostru despre cum să centrați un videoclip în WordPress.

Întrebări frecvente despre alinierea imaginilor în WordPress

Iată câteva întrebări pe care cititorii noștri le pun frecvent despre alinierea imaginilor în WordPress:

Care este cel mai bun tip de fișier imagine pentru WordPress?

Pentru fotografii, JPEG este de obicei cea mai bună alegere, deoarece echilibrează calitatea și dimensiunea mică a fișierului. Dacă imaginea dvs. necesită un fundal transparent, cum ar fi un logo, ar trebui să utilizați formatul PNG.

Cum fac imaginile mele responsive pe dispozitive mobile?

Editorul de blocuri WordPress se ocupă de acest lucru automat pentru dvs. Orice imagine pe care o adăugați va fi responsivă, ceea ce înseamnă că se va ajusta pentru a se potrivi cu dimensiunea ecranului oricărui dispozitiv.

Pot înfășura text în jurul unei imagini?

Absolut. Adăugați pur și simplu un bloc Imagine și utilizați opțiunea „Aliniere la stânga” sau „Aliniere la dreapta” din bara de instrumente. Textul paragrafului care urmează se va înfășura automat în jurul imaginii.

Cum adaug o legendă imaginii mele?

După ce inserați o imagine, veți vedea un câmp „Adăugați o legendă” direct sub ea. Pur și simplu faceți clic pe această zonă și tastați textul pe care doriți să îl utilizați pentru legendă.

De ce imaginile din galeria mea nu se aliniază corect?

Acest lucru se întâmplă adesea atunci când imaginile din galeria dvs. au înălțimi sau lățimi diferite. Pentru a remedia acest lucru, selectați blocul Galerie și activați opțiunea „Decupați imaginile pentru a se potrivi” în panoul de setări din dreapta. Acest lucru va face ca toate imaginile din galerie să fie uniforme ca dimensiune.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați și să aliniați cu ușurință imagini în editorul de blocuri WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să schimbați înălțimea și lățimea blocurilor în WordPress și întrebări frecvente despre 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.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

63 CommentsLeave a Reply

  1. Gutenberg este încă un mare necunoscut pentru mine. Recunosc că am început să-l descopăr abia după ce a apărut WordPress 6.4 și am citit aceste pagini. Mult timp, de exemplu, nu am putut să-mi dau seama cum să pun o imagine și un text unul lângă altul (în Elementor era o chestiune complet simplă). După ce am citit acest articol, pot face puțin mai mult cu Gutenberg. Mulțumesc pentru asta.

  2. va funcționa asta cu Iframes? Editez un bloc HTML personalizat și adaug iframe și salvarea și adăugarea se aliniază în stânga, unde toate celelalte blocuri sunt centrate.?

    • Ar depinde de iframe, dar în mod normal iframe-urile nu vor avea automat opțiuni de aliniere.

      Admin

  3. Cum se aliniază imaginile de prezentare care apar pe pagina Blog generată automat și pe pagina Categorie? Apăsarea pe imagine deschide postarea și nu pare să existe o setare de aliniere pentru imaginea de prezentare la completarea setărilor postării.

    • Pentru imaginea de prezentare, aceasta ar fi determinată de tema dvs. Dacă verificați cu suportul temei dvs. specifice, ar trebui să vă poată asista cu alinierea imaginii dvs. de prezentare.

      Admin

  4. Doresc ca toate subtitrările de pe site-ul meu să fie de aceeași dimensiune și font.
    Cum se realizează acest lucru?

    • Cu excepția cazului în care tema dvs. are o setare specifică pentru aceasta, majoritatea temelor ar trebui să aibă textul uniform dacă este doar legenda imaginii și nu un bloc de text diferit.

      Admin

  5. Doresc să schimb setarea implicită pentru încărcarea unei imagini pentru a fi centrată de fiecare dată. Schimbarea fiecărei imagini pe care o încarc pentru a fi centrată de fiecare dată când adaug o imagine este atât de consumatoare de timp. Pot schimba setarea implicită pentru a fi centrată?

    • În acest moment, nu există o metodă simplă pe care am recomanda-o începătorilor, dar vom fi atenți la ceva ce am putea recomanda.

      Admin

  6. Încerc să folosesc Editorul de Blocuri pentru a afișa două imagini una lângă alta. Am folosit funcția de două coloane, apoi blocuri de imagini în fiecare coloană. În timpul proiectării, se afișează corect, dar când dau „previzualizare într-o filă nouă”, coloanele una lângă alta dispar și imaginile sunt stivuite. Ce fac greșit? Este o problemă comună? Cum pot rezolva asta?

    • Este posibil să doriți să vă asigurați că imaginile nu sunt prea mari pentru a fi una lângă alta în tema dvs. specifică, acesta fiind cel mai comun motiv pentru acea problemă.

      Admin

  7. Încerc să învăț cum să folosesc noul editor de blocuri. Când fac clic pe butonul Adăugare bloc și aleg imagine pentru a adăuga o fotografie, obțin doar opțiunea „inserare de la URL” și nu pot găsi o modalitate de a adăuga fotografii din Biblioteca mea media. Mă puteți ajuta?

    • Ar trebui să verificați cu atenție pentru a găsi textul de lângă butonul de încărcare pentru selectarea imaginii din biblioteca dvs. media

      Admin

  8. Public un blog de mulți ani. Am învățat să mă tem de introducerea unui nou sistem. A face un lucru simplu, cum ar fi adăugarea de fotografii, este acum foarte dificil.

    • Hopefully, once you are comfortable with the new system it becomes easier for you :)

      Admin

  9. Informații grozave, problema este că în backend funcționează, dar în frontend se aliniază mereu la stânga. Ar putea fi posibil ca acest lucru să aibă legătură cu șablonul meu Elementor?

    • Dacă utilizați un constructor de pagini, există posibilitatea ca acesta să suprascrie stilurile și puteți contacta suportul constructorului dvs. pentru asistență.

      Admin

  10. Tocmai am început WordPress ieri. Sunt un începător complet și sunt atât de fericit că wpbeginner mi-a oferit „roți de antrenament” pentru a porni rapid. Educația de pe acest site este atât de valoroasă. Nu vă pot mulțumi suficient.

  11. Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives…. :)

  12. Menționați „Imagine inline”, dar nu văd niciun astfel de bloc. Articolul dvs. a fost scris acum ceva timp, dar presupus actualizat în ianuarie 2020 – a dispărut acel bloc și ați uitat să-l eliminați din acest articol? Sau o întrebare mai bună: Cum pot adăuga o imagine inline în alt bloc, cum ar fi Paragraf sau Titlu?

    • Blocul de imagine inline nu este disponibil în prezent, dar îl puteți recrea normal cu textul și imaginea sau cu blocul standard de imagine

      Admin

  13. Când adaug o imagine din mediile mele, bara de instrumente a imaginii nu apare pentru a o alinia la stânga sau la dreapta. Pot schimba dimensiunea imaginii.

    • Ar trebui să vă asigurați că nu l-ați setat să fie în partea de sus a paginii, în loc de cum îl avem în prezent.

      Admin

  14. Salut, am aliniat toate imaginile folosind editorul de blocuri și totul arată bine până la previzualizare?

    Apoi, unele imagini au devenit mult mai mari decât altele, am o galerie de două imagini care stau brusc deasupra unei singure imagini. Totul s-a mișcat aleatoriu!

    Chiar și când l-am publicat, totul era greșit. Aș aprecia ajutorul dvs., mulțumesc!

    • Ar trebui să contactați suportul temei dvs. pentru a vă asigura că nu există un conflict de stiluri, altfel, ați putea încerca să dezactivați plugin-urile pentru a vedea dacă este și un conflict de plugin-uri.

      Admin

  15. Salut, doresc să alin scurtcoduri unul lângă altul, așa cum descrieți pentru imagini, este posibil acest lucru? Mulțumesc mult

  16. Bună ziua,
    Cum aranjați poziționarea titlului pentru blocurile de copertă?

    Aveți acea opțiune în bara dvs., dar din anumite motive, când fac clic pe blocul de copertă, nu există nicio opțiune de aliniere a textului.

    Aveți idei despre asta?

    Mulțumim pentru articolul excelent.

    • Ar trebui să verificați partea de sus a paginii, deoarece aceasta ar fi cealaltă locație a opțiunilor de aliniere, în loc să plutească peste element.

      Admin

  17. Cum pot face o imagine să fie clicabilă cu un link clicabil? Am căutat tutoriale și toate păreau bazate pe un bloc Gutenberg anterior care între timp s-a schimbat, iar tutorialele nu mai corespund blocului.

    • Ar trebui să verificați bara de instrumente de sus pentru locația curentă unde să adăugați un link către o imagine

      Admin

  18. Bună, Este posibil să scriu o legendă pentru o imagine chiar sub imagine atunci când folosesc blocul „Media și text”?

    • Ar depinde de tema ta specifică pentru stilizare, dar ar trebui să poți

      Admin

  19. Există o problemă existentă de incompatibilitate între Gutenberg și teme. Aveți o listă de teme compatibile cu Gutenberg (și care permit funcționalitatea completă a Gutenberg)?
    Mulțumiri și salutări,
    Pete.

  20. Folosesc wordpress de ani de zile, dar am fost cam absentă în ultima vreme. Gutenberg este o provocare. Urmez aceste instrucțiuni, dar pur și simplu nu pot alinia imaginile într-un bloc imagine/text. Când merg la previzualizare, imaginea este aliniată extrem în stânga paginii, fără niciun spațiu. Există soluții de oferit?
    Mersi!!

  21. Dar nu puteți lega imagini într-o galerie? Asta face funcția de galerie mai puțin atractivă

    • If each image needs its own link then setting up columns would likely be what you’re looking to do :)

      Admin

  22. What is the best way to add multiple images at once, I can’t seem to add more than one at the time :(

    • Dacă doriți să adăugați mai multe imagini în aceeași zonă, ar trebui să aruncați o privire la blocul galerie pentru a adăuga mai multe imagini într-o singură secțiune.

      Admin

  23. Cum să adăugați o imagine direct în „Editorul de cod”, fără a trece prin „Editorul vizual”?

    • Ați putea dezactiva editorul vizual sub Utilizatori>Profilul dvs., dar acest lucru v-ar împiedica să utilizați editorul vizual pentru alte secțiuni.

      Admin

  24. Centrez toate imaginile mele corect în editor, dar toate apar aliniate la stânga în previzualizare și în postările live, indiferent de ce fac. Știți ce ar putea cauza acest lucru? Mă înnebunește!

    • Tema dvs. ar putea suprascrie stilurile pe care le setați. Dacă contactați suportul temei dvs., ar trebui să vă poată ajuta.

      Admin

  25. Aș dori să am o imagine lângă un fișier (pdf) – totul pe aceeași linie. Pot face asta într-un singur bloc sau ar trebui să creez două? Mulțumesc!

    • Ați dori să adăugați blocul de coloane pentru a împărți conținutul și a vă permite să afișați conținutul în acest fel.

      Admin

  26. Îmi creez legende pentru imagini și descărcări care apar în fișierele mele. Nu știu unde să merg odată ce am imaginea în fișierele mele.

    • Dacă încercați să adăugați imaginea la o postare sau pagină, ați adăuga în mod normal un bloc de imagini și apoi ați selecta fișierul pe care doriți să îl utilizați în bloc.

      Admin

  27. Deci, cum faci acum „fără aliniere”, unde imaginea este în stânga și nu are text care să o înconjoare? Acest lucru era ușor cu opțiunea de fără aliniere, care acum a dispărut. Vă rog să o readuceți! Îmi iau foc la cap încercând să înțeleg cum să pun imaginea mea în stânga (nu centrată) și fără text lângă ea, dar textul continuă să o înconjoare automat!

    • Pentru ceea ce pare că doriți, dacă nu setați în mod specific alinierea pentru o imagine, imaginea ar trebui să se seteze singură în acel mod.

      Admin

      • Doar o scurtă revenire la acest subiect, deoarece mă deranja și pe mine. Există un răspuns simplu, dar nu este chiar evident, deoarece căutam o setare – pur și simplu apăsați din nou pe butonul de aliniere selectat pentru a dezactiva alinierea și a reveni la setarea implicită, fără aliniere.

  28. Postare grozavă, foarte utilă. Am făcut upgrade la WordPress 5.1, dar acum am probleme cu legarea imaginii la URL. Mă puteți ajuta?

    • Dacă utilizați editorul de blocuri, în setările blocului de imagini ar trebui să existe o secțiune Setări link pentru a seta unde se leagă o imagine.

      Admin

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.