Cum să utilizați editorul de blocuri WordPress (Tutorial Gutenberg)

Crearea de conținut frumos în WordPress nu trebuie să fie copleșitoare.

Editorul de blocuri (Gutenberg) a fost conceput special pentru a face crearea paginilor și a postărilor la fel de simplă ca glisarea și plasarea blocurilor. Nu sunt necesare abilități tehnice.

Gândește-te la asta ca la construirea cu piese Lego digitale. Fiecare bucată de conținut – fie că este vorba de text, imagini sau butoane – devine un bloc pe care îl poți muta și personaliza cu ușurință.

Îl folosim de ani de zile. Acest lucru ne-a ajutat să ghidăm mii de utilizatori WPBeginner în stăpânirea acestui sistem.

În acest tutorial, vă vom arăta exact cum funcționează editorul de blocuri WordPress.

Veți învăța tehnici simple care fac crearea de conținut mai rapidă. În plus, veți descoperi funcții care oferă site-ului dvs. un aspect finisat, fără nicio cunoaștere a codării.

Care este diferența dintre editorul de blocuri (Gutenberg) și editorul clasic?

Cea mai mare diferență constă în modul în care creați conținut. Editorul clasic era un simplu scriitor de text, în timp ce Editorul de blocuri este un constructor modern de pagini.

Iată o comparație rapidă a diferențelor cheie:

Caracteristică	Editor clasic	Editor de Blocuri (Gutenberg)
Structura conținutului	Câmp de text unic (precum MS Word)	Blocuri individuale pentru fiecare element
Opțiuni de aspect	Limitat (necesită pluginuri pentru coloane)	Glisare și plasare de coloane, grupuri și rânduri
Gestionarea media	Aliniere de bază (stânga, dreapta, centru)	Imagini pe lățime completă, galerii și blocuri de copertă
Responsivitate mobilă	Adesea necesită cod CSS personalizat	Blocurile se aliniază automat pe mobil
Shortcode-uri	Lipite direct în text	Bloc Shortcode dedicat pentru cod mai curat

Editorul de blocuri vă oferă mai mult control asupra aspectului conținutului dvs. Puteți construi layout-uri complexe care erau pur și simplu imposibile cu editorul vechi.

Cum este editorul de blocuri WordPress mai bun decât editorul clasic?

Editorul de blocuri WordPress oferă o modalitate mai rapidă și mai vizuală de a crea conținut. Elimină necesitatea multor pluginuri cu scop unic care obișnuiau să încetinească site-urile web.

Iată beneficiile dovedite ale trecerii la Editorul de blocuri:

• Bogăția media: Include opțiuni media puternice precum blocul Cover (pentru imagini de antet) și blocul Media & Text, care anterior erau imposibil de realizat fără codare personalizată.
• Reduce bloat-ul de pluginuri: Nu mai aveți nevoie de pluginuri separate pentru tabele, butoane sau coloane. Acestea sunt acum blocuri de bază integrate.
• Adaptabil pe mobil implicit: În editorul clasic, machetele complexe se defectează adesea pe telefoane. Coloanele de blocuri se aliniază automat vertical pe dispozitivele mobile, asigurând o experiență fluidă pentru vizitatori.
• Editare vizuală: Puteți vedea exact cum arată conținutul dvs. în timp ce editați. Nu este nevoie să comutați înainte și înapoi între editor și butonul „Previzualizare”.
• Pregătire pentru viitor: Editorul de blocuri este necesar pentru funcționalități moderne WordPress precum Editarea Completă a Site-ului (FSE) și Teme de Blocuri. Editorul clasic nu poate accesa aceste noi instrumente de design.

Iată ce vom acoperi în acest tutorial Gutenberg:

Gata? Să începem.

Utilizarea Gutenberg – Editorul de blocuri WordPress

Editorul de blocuri este conceput pentru a fi intuitiv și flexibil. Deși arată diferit față de vechiul editor WordPress, face în continuare toate lucrurile pe care le puteți face în editorul clasic.

Să începem prin a acoperi lucrurile de bază pe care le făceai în editorul clasic și cum se fac acestea în editorul de blocuri.

Crearea unei noi postări de blog sau pagini folosind editorul de blocuri

Vei începe să creezi o nouă postare de blog sau o pagină așa cum ai face-o în mod normal. Pur și simplu apasă pe meniul Postări » Adaugă Postare Nouă din administratorul tău WordPress.

Dacă creați o pagină, mergeți în schimb la meniul Pagini » Adăugare Nouă.

Aceasta va lansa editorul de blocuri.

Cum să adaugi un bloc în editorul de blocuri

Primul bloc al fiecărei postări sau pagini este titlul.

Puteți folosi mouse-ul pentru a trece sub titlu sau apăsați tasta Tab de pe tastatură pentru a muta cursorul în jos și a începe să scrieți.

În mod implicit, următorul bloc este un bloc de Paragraf. Acest lucru permite utilizatorilor să înceapă să scrie imediat.

Cu toate acestea, dacă doriți să adăugați ceva diferit, atunci puteți face clic pe butonul de adăugare bloc nou [+] din colțul din stânga sus al editorului, sub un bloc existent sau în partea dreaptă a unui bloc.

Apăsarea butonului va afișa meniul de adăugare bloc cu o bară de căutare în partea de sus și blocuri utilizate frecvent dedesubt.

Puteți face clic pe file pentru a naviga prin categoriile de blocuri sau puteți introduce un cuvânt cheie pentru a căuta rapid un bloc specific.

Dacă nu doriți să folosiți mouse-ul pentru a face clic pe buton, puteți folosi și o comandă rapidă de la tastatură.

Începeți prin a tasta / pentru a căuta un bloc, apoi inserați-l apăsând tasta Enter de pe tastatură.

Lucrul cu blocuri în noul editor

Fiecare bloc are o bară de instrumente care apare deasupra sa. Butoanele din bara de instrumente se modifică în funcție de blocul pe care îl editați.

De exemplu, în captura de ecran de mai jos, lucrăm la un bloc de Paragraf care afișează butoane de formatare de bază, cum ar fi alinierea textului, bold, italic, inserare link și mai multe opțiuni disponibile sub meniul cu trei puncte.

Pe lângă bara de instrumente, fiecare bloc poate avea propriile setări de bloc, care apar în coloana din dreapta a ecranului de editare.

Aceste setări variază în funcție de blocul pe care îl editați. De exemplu, blocul Paragraf vă permite să editați culoarea textului, a fundalului și a linkului, precum și tipografia.

Puteți muta blocurile în sus și în jos și le puteți rearanja.

Dacă doriți să faceți acest lucru, pur și simplu faceți clic pentru a trage sau plasa sau faceți clic pe butoanele sus și jos din bara de instrumente a blocului.

Legat de: Consultați ghidul nostru despre cum să eliminați un bloc în WordPress.

Organizarea blocurilor în grupuri și coloane

Editorul de blocuri vine cu instrumente utile pentru a vă gestiona și organiza machetele.

Puteți selecta mai multe blocuri făcând clic pe ele în timp ce apăsați tasta Shift de pe tastatură.

După aceea, continuați și faceți clic pe butonul de tip bloc din bara de instrumente pentru a transforma blocurile selectate în Grupuri sau Coloane.

Puteți apoi aplica stiluri întregului bloc Grup, cum ar fi schimbarea alinierii sau a spațierii.

Editorul de blocuri vă permite, de asemenea, să adăugați un bloc Gol sau un bloc Coloane.

După aceea, le puteți umple cu alte blocuri.

Puteți adăuga orice tip de bloc în fiecare coloană, după cum este necesar.

Acest lucru vă permite să creați layout-uri frumoase pentru diferite cazuri de utilizare.

Salvarea și reutilizarea conținutului cu modele sincronizate (Blocuri reutilizabile)

Una dintre cele mai puternice caracteristici ale editorului de blocuri este capacitatea de a salva și reutiliza conținutul pe întregul site. Acest lucru se face utilizând Modele Sincronizate (anterior cunoscute sub denumirea de Blocuri Reutilizabile).

Un Model Sincronizat este un bloc sau un grup de blocuri pe care îl puteți utiliza pe mai multe postări și pagini.

Partea cea mai bună este că, atunci când editați modelul, acesta se actualizează automat oriunde l-ați utilizat. Acest lucru este perfect pentru conținutul care trebuie să rămână consecvent, cum ar fi o casetă de apel la acțiune sau o divulgare de afiliere.

Pentru a crea unul, pur și simplu selectați blocul sau blocurile pe care doriți să le salvați. Apoi, faceți clic pe pictograma meniului cu trei puncte din bara de instrumente a blocului și alegeți opțiunea „Creare model”.

Va apărea o fereastră pop-up. Aici, puteți da un nume modelului dvs. și îl puteți atribui unei categorii pentru a menține lucrurile organizate.

Cel mai important, trebuie să vă asigurați că opțiunea „Sincronizat” este activată. Aceasta este cea care face ca modelul să se actualizeze peste tot odată.

După ce faceți clic pe „Creare”, noul dvs. Model sincronizat va fi salvat.

Pentru a-l folosi într-o altă postare sau pagină, pur și simplu faceți clic pe butonul de inserare bloc (+) și căutați-l în fila „Modele” sau pur și simplu căutați-l după nume.

Modelele facilitează proprietarii de site-uri să adauge elemente utilizate frecvent în layout-urile lor, cum ar fi apeluri la acțiune, butoane de rețele sociale, bannere și multe altele.

Tema sau pluginurile dvs. WordPress pot veni chiar cu propriile modele, sau puteți găsi modele create de alții în biblioteca Modele de blocuri WordPress.

Dacă aveți nevoie de mai mult ajutor, avem un ghid separat pentru începători despre cum să găsiți și să utilizați modele de blocuri WordPress.

Opțiuni de publicare și gestionare în editorul de blocuri Gutenberg

Fiecare postare WordPress conține o mulțime de metadate. Aceasta include informații precum data publicării, categoriile și etichetele, imaginile de prezentare și multe altele.

Toate aceste opțiuni sunt plasate ordonat în coloana din dreapta a ecranului editorului.

Opțiuni de plugin în Gutenberg

Pluginurile WordPress pot profita de API-ul editorului de blocuri pentru a-și integra setările în ecranul de editare.

Unele pluginuri populare vin cu propriile blocuri.

De exemplu, WPForms, cel mai bun plugin de formulare de contact WordPress, vă permite să adăugați formulare la conținutul dvs. folosind un bloc.

Alte pluginuri WordPress pot adăuga, de asemenea, setările lor pe ecranul editorului de blocuri.

De exemplu, iată cum All in One SEO for WordPress vă permite să editați setările SEO în partea de jos a editorului de blocuri:

Similar, dacă aveți un magazin online folosind WooCommerce, veți observa că și acesta are propriile sale blocuri.

Aceste blocuri vă permit să adăugați produsele dvs. la oricare dintre postările și paginile dvs. WordPress.

Adăugarea unor blocuri comune în editorul de blocuri

Editorul de blocuri poate face tot ce făcea editorul clasic mai vechi.

Cu toate acestea, veți face lucrurile mai rapid și mai elegant decât înainte. În plus, poate face mult mai multe, cum ar fi să vă permită să vă stilizați conținutul cu o mulțime de opțiuni fără cod.

Iată câteva dintre blocurile comune pe care le puteți utiliza.

1. Adăugarea unei imagini în editorul de blocuri WordPress

Există un bloc Imagine gata de utilizare în editorul de blocuri WordPress. Pur și simplu adăugați blocul și apoi încărcați un fișier imagine sau selectați-l din biblioteca media.

De asemenea, puteți trage și plasa imagini de pe computer, iar editorul va crea automat un bloc Imagine.

Odată ce ați adăugat o imagine, veți putea vedea setările blocului, unde puteți adăuga metadate pentru imagine, cum ar fi textul alternativ, dimensiunea rezoluției imaginii și adăugarea unui link către imagine.

Pentru mai multe informații, consultați tutorialul nostru despre cum să adăugați imagini în WordPress.

2. Adăugarea unui link în editorul de blocuri

Editorul de blocuri vine cu mai multe blocuri unde puteți adăuga text. Cel mai frecvent utilizat este blocul Paragraf, care are un buton de inserare link în bara de instrumente.

Toate celelalte blocuri de text utilizate frecvent au, de asemenea, un buton de link în bara de instrumente.

Puteți insera un link și folosind scurtătura de la tastatură, care este Command + K pentru Mac și CTRL + K pe computerele cu Windows.

3. Adăugarea unei galerii de imagini în Gutenberg

Blocul Galerie funcționează ca blocul imagine. Îl adăugați și apoi încărcați sau selectați fișiere imagine.

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

4. Adăugarea de Shortcode-uri în Postările WordPress Folosind Gutenberg

Toate shortcode-urile dvs. vor funcționa exact așa cum erau obișnuite. Cu toate acestea, recomandăm utilizarea blocului dedicat „Shortcode”.

Deși, tehnic, puteți lipi shortcode-uri într-un bloc de Paragraf, blocul Shortcode previne problemele de formatare și asigură că codul dvs. este redat corect.

Explorarea altor blocuri de conținut în editorul de blocuri

Editorul Gutenberg a promis să rezolve unele probleme de utilizare de lungă durată în WordPress prin introducerea de noi blocuri.

Următoarele sunt câteva dintre preferatele pe care credem că utilizatorii le vor găsi extrem de utile.

1. Adăugarea unei imagini lângă text în WordPress

Mulți dintre utilizatorii noștri nu puteau plasa o imagine lângă text folosind vechiul editor. Acum puteți face acest lucru cu blocul Media & Text.

Acest bloc simplu vine cu două blocuri plasate unul lângă altul, permițându-vă să adăugați cu ușurință o imagine cu text alături.

2. Adăugarea unui buton în postările și paginile WordPress

Un alt inconvenient al vechiului editor era adăugarea unui buton la postările sau paginile blogului tău. Fie trebuia să folosești un plugin care crea un shortcode pentru buton, fie să treci în modul HTML și să scrii cod.

Din fericire, Gutenberg are un bloc Buton care vă permite să adăugați rapid un buton la orice postare sau pagină.

Puteți adăuga un link pentru butonul dvs., schimba culorile și multe altele. Pentru detalii, consultați articolul nostru despre cum să adăugați ușor butoane în WordPress.

3. Adăugarea de imagini de copertă frumoase în postările de blog și paginile de destinație

O altă caracteristică interesantă pe care ați putea dori să o încercați este blocul Cover, care vă permite să adăugați imagini de copertă sau coperți cu fundal colorat la postările și paginile dvs.

O imagine de copertă este o imagine mai lată, adesea folosită pentru o nouă secțiune pe o pagină sau la începutul unei povești. Arată frumos și îți permite să creezi layout-uri de conținut captivante.

Pur și simplu adăugați un bloc Copertă și apoi încărcați imaginea pe care doriți să o utilizați. Puteți alege o culoare de suprapunere pentru copertă sau o puteți face o imagine de fundal fixă pentru a crea un efect parallax atunci când utilizatorii derulează în jos pe pagină.

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

4. Crearea tabelelor în interiorul articolelor

Editorul clasic nu avea un buton pentru adăugarea tabelelor în postările dvs. WordPress. Trebuia să folosiți un plugin sau să creați un tabel scriind CSS și HTML personalizat.

Acum, editorul de blocuri are un bloc Tabel implicit, făcând adăugarea tabelelor la postările și paginile dvs. extrem de ușoară. Pur și simplu adăugați blocul și selectați numărul de coloane și rânduri pe care doriți să le inserați.

Acum puteți începe să adăugați date la rândurile tabelului. Puteți oricând să adăugați mai multe rânduri și coloane, dacă este necesar, și sunt disponibile două opțiuni de stil de bază.

5. Crearea de Conținut pe Mai Multe Coloane

Crearea de conținut pe mai multe coloane a fost un punct major de dificultate în trecut. Din fericire, editorul de blocuri vă permite să adăugați cu ușurință un bloc Coloane.

Acest bloc este destul de flexibil. Puteți adăuga până la 6 coloane într-un rând și chiar puteți utiliza alte blocuri în interiorul fiecărei coloane.

Cel mai bun lucru este că aceste coloane sunt responsive pe mobil. WordPress le stivuiește automat vertical pe ecranele mai mici, astfel încât site-ul dvs. arată grozav pe toate dispozitivele, fără codare suplimentară.

Sfaturi bonus pentru a folosi Gutenberg ca un profesionist

Privind editorul de blocuri, s-ar putea să vă întrebați dacă veți petrece mai mult timp adăugând și ajustând blocuri decât creând conținut efectiv.

Ei bine, editorul de blocuri este incredibil de rapid, iar chiar și o utilizare foarte de bază timp de câteva minute vă va permite să adăugați blocuri instantaneu, fără să vă gândiți.

Foarte curând, veți realiza cât de mult mai rapid va deveni fluxul dvs. de lucru cu această abordare.

Iată câteva sfaturi bonus pentru utilizatorii avansați, pentru a vă ajuta să lucrați și mai rapid cu editorul de blocuri WordPress.

1. Mută bara de instrumente a blocului în partea de sus

Ați observat, probabil, în capturile de ecran de mai sus, că o bară de instrumente apare în partea de sus a fiecărui bloc. Puteți muta această bară de instrumente în partea de sus a editorului.

Pentru a accesa opțiunea „Bara de instrumente de sus”, faceți clic pe butonul cu trei puncte din colțul din dreapta sus al ecranului.

2. Utilizați scurtături de la tastatură

Gutenberg vine cu mai multe scurtături utile care vă vor face fluxul de lucru și mai rapid și mai ușor. Prima pe care ar trebui să începeți să o folosiți imediat este /.

Pur și simplu introduceți /, începeți să tastați, iar apoi editorul vă va arăta blocurile potrivite pe care le puteți adăuga instantaneu.

Pentru mai multe scurtături, faceți clic pe meniul cu trei puncte din colțul din dreapta sus al ecranului și selectați „Scurtături tastatură”.

Aceasta va deschide o fereastră pop-up cu o listă a tuturor scurtăturilor de la tastatură pe care le puteți utiliza. Lista va avea scurtături diferite pentru utilizatorii de Windows și Mac.

3. Trageți și plasați media pentru a crea automat blocuri media

Gutenberg îți permite să tragi și să plasezi fișiere oriunde pe ecran, creând automat un bloc pentru tine.

De exemplu, puteți plasa un singur fișier imagine sau video, iar acesta va crea blocul pentru dvs. Alternativ, puteți plasa mai multe fișiere imagine pentru a crea un bloc Galerie.

4. Adăugarea de YouTube, Twitter, Vimeo și alte încorporări

Editorul de blocuri facilitează încorporarea conținutului terț în conținutul dvs. WordPress. Există blocuri pentru servicii populare precum YouTube, X (Twitter), Vimeo și Spotify.

De asemenea, puteți pur și simplu copia și lipi URL-ul de încorporare în orice moment, iar acesta va crea automat un bloc pentru dvs.

De exemplu, adăugarea unui URL de video YouTube va crea automat un bloc de încorporare YouTube și va afișa videoclipul.

Adăugarea mai multor blocuri la editorul de blocuri Gutenberg în WordPress

Editorul de blocuri din WordPress permite dezvoltatorilor să creeze propriile blocuri. Unele pluginuri excelente pentru WordPress oferă pachete de blocuri pentru noul editor.

Iată câteva dintre ele:

1. Blocuri Gutenberg Spectra WordPress

Spectra WordPress Gutenberg Blocks este o bibliotecă de blocuri cu multe blocuri avansate care vă ajută să adăugați mai multe elemente de design la conținutul dvs.

Spectra, creat de oamenii din spatele popularei teme WordPress Astra, vă ajută să creați designuri frumoase fără a scrie niciun cod.

Pentru mai multe informații, consultați recenzia noastră completă Spectra.

2. Blocuri PublishPress

PublishPress Blocks este o altă bibliotecă puternică de blocuri care vine cu blocuri suplimentare pentru a extinde editorul de blocuri Gutenberg.

Include opțiuni frumoase de aspect, glisoare, butoane, pictograme, galerii de imagini, hărți, file, mărturii, acordioane și multe altele.

3. Stackable – Blocuri Gutenberg

Stackable – Gutenberg Blocks este o colecție de blocuri Gutenberg frumos concepute pe care le puteți utiliza pe site-ul dvs. web. Include blocuri pentru container, postări, grilă de caracteristici, acordeon, casetă imagine, listă de pictograme, apel la acțiune și multe altele.

Pentru mai multe opțiuni, consultați lista noastră completă a celor mai bune pluginuri de blocuri Gutenberg pentru WordPress.

Întrebări Frecvente despre Gutenberg – Editorul de Blocuri în WordPress

De când Gutenberg a devenit editorul implicit WordPress, am primit o mulțime de întrebări despre cum să-l folosim. Iată răspunsurile la unele dintre cele mai frecvent adresate întrebări despre editorul de blocuri.

1. Ce se întâmplă cu postările și paginile mele mai vechi în editorul de blocuri? Le mai pot edita?

Editorul de blocuri nu afectează postările și paginile dvs. vechi. Le puteți edita în continuare, iar editorul de blocuri le va deschide automat într-un bloc care conține editorul clasic.

Le poți edita în editorul vechi sau poți converti articole mai vechi în blocuri și poți folosi editorul de blocuri.

2. Pot să continui să folosesc vechiul editor?

Da, puteți continua să utilizați editorul vechi. Pur și simplu instalați și activați pluginul Classic Editor.

La activare, editorul de blocuri va fi dezactivat și veți putea continua să utilizați editorul clasic.

Pluginul Classic Editor va fi suportat oficial pe termen nelimitat. Cu toate acestea, vă recomandăm cu tărie să începeți să utilizați editorul de blocuri acum pentru a vă familiariza cu modul modern de creare a conținutului în WordPress.

3. Ce fac dacă editorul de blocuri nu funcționează cu un plugin sau o temă pe care o folosesc?

Proiectul Gutenberg a fost mult timp în dezvoltare, ceea ce a oferit autorilor de plugin-uri și teme suficient timp pentru a-și testa codul pentru compatibilitate.

Cu toate acestea, există încă posibilitatea ca unele plugin-uri și teme să nu funcționeze bine cu editorul de blocuri. În acest caz, puteți instala plugin-ul Classic Editor, puteți solicita dezvoltatorului să adauge suport pentru Gutenberg sau puteți găsi un plugin sau o temă alternativă.

4. Cum pot afla mai multe despre sfaturi și trucuri Gutenberg?

WPBeginner este cel mai bun loc pentru a învăța despre editorul de blocuri în WordPress. Suntem cel mai mare site de resurse WordPress de pe internet.

Vom publica articole noi și vom actualiza resursele noastre vechi pentru a vă ajuta să stăpâniți editorul de blocuri.

Între timp, dacă aveți întrebări, nu ezitați să ne contactați lăsând un comentariu sau utilizând formularul de contact de pe site-ul nostru.

5. Întâmpinați probleme cu Gutenberg?

Dacă întâmpinați probleme cu editorul de blocuri WordPress, am creat un ghid rapid de depanare care listează toate problemele comune ale editorului de blocuri pe care utilizatorii le întâmpină și cum să le rezolve.

Tutorial video

Preferiți video? Puteți viziona tutorialul nostru de mai jos:

Abonează-te la WPBeginner

Resurse bonus

Următoarele sunt câteva resurse suplimentare care vă vor ajuta să utilizați editorul de blocuri mai eficient:

• Editorul de blocuri WordPress vs. Page Builders: Care este diferența?
• Cum să creați un bloc WordPress personalizat (Mod ușor)
• Cum să importați / exportați blocurile dvs. WordPress Gutenberg (2 pași)
• Widgeturi WordPress vs Blocuri – Care este diferența? (Explicat)
• Un ghid complet pentru începători despre editarea completă a site-ului WordPress
• Cele mai bune teme Block pentru editare completă a site-ului în WordPress
• Sfaturi pentru stăpânirea editorului de conținut WordPress

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.