Régebben egy weboldal felépítése olyan projektnek tűnt, amihez szakembert kellett fogadnod. Ma már nem.
Én a Hostinger Website Buildert használom, és ebben az útmutatóban végigvezetlek a teljes folyamaton, lépésről lépésre, a bejelentkezéstől egészen addig, amíg az oldalad élőben el nem indul.
Vágjunk is bele.
Mi az a Hostinger Website Builder?
Hostinger Website Builder egy mesterséges intelligenciával támogatott, drag-and-drop weboldalkészítő, amely közvetlenül a Hostinger fiókodba van beépítve.
Nem kell semmit telepítened, nem kell tudnod kódolni és nem szükséges dizájn háttér. Leírod, mit szeretnél, az MI felépít egy teljes weboldalt, majd testre szabod, hogy illeszkedjen a márkádhoz.
Ez az egyik leggyorsabb mód arra, hogy a semmiből egy teljesen élő, professzionális megjelenésű weboldalt készíts.
1. lépés: Jelentkezz be és lépj a weboldalkészítőhöz
Amikor bejelentkezel a Hostinger fiókodba, az hPanel-re kerülsz. Ez a Hostinger fő irányítópultja, és itt tudod kezelni mindened: a weboldalakat, domaineket, e-maileket és a számlázást.
A bal oldali sávban láthatsz egy navigációs menüt. Kattints a Websites-re. Alatta megjelenik egy legördülő menü két lehetőséggel: Websites list és Migrations. Kattints a Websites list-re.
Most a Websites list oldalon vagy, ahol az összes, fiókodhoz kapcsolt weboldal látható.
Az oldal jobb felső sarkában látsz egy lila + Add website gombot. Kattints rá.
Megjelenik egy kis legördülő menü négy opcióval:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Egyéni PHP/HTML weboldal
A Hostinger Website Builder-re kell kattintanod, amelyet „AI-vezérelt drag-and-drop weboldalkészítőként” írnak le.
2. lépés: Írd le az AI-nek a weboldaladat
A Hostinger Website Builder kiválasztása után egy olyan beállítási képernyőre jutsz, amelynek címe: „Hagyd, hogy az MI hozza létre az online jelenléted.”
Itt mondod el az MI-nek, milyen típusú weboldalt szeretnél létrehozni.
Látsz egy nagy szövegdobozt azzal a helyőrző szöveggel, hogy „Describe your website or business.” Ez a prompt mező, és az, amit ide beírsz, meghatározza, hogy az MI mit generál számodra. Minél részletesebb vagy, annál jobb lesz az eredmény.
A szövegdoboz alatt egy sor gyorsindító javaslattal is találkozol. Ilyenek például: “Create a business website”, “Create an online store”, “Design a portfolio”, “Launch an appointments website”, “Start a blog”, “Launch a restaurant website” és “Create a one pager website”.
Bármelyikre kattintva egy kiinduló prompt töltődik be, amelyet aztán szerkeszthetsz és bővíthetsz.
A képernyő alján két további linket látsz: Pre-made templates és Link in bio website. Ha inkább megspórolnád az AI használatát és előre elkészített sablonok között böngélnél, kattints a Pre-made templates-re.
Ha csak egy egyszerű, egylapos oldalt szeretnél a közösségi média profiljaidhoz, érdemes megnézni a Link in bio website opciót.
A legtöbb felhasználónak, aki valódi weboldalt szeretne készíteni, viszont az AI prompt mező a megfelelő kiindulópont.
Hogyan írj jó AI promptot
Ez a folyamat legfontosabb része. Gondolj az AI promptodra úgy, mint egy briefre, amit egy tervezőnek adsz. Minél világosabban közlöd az elképzelésedet, annál közelebb lesz a végeredmény ahhoz, amit valóban szeretnél.
Íme az a prompt, amelyet ehhez az útmutatóhoz használtam. Egy kreatív ügynökség weboldalát építettem:
“Készíts modern, professzionális weboldalt egy kreatív ügynökségnek, amely arculattervezéssel, grafikai tervezéssel, webdesignnal és digitális marketinggel foglalkozik. A weboldal legyen kreatív, merész és megbízható hangulatú, ugyanakkor tiszta és könnyen áttekinthető. Használj modern elrendezést erőteljes vizuális elemekkel, jó térközökkel és stílusos tipográfiával. Tartalmazza a következő oldalakat: Főoldal, Rólunk, Szolgáltatások, Portfólió, Blog és Kapcsolat. A Főoldalon legyen egy hős szekció erőteljes főcímmel, rövid értékfókuszú leírással és egyértelmű cselekvésre ösztönző gombbal, például ‘Kezdjük el a projektet’ vagy ‘Kérj árajánlatot’. Írj egyszerű, meggyőző szöveget, amely elmagyarázza, mit csinálunk, kinek segítünk, és milyen eredményeket szállítunk. Tedd a weboldalt mobilbaráttá, gyorsan betöltődővé és alapvető SEO-optimalizációval ellátottá.”
Figyeld meg, milyen konkrét. Lefedi az iparágat, a hangnemet, az elrendezési stílust, a szükséges oldalakat, a kezdőlap szerkezetét és a tartalmi célokat. Ez a részletesség szilárd alapot ad az MI-nek a munkához.
Miután beírtad a leírásodat, észreveszed a Leírás javítása gombot a szövegdoboz jobb felső sarkában.
Javaslom, hogy küldés előtt minden esetben kattints rá. Az MI kiegészíti és finomítja a promptodat, gyakran észrevesz olyan elemeket is, amelyekre esetleg nem gondoltál.
Ha készen állsz, kattints a lila nyíl gombra (küldés ikon) a szövegdoboz jobb alsó sarkában a prompt elküldéséhez és a generálás elindításához.
3. lépés: Várj, amíg az AI felépíti az oldaladat
Miután elküldöd a promptodat, a Hostinger MI-je azonnal munkához lát. Egy teljes képernyős betöltő animációt látsz sötétlila háttérrel és a „Megfelelő képek keresése…” felirattal, valamint egy folyamatjelző sávval, amely mutatja a folyamat előrehaladását.
Ez a szakasz általában 30–60 másodpercig tart. Ezalatt az MI rengeteg mindent csinál: generálja az oldalelrendezéseket, megírja a weboldal szövegeit, kiválasztja a megfelelő képeket egy stock könyvtárból, felépíti a navigációt, és a promptod alapján struktúrálja az egész oldalt.
Ne zárd be a lapot betöltés közben. Csak várj türelmesen.
4. lépés: Tekintsd át, mit épített az AI
Amikor az MI befejezi, megjelenik az új weboldalad előnézete. Ez a végeredmény képernyő, és igazán izgalmas látni, mi készült el.
A képernyő bal oldalán az MI által generált weboldal élő előnézete látható. A jobb oldal egy olyan panelt mutat, amelynek címe: „Ötlet összefoglaló”. Itt a beküldött promptod összefoglalója jelenik meg, valamint egy Ötlet szerkesztése gomb, ha vissza akarsz térni és más vagy frissített prompttal újragenerálni.
Az én esetemben az MI a webhelynek a „BoldCraft Studio” nevet adta, és egy olyan kezdőlapot generált, ahol a főcím: „Crafting Bold Brands That Shine”, egy kísérő leírás és két cselekvésre ösztönző gomb: „Start Now” és „Get Quote” szerepel.
A navigációs sáv tartalmazta az általam kért hat oldalt: Home, About, Services, Portfolio, Blog és Contact.
Az előnézeti képernyő bal felső sarkában két gomb is látható: Korábbi verziók, amellyel végigváltogathatod az MI által fontolóra vett alternatív terveket, és Értékeld az oldalt, amellyel visszajelzést adhatsz az eredményről.
A jobb felső sarokban asztali és mobil nézetválasztó ikonok találhatók. Használd őket, hogy ellenőrizd, hogyan néz ki az oldalad telefonon, mielőtt továbbhaladsz. Jó szokás ezt korán letesztelni.
Ha elégedett vagy az összképpel, kattints a jobb oldali panel lila Folytatás gombjára. Ezzel belépsz a teljes szerkesztőbe, ahol a tényleges testreszabás zajlik.
Ha nem vagy elégedett az eredménnyel, kattints az Ötlet szerkesztése gombra, módosítsd a promptodat, és generálj újra. Ezt annyiszor megteheted, ahányszor csak szükséges.
5. lépés: Ismerkedj meg a szerkesztővel
A szerkesztőben fogsz a legtöbb időt eltölteni. Amikor először ideérsz, szánj egy pillanatot az elrendezés áttekintésére, mielőtt elkezdenél kattintgatni.
A szerkesztőnek két fő része van:
- A nagy központi terület a weboldalad vászna, ahol valós időben láthatod és szerkesztheted az oldalad.
- A bal oldali keskeny függőleges sáv az irányítópanel, amely mindent tartalmaz, amire szükséged van.
Az alábbiakban láthatod, mit csinál az egyes oldalsáv elemek:
- Beállítások hozzáférést ad az oldalad alapbeállításaihoz, a kapcsolt domainhez és a tervadataihoz.
- Elemek megnyitja a drag-and-drop panelt, ahol új tartalmi blokkokat adhatsz bármelyik oldalhoz. Erről még részletesebben szólok egy kicsit később.
- Oldalak egy helyen mutatja az összes oldalt. Válthatsz az oldalak között, adhatsz hozzá újakat, átnevezheted a meglévőket, módosíthatod a sorrendjüket vagy törölhetsz bármit, amire nincs szükséged.
- Stílusok a weboldalad globális dizájnját vezérli. Itt állíthatod be a betűtípusokat, a színpalettát és a gombstílusokat. Az itt eszközölt módosítások az egész oldalon érvényesülnek, így ez a megfelelő hely az átfogó dizájn döntések meghozatalára, ahelyett, hogy szekciónként változtatnál.
- AI eszközök hozzáférést biztosít a Hostinger írás- és tartalomalkotó MI-eszközeihez. Segítségükkel átírhatsz szövegrészeket, új tartalmat generálhatsz és így tovább.
- Blog itt hozhatod létre és kezelheted a blogbejegyzéseket, ha van blog a weboldaladon.
- Bolt itt állíthatod be az online áruházadat, ha termékeket árulsz. Fontos, hogy az e-kereskedelmi funkciókhoz magasabb szintű csomagra van szükség.
- SEO megnyitja a beépített SEO-kezelőt, ahol beállíthatod a meta címeket, leírásokat és egyéb keresőoptimalizálási adatokat minden oldalhoz.
- További egy másodlagos menüt nyit meg további eszközökkel, mint például Időpontfoglalások, Általános beállítások, Integrációk, Űrlapbeküldések, Analitika, Média tár, Többnyelvű támogatás, Biztonsági mentések kezelése, Tartalom exportálása WordPress-be és Súgó és erőforrások.
A szerkesztő tetején található még a fő eszköztár. Balról jobbra haladva: asztali és mobil előnézet választható, visszavonás és visszavisszavonás gombok, egy Domain csatlakoztatása gomb, egy Előnézet gomb, valamint a zöld Élesítés gomb.
6. lépés: Szerkeszd a tartalmadat
Most jön az a rész, amikor a sajátodra formálod az oldalt. Kattints bárhová a weboldalad vásznán, hogy elkezdhess szerkeszteni.
Ha bármelyik oldalrész fölé viszed az egeret, a szakasz bal felső sarkában egy kék címke jelenik meg, amely jelzi az elem típusát, például „Szekció” vagy „Fejléc”. Ugyanakkor egy lebegő kis eszköztár is felbukkan a szakasz felett a szerkesztési lehetőségeiddel.
A szakasz eszköztára balról jobbra a következő vezérlőket tartalmazza: Szekció szerkesztése megnyitja a szakaszbeállítások panelt, ahol módosíthatod a háttérképet vagy -színt, beállíthatod a belső margót és változtathatsz az elrendezésen. Mellette találod a Kép generálása opciót, amely megnyitja az AI képgenerátort.
Ezután egy Duplikálás ikon, egy Elrejtés/Megjelenítés váltó, egy Törlés ikon, Fel és Le nyilak a szakaszok átrendezéséhez, valamint egy hárompontos További opciók menü található.
Bármelyik szöveg szerkesztéséhez csak kattints rá és kezd el gépelni. A szövegelem szerkeszthetővé válik, és megjelennek a formázási vezérlők. Ezekkel közvetlenül megváltoztathatod a betűméretet, stílust, igazítást és a színt.
Kép cseréjéhez kattints rá. Lehetőséged lesz kiválasztani saját fájljaidból, böngészni a Hostinger stock képtárában, vagy generálni egy újat AI segítségével.
Először dolgozd végig a kezdőlapodat, majd használd az Oldalak panelt, hogy egyenként átválts a további oldalakra, és szerkeszd azokat is.
7. lépés: Használd az AI képgenerátort
Az egyik olyan funkció, amin érdemes megállni, az az AI képgenerátor, mert valóban hasznos, ha nincs saját profi fotód.
A használatához vidd az egeret bármelyik szakasz fölé az oldalon, és kattints a lebegő szakaszeszköztárban a Kép generálása gombra. Egy panel csúszik be a képernyő jobb széléről.
A panel belsejében egy „Kép leírása” szövegdobozt látsz. Írd be annak a képnek a leírását, amelyet létre szeretnél hozni.
Minél konkrétabb és vizuálisabb a leírásod, annál jobb lesz a kimenet. A panel mutatja a 3000 karakteres korlátot és egy valós idejű minőségjelzőt, amely megmutatja, hogy elegendően erős-e a leírásod.
Például amikor beírtam: „Egy modern kreatív ügynökség munkaterülete, tervezők együttműködnek laptopok és nagy képernyők körül, amelyek arculatterveket, weboldal-vázlatokat és digitális grafikákat jelenítenek meg. Világos, tiszta és stílusos iroda.”, a panel „Kiváló leírás!” feliratot mutatott teljesen kitöltött minőségjelző sávokkal.
Ha elégedett vagy a leírásoddal, kattints a Képek létrehozása gombra. Az MI egy sor képet generál, amelyek közül választhatsz.
Egy fontos dolog: az AI képgenerátor a Business csomagot vagy magasabb szintet igényel. Ha Premium csomagon vagy, a panel alján frissítési felugró ablakot fogsz látni.
8. lépés: Adj új elemeket bármelyik oldalhoz
Ha olyan tartalmi blokkot szeretnél hozzáadni, amely még nem szerepel az oldaladon, kattints az bal oldali sávban az Elemek-re. Ezzel megnyílik az Új elemek hozzáadása panel.
Láthatod az összes elérhető elemet rácsnézetben, például Szöveg, Gomb, Affiliate link, Kosárhozzáadás, Kép, Galéria, Videó, Alakzat, Kártya, Térkép, Instagram feed és Kapcsolatfelvételi űrlap. Ha bármelyiket hozzá akarod adni az oldaladhoz, húzd át a panelről az vásznadra, oda, ahol meg szeretnéd jeleníteni.
Miután elhelyezted, kattints az elemre, hogy hozzáférj a saját beállításaihoz és stílusopcióihoz.
Ez a drag-and-drop megközelítés azt jelenti, hogy sosem vagy rögzítve az AI által generált elrendezéshez. Szabadon adhatsz hozzá, távolíthatsz el és rendezhetsz át elemeket.
9. lépés: Kezeld az oldalaidat
Kattints a bal oldali sávban az Oldalak-ra, hogy egy helyen lásd az összes oldalad listáját. Bármelyik oldal nevére kattintva egyenesen a szerkesztéséhez ugrhatsz.
Új oldal hozzáadásához használd a plusz gombot. Az oldalak navigációban való sorrendjének módosításához húzd fel vagy le őket a listában.
Ha vannak AI által generált oldalak, amelyekre nincs szükséged, innen törölheted őket. Hasonlóképpen, ha szükséged van olyan oldalra, amelyet az AI nem hozott létre, például egy Vélemények vagy Árak oldalra, itt hozzáadhatod, majd az Elemek panel segítségével építheted fel.
10. lépés: Állítsd be az SEO-t
Mielőtt publikálnád, be kell állítanod az SEO-t. Ezt a lépést sokan kihagyják, pedig hiba.
Ha 15 percet szánsz az SEO-beállítások alapos kitöltésére, valódi különbséget tehetsz abban, hogy az emberek megtalálják-e az oldalad a Google-on keresztül.
Kattints a bal oldali sávban a SEO-ra az „Legyünk megtalálhatók a Google-on (SEO)” című SEO panel megnyitásához.
A panel két részre oszlik. Bal oldalon az összes oldalad listáját látod. Jobb oldalon pedig a Weboldal áttekintése rész látható, ahol megjelenik a vállalkozásod neve és a weboldalad nyelve. Kattints a Szerkesztés-re, ha ezek nem helyesek, és módosítsd őket.
A weboldalinformációk alatt egy „Néhány oldal figyelmet igényel” nevű szekciót találsz. Minden olyan oldal, amelyen dolgozni kell, egy narancssárga figyelmeztető ikonnal van jelölve. Kattints bármelyik oldalra a bal oldali panelen, hogy megnyisd az adott oldal SEO-beállításait, ahol meta címet és meta leírást írhat a konkrét oldalhoz.
Dolgozd végig a lista minden oldalát. Egy jó meta cím legyen világos, tartalmazza a fő kulcsszavad és legfeljebb 60 karakter hosszú. Egy jó meta leírás foglalja össze az oldal tartalmát, és legyen legfeljebb 160 karakter. Ezek a szövegek jelennek meg a Google keresési találatokban, ezért érdemes néhány percet szánni minden egyes oldalra.
11. lépés: Csatlakoztasd a domainedet
Ha még nem csatlakoztattál egyedi domaint az oldaladhoz, most van itt az ideje. Kattints a szerkesztő felső eszköztárában a Domain csatlakoztatása gombra.
Két lehetőséged van. Ha már rendelkezel domainnel, csatlakoztathatod úgy, hogy a DNS-beállításaidban a Hostinger szervereire mutatsz. Ha még nincs domain-ed, ezen a képernyőn közvetlenül a Hostinger-től is vásárolhatsz.
Amíg nem csatlakoztatsz domaint, az oldalad ideiglenes Hostinger aldomainen lesz elérhető, például yoursite.builder-preview.com. Ez teszteléshez tökéletes, de érdemes valódi domaint használni, mielőtt nyilvánosan megosztod.
12. lépés: Tekintsd meg az előnézetet és élesítsd az oldalad
Már majdnem készen vagy. A publikálás előtt kattints a jobb felső eszköztárban az Előnézet gombra.
Ez megnyit egy teljes képernyős előnézetet arról, hogyan fog kinézni az oldalad a látogatóknak. Váltogathatsz az asztali és a mobil nézet között az előnézet képernyő tetején található ikonokkal, és ellenőrizheted, hogy mindkettőn megfelelő-e a megjelenés.
Figyelj különösen arra, hogyan jelenik meg a kezdőlap hős szekciója mobilon, hogyan tömörül a navigáció, és hogy a képek nem vágódnak-e le nem kívánt módon.
Ha mindennel elégedett vagy, térj vissza a szerkesztőbe, és kattints a jobb felső sarokban a zöld Élesítés gombra. Az oldalad most közzé van téve és élőben elérhető az interneten.
13. lépés: Fedezd fel az integrációkat
Miután az oldalad éles, érdemes felfedezni a rendelkezésre álló integrációkat. Lépj a bal oldali sávban a További > Integrációk menüpontra.
Az Integrációk panel lehetővé teszi, hogy összekapcsold az oldaladat külső eszközökkel és szolgáltatásokkal. A jelenlegi opciók között megtalálod a Shippo-t szállítási címkék generálásához és rendeléskezeléshez, a Printfult print-on-demand egyedi termékek létrehozásához és értékesítéséhez, a Hostinger Reach-et e-mail marketinghez és hírlevelek kiküldéséhez feliratkozóidnak, a Google Ads-et fizetett hirdetések futtatásához, illetve az Egyéni kód-ot, ha saját HTML-t, CSS-t vagy JavaScriptet szeretnél hozzáadni az oldalad funkcionalitásának bővítéséhez.
Bármely integráció aktiválásához kattints a Elindítás gombra mellette, kövesd a csatlakoztatási lépéseket, majd frissítsd az oldalad újraközzététellel.
Tippe-k, hogy a legtöbbet hozd ki a Hostinger Website Builderből
Légy bőkezű az AI promptoddal. Egy kétmondatos prompt általában sablonos eredményt ad. Egy részletes, specifikus prompt, amely lefedi az iparágat, a célközönséget, a dizájn preferenciákat, az oldalszerkezetet és a hangnemet, sokkal közelebb visz ahhoz, amit igazából szeretnél. Szánj öt percet egy alapos brief megírására, és ezzel órákat spórolhatsz a szerkesztésnél.
Használd minden alkalommal a Leírás javítása gombot. Könnyű elnézni, de valóban hasznos. Az MI gyakran észrevesz olyan részleteket, amelyeket homályosan hagytál, és konkrét dizájn- és tartalmi utasításokká alakítja őket.
Szerkeszd alaposan a szövegeidet. Az AI tisztességes helykitöltő szöveget ír, de nem ismeri az üzletedet úgy, ahogy te. Menj végig minden oldalon, és írd át a szöveget úgy, hogy tükrözze a valós szolgáltatásaidat, valódi értékeidet és egyedi hangodat.
Ellenőrizd a mobil nézetet a publikálás előtt. A Hostinger automatikusan reszponzívvá teszi az oldalad, de a képek és a térközök néha apró igazításokat igényelnek kisebb képernyőkön. Mindig nézd meg mobilon az előnézetet, mielőtt élesítesz.
Töltsd ki az SEO-beállításokat minden egyes oldalnál. Nem csak a kezdőlapnál. Minden oldalad megérdemel egy megfelelő meta címet és leírást. Oldalanként néhány percbe telik, és ez az egyik legegyszerűbb módja annak, hogy javítsd a láthatóságodat a keresési eredmények között.
Használd a Média tárat a rendezett tartalomért. A További > Média tár alatt feltöltheted és kezelheted az összes képedet egy központi helyen. Ezáltal sokkal könnyebb újrahasznosítani a képeket több oldalon és egységesen tartani az oldalt.
Térj vissza és fejleszd folyamatosan. A weboldalad közzététele nem a folyamat vége, hanem kezdete. Térj vissza rendszeresen, hogy frissítsd a tartalmaidat, új blogbejegyzéseket adj hozzá és finomítsd az oldalakat, ahogy az üzleted fejlődik.
Hostinger Website Builder szinte minden akadályt eltávolít, amely korábban a professzionális weboldal elkészítése előtt állt. Az AI elvégzi a nehezét a dizájnban és a szövegírásban, a szerkesztő egyszerűvé teszi a testreszabást, a beépített SEO- és integrációs eszközök pedig mindent egy helyen biztosítanak.
Kövesd ezeket a lépéseket, és reálisan egy órán belül élő, letisztult weboldal üzemelhet.
