Főoldal anatómia

Az első benyomás. 5 másodperc alatt eldől, hogy a látogató tovább megy-e. Top bar, hero, 3 service preview, vélemény, CTA, footer.

Anatómia · szöveges vázlat — szakaszról szakaszra

Egy hatékony Főoldal anatómiája

Cél: első benyomás + átirányítás. NEM ad el — TOVÁBB visz. 5 másodperc alatt tudja a látogató, MIT csinálsz, KINEK, MILYEN EREDMÉNNYEL.

Top Bar (nav)

Foglalás

Logo + 4 link + 1 CTA gomb. Az ügyfél innen tovább megy.

Hero

A LEGFONTOSABB. 1 mondat: mit csinálsz, kinek, milyen eredménnyel.

CTA #1

Vegyük fel a kapcsolatotSzolgáltatások

Kontakt vagy foglalás. Ne „tudj meg többet” — konkrét akció.

Mit csinálok

1-2 bekezdés. NE részletes — átirányít a Szolgáltatás oldalra.

Szolgáltatások

Csomag A

39 e Ft / hó

Részletek

Csomag B

120 e Ft / hó

Részletek

Csomag C

390 e Ft / hó

Részletek

3 service preview kártya. Részletes leírás a Szolgáltatás oldalon.

Vélemények

— Vezetéknév Keresztnév, Cégnév

1-2 vélemény: konkrét számok, név + cég. Anonim = NEM vélemény.

CTA #2

Foglalj 30 perces hívást

Záró CTA — utolsó dobás. Itt EGY nagy gomb, semmi más.

Footer

© 2026

AdatvédelemÁSZFKapcsolat

Jogi linkek + elérhetőség. NE legyen tele social linkekkel.

Hogyan épül fel?

A Főoldal az első benyomás: 5 másodperc alatt eldől, hogy a látogató tovább megy-e. Szolgáltató kezdő vállalkozónak ez az indulópont — új weboldal építésekor, vagy zsúfolt régi főoldal egyszerűsítésekor.

A 6 építőelem sorrendben:

• Top bar — logó + 4 menüpont + 1 CTA
• Hero — 1 mondatos pozícionálás + alcím + elsődleges CTA
• 3 szolgáltatás-preview kártya
• 1-2 vélemény (vélemény)
• Záró CTA-blokk
• Footer

Azért működik, mert a látogató lineárisan görget: a hero a „mit csinálsz, kinek?" kérdést válaszolja meg, a 3 kártya megmutatja a választékot, a vélemény bizalmat ad, a záró CTA elkapja a meggyőzött látogatót.

Magyar piaci specifikum: kerüld a kreatív, homályos szlogeneket („Megoldjuk az életed") — a magyar látogató elsőre érti, mit kínálsz, vagy elnavigál. Tipikus hiba: 8-10 szekciós főoldal stock fotókkal, animációkkal — maradj a 6 építőelemnél.

Mit kell tudnod erről az oldalról?

Mire való?

A Főoldal a látogatóid ELSŐ benyomása. NEM önmagában értékesít — az a feladata, hogy 5 másodpercben tudják, MIT csinálsz, és tovább menjenek a megfelelő alá-oldalra (Szolgáltatások a részletekért, Kapcsolat a foglalásért, Rólam a bizalomért).

Főrészek a rajzon (felülről lefelé)

• Top bar: Logo + nav (Rólam, Szolgáltatások, Kapcsolat) + CTA gomb
• Hero: 1 mondatos pozícionálás + alcím + 1 CTA
• „Mit csinálok" rövid bemutató (1-2 bekezdés)
• 3 szolgáltatás preview (részletek a Szolg. oldalon)
• Vélemény: 1-2 vélemény
• Záró CTA: foglalás / kapcsolat
• Footer: jogi linkek (Adatvédelem, ÁSZF)

Mikor pont ezt használd?

• Minden szolgáltató vállalkozó — ez a kezdőlap, mindenkinek kell
• Ha új weboldalt indítasz — itt kezdd
• Régi, túlbonyolított weboldalt egyszerűsíteni

Mikor NE ezt válaszd?

• Egyetlen kivétel — soha. Még az e-commerce-nek is van „rólunk" oldala kezdőlapként
• Kampány-landing helyett ne főoldalt használj — más struktúra

Leggyakoribb hibák

• Mindent egy oldalon: 10 szekció a főoldalon — zavaros, sehol nem üt
• Nincs 1 mondatos pozícionálás a hero-ban — a látogató nem érti
• Nincs egyértelmű CTA (vagy 5 különböző) — szétszórja a fókuszt
• Stock fotó vagy generikus illusztráció — bizalom-érték nulla

Konverziós KPI — mit mérj?

Bounce rate: 50–70% normál. Az érdeklődők átkattintanak a Szolgáltatások (30–50%) vagy a Kapcsolat (5–15%) oldalra. Mérd: melyik szekció után fordulnak vissza (= ott unalmas / zavaros). Hero CTA klikk-arány: 5–15% jó.

Mikor érdemes használni?

• Új weboldal építésekor — ez az indulópont
• Régi főoldalt egyszerűsíteni

AI Prompt sablon

Másold AI ügynöknek

Ez a sablon ezt a modult építi fel a saját vállalkozásodra. Töltsd ki a{{placeholder}}változókat, és add át egy AI ügynöknek (Claude, GPT, Gemini).

Te egy magyar konverzió-orientált copywriter és webdesigner vagy magyar mikrovállalkozói kontextusban (ügyvéd, könyvelő, ingatlanos, coach, fotós, orvos, tréner). Segítsd a felhasználót megépíteni a saját Főoldalának anatómiáját, amely 5 másodperc alatt eldönti, hogy a látogató tovább megy-e.

VÁLLALKOZÁS KONTEXTUS (a felhasználó tölti):
- Iparág: {{iparag}}
- Ideális ügyfél (ICA): {{ica}}
- Fő ajánlat: {{ajanlat}}
- Átalakulás vagy eredmény: {{atalakulas_vagy_eredmeny}}
- Megkülönböztető érték (USP): {{usp}}
- 3 fő szolgáltatás: {{szolgaltatasok}}
- Tipikus ügyfél kifogások: {{tipikus_kifogasok}}
- Hivatalos cím / kamarai tagság (ha van): {{szakmai_cim}}

FELADAT — Főoldal-anatómia 7 szekcióban:
1. Top bar — logo, navigáció (4-5 link), elsődleges CTA gomb 3 ALTERNATÍVA
2. Hero — H1 értékígéret (1 mondat, eredmény-fókusz, 3 ALTERNATÍVA), H2 alcím (a kifogást előre leszereli), elsődleges + másodlagos CTA, vizuális javaslat
3. 3 service preview — szolgáltatásonként 1 cím + 1 mondat eredmény-leírás + 1 link
4. Bizalom-elem — szakmai cím (Dr., okl., MÜK / NAV / Kamara tagság), 2-3 ügyfél-logo
5. Kiemelt testimonial — magyar név, pozíció, mérhető eredmény (mértéktartás, nincs túlzás)
6. Záró CTA szekció — egyetlen fókuszált felhívás (kockázatcsökkentett, „Ingyenes" / „Nincs kötelezettség")
7. Footer — kapcsolat, social, GDPR + Adatkezelés + Süti + Impresszum link

OUTPUT:
- Markdown szekciók sorrendben, magyar szöveg
- 3 ALTERNATÍV headline + 3 ALTERNATÍV elsődleges CTA javaslat
- Iparág-specifikus példa: ügyvéd — „Cégindítás 14 nap alatt"; könyvelő — „NAV-mentes hónapok"; ingatlanos — „45 nap alatt eladva"; coach — „90 napos transzformáció"; fotós — „2 órás fotózás, 48 óra szállítás"; orvos — „Várólista nélkül"; tréner — „12 hét alatt -8 kg"
- Magyar piaci specifikum: GDPR, mértéktartó számok, magyar szkepticizmus kezelése, kamarai tagság trust-elemként

TE JÖSSZ — válaszolj 3 kérdésre:
1. Mi az 1 mondatos eredmény, amit az ügyfeled 30-90 napon belül lát?
2. Melyik a top 1 kifogás, amit a hero alcímében előre le kell szerelni?
3. Milyen szakmai cím / tagság / ügyfél-logo szerepelhet a trust-stripben?

NE ÍRD meg a teljes copyt — szekcióvázlatot adj 3 alternatívával minden főelemre.

Hasznos források

• copyhackers.comCopyhackers — Conversion copywriting archívumJoanna Wiebe 200+ cikkes ingyenes hub — hero formula, fejléc-írás, AIDA struktúra. Magyar fordító nélkül is olvasható.
• tailwindcss.comTailwind Plus TemplatesSalient, Spotlight, Studio, Primer — 13 prémium Next.js + Tailwind sablon. Mindegyik a 6-építőelem mintát követi.
• github.comcruip — Tailwind landoló oldal (free)Ingyenes, Tailwind v4 + Next.js indító sablon. 4.4k csillag, aktívan karbantartva. Klónozd, tedd Vercelre, kész is.

Heti feladat

Auditáld a jelenlegi főoldaladat a 6-blokkos főoldal-anatómia szerint, és listázd 3 hiányzó elemet.

• Hero + 3 érték-bullet + 1 vélemény — megvan?
• 1 CTA a hero-ban, 1 a végén — vagy össze-vissza?
• Mobile-on a hero 1 ujjmozdulatra olvasható?