Un ghid complet pentru începători pentru editarea completă a site-ului WordPress

WordPress s-a clasat în mod constant drept cel mai iubit CMS la nivel global. Acest lucru devine posibil deoarece evoluează continuu pentru a satisface nevoile bazei sale diverse de utilizatori.

Cel mai recent progres în această călătorie este introducerea Full Site Editing (FSE), lansată odată cu actualizarea versiunii 5.8 în jurul anului 2021.

WordPress Full Site Editing (FSE) se bazează pe funcționalitatea bloc a proiectului Gutenberg. Oferă o experiență de creare a site-ului mai integrată și mai ușor de utilizat. Utilizatorii pot crea, personaliza și gestiona fiecare aspect al site-ului lor folosind blocuri.

În acest ghid, vom explora Editarea completă a site-ului (FSE) , beneficiile acesteia, cum să o accesăm și instrucțiuni pas cu pas pentru personalizarea anteturilor, meniurilor, stilurilor, paginilor, șabloanelor și modelelor.

Până la sfârșitul acestui ghid, veți avea o înțelegere solidă a utilizării FSE pentru a proiecta, edita și întreține un site web optimizat și atrăgător din punct de vedere vizual.

Ce este editarea completă a site-ului WordPress?

WordPress Full Site Editing (FSE) este o caracteristică revoluționară care revoluționează modul în care utilizatorii își proiectează și își gestionează site-urile web.

Spre deosebire de configurația tradițională WordPress, în care temele dictează structura și aspectul diferitelor părți ale unui site, FSE permite utilizatorilor să își personalizeze întregul site printr-o interfață bazată pe blocuri.

De ce este asta atât de important?

FSE le permite proprietarilor de site-uri să editeze ei înșiși front-end-ul site-urilor lor fără prea multe cunoștințe de codare. Acest lucru elimină, de asemenea, o mare parte din dependența lor de dezvoltatorii front-end. În general, este un pas în direcția corectă în ceea ce privește accesibilitatea tehnologiei.

Nu mai aveți nevoie de mai multe instrumente și interfețe pentru a vă construi site-ul. În schimb, puteți gestiona totul, de la antet la subsol și fiecare pagină dintr-o singură interfață unificată .

Rezultatele FSE sunt enorme, indiferent dacă sunteți un utilizator WordPress experimentat sau un începător complet.

Componentele cheie ale editării complete a site-ului

• Editor de site: centrul central unde utilizatorii își pot edita întregul site. Editorul de site oferă o interfață vizuală pentru gestionarea șabloanelor, părților de șabloane și a stilurilor la nivelul întregului site.

• Șabloane: Aspecte predefinite pentru diferite tipuri de conținut (de exemplu, postări unice, pagini, arhive) care pot fi personalizate folosind blocuri.

• Părți de șablon: secțiunile de șabloane reutilizabile, cum ar fi anteturile și subsolurile, pot fi editate o singură dată și aplicate în mai multe șabloane.

• Stiluri globale: setări care permit utilizatorilor să definească aspectul general al site-ului lor, inclusiv tipografie, culori și spațiere. Aceste setări se aplică universal pentru toate șabloanele și paginile.

• Blocuri: blocurile de bază ale FSE permite utilizatorilor să adauge și să aranjeze elemente de conținut, cum ar fi text, imagini, butoane și multe altele, într-un mod extrem de flexibil.

Diferențele dintre editarea tradițională și editarea completă a site-ului

Editarea tradițională WordPress s-a bazat în mare măsură pe teme și pe opțiunile de personalizare specifice temei. Adesea, necesită utilizatorilor să lucreze cu mai multe interfețe și uneori chiar cu cod pentru a obține aspectul și funcționalitatea dorite.

Editorul WordPress clasic aproape că se simte ca o relicvă din epoca trecută a dischetelor.

Totul este editare bazată pe text. Personalizarea limitată vă obligă să vă bazați pe teme și pluginuri neplăcute.

Intrați în Editarea completă a site-ului (FSE)!

Pe de altă parte, editarea completă a site-ului schimbă semnificativ procesul de dezvoltare web. Acesta integrează toate sarcinile de web design într-o singură platformă, eliminând nevoia de a comuta între file. Oricine poate acum să creeze și să gestioneze un site web, indiferent de expertiza anterioară sau de cunoștințele de codare.

După cum știți, FSE este construit pe o abordare bazată pe blocuri. Oferă flexibilitate, consecvență și ușurință de utilizare de neegalat, dând putere utilizatorilor să-și dea viață viziunilor creative cu bariere tehnice minime.

Cum să accesați editarea completă a site-ului pe WordPress

A ajunge la și utilizarea capacităților complete ale FSE este un proces destul de simplu.

Mai întâi, accesați tabloul de bord WordPress și, în stânga, găsiți Apariții ===> Editor.

Faceți clic pe „ Editor ”.

După ce faceți clic pe „ Editor ”, veți fi navigat la o nouă fereastră cu interfața editorului și parametrii de design, cum ar fi navigarea, stilurile, paginile etc., în stânga. Ar trebui să arate cam așa:

Vedea! Simplu! Acum, ne putem gândi la toate funcțiile individuale ale editorului de blocuri.

Creați un antet și un subsol WordPress personalizat

Antet

Pentru a crea un antet, accesați pagina pe care doriți să o editați și faceți clic pe vizualizarea listă din stânga sus. Făcând clic pe vizualizarea listă, veți avea un meniu derulant pe tabloul de bord. Acest meniu derulant va avea grupurile de antet și subsolul la fel:

Acum, dacă faceți clic pe antetul de pe pagina dvs., puteți utiliza funcționalitatea bazată pe blocuri a lui Gutenberg și trageți și plasați elementele pe care doriți să le introduceți în antet.

În exemplul de mai jos, puteți vedea că am adăugat un meniu de navigare și un buton de înscriere la antetul meu.

Puteți edita antetul separat, fără a o face pe întreaga pagină. Pentru a face acest lucru, navigați la panoul din stânga „Design” și selectați „Șabloane”.

Mai întâi, alegeți pagina pe care doriți să o editați. Apoi faceți clic pe „Acasă pe blog”, apoi derulați în jos pentru a găsi „Header”.

De asemenea, puteți edita separat alte părți ale șablonului sau puteți adăuga șablonul personalizat.

Editarea șablonului pe părți vă permite, de asemenea, să ajustați lățimea antetului. Puteți ajusta glisorul manual sau puteți introduce direct dimensiuni specifice.

Subsol

Procesul este exact similar cu cel precedent. Tot ce trebuie să faceți este să derulați în jos pagina până la subsol și să începeți să creați folosind blocurile disponibile. Alternativ, puteți edita subsolul separat, la fel ca antetul. Doar faceți clic pe „Footer” în secțiunea Zone a paginii.

În exemplul de mai jos, puteți vedea că am creat un subsol de site destul de standard folosind coloane, blocuri de stivă și blocuri de paragrafe.

De asemenea, puteți utiliza șabloane preîncărcate pentru a crea anteturi și subsoluri. Vă va accelera procesul de dezvoltare.

Editați meniul de navigare

Meniurile de navigare sunt o parte esențială a designului site-ului web. Ele ajută utilizatorii să găsească rapid și eficient informațiile pe care le caută. Un meniu de navigare bine conceput poate îmbunătăți semnificativ experiența utilizatorului și poate facilita navigarea vizitatorilor pe site-ul dvs.

Urmați acești pași simpli pentru a vă personaliza meniul și pentru a vă asigura că vizitatorii pot găsi cu ușurință ceea ce doresc.

Am văzut deja cum să accesăm editorul site-ului. După autentificare, accesați pagina în care doriți să adăugați meniul de navigare.

După ce ați ajuns acolo, dacă doriți să adăugați bara de navigare la antet, faceți clic pe semnul „+” din dreapta blocului editor și tastați „navigație” în bara de căutare. Elementul de navigare ar trebui să apară.

Ceva de genul:

Puteți chiar să adăugați o secțiune complet nouă și bara de navigare. Cu FSE, ai libertate deplină.

Rețineți că puteți edita meniul de navigare separat de pagină, cum ar fi antetul și subsolul. Doar alegeți „navigație” din meniul de design și apăsați Editare.

Acum că ați adăugat meniul de navigare, puteți adăuga în bara de navigare câte pagini doriți. Doar apăsați butonul „+” pentru a adăuga o altă pagină.

Apoi, puteți adăuga link-uri către fiecare pagină direct din editor. Ca aceasta:

Puteți chiar să adăugați submeniuri la fiecare pagină:

După crearea meniului de navigare, puteți experimenta cu multe setări și stiluri diferite. Doar faceți clic pe fila de setări din partea dreaptă sus a editorului, chiar lângă butonul de salvare, și personalizați și modificați la conținutul inimii dvs.

Schimbați stilurile globale ale site-ului dvs. web

Mergeți din nou la editor și găsiți butonul de stiluri din partea dreaptă sus a paginii dvs. de editare. Ar trebui să arate ca un cerc pe jumătate alb-negru, astfel:

După ce faceți clic pe el, meniul de stiluri ar trebui să apară în dreapta cu tipografie, aspect de culoare etc. Puteți răsfoi diferitele stiluri făcând clic pe butonul „Răsfoiește stiluri” .

Există multe stiluri excelente și unice disponibile din care să alegeți.

Schimbarea tipografiei

Apoi, puteți schimba tipografia fonturilor doar făcând clic pe butonul „Tipografie” . Aceasta vă va duce la un meniu cu diferite fonturi utilizate în diferite locuri de pe pagina dvs. Puteți chiar să schimbați fonturile în anumite elemente, cum ar fi text, linkuri, titluri, subtitrări și butoane.

Pentru a schimba un anumit font, faceți clic pe oricare dintre fonturile listate sub antetul „FONTS” și veți avea opțiunea:

• Folosind un font implicit
• Încărcarea fontului dvs
• Sau selectați oricare dintre fonturile Google pe care le-ați descărcat.

Dacă doriți să schimbați fontul pentru un anumit element, fie un link sau un titlu, faceți clic pe el. Puteți personaliza setări precum aspectul, spațierea dintre litere, înălțimea liniilor și dimensiunile titlurilor (H1, H2 etc.).

Schimbarea culorilor

Apoi, puteți edita și culorile utilizate pe site-ul dvs. web. Doar faceți clic pe butonul „Culori”. Puteți chiar să schimbați culorile pe anumite elemente, cum ar fi text, linkuri etc.

În interiorul opțiunii „PALETA” , veți găsi o serie de opțiuni pe care le puteți personaliza, de la culorile temei care sunt solide până la degrade.

Puteți chiar să reglați tipul și unghiul gradientului dacă doriți!

Puteți adăuga câte culori personalizate doriți și puteți seta culoarea personalizată pentru orice element.

Schimbarea aspectului

A treia opțiune pe care o puteți personaliza este opțiunea de aspect.

În această secțiune, veți găsi setări pentru lățimea conținutului, umplutură și spațiere între blocuri. Iată o scurtă prezentare a ceea ce fac toate setările:

• Lățimea conținutului desemnată ca „CONTINUT” se ocupă cu ajustarea lățimii conținutului de pe pagina ta.
• Lățimea containerului sau caseta desemnată ca „LAȚIE” ajustează lățimea totală a paginii.
• Căptușeala se ocupă pur și simplu de umplutura pe toate părțile paginii site-ului dvs.
• Spațierea între blocuri se ocupă de separarea dintre fiecare bloc de elemente de pe pagina ta.

Și nu uitați să vă salvați modificările după toate personalizările pe care le faceți, cu excepția cazului în care doriți ca munca dvs. grea să cadă.

Personalizați paginile WordPress

Am acoperit deja multe, dar vor urma mai multe!

Următorul pe ordinea de zi este personalizarea paginilor dvs. WordPress. Pentru a face acest lucru, accesați panoul de design din dreapta și faceți clic pe pagini.

Aici veți găsi o listă cu toate paginile de pe site-ul dvs.

Dacă doriți să vedeți toate paginile de pe site-ul dvs., apăsați pe „Gestionați toate paginile” în partea de jos a secțiunii „Pagini” . Aceasta va deschide o nouă fereastră cu toate paginile dvs.

Odată ajuns acolo, puteți adăuga o pagină nouă făcând clic pe butonul din dreapta sus.

Puteți adăuga o pagină făcând clic pe butonul „+” de lângă antetul secțiunii „Pagini” . O nouă solicitare va cere titlul paginii. Numiți pagina și apăsați pe „Creați schiță”. Noua ta pagină va fi creată.

Acum, puteți începe să editați noua pagină.

Editați șabloane WordPress

Mergeți la pagina „Șabloane” din panoul „Design” al Editorului de site complet WordPress.

Șabloanele sunt pagini preformatate pe care le puteți utiliza pentru a crea anumite tipuri de pagini. Să luăm, de exemplu, pagina „404” .

Pagina a fost deja concepută pentru a îndeplini toate cerințele de bază ale unei pagini 404. Aceasta este o caracteristică destul de ingenioasă, care vă permite să reutilizați modelele dacă aveți multe pagini cu același aspect.

O altă caracteristică interesantă a acestui sistem este că nu trebuie să editați fiecare pagină individual. Să presupunem că utilizați același șablon pentru mai multe pagini. În acest caz, aceste modificări se vor aplica efectiv în toate paginile. Cool, nu?!

Doar apăsați butonul de editare cu pictograma creion pentru a edita șablonul.

Acum, puteți începe să editați șablonul.

Pentru a crea un șablon personalizat, apăsați pe semnul „+” de lângă antetul „Șabloane” . Apoi, puteți alege dintre mai multe șabloane preîncărcate.

Sau derulați în jos și creați șablonul personalizat.

Dacă doriți să gestionați toate șabloanele, apăsați butonul „Gestionați șabloanele” din partea de jos a secțiunii „Șabloane” și verificați toate numele șabloanelor, descrierile și autorii. Puteți chiar să ștergeți un șablon dacă doriți.

De asemenea, puteți edita șablonul de pagină direct, fără a intra în modul FSE.

Modificați modelele WordPress

Acum am rămas cu ultima opțiune de editare din editorul FSE, Patterns!

După cum probabil știți, modelele sunt blocuri gata făcute care pot fi folosite în diferite pagini sau postări de pe site-ul dvs.

Odată ce creați un model nou, acesta este adăugat automat în directorul de modele. Îl puteți adăuga liber la orice postare sau pagină doriți.

Modelele sunt un instrument de design extrem de util pentru a menține consistența site-ului.

De exemplu, puteți crea un model CTA o singură dată și apoi îl puteți utiliza în toate paginile și postările de pe site-ul dvs.

La fel ca șabloanele, modelele au o funcție numită „Sincronizare ”. Aceasta înseamnă că dacă modificați o instanță de model, modificările vor fi aplicate tuturor cazurilor.

Dacă accesați secțiunea „Modele” a editorului, veți găsi multe modele preîncărcate care sunt blocate și nu pot fi editate.

Aici, puteți vedea secțiunea de piese de șablon. Conține modele speciale rezervate pentru structura site-ului dvs. Acestea sunt personalizabile.

Pentru a adăuga un model, faceți clic pe butonul „+” . Veți vedea opțiuni pentru a crea un model sau un șablon sau pentru a importa un model dintr-un fișier JSON.

Diferența dintre un model și o parte de șablon este că părțile de șablon sunt, implicit, sincronizate. Nu le poți schimba. Acest lucru se datorează faptului că părțile șablon sunt utilizate în părți structurale, cum ar fi antetul sau subsolul.

Cu toate acestea, modelele pot fi sincronizate sau nesincronizate, în funcție de modul în care le utilizați.

Creați un model, setați categoria și determinați dacă va fi sincronizat.

Odată ce faceți clic pe „Creați”, vă va duce la o nouă interfață de editare. Aici, puteți utiliza editorul FSE pentru a edita acel element.

Întrebări frecvente despre editarea completă a site-ului WordPress

Note de închidere privind editarea completă a site-ului WordPress

Funcția Full Site Editing (FSE) din WordPress își propune să transforme procesul de dezvoltare web într-o abordare mai bazată pe blocuri. Astfel, utilizatorii se pot bucura de o experiență de editare a conținutului mai intuitivă și mai flexibilă.

FSE vă permite să vă proiectați și să vă personalizați site-ul direct în administratorul WordPress, folosind o interfață vizuală, drag-and-drop. Acest lucru elimină necesitatea de a codifica sau de a lucra cu un instrument de proiectare separat.

Acesta este viitorul dezvoltării site-ului WordPress. Ar trebui să aflați mai multe despre această nouă caracteristică și să o utilizați pentru a crește productivitatea.

Mai aveți întrebări despre editarea completă a site-ului WordPress? Folosiți secțiunea de comentarii de mai jos.