Cum să utilizați editorul de blocuri WordPress

Publicat: 2020-04-12

În această postare, vă învăț cum să utilizați editorul de blocuri WordPress, care a fost inclus în actualizările WordPress din 2018 și este aici pentru a rămâne. Veți auzi că se numește și editorul Gutenberg.

De la lansarea WordPress 5.0, există o opțiune în editorul de text WordPress pentru „CONVERTIRE ÎN BLOCURI”, găsită făcând clic pe cele trei puncte verticale, ca mai jos.

Ar trebui să convertiți în blocuri?

Dacă ați folosit un editor de text WordPress terță parte, pot apărea complicații. Nu le acoper pe cele din această postare. Vă rugăm să aflați mai multe de la un profesionist despre conversie și să mergeți cu atenție.

Pentru oricine altcineva – nu- mi asum nicio responsabilitate – face întotdeauna backup unui site/blog înainte de a converti o pagină în blocuri.

Ai fost deja convertit? Sari peste aceasta sectiune.

Celor dintre voi care au folosit editorul clasic și au un aspect simplu al paginii – le pot recomanda blocuri WordPress.

Odată ce te-ai obișnuit cu editorul de blocuri WordPress, acesta este intuitiv.

Apăsarea CONVERTĂ ÎN BLOCURI nu va converti întregul site/blog în blocuri. Doar pagina sau postarea la care lucrați.

Ce se întâmplă când convertesc în blocuri?

Convertirea paginii implică fiecare titlu, paragraf, un fragment de cod și imagine în propriul bloc individual.

Te vei obișnui în curând cu asta, dacă doar faci conversie.

Blocurile vă permit să adăugați cu ușurință paragrafe, coloane, tabele, imagini, widget-uri, cele mai recente postări și categorii.

Precum și widget-uri precum cele mai recente postări, calendare, arhive de postări, categorii, pictograme sociale și fluxuri RSS.

Blocurile WordPress fac ușor să adăugați aproape orice și-ar putea dori un proprietar de site. Este chiar convenabil.

Un bloc reprezintă un articol, deci este, de asemenea, mult mai ușor să schimbați ordinea paginilor. Vom acoperi asta mai târziu.

Vizualizați site-ul WordPress într-o filă nouă

Când editez, primul lucru pe care îl fac este să deschid partea publică a site-ului într-o filă nouă de browser. Am apoi zona de administrare (back end) vizibilă într-o filă, iar zona publică (front end) vizibilă în cealaltă. Așa pot comuta între cele două.

Cel mai simplu mod de a deschide partea frontală a site-ului dvs. WordPress într-o filă nouă este;

  • În zona de administrare – plasați cursorul peste pictograma casei, din stânga sus a ecranului.
  • Din meniul derulant, dați CLIC DREAPTA pe „Vizitați site-ul”.
  • Faceți clic pe „Deschideți linkul într-o filă nouă”.

NB. Pot exista o variație de cuvinte în funcție de browserul pe care îl utilizați.

Două file de browser sunt acum deschise, ceea ce înseamnă că puteți comuta între cele două.

Continuați să editați pagina WordPress într-o singură filă, folosind zona de administrare.

În celălalt, veți vedea partea frontală a site-ului dvs. Iată cum puteți verifica fiecare modificare pe care o faceți.

Pe măsură ce faceți modificări și le salvați, puteți trece la partea din față a site-ului. Apăsați tasta F5 pentru a reîmprospăta pagina - acest lucru solicită browserului să afișeze versiunea actualizată.

Titlu și permalink WordPress h1

Să ne uităm mai întâi la titlu și permalink.

Titlul h1 este primul bloc din partea de sus a paginii. Acesta este singurul bloc care este imobil și asta din motive întemeiate.

Toate paginile și postările ar trebui să aibă un titlu h1 la început, astfel încât motoarele de căutare și oamenii să înțeleagă ce este conținut pe pagină. Este un factor SEO.

Folosește mouse-ul pentru a face clic în interiorul cartușului. Pentru a schimba un titlu, evidențiați textul titlului și începeți să scrieți. Simplu.

Câmpul de permalink se găsește în Setările documentului din partea dreaptă, vezi imaginea de mai jos. Eticheta WordPress pentru numele paginii este „URL Slug”.

Fiți atenți când editați permalinkurile – am inclus un avertisment în partea de jos a acestei postări.

Găsiți Permalink în editorul de blocuri WordPress

Adăugați un bloc WordPress

Apăsați pictograma Plus + din stânga sus pentru a începe.

Explorați biblioteca de blocuri - există atât de multe opțiuni disponibile aici.

Adăugați un bloc la WordPress

Există încă două moduri de a adăuga un bloc la o pagină WordPress.

Dacă vă aflați într-un flux creativ, adăugați un bloc apăsând pe return.

A treia cale se face prin trecerea cursorului peste un bloc – apare o pictogramă Plus +.

În momentul scrierii, acest lucru este complicat - treceți cu mouse-ul peste centrul exact de jos al blocului pentru ca pictograma să apară.

Adăugați un bloc la o pagină WordPress

Apăsați pictograma și alegeți un stil de bloc. Noul bloc va apărea sub pictograma plus.

Paragrafe WordPress folosind blocuri

Blocurile de paragrafe vor fi adesea cele mai comune elemente ale unei pagini sau postări WordPress. Adăugați un bloc de paragraf și începeți să scrieți.

Apăsați Întoarcere pentru a crea un nou bloc de paragraf și continuați să tastați.

Pentru a face lucrul mai rapid, blocurile de paragraf pot fi transformate în alte stiluri.

Cu cursorul într-un nou bloc de paragraf, tastați a / (slash). Această comandă rapidă la o listă de tipuri posibile de blocuri.

Alternativ, transformați un bloc folosind bara de instrumente. Pe un bloc selectat apare bara de instrumente, sus, stânga.

În bara de instrumente pentru un paragraf sunt opțiuni pentru a schimba „tipul sau stilul blocului” sau formatul textului:

Schimbați tipul sau stilul blocului

Transformați blocul de paragrafe WordPress

Utilizați butonul „modificați tipul sau stilul blocului” pentru a transforma blocul de paragraf. Transformarea este limitată la blocuri similare. Adică, paragrafele nu pot fi schimbate în tabele, dar pot fi schimbate în titluri.

Să schimbăm un paragraf într-un antet, de exemplu.

Săgeata, din imaginea de mai jos, indică pictograma care reprezintă un PARAGRAF. Așa știi că blocul este un paragraf.

Faceți clic pe pictogramă pentru a transforma paragraful.

Transformați un bloc WordPress dintr-un paragraf într-un titlu

Apăsați TITUL.

Pictograma paragraf se schimbă într-un H și puteți vedea H2 lângă ea.

H1 nu poate fi ales – un H1 ar trebui să fie folosit doar pentru titlul paginii.

Blocul este acum un bloc de titlu.

Selectați H3 sau un H4 apăsând butonul H2 alegând din meniu.

Schimbarea unei etichete H2 WordPress într-o etichetă H3 sau H4

Utilizați titlurile ca ierarhie în pagini și postări. Utilizați H2 pentru a împărți pagina în secțiuni ușor de citit. Folosiți H3 pentru a le subdiviza.

Formatați paragrafele și titlurile

Formatarea textului înseamnă doar adăugarea unui stil specific acestuia.

Pe un titlu sau un bloc de paragraf, evidențiați textul pe care doriți să îl formatați.

Bara de instrumente apare magic, în stânga sus a blocului. Aici veți găsi opțiuni pentru a face textul aldine , italic sau pentru a adăuga un hyperlink text.

Este încă posibil să utilizați comenzile rapide de la tastatură - evidențiați textul și utilizați:

  • Control-b pentru bold
  • Control-i pentru cursive.
  • Control-u va sublinia textul.

Utilizatori Mac – utilizați tasta de comandă în locul tastei de control.

Vizitați comenzile rapide de la tastatură WordPress pentru o listă utilă.

Observați că există o săgeată în jos pe bara de instrumente; un meniu drop-down pentru „mai multe controale pentru text îmbogățit”. Alte două stiluri se găsesc aici – barare și culoarea textului .

Fiți atenți la culoarea textului – tema va guverna aspectul site-ului. Mai puține culori într-o schemă corporativă fac un site web să arate profesional. Folosiți cu moderație culoarea textului.

„Cod în linie” și o „imagine în linie” se găsesc, de asemenea, în acest meniu.

Orice „inline” va fi poziționat în linia de text pe care o introduceți. Util pentru fragmente de cod și eventual pictograme, dar imaginile mai mari ar părea ciudat în opinia mea.

Setări de paragraf

Selectați un bloc de paragraf pentru a vedea opțiunile din partea dreaptă a ecranului WordPress.

Modificați dimensiunea textului aici.

Foarte frumos dacă ai un strapline pe care ai vrea să ieși în evidență.

Există, de asemenea, posibilitatea de a schimba culoarea paragrafelor întregi. Aș avertiza să nu înnebunești prea mult cu aceste opțiuni.

Mai multe opțiuni de transformare pentru paragrafe

Alte opțiuni de transformare pentru blocul de paragraf sunt:

  • o listă,
  • un bloc preformatat,
  • un citat,
  • un vers
  • sau un grup.

Liste

Listele sunt eticheta WordPress pentru punctele marcatoare – foarte utile pentru a ajuta articolele să iasă în evidență pe o pagină web. Există două tipuri de liste disponibile:

  • Listă ordonată (OL) – ordonată opțional după cifre romane, zecimale sau litere.
  • Lista neordonată (UL) – puncte stilizate.

La fel ca și paragrafele, listele pot fi formatate. Există, de asemenea, o opțiune de indentare a unei liste, astfel încât sublistele pot fi create în cadrul listelor.

Nu am mai văzut blocurile „preformatate” sau „vers” în WordPress, așa că voi explica puțin despre acele tipuri de blocuri.

Bloc preformatat în WordPress

Blocul preformatat permite utilizatorilor WordPress să tasteze text exact așa cum ar dori, păstrând întreruperile și indentările de linie.

Nu sunt deloc clar pentru ce se folosește asta momentan. Să mă lumineze cineva.

Într-un bloc de paragraf gol, tastați /preformatted apoi apăsați Enter pentru a crea un bloc preformatat.

Sau utilizați bara de instrumente așa cum este descris mai sus.

Verset

WordPress spune că blocul de versuri este ideal pentru a adăuga poezie pe site-ul tău, așa de potrivit numit.

Utilizatorii mai avansați pot adăuga CSS la blocurile de versuri, astfel încât stilul blocului de versuri este ușor.

 Trandafirii sunt roșii , 
Violetele sunt albastre.

Butoane în editorul de blocuri WordPress

Editorul de blocuri WordPress permite editorului să creeze butoane personalizate.

Sunt nasturi simpli, cu stiluri limitate, nimic deosebit de ingenios la ei. În opinia mea, WordPress a luat decizia corectă – să păstrați lucrurile curate este opțiunea mai bună.

Pentru a adăuga un buton, utilizați pictograma „Adăugați bloc” și selectați „Buton”.

Începeți să introduceți textul butonului imediat.

Acum, există două părți într-un „bloc de butoane”, care pot deveni confuze.

Un buton este conținut într-un bloc extern. Faceți clic pe buton, apoi faceți clic chiar în afara butonului, în spațiul alb pentru a vedea ce vreau să spun.

Mutați sau trageți butonul folosind blocul care îl conține. Butonul poate fi aliniat în interiorul acestuia.

Faceți clic pe butonul și acesta poate fi stilat – culoare, text, chenar. De asemenea, aici ați conecta butonul.

Are sens?

Selectați butonul - mai multe opțiuni de stil sunt disponibile în partea dreaptă a WordPress.

Stilul poate fi adăugat textului butonului, la fel ca un paragraf. Aveți grijă să legați textul.

Am descoperit că WordPress oferă posibilitatea de a lega TEXTul butonului (prin bara de instrumente a butonului, la fel ca un paragraf) sau de a lega întregul buton prin opțiunile din dreapta. Puțin confuz.

Cea mai bună opțiune aici este să legați întregul buton.

Pentru a face acest lucru, selectați butonul făcând clic pe el, vedeți opțiunile Blocare din partea dreaptă? Derulați până în jos și introduceți linkul în câmpul Link rel.

Nu vă sfătuiesc activarea opțiunii „deschidere filă nouă”, deoarece motoarele de căutare preferă ca utilizatorul să ia decizia de a deschide file noi.

În butonul exemplu de mai sus, am adăugat o pictogramă Font Awesome prin copierea codului HTML din Font Awesome:

 <i class="fas fa-arrow-right"></i>

Pentru a-l include pe butonul dvs., selectați butonul, apăsați pe cele 3 puncte verticale de la sfârșitul barei de instrumente și alegeți „Editați ca HTML”. Lipiți codul HTML înainte de eticheta de închidere </a>.

Această pictogramă este disponibilă numai dacă Font Awesome este instalat.

Grupuri de blocuri

Un bloc de grup permite editorului să adauge mai mult de un bloc în interiorul acestuia, astfel încât grupul să poată fi mutat, duplicat sau reutilizat ca întreg.

Util pentru machete. Sau pentru a menține titlurile și paragrafele împreună, astfel încât pagina să nu devină amestecată.

Cu toate acestea, mi s-a părut că GRUPURI sunt ușor frustrante, deoarece par să dispară! Cred că acesta este o eroare în WordPress.

Am încercat Chrome, Firefox și Edge.

Am un mic truc pentru a împiedica un GRUP să dispară odată ce a fost adăugat – adăugați-i o culoare de fundal stridente, de îndată ce ajunge pe pagină.

Am putut apoi să trageți alte blocuri în el și să schimb culoarea de fundal odată ce am terminat. Nu este ideal.

Duplicați un bloc WordPress

Îmi place că este atât de ușor să duplicați un bloc WordPress acum. Pur și simplu faceți clic în interiorul blocului pentru al selecta, apoi apăsați pe cele trei puncte verticale din bara de instrumente. Apăsați pe duplicat.

Alternativ, atunci când vă aflați într-un bloc, utilizați comanda rapidă CONTROL-SHIFT-D (COMMAND-SHIFT-D pe un Mac).

Reutilizați un bloc WordPress

O altă caracteristică grozavă a blocurilor WordPress este opțiunea BLOC REUTILIZABLE.

Stilul pe care l-ați creat pentru un bloc poate fi salvat și utilizat din nou. Acest lucru reduce nevoia de a recrea fiecare articol de-a lungul site-ului.

Faceți clic pe orice bloc pentru a afișa bara de instrumente, apoi faceți clic pe cele 3 puncte verticale din dreapta. Aici veți găsi un element de meniu etichetat „ Adăugați la blocurile reutilizabile ”.

Bloc reutilizabil în WordPress

Blocul reutilizabil salvat se găsește în biblioteca de blocuri sub fila „Reutilizabil”. Găsiți și adăugați-l ca orice alt bloc. La indemana.

Blocurile reutilizabile pot fi gestionate, astfel încât să nu aveți prea multe surplus în colecție.

Asigurați-vă că vă salvați munca. Apoi, pe orice postare sau pagină, priviți în partea de sus a ecranului, veți vedea butoanele PREVIEW și UPDATE și o pictogramă Cogge.

La sfârșitul acelei bare veți găsi 3 puncte verticale, faceți clic pe ele pentru a vedea o listă. În partea de jos este opțiunea „Gestionează toate blocurile reutilizabile”.

Gestionați blocurile reutilizabile într-un mod similar cu postările - faceți clic pe nume pentru a le edita.

Editarea unui bloc reutilizabil NU va schimba stilul blocurilor aflate deja pe site.

Cum să trageți un bloc WordPress

De la actualizarea la WordPress 5.5, opțiunea de glisare nu este evidentă.

Trebuie să selectați blocul, apoi să faceți clic și să țineți apăsat pe săgețile sus-jos.

Când trageți blocul, zonele vor fi evidențiate în albastru, indicând locul în care blocul va fi aruncat după eliberarea mouse-ului.

Sper că acest lucru vă va ajuta să începeți să editați WordPress folosind editorul de blocuri WordPress. Mai sunt multe de acoperit, așa că vă rugăm să vedeți celelalte postări ale mele pe:

  • Cum să adăugați imagini la WordPress.
  • Legați o imagine în WordPress.
  • Titluri și paragrafe în WordPress.
  • Hyperlink în WordPress.
  • Formatare în WordPress.
  • Cum se adaugă un PDF la WordPress (și se leagă la acesta).

Multe cu care să te descurci! Spune-mi cum te descurci.