Vissza a kurzushoz
6. Modul

LandingSite.ai: Lépésről lépésre elkészítjük az oldalt

Nem dizájnolunk, nem kódolunk – 1 működő mobil-first landinget rakunk össze a szövegekkel.

A modul végére legyen:

  • 1 generált landing (váz + szekciók)
  • beillesztett saját HERO (Modul 3)
  • beillesztett CTA rendszer + microcopy (Modul 4)
  • beillesztett szekció-sorrend (Modul 5)
  • mobilon ellenőrzött, "kész 1. verzió"

0) Mielőtt elkezded

(kell 3 dolog)

1

Fájdalom + Hero

1 kiválasztott fájdalom + hero headline (Modul 2–3)

2

CTA + Microcopy

1 CTA gomb szöveg + microcopy (Modul 4)

3

Szekció-váz

A szekció-váz (Modul 5)

Szabály:

Ha ez nincs meg, ne nyisd meg a LandingSite.ai-t. Előbb készítsd elő.

1 óra menetrend

Két út: gyors vagy kényelmes

Gyors út (1 óra)

0–10
perc

Landing létrehozása + alap beállítás

10–25
perc

Master prompt → teljes oldal generálás

25–40
perc

A 3 dolog javítása (Hero / Problem / CTA)

40–55
perc

Finomhangoló prompt (rövidítés)

55–60
perc

Mobil ellenőrzés → kész

Normál út (kényelmesebb)

Hozd létre a landinget

Futtasd le a Master Promptot

Nézd meg, mit generált

Másnap javítsd a 3 dolgot

Futtasd le a finomhangoló promptot

Mobil ellenőrzés

Ha nem szereted az időnyomást, oszd szét 2-3 napra

1) Landing létrehozása

(alap beállítás)

  1. 1

    Nyisd meg a LandingSite.ai-t

  2. 2

    Hozz létre egy új landing oldalt

  3. 3

    Válaszd az üres / egyszerű sablont

  4. 4

    Ne animálj túl, ne bonyolíts

Cél:

gyors betöltés, tiszta fókusz.

2) MASTER PROMPT

Teljes oldal generálása (első váz)

Master Prompt – Másold be a LandingSite.ai-ba

Készíts egy mobil-first landing oldalt magyarul.

Cél:

A látogató kérjen egy ingyenes előzetes landing sablont.

Szekciók sorrendje (NE változtasd):

1) HERO (headline, subheadline, CTA, microcopy, mini proof)

2) Social proof (1–2 sor)

3) Problem / Agitate (1 mondat + 3–4 bullet + tétmondat)

4) Solution + unique mechanism (rövid)

5) Benefits (3 bullet) + Features (1–2 bullet)

6) How it works (3 lépés)

7) FAQ (5 kérdés + rövid válasz)

8) Záró CTA (összefoglaló + CTA + microcopy)

9) Footer (minimal)

Design szabályok:

- mobil-first

- rövid blokkok, nagy betű

- prémium, letisztult layout

- több CTA, de mind ugyanarra a célra mutasson

- minimal, gyors, átlátható

Nyelv:

Magyar

Ez a prompt létrehozza a teljes landing vázat. Utána csak a Hero, Problem és CTA részeket finomítod.

3) A 3 dolog, amihez HOZZÁNYÚLSZ

(és semmi máshoz)

A generált oldalon CSAK EZEKET javítsd:

HERO

Headline + CTA

PROBLEM

Bullet pontok

CTA-k

Egységes gomb

A

HERO

  • cseréld ki a headline-t a sajátodra (Modul 3)
  • cseréld ki a subheadline-t a sajátodra
  • CTA gomb szöveg legyen a sajátod
  • tedd be a microcopy-t
  • mini proof 1 sor
B

Problem blokk

  • max 3–4 bullet
  • konkrét, rövid mondatok (Modul 2-ből)
  • legyen 1 tétmondat a végén
C

CTA-k

  • minden CTA ugyanarra a lépésre mutasson
  • ne legyen más link / más cél

Mind ugyanoda mutasson:

Hero CTA
Problem CTA
Záró CTA

Szabály:

Ha túl sok mindent javítasz egyszerre, elrontod. Előbb legyen kész 1. verzió.

4) Finomhangoló prompt

(ha túl hosszú / túl általános lett)

Finomhangoló Prompt

Rövidítsd az oldal szövegeit 30–40%-kal.

Legyen több konkrét, hétköznapi mondat.

Kerüld a marketing buzzwordöket.

Minden szekció maradjon meg, de legyen tömörebb.

A CTA mindenhol ugyanaz a cél legyen: "ingyenes előzetes sablon kérése".

A hero legyen max 2 sor headline és 1 mondat subheadline.

Ezt a promptot akkor használd, ha az első generált verzió túl hosszú vagy túl marketinges lett.

Túl hosszú (rossz)

"Mi vagyunk a piacvezető megoldás a következő generációs digitális transzformációhoz..."

→ 15 soros bekezdés

Tömör (jó)

"Landing oldalt készítünk. Mobilra optimalizálva. 1 óra alatt."

→ 3 rövid mondat

Kötelező lépés

5) Mobil ellenőrzés

(KÖTELEZŐ)

Mielőtt késznek mondod:

Nézd meg mobil nézetben

Kapcsold át a mobil view-ra a szerkesztőben

Görgesd végig

Végigscrollozás elejétől a végéig

Kérdezd meg magadtól:

"3 másodperc alatt értem, miről szól?"

"Tudom, mit kell kattintanom?"

"Nem túl sok a szöveg?"

"Ugyanoda visz minden CTA?"

Ha igen → kész az 1. verzió.

Publikálhatod vagy megoszthatod ügyféllel

Így nézd meg mobilon

6) Gyakori hibák

(NE csináld)

Túl sok szöveg

(mobilon halál)

Több CTA cél

(szétcsúszik)

"Majd később finomítom"

(nem fogod)

Technikai részletek magyarázata

(unalmas)

Desktop-first gondolkodás

(mobilon dől el)

7) Hibakeresés

(ha rosszat generál)

Ha a LandingSite.ai túl "weboldal" jellegűt csinál

(menü, sok oldal)

Megoldás:

Kérd: "1 oldalas landing legyen, menü nélkül, egy CTA céllal"

Ha túl sok színt használ

Megoldás:

Kérd: "minimal palette: fekete/fehér + kékes-lila akcent, kevés gradient"

Ha túl hosszú szöveget ír

Megoldás:

Kérd: "rövidíts 40%-kal, maradjon csak a lényeg"

Ha túl általános

Megoldás:

Kérd: "konkrét szituációk, mintha az ügyfél mondaná"

Pro tipp:

Ha nem tetszik az eredmény, ne javítgasd kézzel órákig. Inkább futtasd le újra a promptot módosított paraméterekkel.

Gyakorlat

Mini feladat

15–25 perc – checklist

Becsült idő: 15–25 perc
Már majdnem kész!

A teljes folyamat

Generálás → Finomítás → Mobil check

Generálás

Master Prompt
→ teljes oldal

Finomítás

Hero + Problem
+ CTA javítás

Mobil check

Ellenőrzés
→ kész

Teljes idő: 15–60 perc (tapasztalattól függ)

Landing kész! 🎉

Most már van egy működő landing oldal vázad.
A következő modulban megtanulod, hogyan add el ezt az első ügyfeleknek.

Következő lépés:

Modul 7 – Eladás

Hogyan add el ezt az első ügyfeleknek (0→1)

6 / 7 modul