← Inapoi la Ghid
Pasul 4 din 7 · 30 min

Personalizeaza

Site-ul functioneaza, dar acum il faci cu adevarat al tau. Schimbi textele, adaugi pozele tale, ajustezi culorile. Si cel mai bun lucru: AI-ul te ajuta cu orice modificare!

4.1 Inlocuieste textele placeholder

Codul generat de AI contine texte generice (placeholder) care trebuie inlocuite cu informatiile reale ale afacerii tale.

  1. Deschide index.html in Notepad++ (sau VS Code)
  2. Apasa Ctrl+H (Find and Replace / Gaseste si Inlocuieste)
  3. In campul "Find" scrie textul placeholder (ex: [POZA_1])
  4. In campul "Replace" scrie numele real al pozei (ex: sediu.jpg)
  5. Click "Replace All" — gata, toate aparitiile s-au schimbat

Exemplu concret — cum arata codul inainte si dupa:

Inainte (placeholder)
<img src="[POZA_1]" alt="Imagine afacere">
Dupa (datele tale reale)
<img src="sediu.jpg" alt="Brutaria Bunicii - sediul nostru">

Sfat: Schimba si textul din alt="..." — acesta descrie poza pentru motoarele de cautare (Google) si pentru persoanele cu deficiente de vedere. Pune o descriere scurta si clara.

4.2 Adauga pozele tale

Pozele trebuie sa fie in acelasi folder cu fisierul index.html. Altfel browserul nu le gaseste.

Pozele sunt prea mari? Daca o poza are peste 2MB, site-ul se va incarca lent. Solutie: cauta "compress image online" pe Google (ex: tinypng.com) — urci poza, o descarci micsorata, fara sa piarda calitatea vizibila.

4.3 Schimba culorile

Vrei ca site-ul sa aiba culorile afacerii tale? Ai doua optiuni:

Optiunea rapida (recomandata): Cere AI-ului sa schimbe culorile!

  1. Copiaza TOT codul din index.html (Ctrl+A, Ctrl+C)
  2. Lipeste-l in chat-ul AI
  3. Scrie: "Schimba culorile principale in albastru inchis (#1e3a5f) si auriu (#d4af37)"
  4. AI-ul returneaza codul complet cu culorile noi
  5. Copiaza codul nou, lipeste-l in Notepad++ (Ctrl+A, Ctrl+V), salveaza

Sugestii de culori pentru diferite tipuri de afaceri:

Brutarie / Cofetarie
maro cald + crem
Service auto
albastru + portocaliu
Salon de infrumusetare
roz + auriu
Pensiune / Turism
verde + lemn
Magazin / Retail
rosu + alb

Nu stii ce culori sa alegi? Cere AI-ului: "Sugereaza-mi culori potrivite pentru un site de [tipul afacerii]." Iti va da codurile de culori gata de folosit.

4.4 Metoda AI pentru ORICE modificare

Aceasta este cea mai importanta lectie din tot ghidul. Nu trebuie sa intelegi codul. Trebuie doar sa stii ce VREI sa schimbi, iar AI-ul face treaba tehnica.

Procesul e mereu acelasi:

  1. Copiaza tot codul din index.html (Ctrl+A, Ctrl+C)
  2. Lipeste-l in chat-ul AI
  3. Scrie in limba romana ce vrei sa modifici
  4. AI-ul returneaza codul complet modificat
  5. Copiaza codul nou, lipeste in Notepad++ (Ctrl+A apoi Ctrl+V), salveaza (Ctrl+S)
  6. Revino in browser si apasa F5 (refresh) ca sa vezi schimbarea

Exemple de cereri pe care le poti face:

Fa textul din header mai mare si adauga un subtitlu
Adauga un buton de WhatsApp care deschide conversatie directa la numarul 07XX XXX XXX
Schimba fontul in ceva mai elegant, potrivit pentru o cofetarie
Fa un efect frumos cand trec cu mouse-ul peste cardurile de servicii
Adauga o sectiune cu review-uri de la clienti (cu 5 stele)
Pune un banner mare cu o oferta speciala in partea de sus

Regula de aur: Nu trebuie sa intelegi codul. Trebuie doar sa stii ce VREI. Descrie in cuvintele tale, in romana, si AI-ul face treaba tehnica. Esti designer-ul, AI-ul este programatorul tau personal.

4.5 Verifica pe telefon

Majoritatea oamenilor vor vedea site-ul pe telefon, asa ca trebuie sa verifici ca arata bine si acolo.

Metoda rapida (pe calculator):

  1. In browser, cu site-ul deschis, apasa F12 (se deschid Developer Tools)
  2. Click pe iconul de telefon din bara de sus (sau apasa Ctrl+Shift+M)
  3. Acum vezi site-ul asa cum apare pe un telefon mobil
  4. Apasa F12 din nou ca sa inchizi panoul

Metoda reala (pe telefonul tau):

Nu arata bine pe mobil? Nici o problema. Cere AI-ului: "Fa site-ul sa arate bine si pe telefon mobil (responsive design)". AI-ul stie exact ce sa modifice.

Checkpoint — verifica ca ai terminat tot:

✓
Am inlocuit textele placeholder cu informatiile reale
✓
Am pus pozele mele in folder si le-am adaugat in cod
✓
Am ajustat culorile pentru afacerea mea
✓
Am verificat ca site-ul arata bine pe telefon
✓
Am cerut AI-ului cel putin o imbunatatire extra