Site Builder Útmutató

Bevezető

A NEXUS Site Builder egy AI-alapú weboldal készítő, amelyet kifejezetten magyar kisvállalkozások számára terveztünk. Segítségével percek alatt készíthetsz professzionális megjelenésű weboldalt — programozói tudás nélkül.

Mit kapsz?

• AI-generált tartalom — Az AI a vállalkozásod adatai alapján generálja a szövegeket, struktúrát
• 13 szekciótípus — Hero, szolgáltatások, vélemények, csapat, GYIK, és még sok más
• Élő előnézet — Minden változás azonnal látszik a jobb oldali előnézetben
• Automatikus mentés — 2 másodperc inaktivitás után automatikusan ment
• Visszavonás/Újra — Ctrl+Z / Ctrl+Y, max 30 lépés
• HTML letöltés — Egyetlen, önálló HTML fájl, bárhol hostolható

Első lépések

Bejelentkezés után a Builder elérhető a Chat oldal fejlécéből, a Fiók oldalról, vagy közvetlenül a /builder URL-ről.

1. Navigálj a Builder-hez

Bejelentkezés után a Builder elérhető:

• A Chat oldal fejlécéből → "Site Builder" gomb
• A Fiók oldalról → "Weboldal készítő" gomb
• Közvetlenül: /builder URL

2. Iparági sablon kiválasztása

Először válaszd ki, mivel foglalkozol — hat iparági sablon közül választhatsz:

• 💇 Fodrászat / Szépségszalon — szolgáltatások árlistával, galéria, időpontfoglalás
• 🔧 Autószerelő / Autószerviz — szolgáltatások, referencia-számok, bizalomépítés
• 🍽️ Étterem / Kávézó — étlap-kiemelések, napi menü, asztalfoglalás
• 🌿 Masszőr / Wellness — kezelések, bérletek, nyugodt hangvétel
• ⚡ Villanyszerelő / Víz-gáz / Iparos — gyors elérés, garancia, hibaelhárítás
• 💼 Általános vállalkozás — univerzális váz bármilyen tevékenységhez

A sablon adja a weboldal vázát: a szekciók sorrendjét, iparágra szabott alapszövegeket, és egy ajánlott színpalettát meg betűtípust. Az AI ezt a vázat tölti fel a te adataiddal — így nem üres lapról indulsz, hanem egy iparági standardból, amit testre szabsz.

3. Adatok megadása

• Vállalkozás neve (kötelező) — pl. "Kovács Fodrászat"
• Pontosítás — pl. "férfifodrászat a belvárosban" (általános sablonnál kötelező)
• Szolgáltatások — vesszővel elválasztva, pl. "Női hajvágás, Festés, Melír"
• Elérhetőségek — telefon, cím, nyitvatartás
• Hangnem — hivatalos, barátságos, vagy játékos
• Színpaletta — a sablon ajánl egyet, de mind a 8 közül választhatsz

4. Generálás

A "Weboldal generálása" gombra kattintva az AI létrehozza a weboldal tartalmát. Ez tartalmazza a szövegeket, szekciók struktúráját, és a választott stílust. A generálás 10-30 másodpercet vesz igénybe.

AI generálás

A NEXUS Site Builder az előfizetésed szintjéhez tartozó AI modellt használja a tartalom generálásához:

Újragenerálás

Ha nem tetszik az eredmény, a toolbar-ban az "Újragenerálás" gombbal új tartalmat kérhetsz — ugyanazokkal az onboarding válaszokkal. Az előző verzió a Ctrl+Z-vel visszahozható.

A szerkesztő felület

A szerkesztő három fő részből áll:

Bal panel — Szekciólista & Stílusok

Két fül van:

• Szekciók — az összes szekció listája, sorrendben. Kattints egy szekcióra a szerkesztéséhez.
• Stílusok — globális beállítások: színpaletta, betűtípusok, egyéni színek, vállalkozás adatai, SEO, footer, social linkek.

Aktív szekció vezérlői

Amikor egy szekciót kiválasztasz, megjelennek a műveleti gombok:

• ▲ / ▼ — szekció mozgatása fel/le
• ⧉ — szekció duplikálása
• ● — szekció ki/bekapcsolása (látható/rejtett)
• ✕ — szekció törlése

Középső panel — Szekció szerkesztő

A kiválasztott szekció mezőit szerkesztheted itt. Minden szekciótípusnak saját mezői vannak. Alul a szekció stílus vezérlők találhatók: háttérszín, szövegszín, igazítás, padding, margin.

Jobb panel — Élő előnézet

A weboldal valós idejű előnézete. Minden változtatás azonnal megjelenik. A toolbar-ban választhatsz Desktop vagy Mobil nézet között.

Hero / Főszekció

A weboldal tetején megjelenő, figyelemfelkeltő szekció. Ez az első, amit a látogató lát.

Mezők

• Főcím — a legfontosabb üzenet, nagy betűmérettel
• Alcím — kiegészítő szöveg, kisebb betűmérettel
• Gomb szöveg — CTA gomb felirata, pl. "Foglaljon időpontot"
• Gomb link — hová mutasson a gomb (pl. #kapcsolat)
• Elrendezés — Bal / Közép / Jobb igazítás
• Háttérkép — feltölthetsz képet, ami a hero háttere lesz (gradiens overlay-vel)

Szolgáltatások

Szolgáltatásaid vagy termékeid kártya-formátumú megjelenítése.

Mezők

• Szekció cím — pl. "Szolgáltatásaink"
• Alcím — opcionális kiegészítő szöveg
• Oszlopok — 2, 3 vagy 4 oszlopos elrendezés

Kártyák mezői

• Név — szolgáltatás neve
• Leírás — rövid bemutató szöveg
• Ár — opcionális, pl. "5 000 Ft"
• Ikon — 25 SVG ikon közül választhatsz (olló, autó, szív, stb.)

A "+ Szolgáltatás hozzáadása" gombbal bővítheted a listát, a kártyák "Törlés" gombjával csökkentheted.

Rólunk

Bemutatkozó szekció szöveggel és opcionális képpel.

Mezők

• Cím — pl. "Rólunk"
• Szöveg — a vállalkozás története, értékei
• Elrendezés — Szöveg bal (kép jobb), Szöveg jobb (kép bal), Csak szöveg
• Kép — feltölthető kép a szöveg mellé

Galéria

Képgaléria rács elrendezésben. Ideális munkáid, termékeid, üzleted bemutatásához.

Mezők

• Cím és alcím
• Oszlopok — 2, 3 vagy 4 oszlop
• Képek — feltölthető képek, mindegyikhez alt szöveg megadható

Vélemények

Ügyfélvélemények megjelenítése csillagos értékeléssel.

Mezők véleményenként

• Név — az ügyfél neve
• Pozíció — opcionális, pl. "Visszatérő vendég"
• Vélemény — a vélemény szövege (idézőjelben jelenik meg)
• Értékelés — 1-5 csillag
• Profilkép — opcionális fotó

Csapat

Csapattagok bemutatása fotóval, pozícióval, elérhetőséggel.

Mezők tagonként

• Profilkép — kör alakban jelenik meg
• Név és Pozíció
• Bio — rövid bemutatkozás
• Telefon és Email — kattintható linkekként jelennek meg

Kiemelt ajánlatok

Akciók, kedvezmények kiemelésére. Áthúzott eredeti ár + akciós ár + badge.

Mezők ajánlatonként

• Ajánlat neve és Leírás
• Eredeti ár — áthúzva jelenik meg
• Akciós ár — kiemelt, nagy betűkkel
• Badge — pl. "AKCIÓ", "-20%", "ÚJ" — sarokba forgatva jelenik meg

GYIK (Gyakran Ismételt Kérdések)

Lenyíló kérdés-válasz lista. A látogatók kattintással nyithatják ki a válaszokat.

Mezők kérdésenként

• Kérdés — a kattintható fejléc
• Válasz — a lenyíló tartalom

CTA Banner

Figyelemfelkeltő, cselekvésre ösztönző sáv. Ideális a weboldal közepén vagy vége felé.

Mezők

• Főcím — pl. "Készen áll?"
• Szöveg — rövid ösztönző szöveg
• Gomb szöveg és Gomb link
• Háttérszín — egyéni szín a CTA sávnak

Statisztikák

Számok, eredmények kiemelése nagy, figyelemfelkeltő formátumban.

Mezők statisztikánként

• Érték — pl. "500+", "10 év", "98%"
• Címke — pl. "Elégedett ügyfél", "Tapasztalat"

Árazás

Árcsomagok összehasonlítása kártya formátumban. Kiemelt csomag nagyobb és szegélyezett.

Mezők csomagonként

• Csomag neve, Ár, Időszak (pl. "/hó")
• Funkciók — soronként egy feature, pipa ikonnal
• Kiemelt — checkbox, a kiemelt csomag nagyobb és szegélyezett
• Gomb szöveg

Kapcsolat

Elérhetőségek és opcionális kapcsolatfelvételi űrlap.

Mezők

• Cím és Szöveg
• Űrlap megjelenítése — be/ki kapcsoló
• Formspree endpoint — ha be van kapcsolva az űrlap (ld. Formspree szekció)

Az elérhetőségek (telefon, email, cím, nyitvatartás) a Stílusok → Vállalkozás panelből jönnek.

Partner logók

Referenciák, partnerek logóinak megjelenítése. Szürkeárnyalatos alapállapot, hoverre színes.

Mezők logónként

• Logo — feltölthető kép
• Alt szöveg — a partner neve
• Link URL — opcionális, kattintható link

Színpaletták

8 előre definiált paletta közül választhatsz a Stílusok panelben:

Egyéni színek

A paletta alatt egyéni color picker-ekkel finomhangolhatsz minden színt: primary, secondary, accent, background, surface, text, textMuted.

Betűtípusok

Két betűtípust állíthatsz: Címsor és Szövegtörzs. Elérhető Google Fonts:

• Inter — modern, tiszta (alapértelmezett)
• Open Sans — olvasható, széles körben használt
• Roboto — Google Material stílus
• Playfair Display — elegáns serif
• Montserrat — geometrikus, erős
• Lora — klasszikus serif
• Poppins — kerekded, barátságos
• Raleway — könnyű, légies

Szekció stílusok

Minden szekció szerkesztőjének alján találod a stílus vezérlőket:

• Háttérszín — color picker, "X" gombbal visszaállítható az alapértelmezettre
• Szövegszín — felülírja a szekció szövegszínét
• Szöveg igazítás — Bal / Közép / Jobb
• Padding felül/alul — belső térköz, pl. "4rem", "80px"
• Margin felül/alul — külső térköz

Ikonok

A Szolgáltatások szekció kártyáin 25 SVG ikon közül választhatsz:

Az ikonok Lucide stílusúak, 24x24-es SVG formátumban, és automatikusan a primary színt kapják.

Képek kezelése

Támogatott formátumok

• WebP — ajánlott, kis méret, jó minőség
• AVIF — a legkisebb fájlméret
• PNG — átlátszó háttér esetén
• JPEG — fotók

Méretkorlát

Maximum 5 MB fájlonként.

Hol használhatsz képeket?

• Hero háttérkép
• Rólunk szekció kép
• Galéria képek
• Csapattagok profilképe
• Vélemények profilképe
• Partner logók
• Vállalkozás logó

SEO & meta adatok

A Stílusok → SEO / Meta szekcióban szerkesztheted:

• Oldal címe — a böngésző tab-ban megjelenő szöveg és a Google találatoknál
• Meta leírás — a Google találatokban megjelenő rövid leírás (max. 160 karakter ajánlott)

Az Open Graph (og:title, og:description) meta tag-ek automatikusan generálódnak ezekből.

Social media linkek

A Stílusok → Footer / Social szekcióban adhatsz hozzá social media linkeket. Támogatott platformok:

• Facebook, Instagram, TikTok, YouTube, LinkedIn, X (Twitter), GitHub, Weboldal

A linkek SVG ikonokkal jelennek meg a footer-ben, hoverre kiemelődnek a primary színnel.

Hogyan adj hozzá?

1. Kattints a "+ Social link" gombra
2. Válaszd ki a platformot a legördülőből
3. Másold be a teljes profil URL-t (pl. https://facebook.com/vallalkozasod)

Kapcsolati űrlap (Formspree)

A Kapcsolat szekció űrlapja a Formspree szolgáltatással működik. Ez egy ingyenes form backend — nem kell saját szervert üzemeltetned.

Beállítás lépései

1. Regisztrálj a formspree.io-n (ingyenes terv elegendő)
2. Hozz létre egy új form-ot a dashboardon
3. Másold ki az endpoint URL-t — formátum: https://formspree.io/f/xxxxx
4. A Builder-ben válaszd ki a Kapcsolat szekciót
5. Illeszd be az endpoint URL-t a "Formspree endpoint" mezőbe

Letöltés & hosting

Letöltés

A toolbar-ban a "Letöltés" gombra kattintva egy önálló .html fájlt kapsz. Ez tartalmazza:

• Az összes CSS-t inline (nincs külső fájl)
• Google Fonts betöltést
• Reszponzív megjelenést (mobil + desktop)
• Smooth scroll navigációt
• Mobil hamburger menüt

Hol hostolhatod?

A letöltött HTML fájl bárhol elhelyezhető:

• GitHub Pages — ingyenes, egyszerű
• Netlify — ingyenes tier, drag & drop deploy
• Vercel — ingyenes, automatikus HTTPS
• Bármely web hosting — FTP-vel feltölthető
• Saját szerver — Apache, Nginx

Billentyűparancsok

GYIK (általános)