Crearea unui site părea odinioară un proiect pentru care trebuia să angajezi pe cineva. Nu mai e cazul.
Am folosit Hostinger Website Builder și, în acest ghid, te voi îndruma prin întregul proces, pas cu pas, din clipa în care te autentifici până în momentul în care site-ul tău devine public.
Hai să începem.
Ce este Hostinger Website Builder?
Hostinger Website Builder este un constructor de site-uri cu interfață drag-and-drop, alimentat de AI, integrat direct în contul tău Hostinger.
Nu trebuie să instalezi nimic, nu trebuie să știi programare și nu ai nevoie de experiență în design. Descrii ce dorești, AI generează un site complet pentru tine, iar apoi îl personalizezi pentru a se potrivi brandului tău.
Este una dintre cele mai rapide metode de a obține un site profesional, complet publicat, pornind de la zero.
Pasul 1: Conectează-te și navighează la constructor
Când te conectezi în contul tău Hostinger, ajungi în hPanel. Acesta este dashboard-ul principal Hostinger, unde gestionezi totul: site-uri, domenii, emailuri și facturare.
În bara laterală din stânga vei vedea o listă de opțiuni de navigare. Fă click pe Websites. Se va deschide un mic meniu dropdown cu două opțiuni: Websites list și Migrations. Alege Websites list.
Acum te afli pe pagina Websites list, care afișează toate site-urile conectate la contul tău.
În colțul din dreapta sus al paginii vei vedea un buton mov + Add website. Click pe el.
Se deschide un meniu dropdown cu patru opțiuni:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Și site personalizat PHP/HTML
Vrei să dai click pe Hostinger Website Builder, descris ca fiind “constructorul de site-uri AI-powered cu interfață drag-and-drop”.
Pasul 2: Descrie-ți site-ul AI-ului
După ce selectezi Hostinger Website Builder, ajungi pe ecranul de configurare cu titlul “Lasă AI să-ți creeze prezența online.”
Aici îi spui AI-ului ce fel de site vrei să construiești.
Vei vedea o casetă de text mare cu textul de tip placeholder “Descrie-ți site-ul sau afacerea.” Acesta este câmpul pentru prompt, iar ceea ce introduci aici determină tot ce generează AI-ul pentru tine. Cu cât oferi mai multe detalii, cu atât rezultatul va fi mai bun.
Sub caseta de text, vei observa și un rând de sugestii rapide. Acestea includ opțiuni precum “Creează un site de afaceri”, “Creează un magazin online”, “Concepe un portofoliu”, “Lansează un site de programări”, “Începe un blog”, “Lansează un site pentru restaurant” și “Creează un site one-pager”.
Dând click pe oricare dintre acestea completezi automat un prompt de pornire pe care îl poți edita și extinde.
În partea de jos a ecranului vei vedea două linkuri suplimentare: Pre-made templates și Link in bio website.
Dacă preferi să sari peste AI și să răsfoiești designurile existente, click pe Pre-made templates.
Dacă ai nevoie doar de un site simplu cu o singură pagină pentru profilurile tale de social media, opțiunea Link in bio merită verificată.
Pentru majoritatea celor care construiesc un site real, totuși, caseta de prompt AI este locul potrivit de unde să înceapă.
Cum să scrii un prompt AI eficient
Aceasta este cea mai importantă parte a întregului proces. Gândește-te la promptul AI ca la un brief pe care îl oferi unui designer. Cu cât comunici mai clar viziunea ta, cu atât rezultatul va semăna mai mult cu ceea ce îți dorești cu adevărat.
Iată promptul pe care l-am folosit pentru acest ghid. Construiesc un site pentru o agenție creativă:
“Construiește un site modern și profesionist pentru o agenție creativă care oferă servicii de branding, design grafic, web design și marketing digital. Site-ul ar trebui să transmită creativitate, curaj și încredere, menținându-se totodată curat și ușor de navigat. Folosește un layout modern cu elemente vizuale puternice, spațiere optimă și o tipografie stilată. Include următoarele pagini: Acasă, Despre, Servicii, Portofoliu, Blog și Contact. Pe pagina Acasă, adaugă o secțiune hero cu un titlu puternic, o descriere scurtă axată pe valoare și un buton clar de call-to-action, precum ‘Începe proiectul’ sau ‘Solicită o ofertă’. Scrie un text simplu și persuasiv care să explice ce facem, cui ne adresăm și rezultatele pe care le oferim. Fă site-ul prietenos cu dispozitivele mobile, rapid și optimizat pentru SEO de bază.”
Observă cât de specific este. Acoperă industria, tonul, stilul layout-ului, paginile necesare, structura paginii principale și obiectivele de conținut. Acest nivel de detaliu oferă AI-ului o bază solidă de la care să plece.
După ce ai introdus descrierea, vei observa că un buton “Improve description” apare în colțul din dreapta sus al casetei de text.
Îți recomand să dai click pe el înainte de a trimite. AI-ul va extinde și va rafina promptul, adesea surprinzând aspecte pe care nu te-ai gândit să le incluzi.
Când ești gata, dă click pe butonul mov arrow button (pictograma de trimitere) din colțul din dreapta jos al casetei de text pentru a-ți trimite promptul și a începe generarea.
Pasul 3: Așteaptă ca AI-ul să îți construiască site-ul
După ce trimiți promptul, AI-ul Hostinger pornește imediat procesul. Vei vedea o animație de încărcare pe tot ecranul, pe un fundal mov închis, cu mesajul “Looking for matching pictures…” și o bară de progres care arată stadiul în care se află procesul.
Această etapă durează de obicei între 30 și 60 de secunde. În acest timp, AI-ul face multe lucruri: generează layout-urile paginilor, scrie textele site-ului, selectează imagini potrivite dintr-o bibliotecă stock, construiește navigația și structurează întregul site în baza promptului tău.
Nu închide fila în timp ce se încarcă. Doar așteaptă și lasă procesul să ruleze.
Pasul 4: Revizuiește ceea ce a construit AI-ul
Când AI-ul termină, ți se afișează o previzualizare a noului site. Acesta este ecranul de rezultate și este cu adevărat incitant să vezi ce a fost generat.
Partea stângă a ecranului afișează o previzualizare live a site-ului generat. Partea dreaptă arată un panou numit “Your idea summary”, care prezintă un rezumat al promptului trimis și un buton “Edit idea” dacă vrei să revii și să regenerezi folosind un prompt diferit sau actualizat.
În cazul meu, AI-ul a numit site-ul “BoldCraft Studio” și a generat o pagină principală cu titlul “Crafting Bold Brands That Shine”, o descriere de suport și două butoane call-to-action: “Start Now” și “Get Quote”.
Bara de navigare includea toate cele șase pagini pe care le-am cerut: Home, About, Services, Portfolio, Blog și Contact.
În colțul din stânga sus al ecranului de previzualizare vei vedea de asemenea două butoane: Previous versions, care îți permite să revizuiești versiunile alternative gândite de AI, și Rate site, care îți permite să oferi feedback asupra rezultatului.
În colțul din dreapta sus al previzualizării vei vedea pictograme pentru toggle între desktop și mobil. Folosește-le pentru a verifica cum arată site-ul tău pe telefon înainte să continui. Este o bună practică să faci asta încă de la început.
Dacă ești mulțumit de direcția generală, dă click pe butonul mov Continue din panoul din dreapta. Aceasta te duce în editorul complet, unde are loc personalizarea propriu-zisă.
Dacă nu ești mulțumit de rezultat, click pe Edit idea, revizuiește promptul și regenerează. Poți face acest lucru de câte ori ai nevoie.
Pasul 5: Familiarizează-te cu editorul
Editorul este locul unde vei petrece cea mai mare parte a timpului. Când ajungi prima dată aici, ia-ți un moment să înțelegi layout-ul înainte să începi să explorezi.
Editorul are două zone principale.
- Zona mare centrală este pânza site-ului tău, unde poți vedea și interacționa cu site-ul în timp real.
- Bara laterală verticală îngustă din stânga este panoul de control și conține tot ce ai nevoie.
Iată ce face fiecare element din bara laterală:
- Setup îți oferă acces la setările de bază ale site-ului, domeniul conectat și informațiile despre plan.
- Elements deschide panoul drag-and-drop unde poți adăuga noi blocuri de conținut pe orice pagină. Voi detalia acest lucru în curând.
- Pages afișează toate paginile tale într-un singur loc. Poți comuta între pagini, adăuga altele noi, redenumi pagini existente, schimba ordinea sau șterge paginile inutile.
- Styles controlează designul global al site-ului tău. Aici setezi fonturile, paleta de culori și stilurile pentru butoane. Orice modificare faci aici se aplică pe întregul site, deci e locul potrivit pentru decizii de design majore, nu pentru schimbări pe secțiuni individuale.
- AI tools îți oferă acces la AI-ul de scriere și conținut de la Hostinger. Îl poți folosi pentru a rescrie secțiuni de text, a genera conținut nou și altele.
- Blog este locul unde creezi și gestionezi articole de blog dacă site-ul tău are un blog.
- Store este locul unde configurezi magazinul online dacă vinzi produse. Reține că funcționalitățile eCommerce necesită un plan de nivel superior.
- SEO deschide managerul SEO integrat unde poți seta meta titluri, descrieri și alte detalii de optimizare pentru fiecare pagină.
- More se extinde într-un al doilea meniu cu instrumente suplimentare, incluzând Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress și Help and Resources.
În partea de sus a editorului găsești și bara de instrumente principală. De la stânga la dreapta, conține: un toggle pentru previzualizare desktop și mobil, butoane undo și redo, un buton Connect domain, un buton Preview și butonul verde Go live.
Pasul 6: Editează-ți conținutul
Acum urmează partea în care îți personalizezi site-ul. Dă click oriunde pe pânza site-ului pentru a începe editarea.
Când treci cursorul peste orice secțiune a paginii, vei vedea o etichetă albastră apărând în colțul din stânga sus al secțiunii, indicând tipul elementului, de exemplu “Section” sau “Header.” În același timp, apare deasupra secțiunii o mică bară de instrumente flotantă cu opțiunile de editare.
Toolbar-ul de secțiune îți oferă următoarele controale de la stânga la dreapta: Edit section deschide panoul de setări al secțiunii, unde poți schimba imaginea de fundal sau culoarea, ajusta padding-ul și modifica opțiunile de layout.
Următorul este Generate image, care deschide generatorul de imagini AI.
Apoi ai o pictogramă de Duplicate, un toggle Hide/Show, o pictogramă Delete, săgeți Move up și Move down pentru a reordona secțiunile și un meniu More options cu trei puncte.
Pentru a edita orice text de pe pagină, dă pur și simplu click direct pe el și începe să tastezi. Elementul de text va deveni editabil și vei vedea apărând controalele de formatare. Poți schimba dimensiunea fontului, grosimea, alinierea și culoarea direct din aceste controale.
Pentru a schimba o imagine, dă click pe ea. Vei vedea opțiuni pentru a o înlocui cu o fotografie din fișierele tale, pentru a răsfoi biblioteca stock de imagini Hostinger sau pentru a genera una nouă cu AI.
Lucrează mai întâi pe pagina principală, apoi folosește panoul Pages pentru a comuta pe fiecare pagină adițională și a le edita pe rând.
Pasul 7: Folosește generatorul de imagini AI
O caracteristică la care merită să te oprești este AI image generator, deoarece este cu adevărat util dacă nu ai fotografii profesionale proprii.
Pentru a-l accesa, treci cursorul peste orice secțiune de pe pagină și dă click pe Generate image în toolbar-ul flotant al secțiunii. Un panou va aluneca din partea dreaptă a ecranului.
În interiorul panoului vei vedea o casetă de text “Image description”. Tastează o descriere a imaginii pe care vrei să o creezi.
Cu cât descrierea ta este mai specifică și mai vizuală, cu atât output-ul va fi mai bun. Panoul afișează o limită de 3.000 de caractere și un indicator de calitate în timp real care îți arată dacă descrierea este suficient de bună.
De exemplu, când am tastat “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office”, panoul a afișat “Great description!” cu toate barele de calitate completate.
Când ești mulțumit de descriere, dă click pe butonul Create images. AI-ul va genera un set de imagini din care să alegi.
Un aspect de care să ții cont: generatorul de imagini AI necesită planul Business sau unul superior. Dacă ești pe planul Premium, vei vedea un prompt de upgrade în partea de jos a panoului.
Pasul 8: Adaugă elemente noi pe orice pagină
Dacă vrei să adaugi un bloc de conținut care nu se află deja pe pagină, click pe Elements în bara laterală din stânga. Aceasta deschide panoul “Add elements”.
Vei vedea o grilă cu toate elementele disponibile, inclusiv Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed și Contact form. Pentru a adăuga oricare dintre acestea pe pagină, trage-l din panou și plasează-l pe pânza site-ului în locul unde dorești să apară.
Odată plasat, dă click pe element pentru a accesa setările individuale și opțiunile de stilizare.
Această abordare drag-and-drop înseamnă că nu ești niciodată blocat în layout-ul generat de AI. Poți adăuga, elimina și rearanja elemente după bunul plac.
Pasul 9: Gestionează-ți paginile
Click pe Pages în bara laterală din stânga pentru a vedea toate paginile listate într-un singur loc.
Pentru a adăuga o pagină nouă, folosește butonul plus. Pentru a reordona ordinea în care paginile apar în navigație, trage-le în sus sau în jos în listă.
Dacă ai pagini generate de AI de care nu ai nevoie, le poți șterge de aici. În mod similar, dacă ai nevoie de o pagină pe care AI-ul nu a inclus-o, cum ar fi o pagină Testimonials sau Pricing, o poți adăuga aici și apoi o construiești folosind panoul Elements.
Pasul 10: Configurează-ți SEO-ul
Înainte să publici, trebuie să configurezi SEO-ul. Acesta este un pas pe care mulți îl omit, iar asta este o greșeală.
Alocarea a 15 minute pentru a completa corect setările SEO poate face cu adevărat diferența în modul în care oamenii îți găsesc site-ul prin Google.
Click pe SEO în bara laterală din stânga pentru a deschide panoul SEO, intitulat “Let’s be found on Google (SEO).”
Panoul este împărțit în două secțiuni. În stânga vei vedea o listă cu toate paginile. În dreapta vei vedea Website overview, care afișează numele afacerii și limba site-ului. Click pe Edit pentru a le actualiza dacă sunt incorecte.
Sub informațiile despre site vei vedea o secțiune intitulată “Some pages require your attention.”
Fiecare pagină care necesită lucru este marcată cu o pictogramă de avertizare portocalie. Click pe orice pagină din panoul din stânga pentru a deschide setările SEO individuale, unde poți scrie un meta title și o meta description pentru pagina respectivă.
Parcurge fiecare pagină din listă. Un meta title bun este clar, conține principalul tău cuvânt cheie și are sub 60 de caractere. O meta description bună rezumă despre ce este pagina și are sub 160 de caractere. Acestea sunt snippet-urile care apar în rezultatele Google, deci merită să acorzi câteva minute fiecăreia.
Pasul 11: Conectează-ți domeniul
Dacă nu ți-ai conectat încă un domeniu personalizat la site, acum este momentul. Click pe butonul Connect domain din bara de instrumente a editorului.
Ai două opțiuni. Dacă deții deja un domeniu, îl poți conecta actualizând setările DNS pentru a indica către serverele Hostinger. Dacă nu deții încă un domeniu, poți cumpăra unul direct de la Hostinger pe același ecran.
Până conectezi un domeniu, site-ul tău va fi accesibil printr-un subdomeniu temporar Hostinger, cum ar fi yoursite.builder-preview.com. Acest lucru este OK pentru testare, dar vrei un domeniu propriu înainte să începi să distribui site-ul public.
Pasul 12: Previzualizează-ți site-ul și publică-l
Ești aproape gata. Înainte să apeși publish, click pe butonul Preview din bara de instrumente din dreapta sus.
Aceasta deschide o previzualizare pe tot ecranul care arată exact cum va arăta site-ul vizitatorilor. Comută între vizualizările desktop și mobil folosind pictogramele din partea de sus a ecranului de previzualizare și verifică dacă totul arată bine pe ambele.
Acordă atenție modului în care secțiunea hero a paginii principale arată pe mobil, cum se comprimă navigația și dacă vreo imagine este decupată într-un mod nedorit.
Când ești mulțumit de tot, revino în editor și dă click pe butonul verde Go live din colțul din dreapta sus. Site-ul tău este acum publicat și live pe internet.
Pasul 13: Explorează integrările
După ce site-ul tău este live, merită să explorezi integrările disponibile. Mergi la More > Integrations în bara laterală din stânga.
Panoul Integrations îți permite să conectezi site-ul la instrumente și servicii externe. Opțiunile curente includ Shippo pentru generarea etichetelor de expediere și gestionarea comenzilor, Printful pentru crearea și vânzarea de produse personalizate la cerere, Hostinger Reach pentru email marketing și trimiterea de newslettere abonaților, Google Ads pentru derularea campaniilor publicitare plătite și Custom code dacă vrei să adaugi propriul cod HTML, CSS sau JavaScript pentru a extinde funcționalitatea site-ului.
Pentru a activa orice integrare, click pe Get started lângă ea, urmează pașii de conectare și apoi actualizează-ți site-ul republicându-l.
Sfaturi pentru a profita la maximum de Hostinger Website Builder
Fii generos cu promptul tău AI. Un prompt de două propoziții îți va da un rezultat generic. Un prompt detaliat și specific care acoperă industria, audiența, preferințele de design, structura paginilor și tonul vocii îți va oferi ceva mult mai apropiat de ceea ce îți dorești cu adevărat. Alocă cinci minute pentru a scrie un brief corespunzător și vei economisi ore întregi de editare ulterior.
Folosește mereu butonul Improve description. Este ușor de ratat, dar este cu adevărat util. AI-ul surprinde adesea aspecte pe care le-ai lăsat vagi și le transformă în instrucțiuni concrete de design și conținut.
Editează-ți cu atenție textele. AI-ul generează texte decente de tip placeholder, dar nu-ți cunoaște afacerea așa cum o cunoști tu. Parcurge fiecare pagină și rescrie textele pentru a reflecta serviciile reale, valoarea ta autentică și vocea ta distinctă.
Verifică vizualizarea pe mobil înainte de publicare. Hostinger face automat site-ul responsive, dar uneori imaginile și spațierea necesită ajustări minore pe ecranele mai mici. Întotdeauna previzualizează pe mobil înainte de publicare.
Completează SEO-ul pentru fiecare pagină. Nu doar pentru pagina principală. Fiecare pagină de pe site merită un meta title și o descriere adecvate. Ia câteva minute pentru fiecare pagină și este unul dintre cele mai simple lucruri pe care le poți face pentru a-ți îmbunătăți vizibilitatea în rezultatele căutărilor.
Folosește Media library pentru a rămâne organizat. Sub More > Media library poți încărca și gestiona toate imaginile într-un loc central. Acest lucru face mult mai ușoară reutilizarea imaginilor pe multiple pagini și menținerea consistenței site-ului.
Revină și îmbunătățește în timp. Publicarea site-ului nu este sfârșitul procesului, ci începutul. Revină regulat pentru a-ți actualiza conținutul, adăuga articole noi pe blog și rafina paginile pe măsură ce afacerea ta evoluează.
Hostinger Website Builder elimină aproape toate barierele care obișnuiau să te despartă de un site profesional. AI-ul se ocupă de munca grea pentru design și texte, editorul face personalizarea simplă, iar instrumentele SEO și integrările incluse îți oferă tot ce ai nevoie într-un singur loc.
Urmează pașii din acest ghid și poți avea, în mod realist, un site live și complet finisat funcțional în mai puțin de o oră.
