Setari Pagina

In acest ghid vom invata cum sa cream si editam pagini pe platforma folosind editorul Gutenberg din WordPress: cum sa adaugam blocuri (paragrafe, titluri, butoane, imagini), sa folosim blocuri custom, sa configuram reguli de afisare in functie de statusul utilizatorului si sa stilizam paginile cu spacing, padding si latime maxima.

Creeaza o Pagina Noua

Logheaza-te in WP Admin. In meniul din stanga, mergi la Pagini si click pe Adauga pagina noua.

Ce vei vedea:

  • Camp pentru titlul paginii (sus)
  • Zona de continut unde adaugi blocuri
  • Sidebar dreapta cu setarile paginii si setarile blocului
  • Toolbar sus cu optiuni de salvare si previzualizare

Seteaza Titlul Paginii

In campul de sus, scrie titlul paginii (ex: "Contact", "Despre Noi", "Sales Page - Produs Premium"). Titlul va aparea in URL-ul paginii (ca slug/descriptor) si in tab-ul browser-ului.

Titlul poate fi editat oricand, dar schimbarea lui dupa publicare va schimba si URL-ul. Slug-ul poate fi mentinut manual din setarile de permalink.

Intelege Blocurile

In Gutenberg, totul este construit din blocuri. Fiecare element (paragraf, titlu, buton, imagine) este un bloc.

Cum adaugi un bloc:

  • Click pe butonul + din toolbar-ul de sus (stanga) sau direct in zona de continut
  • Se va deschide lista cu toate blocurile disponibile
  • Cauta blocul dorit si click pe el

Categorii principale de blocuri:

Categorie Exemple Cand se folosesc
Text Paragraph, Heading, List Pentru text obisnuit, titluri, liste
Media Image, Video, Gallery Pentru imagini, video-uri, galerii
Design Button, Spacer, Columns Pentru butoane, spatii, coloane
Widgets Shortcode, HTML Pentru functionalitati avansate
Enlivy Kit Blocuri custom pentru platforma Cele mai importante pentru tine

Adauga Blocuri in Pagina

Heading (Titlu)

Click pe + in zona de continut, cauta "heading" si click pe Heading. Scrie textul titlului, apoi in toolbar-ul blocului alege nivelul (H1, H2, H3, etc.).

Paragraph (Paragraf)

Click pe +, cauta "paragraph" si click pe Paragraph. Scrie textul dorit.

Button (Buton)

Click pe +, cauta "button" si click pe Button. Scrie textul butonului si adauga link-ul in campul URL.

Image (Imagine)

Click pe +, cauta "image" si click pe Image. Alege una din optiuni: Incarca (de pe computer), Biblioteca media (imagini deja incarcate) sau Insereaza din URL.

Organizeaza Continutul cu Group si Row

Pentru layout-uri mai complexe (sectiuni grupate, coloane), folosesti Group si Row.

Ce este Group?

Group iti permite sa grupezi mai multe blocuri impreuna pentru a le stiliza uniform sau a le organiza.

Cum adaugi Group:

  • Click pe Prezentare generala document (Shift+Alt+O) pentru a deschide lista de blocuri
  • Selecteaza elementele dorite (cu hover sau cu Shift apasat) si click dreapta → Grupeaza
  • Dupa grupare, poti adauga elemente inauntrul grupului

Ce sunt coloanele?

Coloanele iti permit sa creezi mai multe elemente unul langa altul (50%-50%, 33%-33%-33%, etc.).

Cum adaugi Coloane:

  • Click pe +
  • Cauta "row" si click pe Coloane
  • Alege layout-ul dorit
  • Adauga blocuri in fiecare coloana

Duplica Blocuri Rapid

Daca vrei sa creezi structuri similare rapid, poti duplica blocuri. Click pe blocul pe care vrei sa-l duplici, in toolbar-ul blocului click pe cele trei puncte (⋮), apoi click pe Duplica sau foloseste Ctrl+Shift+D (Windows) / Cmd+Shift+D (Mac).

Exemplu: ai creat un Group cu Heading + Paragraph + Button, vrei o sectiune similara → duplici grupul si schimbi doar textul.

Reguli de Afisare Membership

Aceasta functionalitate iti permite sa arati sau sa ascunzi blocuri in functie de statusul utilizatorului (logat/nelogat).

Unde gasesti setarile:

  • Click pe un bloc
  • In sidebar dreapta, mergi la tab-ul Bloc (nu Pagina)
  • Scroll jos pana la Membership Display Rules

Optiuni disponibile:

Setare Ce face Exemplu de utilizare
Everyone Blocul e vizibil pentru toata lumea (implicit) Text generic, imagini decorative
Logged In Blocul e vizibil DOAR pentru utilizatori logati Dashboard, continut membru
Logged Out Blocul e vizibil DOAR pentru utilizatori NElogati Butoane "Inscrie-te", "Login"

Stilizare - Padding, Margin si Latime Maxima

Fiecare bloc poate fi stilizat din sectiunea Stiluri din sidebar dreapta. Click pe un bloc, mergi la tab-ul Bloc din sidebar dreapta si expandeaza sectiunea Stiluri.

Distantare (Spatiere Interioara)

Adauga spatiu in INTERIORUL blocului, intre marginile blocului si continutul sau. Click pe bloc (de obicei Group sau Row), mergi la Stiluri → Distantare si alege tipul de padding cu pictogramele disponibile:

  • Prima pictograma: padding sus si jos (vertical)
  • A doua pictograma: padding stanga si dreapta (orizontal)
  • A treia pictograma: toate laturile uniform
  • A patra pictograma: control individual per latura

Margine (Spatiere Exterioara)

Adauga spatiu in EXTERIORUL blocului, intre bloc si alte blocuri. Functioneaza identic cu Padding, din Stiluri → Margine. Exemplu: vrei mai mult spatiu intre doua sectiuni → adaugi margin jos la primul Group.

Latime Maxima (Max Width)

Limiteaza cat de lat poate fi un bloc, chiar daca containerul este mai mare. Click pe bloc (de obicei Group sau Row), mergi la Stiluri → Latime maxima si seteaza o valoare in pixeli (ex: 590px, 800px, 1200px). Folositor pentru a controla latimea continutului, a-l centra pe ecrane mari si a crea consistenta vizuala.

Salveaza si Publica Pagina

Optiuni de salvare:

Actiune Ce face Cand se foloseste
Salveaza schita Salveaza ca draft (nepublicata) Lucrezi in progres, nu vrei sa fie live
Previzualizeaza Vezi cum arata pagina fara sa o publici Vrei sa verifici inainte de publicare
Publica Publica pagina live pe site Pagina e gata, vrei sa fie vizibila

Cum publici:

  • Click pe Publica (buton albastru, dreapta sus)
  • Revizuiesti optional: vizibilitate (Publica / Privata / Protejata cu parola) si data publicarii
  • Click din nou pe Publica pentru confirmare

Dupa publicare pagina devine vizibila la URL-ul sau. La editari ulterioare, butonul Publica devine Salveaza.

Testeaza Pagina

  • Test 1 - Vizualizare ca vizitator (NElogat): Deschide pagina in Incognito Mode si verifica ca apar blocurile cu "Logged Out" si NU apar cele cu "Logged In". Verifica si ca layout-ul arata bine vizual.
  • Test 2 - Utilizator logat fara membership: Verifica ca apar blocurile "Logged In" si NU apar cele "Logged Out".
  • Test 3 - Utilizator cu membership premium: Verifica ca toate blocurile cu acces restrictionat sunt vizibile si accesibile.
  • Test 4 - Responsive (Mobile): Redimensioneaza fereastra browser-ului sau deschide pe telefon si verifica ca layout-ul arata bine pe ecrane mici.

Lista de verificare

  • Pagina creata cu titlu relevant
  • Blocuri de baza adaugate (Heading, Paragraph, Button, Image)
  • Layout organizat cu Group si/sau Row (daca e necesar)
  • Reguli de afisare Membership configurate
  • Stilizare aplicata (Padding, Margin, Latime maxima)
  • Pagina salvata ca schita sau publicata
  • Pagina testata

Cele mai bune practici

  • Schiteaza structura paginii intr-un document inainte sa o construiesti in Gutenberg.
  • Dupa ce configurezi regulile de afisare, testeaza intotdeauna in Incognito Mode pentru a vedea cum arata pentru vizitatori.
  • Grupeaza blocuri inrudite intr-un Group pentru a le stiliza uniform si a le organiza mai bine.
  • Foloseste aceleasi valori de latime maxima pe toata pagina pentru un aspect uniform (ex: 1200px pentru sectiuni late, 800px pentru text).
  • Prea mult spacing face pagina sa para goala, prea putin o face aglomerata. Incepe cu valori mici (20-40px) si ajusteaza.
  • Daca ai o structura care se repeta, duplica blocul si schimba doar continutul pentru a economisi timp.
  • Apasa Salveaza schita des pentru a nu pierde munca. Gutenberg salveaza automat, dar e bine sa salvezi manual.
  • Foloseste butonul Previzualizeaza pentru a vedea cum arata pagina live inainte sa o publici oficial.