Ghid pas cu pas pentru Gutenberg Builder pentru WordPress

Cred că veți fi de acord când spun: toată această activitate din Gutenberg este confuză.


În primul rând, este noul editor de blocuri greu de utilizat sau ce? Adică, nu știi unde s-au dus toate instrumentele tale preferate. Acum, probabil că ați luat mai mult timp pentru a crea o postare, nu?

Poate că adăugarea unei legături (afiliere sau altfel) te-a aruncat cu o curbă și te-ai simțit dezamăgit. Poate aveți probleme cu adăugarea unei imagini lângă textul dvs..

Poate că ați încercat să adăugați mai multe coloane și lucrurile nu au decurs așa cum era de așteptat. Dacă nu este cazul, poate nu puteți adăuga fișierele dvs. PDF cu ușurință, sau vedeți în mod repetat mesajul „Actualizarea eșuată”.

Ei bine, nu vă mai faceți griji; Am fost în poziția dvs. exactă nu cu mult timp în urmă, dar acum găsesc Gutenberg un fior de folosit. Există o curbă de învățare, da, dar până la sfârșitul postării de astăzi, veți gândi la Gutenberg diferit.

Ce este editorul Gutenberg?

editor wordpress gutenberg

Te uiți la Gutenberg, editorul de blocuri WordPress implicit

Dacă utilizați WordPress 5.0 și versiuni ulterioare, trebuie să fiți dat peste noul și strălucitor editor WordPress, cunoscut sub numele de Gutenberg.

La fel ca mulți alți utilizatori, doriți să utilizați editorul revoluționar, dar nu ezitați, deoarece Gutenberg e complicat.

Sau poate când l-ai cunoscut pentru prima dată pe Gutenberg, diverse lucruri nu au funcționat. La urma urmei, dezvoltatorii au fost și continuă să facă compatibile temele și pluginurile cu editorul de blocuri.

Deci, ați revenit rapid la Editor clasic, care, BTW, este în regulă cu noi. Rețineți că WordPress nu va susține Editorul clasic după 2022. În plus, veți lipsi toate bunătățile suplimentare oferite de Gutenberg.

În ceea ce privește funcționalitatea, Classic Editor și Gutenberg fac același lucru; știți, ambele instrumente vă ajută să creați conținut fără codare.

Cu toate acestea, suntem atât de obișnuiți cu vechiul editor WYSIWYG, încât considerăm că se adaptează la noul utilizator Gutenberg un pic extraterestru, dacă nu chiar confuz. Cel puțin așa cred eu.

Dar, ce este exact Gutenberg?

Gutenberg este noul editor WordPress implicit. Nu este diferit de editorul vizual / text tradițional; Gutenberg folosește blocuri de conținut la fel ca mulți construitori de pagini din zilele noastre.

Se livrează cu funcții mai intuitive decât Editorul clasic, ceea ce înseamnă că puteți crea conținut bogat în media. Acum, puteți bifa rapid machete extraordinare, indiferent dacă lucrați cu postări sau pagini WordPress.

Și cu câteva suplimente, Gutenberg poate concura în mod favorabil cu constructorii de pagini WordPress consacrați precum Brizy, Elementor și Divi.

Singurul dezavantaj este că constructorii de pagini oferă adesea mai multe funcții, deoarece sunt în primul rând construitori de pagini! În același timp, Gutenberg este încă destul de tânăr și vă puteți aștepta doar ca editorul de blocuri să crească în pasuri mari.

În postarea de astăzi, vom avea un moment interesant pentru a crea o postare WordPress cu editorul Gutenberg. Am scopul de a acoperi toate detaliile și caracteristicile minuscule, astfel încât să puteți utiliza Gutenberg pentru a crea conținut precum profesioniștii.

Sunteți gata? Dacă da, să creăm acea postare WordPress.

Cum să creezi o postare WordPress cu Gutenberg

Dacă rulați un site Web WordPress, probabil creați mai multe postări decât pagini. În secțiunea următoare, creăm de la zero o postare WordPress în Gutenberg. Sper că te vei distra la fel de mult ca și când am testat Gutenberg.

În afara acestui drum, navigați la Mesaje> Adăugare nou după cum subliniem în imaginea de mai jos.

crearea unui nou post în gutenberg

Dacă faceți acest lucru, vă duceți direct la editorul Gutenberg prezentat mai jos.

editor wordpress gutenberg

Destul de îngrijit, nu? Acum, haideți să împletim mânecile respective și să trecem la treabă.

Adăugarea unui titlu

adăugând un nou titlu în gutenberg

Nu puteți scrie o postare fără un titlu solid. Lucrul bun este că Gutenberg face incredibil de ușor să adăugați un titlu.

Primul bloc pe care îl vedeți este Titlu în partea de sus a documentului, în detaliu în imaginea de mai sus. Pentru a crea un titlu pentru postarea dvs., tastați în interiorul blocului. Simplu ca A, B, C.

Trebuie să editați legătura continuă? Puteți face asta cu ușurință în Titlu blocând făcând clic pe butonul Editați | × buton așa cum se arată mai jos.

editați post permalink în gutenberg

După adăugarea titlului, apăsați pe INTRODUCE pentru a începe o nouă linie. Oh da, Gutenberg păstrează navigația nativă pe care ați iubit-o în editorul clasic WordPress.

Adăugarea unui nou paragraf

nou bloc de paragrafe din Gutenberg

Lovind INTRODUCE cheia creează o nouă Paragraf bloc, după cum se arată mai sus. Înainte de a tasta orice text, blocul vă prezintă câteva opțiuni. Consultați imaginea numerotată mai jos pentru mai multe detalii.

noi opțiuni de blocare a paragrafelor gutenberg

Note. Poti:

  1. Convertiți noul bloc de paragrafe în orice alt bloc, de exemplu, imagine, titlu, copertă, galerie, WooCommerce, formular etc..
  2. Utilizați comanda rapidă pentru a schimba blocul de paragrafe într-un bloc de imagine
  3. Modificați blocul de paragrafe într-un bloc de antet, adică H2, H3 și H4
  4. Transformă blocul de paragrafe într-un bloc de imagine de copertă

În scop ilustrativ, voi rezerva primul paragraf pentru introducerea postului. După ce adăugați text, apare o bară de instrumente de formatare, așa cum se arată mai jos.

bara de instrumente de formatare a paragrafelor Gutenberg

Datorită barei de instrumente de formatare, puteți:

  • Acoperiți paragraful într-un verset, citat, titlu, listă, cod și text preformatat
  • Îndrăzneţ, sublinia, strikethrough, și subliniere conţinut
  • Aliniați textul la stânga, dreapta, centru și justificați
  • Adăugați un link care se poate deschide și într-o nouă filă
  • Introduceți o imagine inline (da, există!)
  • Ascundeți setările blocului
  • Duplică blocul
  • Introduceți un bloc înainte sau după blocul curent (în cazul nostru, acesta este primul paragraf, așa că nu au fost adăugarea de nimic înainte, doar după.) Puteți adăuga un bloc de imagine de copertă înainte de primul paragraf, dacă doriți, deoarece arată așa bun
  • Editați blocul ca HTML
  • Adăugați blocul curent la blocurile reutilizabile, astfel încât să puteți utiliza în alte postări
  • Scoateți blocul în întregime

Puteți personaliza în continuare blocul de paragrafe cu opțiunile disponibile în bloc fila găsită în meniul barei laterale așa cum se arată mai jos.

opțiuni ale barei laterale gutenberg pentru blocul de paragrafe

Câteva note despre imaginea de mai sus:

  1. Alege bloc fila aici pentru a vizualiza toate opțiunile și setările blocului
  2. Selectați dimensiunea fontului și activați Drop Cap aici
  3. Adăugați culoare de fundal la paragraful dvs. Am setat-o ​​pe albastru în scop ilustrativ. De asemenea, puteți personaliza culoarea textului. În ambele cazuri, puteți adăuga culori personalizate nelimitate
  4. Puteți adăuga aici o clasă CSS personalizată, ceea ce înseamnă că puteți adăuga stiluri CSS suplimentare la blocul dvs.
  5. Fundal albastru și Drop Cap deja aplicate în editorul Gutenberg

Fila Document în bara laterală

Există o altă filă în meniul barei laterale; Document fila așa cum se arată mai jos.

fila documentului bara laterală bloc

Aici, notele pentru imaginea de mai sus:

  1. Faceți clic aici pentru a comuta la Document fila
  2. Aici puteți programa o postare, setați vizibilitatea pe oricare Privat sau Public, stabiliți o postare la Revizuire în așteptare starea, alege formatul postării și creează o postare lipicioasă
  3. Secțiunea vă permite să editați legătura permanentă
  4. Puteți selecta sau crea noi categorii aici
  5. Adăugați etichete la postarea dvs.
  6. Setați imaginea prezentată
  7. Creați un extras manual
  8. Permiteți comentarii, pingbacks și trackbacks

După cum puteți vedea, aveți o mulțime de opțiuni pentru a proiecta un bloc de paragrafe (și întregul post) după cum doriți. Apropo, blocuri diferite vin cu setări diferite, după cum vom învăța într-un minut.

După primul paragraf, apăsați pe INTRODUCE tastați din nou pentru a crea o nouă linie (sau bloc de paragrafe). Acum, să adăugăm o imagine sub primul paragraf.

Adăugarea de imagini în Gutenberg

adăugând o nouă imagine în gutenberg

Ei spun că o imagine spune o mie de cuvinte, iar o postare pe blog fără imagini este, bine, drab. Pentru a adăuga o imagine în postarea dvs. WordPress folosind Gutenberg, aveți câteva opțiuni.

Când lovești INTRODUCE key acum câteva momente, ați declanșat un nou bloc de paragrafe. Văzând că Gutenberg este intuitiv, puteți adăuga o imagine făcând clic pe pictogramele plus (+), imagine sau copertă așa cum evidențiam în imaginea de mai jos.

adăugarea unei noi imagini în editorul gutenberg

Câteva note:

  1. Puteți adăuga o imagine prin pictogramele plus (+)
  2. Aici, puteți adăuga ușor o imagine
  3. Această opțiune vă permite să adăugați o acoperi imagine (de obicei, sunt mai mari decât alte fotografii. În plus, puteți adăuga text pe imagini de copertă, BTW)

Continuați și faceți clic pe oricare dintre pictogramele plus (+). Apoi, faceți clic pe butonul Imagine fila, așa cum se arată mai jos.

adăugarea de imagini în gutenberg

Făcând clic pe butonul Imagine fila încarcă Imagine bloc afișat în imaginea de mai jos.

bloc de imagini gutenberg

 Imagine bloc vă permite să încărcați o imagine sau să adăugați una de pe o adresă URL sau din media media. În acest proces, puteți adăuga text alt (important pentru SEO), legendă și descriere prin setările ecranului media sau bloc bara laterală așa cum se arată în imaginile următoare.

Setările obișnuite media …

Setări media wordpress

…si Imagine setări bloc.

setările blocului de imagini gutenberg

Înveți ceva aici astăzi? Așa sper. Să mergem mai departe.

După adăugarea imaginii, Gutenberg adaugă un nou bloc de paragrafe chiar sub ea. Puteți adăuga orice doriți, dar în scop ilustrativ, am adăugat ceva text și apoi un buton sub acesta.

Cum să adăugați fișiere descărcabile, de ex. PDF, imagini, videoclipuri etc.

Gutenberg face incredibil de ușor să adăugați fișiere descărcabile în postarea sau pagina dvs. WordPress.

Într-o nouă Paragraf blocați, faceți clic pe pictograma plus (+), navigați la Blocuri comune și a lovit Fişier fila după cum subliniem mai jos.

adăugând fișiere descărcabile în gutenberg

Procedând astfel, lansează următorul bloc:

bloc de fișiere gutenberg

De la Fişier blocați, puteți încărca un fișier nou sau adăugați unul din biblioteca media. După adăugarea fișierului dvs., Gutenberg adaugă un drăguț Descarca buton automat așa cum se vede în imaginea de mai jos.

adăugând fișier în gutenberg

Vă puteți juca cu opțiunile. De exemplu, puteți edita / șterge „Lista de verificare gratuită a PDF Gutenberg“Titlu, precum și Descarca buton. Puteți adăuga o clasă CSS la bloc și stilați-o așa cum doriți.

Adăugarea unui citat în Gutenberg

În continuare, adăugăm un preț pentru că sunt fermecătoare, captivante și vă ajută să conduceți punctul spre casă. Într-o nouă linie, faceți clic pe semnul plus (+), navigați la Blocuri comune și a lovit Citat fila așa cum se arată mai jos.

adăugând citate în Gutenberg

Făcând acest lucru se adaugă Citat blocați în postarea dvs., după cum am evidențiat în ecranul de mai jos.

setările blocului de citate din Gutenberg

Observați setările blocului de ofertă din bara laterală de mai sus?

Pentru a adăuga oferta dvs., tastați în interiorul blocului. Iată rezultatul meu.

citat gutenberg

Pare incredibil, nu?

Adăugarea încărcărilor media în Gutenberg

Gutenberg vine cu mai multe blocuri pentru încorporarea videoclipurilor și a altor media de la 30+ site-uri precum YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare ș.a..

Pentru a încorpora conținut, faceți clic pe pictograma plus (+), navigați la încorporări, și alegeți site-ul. De exemplu, am dorit YouTube, așa cum se arată mai jos.

gutenberg youtube embed

Apoi, copiați-inserați URL-ul video YouTube și faceți clic pe butonul Încorporare butonul așa cum se arată în imaginea de mai jos.

gutenberg bloc de încorporare YouTube

De îndată ce ai lovit Încorporare buton, Gutenberg acoperă linkul într-un videoclip în mod automat, după cum am evidențiat mai jos.

video YouTube încorporat în gutenberg

Navigare netedă până la capăt. Acum, să adăugăm un buton autonom care este perfect pentru a crea un apel la acțiune (CTA).

Cum să adăugați un buton în Gutenberg

În acest moment nu ar trebui să-ți fie greu să adaugi blocuri. Doar faceți clic pe plus (+) și alegeți blocul. Nu poate fi mai ușor decât atât.

Deci, cum adăugăm un buton?

Într-o nouă linie (sau bloc), faceți clic pe pictograma plus (+), navigați la Elemente de dispunere și faceți clic pe butonul Buton fila așa cum se arată mai jos.

adăugarea de butoane în editorul gutenberg

Făcând acest lucru te conduce la Buton blocați așa cum detaliem mai jos.

adăugarea de butoane în editorul gutenberg

După cum puteți vedea din imaginea de mai sus, puteți edita textul butonului și adăugați un link. În plus, puteți personaliza butonul prin meniul din bara laterală din dreapta ecranului.

După câteva clicuri, iată ce am primit.

exemplu de buton gutenberg

Apropo, dacă folosiți combinații de culori greu de citit pe butoanele dvs., Gutenberg vă va anunța prompt. Ce drăguț?

Cum se adaugă coloane în Gutenberg

Cu un buton frumos în loc, adăugăm câteva coloane. Voi adăuga două coloane, așa că urmați cu atenție.

Iată ce să faci. Faceți clic pe pictograma plus (+), navigați la Elemente de dispunere și faceți clic pe butonul coloane fila așa cum se vede în imaginea de mai jos.

editor coloană gutenberg tab

Gutenberg adaugă în mod implicit două coloane. Vedeți imaginea de mai jos și amintiți-vă, am adăugat deja conținut în coloane.

coloane gutenberg în editorul de wordpress

Ceea ce mă primește:

coloane gutenberg frontend

Nu este rău pentru câteva secunde de muncă. Dar poate nu doriți să creați coloane. Poate doriți să afișați o imagine lângă text.

Există un bloc pentru asta? Da este!

Cum să adăugați o imagine lângă text în Gutenberg

Căutați să adăugați o imagine lângă text? Dacă da, vă va plăcea următoarea secțiune.

Ca de obicei, faceți clic pe pictograma plus (+), navigați la Elemente de dispunere și faceți clic pe Media și text așa cum se arată mai jos.

bloc media și text gutenberg

Ar trebui să vezi Media și text bloc, după cum se arată mai jos.

mass-media și bloc de text din Gutenberg

În continuare, încărcați imaginea / video / media sau adăugați una din biblioteca media. După aceea, adăugați-vă textul lângă suport, așa cum se arată în imaginea de mai jos.

Am jucat în jur cu Media și text bloc, și am venit cu următoarele. Minte-ți; Am reușit să strâng și un buton acolo ��

mass-media și bloc de text în plină acțiune

Oh, acesta este fondul! Permiteți-mi să vă arăt front-end-ul. Aici:

bloc de text media din Gutenberg

Arată foarte profesionist, nu? Cu siguranță vă puteți imagina cât puteți obține cu editorul Gutenberg.

Blocurile Gutenberg de la terți

Dezvoltatorii WordPress sunt dornici să facă compatibile temele și pluginurile cu editorul Gutenberg. Câteva exemple includ WooCommerce, Jetpack și Yoast SEO.

De exemplu, puteți adăuga blocuri WooCommerce în postarea dvs. WordPress. În primul rând, trebuie să instalați și să activați WooCommerce.

Apoi, într-o nouă linie, faceți clic pe pictograma plus (+), navigați la WooCommerce și alegeți orice bloc doriți, așa cum se arată mai jos.

woocommerce blocuri gutenberg

Stii ce inseamna? Înseamnă că puteți crea mesaje și pagini bogate în media și pagini excelente în câteva minute.

Alte blocuri notabile

Suntem deja la peste 2.000 de cuvinte și, dacă continuăm acest lucru, vom ajunge să scriem un eBook întreg. Rugăciunea mea este că acum puteți folosi Gutenberg fără sughițe.

Așa că, din afară, iată o listă a celorlalte blocuri disponibile.

  • Widget-uri – Puteți adăuga conținut din widget-urile dvs. în postările de pe blog
  • Scurtăturile – Puteți utiliza în continuare scurtcoduri WordPress native
  • Clasic – Un bloc minunat care îți păstrează conținutul vechi
  • Mai Mult – Blocul era anterior cunoscut sub numele de Citeste mai mult etichetă
  • Pauză de pagină, Separatoare, Distante
  • HTML personalizat, Pullquote, tabel
  • Galerie și HTML5 audio / video
  • Și multe altele în funcție de temele și pluginurile pe care le utilizați

Deoparte: Crearea unei pagini WordPress este similară cu crearea unei economii de postare pentru câteva minute diferențe, așa că nu vom face acest lucru astăzi.

Scurturi rapide de la Gutenberg și comenzi rapide de la tastatură

Gutenberg vine cu câteva accesorii și comenzi rapide de la tastatură, care o fac și mai ușoară. De exemplu, dacă tastați „/” în interiorul unui bloc de paragrafe, apare o listă de blocuri.

Puteți chiar să selectați un bloc specific tastând titlul blocului după reversarea (/), de exemplu, tastați „/ image” creează blocul de imagini printre alte blocuri legate de imagine. Vezi mai jos imaginea pentru mai multe detalii.

Comandă rapidă a retragerii gutenberg

Comenzile rapide de la tastatură: Pentru a vizualiza toate comenzile rapide, apăsați SHIFT + ALT + H în Windows și OPT + CTRL + H în Mac.

În partea de sus a documentului, puteți vedea structura documentului făcând clic pe pictograma (i), așa cum se arată mai jos.

structura documentelor gutenberg

Grozav. Extraordinar de neted.

Oh, și apropo, eroarea „Actualizare eșuată” se întâmplă de obicei din cauza unei conexiuni de internet cutremurătoare ��


Între tine și mine, Gutenberg este un editor de conținut fantastic. Cu condiția să fii dispus să înveți frânghiile; puteți culege mult din editorul WordPress de viitor.

Gutenberg este încă relativ tânăr și vă puteți aștepta să crească din punct de vedere al utilizabilității și funcționalității. Va fi o forță serioasă să ne luăm în calcul în zilele următoare. Constructorii de pagini sunt mai atenți sau vor rămâne fără afaceri of

Sperăm că ghidul nostru pas cu pas către editorul Gutenberg te-a ajutat să pui lucrurile în perspectivă. Credem că acum puteți utiliza editorul de blocuri pentru a crea conținut ca un profesionist.

Vă rugăm să vă împărtășiți preocupările, gândurile și întrebările din secțiunea de comentarii de mai jos.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me