Tutorial WordPress Gutenberg despre cum să creați un site web personalizat utilizând blocuri

Acesta este un tutorial WordPress Gutenberg scris de dezvoltatorii web care au o experiență semnificativă în crearea site-urilor web WordPress folosind noul său editor de blocuri.

În acest ghid, vă vom arăta cum să creați un site web complex care va include șabloane de conținut, arhive și o căutare personalizată. Vom folosi WordPress Block Editor cunoscut sub numele de Gutenberg și Toolset Blocks pentru a construi site-ul web.

De ce Gutenberg este acum o modalitate excelentă de a construi site-uri web

Gutenberg a ieșit de aproape un an și este suficient de matur încât este acum o modalitate excelentă și fiabilă de a proiecta site-ul exact pe care l-ați planificat.

Gutenberg folosește blocuri pentru a vă crea paginile. Blocurile sunt elemente care conțin diferite tipuri de conținut, astfel încât să puteți crea aspectele.

Editorul de blocuri este încă în evoluție, dar este deja incredibil de intuitiv și flexibil. Nu trebuie să fii expert în codificare pentru a crea conținut. Mai mult, atunci când îl combinați cu plugin-uri precum Toolset Blocks puteți crea cu ușurință site-uri web complexe care arată excelent.

Gutenberg este, de asemenea, mult mai ușor de utilizat pe mobil decât predecesorul său. Având în vedere cantitatea tot mai mare de muncă pe care o facem pe telefoanele noastre mobile, este un pas important în direcția corectă.

Cele mai bune tipuri de teme de utilizat cu Gutenberg

Există o grămadă de teme WordPress premium care sunt compatibile cu Editorul de blocuri Gutenberg și acceptă și alte pluginuri premium.

Puteți căuta rapid printre cele mai bune teme, consultând lista noastră cu peste 30 de teme WordPress compatibile cu Gutenberg.

Cel mai bun plugin pentru blocuri de utilizat cu Gutenberg

De la lansarea Gutenberg în urmă cu mai bine de un an, au fost lansate o serie de plugin-uri excelente care completează noul editor WordPress.

Pentru tutorialul nostru WordPress Gutenberg, vom folosi Toolset Blocks împreună cu Gutenberg pentru a construi site-ul nostru WordPress. Toolset Blocks oferă o serie de avantaje care vor facilita proiectarea și implementarea rapidă a site-urilor web atât pentru codificatori, cât și pentru non-codificatori:

• Fluxul dvs. de lucru va fi mult mai simplu . Acum nu este nevoie să vă proiectați paginile și apoi să le implementați. Puteți pur și simplu să le construiți pe WordPress și să vedeți instantaneu cum vor arăta.
• Nu este nevoie să comutați între back-end și front-end . În schimb, puteți să vă proiectați șabloanele pe back-end și să vedeți instantaneu cum vor arăta.
• Non-dezvoltatorii își pot construi site-urile web de vis . Nu mai trebuie să fiți un expert în codificare pentru a crea site-ul web dorit. Cu blocuri puteți adăuga cu ușurință elemente complexe singur fără html sau css.
• Petreceți mai puțin timp citind documentația . Natura simplă și intuitivă a Toolset Blocks înseamnă că nu este nevoie să citiți o grămadă de documentație pentru a înțelege cum să construiți anumite elemente. Multe dintre blocuri descriu ceea ce puteți realiza și pot fi utilizate și experimentate cu ușurință.
• Nicio integrare suplimentară cu pluginuri terțe . Cu editorul clasic WordPress ar fi trebuit să instalați un generator de pagini și pluginuri compatibile suplimentare. Acest lucru ar putea umfla site-ul dvs. încetinindu-l semnificativ. De asemenea, vă bazați pe terțe părți care își actualizează pluginurile și le păstrează în siguranță. Toolset Blocks este integrat cu Gutenberg și WordPress, deci nu va cauza aceleași probleme.
• Urmați același flux de lucru ca nucleul WordPress . Nu trebuie să vă faceți griji cu privire la schimbarea modului în care lucrați cu noul editor WordPress.

Tutorial WordPress Gutenberg despre cum să construiți un site web personalizat folosind blocuri

Acum putem începe să construim site-ul nostru personalizat. De exemplu, vom crea un site web demonstrativ pe care îl puteți utiliza pentru a căuta cea mai bună sală de gimnastică sau antrenor personal din zona dvs.

Iată ce vom acoperi în acest tutorial WordPress Gutenberg:

• Adăugarea, editarea, mutarea și ștergerea blocurilor
• Afișați conținutul unul lângă altul
• Navigarea prin blocurile dvs.
• Afișarea câmpurilor în proiectele editorului de blocuri
• Afișarea unei galerii de imagini
• Blocuri Styling Toolset în editor
• Controale tipografice
• Crearea unui șablon
• Construirea paginilor dvs. de arhivă
• Crearea listelor de conținut personalizate
• Adăugarea unei căutări personalizate

Să începem!

Adăugarea, editarea, mutarea și ștergerea blocurilor

Mai întâi, să trecem prin elementele de bază ale modului de creare și eliminare a blocurilor. Blocurile sunt un mod complet nou de a construi site-uri web, dar ar trebui să dureze doar câteva minute pentru a vă obișnui.

1. Pe o pagină sau o postare, faceți clic pe butonul +.
2. Căutați și faceți clic pe blocul pe care doriți să îl utilizați pentru a-l insera.

3. Introduceți informațiile despre conținut pentru bloc. De exemplu, aici am adăugat blocul „Heading” și vom insera un titlu pentru acesta.
4. În stânga fiecărui bloc, veți vedea un set de controale pe care le puteți folosi pentru a vă deplasa blocurile.

5. Utilizați bara laterală din dreapta pentru a modifica opțiunile pentru blocul selectat. De exemplu, puteți schimba culoarea fontului, dimensiunea imaginii sau alinierea textului.
6. Dacă faceți clic pe opțiunea cu trei puncte, puteți vedea opțiuni suplimentare, cum ar fi blocul Eliminare

Cum să afișați conținutul dvs. unul lângă altul

Puteți afișa conținutul dvs. unul lângă celălalt pe pagina dvs. utilizând blocul de coloane.

1. Selectați butonul +.
2. Căutați blocul Coloane și introduceți-l.

3. Acum puteți vedea două coloane la care puteți adăuga blocuri ca de obicei.

4. Măriți numărul de coloane selectând blocul de coloane și comutând numărul din bara din dreapta.

Navigarea prin blocurile dvs.

Pe măsură ce vă construiți site-ul, unele dintre modele și șabloane vor avea o mulțime de blocuri. Una dintre cele mai simple modalități de a selecta cea pe care doriți să o editați este folosind butonul de navigare bloc din partea de sus a editorului și selectând blocul cu care doriți să lucrați.

Afișarea câmpurilor în proiectele editorului de blocuri

Puteți afișa informații din câmpurile de postare (titlul, corpul etc.) sau din câmpurile personalizate pe care le-ați fi creat folosind Toolset Blocks.

Există trei modalități prin care vă puteți afișa câmpurile pe care le vom prezenta mai jos ca parte a tutorialului WordPress Gutenberg:

1. Setați conținutul blocului să provină din valorile câmpului

Fiecare bloc din biblioteca Toolset Blocks vă permite să setați conținutul său din câmpuri. De exemplu, puteți seta orice text de antet să provină dintr-un câmp de postare sau dintr-un câmp personalizat Toolset.

Să vedem mai jos cum funcționează adăugând text de antet dintr-un câmp de postare în blocul de antet de seturi de instrumente pentru antrenorii noștri personali.

1. Creați un șablon de conținut nou și alegeți ce tip de postare personalizată doriți să afișați.
2. Selectați butonul +.
3. Adăugați blocul Headset set de instrumente .

4. Porniți Textul antet dinamic.

5. Selectați câmpul de postare pe care doriți să îl afișați. Mai jos am selectat titlul postării .

Acum veți putea vedea titlul corect pentru fiecare dintre postările legate de un anumit tip de postare personalizată.

2. Afișați câmpurile ca blocuri individuale

Puteți afișa orice câmp de postare sau câmp personalizat individual creat folosind Toolset ca bloc. De exemplu, mai jos adăugăm conținutul principal al postării în șablonul nostru pentru sălile noastre de sport.

1. Selectați blocul Câmp unic .
2. În bara laterală dreaptă sub Tipul câmpului , selectați câmpul Standard .
3. Sub Câmp postare, selectați opțiunea Postare conținut (corp) .

Descrierea fiecărei săli de sport va apărea acum în postările respective.

3. Combinați câmpurile cu textul într-un singur bloc

S-ar putea să fie nevoie să adăugați un amestec de câmpuri și texte la proiectele dvs. De exemplu, poate fi necesar să adăugați etichete lângă câmpurile personalizate.

1. Selectați câmpurile și blocul de text .

2. Tastați eticheta pe care doriți să o adăugați. De exemplu, am adăugat „Rating” pentru că vreau să afișez rezultatele pentru câmpul personalizat Rating care arată scorul pentru fiecare sală de sport din 5.

3. Selectați dintre pictograme ce tip de conținut doriți să adăugați. Puteți adăuga un câmp, un formular sau o ieșire condiționată. În cazul nostru, dorim să adăugăm un câmp.

4. Selectați conținutul pe care doriți să-l adăugați (în cazul meu, este câmpul Rating ) și faceți clic pentru Insert Shortcode .

Afișați o galerie de imagini

De asemenea, puteți adăuga mai multe imagini la postări folosind blocuri.

1. Selectați câmpul Repetare / blocul Galerie .

2. Selectați grupul de câmpuri personalizat pe care doriți să îl afișați.
3. Alegeți câmpul personalizat pe care doriți să îl afișați.

Creați blocurile în editor

Când creați site-ul pe care l-ați avut în vedere, va trebui să vă stilizați blocurile. De exemplu, poate doriți să modificați fontul, culorile, fundalul sau marginile blocurilor.

Există două moduri în care puteți stiliza blocurile:

1. Elemente de stil folosind interfața

1. Selectați blocul pe care doriți să îl stilizați. De exemplu, am selectat blocul Evaluări pe care l-am adăugat mai devreme.
2. Extindeți secțiunea Setări stil în bara laterală.
3. Aici puteți regla culoarea de fundal, umplutura, marginea și multe altele.

Desigur, fiecare bloc va oferi diferite opțiuni de stil. De exemplu, blocul de imagine va conține o serie de caracteristici suplimentare de personalizare, cum ar fi posibilitatea de a regla poziția imaginii, neclaritatea sau cât de mult se rotește.

2. Utilizarea blocului Container

Container Block este un bloc pe care îl puteți găsi exclusiv cu Toolset Blocks. Utilizați blocul de containere pentru a grupa anumite blocuri împreună și anumite stiluri pentru fiecare dintre ele, care vor fi afișate pentru fiecare dintre postări.

De exemplu, am adăugat un bloc de containere pentru a afișa împreună toate informațiile relevante pentru un antrenor personal într-o singură secțiune uniformă, inclusiv imaginea, titlul, evaluarea și multe altele. Acum pot stiliza Container Block, astfel încât fiecare dintre postările mele Personal Trainer să afișeze aceleași stiluri.

Din nou, pot face acest lucru folosind bara laterală din partea dreaptă.

Controale tipografice

Cu Toolset Blocks, puteți stiliza și formata cu ușurință textul folosind secțiunea sa Tipografie.

Iată o listă cu ceea ce puteți ajusta:

• Tip de font - alegeți dintr-o selecție vastă de fonturi
• Dimensiunea fontului, înălțimea liniei și spațierea literelor
• Stilul fontului
• Transformare text - majuscule, majuscule, minuscule
• Culoarea textului
• Umbra textului

Cum se creează șabloane pentru a afișa postări personalizate

Una dintre cele mai importante caracteristici pe care va trebui să le creați pentru un site personalizat este șablonul. Când creați un șablon, înseamnă că toate postările pentru același tip de postare personalizată vor avea același aspect și design.

De exemplu, putem proiecta un șablon pentru fiecare dintre sălile de sport pe care dorim să le afișăm ca parte a tipului nostru personalizat de „săli de sport”.

1. Accesați Toolset-> Tablou de bord și faceți clic pe opțiunea Creați șablon de conținut pentru tipul de postare pentru care doriți să proiectați un șablon.

2. La fel cum am făcut înainte, puteți începe să adăugați câmpuri la șablonul dvs. Mai jos am adăugat o serie de blocuri diferite, inclusiv blocul Heading, Image și Single Field care conțin câmpuri.

3. Odată ce salvați și publicați șablonul, fiecare dintre postările dvs. pentru acel tip de postare personalizată vor afișa același aspect și stil.

Construirea paginilor dvs. de arhivă

Arhivele sunt lista conținutului pentru fiecare tip de postare personalizată pe care WordPress îl generează pentru dvs. Puteți utiliza Toolset Blocks și Gutenberg pentru a personaliza aspectul fiecărei pagini de arhivă.

Mai jos, ca parte a tutorialului WordPress Gutenberg, am creat o arhivă pentru tipul meu de post personalizat „Gimnastică”.

1. Accesați Toolset-> Tablou de bord și faceți clic pe opțiunea Creați arhivă de lângă tipul de postare pentru care doriți să creați o arhivă.

2. În Editorul de blocuri puteți adăuga acum diferitele elemente pe care doriți să le afișați pentru fiecare dintre postările dvs. De exemplu, puteți afișa toate câmpurile dvs. standard și personalizate (cum ar fi evaluările, adresa și titlurile de postare pe care le-am creat pentru tipurile mele de posturi personalizate „Gimnastică”) folosind Toolset Blocks.

3. Pentru a schimba numărul de coloane, faceți clic pe opțiunea Blocare navigare și selectați bucla de arhivă WordPress .
4. Sub Stil buclă puteți ajusta numărul de coloane.

5. De asemenea, puteți face o serie de modificări la setările implicite pentru arhive, cum ar fi paginarea, comanda și multe altele, sub blocul Arhivă WordPress.

6. De asemenea, puteți adăuga texte personalizate și alte blocuri înainte sau după bucla de arhivă principală care vă va afișa postările. Pur și simplu faceți clic pe pictograma + înainte sau după buclă pentru a adăuga blocurile sau textul.

Afișați liste personalizate de conținut

Puteți utiliza Toolset Blocks și Gutenberg pentru a afișa oricare dintre postările dvs. ca listă în orice ordine doriți. De asemenea, puteți proiecta lista în orice mod doriți, cum ar fi într-o grilă, HTML simplu, într-un tabel sau în orice alt mod. În Toolset, acest tip de listă se numește Vizualizare.

Această listă poate fi apoi adăugată la orice pagină. De exemplu, mai jos am adăugat o listă de săli de sport recomandate pe pagina principală.

1. Faceți clic pe butonul + din pagina la care doriți să adăugați vizualizarea.
2. Adăugați blocul Vizualizări și denumiți-l.
3. Selectați conținutul pe care doriți să îl afișeze Vizualizarea dvs. De exemplu, vreau să-mi afișez sălile de sport.

4. Adăugați blocurile pe care doriți să le afișați ca parte a Vizualizării.
5. Puteți edita comanda, ce conținut este afișat și multe altele când faceți clic pe Blocare navigare , selectați Vizualizare și utilizați bara laterală.

6. Sub Buclă vizualizare puteți modifica o serie de setări pentru întreaga Vizualizare, inclusiv numărul de coloane.

Adăugați o căutare personalizată

Puteți adăuga la Vizualizare propria dvs. căutare, care va permite utilizatorilor să restrângă conținutul de care sunt interesați în front-end. De exemplu, puteți crea o căutare pentru utilizatorii dvs. pentru a găsi cea mai bună sală de sport care este cea mai apropiată de ei.

1. Introduceți blocul Vizualizare pe pagina dvs.
2. Activați opțiunea Căutare în expertul de creare Vizualizare.

3. Apoi puteți adăuga câmpuri de căutare, butoane de căutare și multe altele în zona de editare a Vizualizărilor.

4. Puteți utiliza bara laterală dreaptă pentru a modifica opțiunile pentru acest câmp de căutare. Aceasta include setările principale ale câmpului și opțiunile de etichetă și stil.

Iată cum arată căutarea noastră personalizată pentru cea mai bună sală de sport pe front-end.

Începeți să vă construiți site-ul personalizat astăzi!

Acum că știți elementele de bază după ce ați citit acest tutorial WordPress Gutenberg, puteți începe cu proiectarea și construirea propriului site personalizat. Puteți descărca WordPress și Toolset Blocks astăzi pentru a vedea cât de ușor este pentru dvs. să vă creați propriul site web.

Dacă aveți orice gânduri sau întrebări, vă rugăm să ne anunțați în comentariile de mai jos!