Sok kisvállalkozónak van weboldala, de kevés az, ami valóban el is ad. A különbség általában nem a dizájnban rejlik, nem az árban, és nem abban, hogy Divi-t vagy Elementor-t használsz. A különbség a felépítésben van.
Most megmutatom, hogyan kell felépíteni egy landing oldalt WordPress-ben, ami valóban ráviszi a látogatót arra, hogy cselekedjen – legyen az időpontfoglalás, ajánlatkérés vagy vásárlás. Ugyanezt a struktúrát mutatom be részletesen ebben a YouTube videómban is, érdemes megnézni:
Mi az a landing oldal és miért nem elég egy sima „Rólunk” oldal?
Egy sima weboldalon a látogató körbebolyong: megnézi a menüt, rákattint a blogra, elolvassa az „Rólunk” szöveget, majd bezárja a lapot. Nincs egyértelmű útvonal, nincs egyértelmű cél.
A landing oldal ezzel szemben egyetlen dologra fókuszál: arra, hogy a látogató megtegyen egy konkrét lépést. Minden szekció, minden gomb, minden szöveg ezt a célt szolgálja.
Ha szolgáltatást adsz el, tanfolyamot, vagy bármilyen digitális terméket – kell egy landing oldal.
A landing oldal felépítése lépésről-lépésre
Mielőtt nekiállsz Divi-ben (vagy bármilyen más oldal építővel) kattintgatni, tervezd meg a landing oldal struktúráját. Ezt a Excaldraw segítségével könnyedén megtervezheted. A cél, hogy előre lásd, mi után mi következik és ne kelljen menet közben kitalálni.
Az alábbi sorrendet én is követem a saját oldalaimon, és ez az, ami működik:
1. Hero szekció – az első 5 másodperc
Ez a legfontosabb rész az egész oldalon. Mindössze 5 másodperced van arra, hogy a látogató figyelmét megragadd, megértesse vele, hogy mit kínálsz és meggyőzd arról, hogy maradjon.
A legjobban bevált elrendezés: kétoszlopos hero, bal oldalt szöveg, jobb oldalt kép (vagy videó).
WordPress tanfolyam kisvállalkozóknak – ez a saját tanfolyamom
A szöveg felépítése:
Adj egy kisebb alcímet a főcím fölé vagy alá, ami azonnal megmondja, miről szól az oldal. Például: WordPress tanfolyam vagy Konyhabútor Szegeden.
A főcím (H1) legyen nagy, félkövér és egyértelmű. Ne fogalmazz körül – mondd el, kinek szól és miben segítesz. Például:
- Készítsd el a saját vállalkozásod weboldalát (vállalkozóknak szóló tanfolyamnál)
- Konyhabútor asztalos Budapest és környékén (helyi szolgáltatónál)
Minél speciálisabb a fogalmazás, annál jobban szűröd a nemideális látogatókat, és annál jobban megfogod az ideálisakat.
A főcím alá kerüljön egy rövid, 2-3 soros bekezdés. Fogalmazd meg a látogató problémáját, vagy emeld ki a te szolgáltatásod legfontosabb előnyét. Nem kell hosszú – a lényeg, hogy ráismerjen magára az ember.
Kép: Legjobb egy referenciakép, ahol te dolgozol, vagy egy kész munkád látható. Ez egyszerre bizalomépítés és referencia. Ha digitális terméket adsz el, egy rövid bemutató videó sokat tud hozzáadni.
Gomb: Minden hero szekció alatt legyen gomb. De ne olyat írj rá, hogy „Kattints” vagy „Tudj meg többet” – ez semmit nem mond. Írj cselekvésre ösztönző szöveget, ami utal arra, mit kap a látogató. Például:
- Elkészítem a weboldalam
- Kérek egy ingyenes konzultációt
- Megnézem az árakat
A gomb szövege az egyik legfontosabb dolog az egész oldalon – érdemes tesztelni, kísérletezni vele.
2. Vélemények – rögtön a hero után
Sokan a landing oldal végére teszik a véleményeket. Én azt javaslom: tedd az elejére is, közvetlenül a hero szekció alá.
Miért? Mert ha valaki érdeklődéssel görget lejjebb az első szekció után, azonnal látja, hogy mások már elégedetten vásároltak tőled. Ez az a pillanat, amikor a bizalom kialakul.
A vélemények legyenek valódiak: kép, név és konkrét szöveg. Az anonim véleményeket az emberek nem veszik komolyan. 2-3 vélemény az elején tökéletesen elég – a többit szórd el az oldal többi részén is.
3. Probléma / Megoldás szekció
Ez a szekció az egyik legjobban teljesítő elem egy landing oldalon, mégis sokan kihagyják.
A cél: megmutatni a látogatónak, hogy pontosan érted az ő helyzetét és van rá megoldásod.
Probléma / Megoldás szekció a salespup.com oldalamon
Bal oldalt sorold fel a problémákat (azokat a helyzeteket, amikben most van a látogatód). Jobb oldalt mutasd meg, hogy te miben segítesz. Vizuálisan is lehet játszani vele: piros X-ek a problémáknál, zöld pipák a megoldásoknál.
Például konyhabútor asztalosként:
- ❌ Hosszú várakozási idő más asztalosoknál
- ✅ Nálam már 3-4 héten belül elkészül és beépítik
Ezt a szekciót érdemes a te saját szavaidra szabni. Gondold végig: mi az, ami miatt a te ügyfeleid általában hezitálnak? Mi az, amitől félnek? Erre adj választ.
4. Szolgáltatás vagy termékbemutató szekció
Itt mutatod be részletesen, hogy mit kapsz a vásárlás vagy megrendelés után.
Az elrendezés itt is lehet kétoszlopos: bal oldalt szöveg, jobb oldalt kép. Ha sok mindent tudsz felsorolni, akkor több képet is tehetsz egymás alá.
Ha tanfolyamot adsz el, mint én a WordPress tanfolyamomon, pontokba szedve sorolod fel az összes tartalmat, tematikát, videókat. Ha szolgáltatást, akkor a munkamódszeredet, a folyamatot.
WordPress tanfolyam bevezető videói felsorolva
Ennél a szekciónál is tegyél gombot, ahol lehetséges!
5. Rólam szekció – de nem unalmasan
A rólam rész rengeteg oldalon el van rontva. Az a tipikus hiba, hogy száraz, tárgyilagos szöveget írnak: „2015 óta foglalkozom asztalossággal, több száz bútort készítettem…”
Ez nem épít bizalmat. Az emberek érzelmekre reagálnak.
Fogalmazd meg inkább sztori formájában. Miért csinálod, amit csinálsz? Milyen hibákon mentél át? Mi az, amit megtanultál? Ha van benne egy kis személyes rész – akár a magánéleted, a motivációd – az sokat ad hozzá.
Én például a weboldal auditos oldalamon azzal kezdem, hogy „Évekig olyan céges weboldalakat készítettem, amik üzletileg gyengék voltak. Vagyis nem hoztak ügyfeleket/vásárlókat…”. Ez önkritika, de egyben hitelességet is ad – és rögtön megindokolom, miért váltottam.
Rólam szekció a weboldal audit oldalon
Kép, név, rövid bemutatkozó – és érzelem. Ettől lesz emberi az oldal.
6. Ár szekció
Nem minden landing oldalon kötelező, de ha van fix árad, mindenképpen tedd ki.
Online szolgáltató, digitális termék, tanfolyam – ezeknél tökéletesen működik az átlátható ár megjelenítése. Ha több csomagod van, készíts kétoszlopos elrendezést vagy többet, és emeld ki az ajánlott opciót.
Weboldal audit ár szekcióm
Ha nincs egyértelmű árad (pl. bútorasztalos, ahol mindent egyedi árajánlattal dolgozol), hagyd ki ezt a szekciót – helyette egy kapcsolati űrlapra vagy ajánlatkérő gombra fókuszálj.
Az ár alá is kerüljön gomb, ahol vásárólhat vagy kapcsolatot vehet fel.
7. GYIK – Gyakran Ismételt Kérdések
Az ár szekció után tegyél ki egy GYIK részt. Ez azokat a kérdéseket válaszolja meg, amik miatt az emberek általában még hezitálnak a vásárlás előtt.
WP tanfolyamom GYIK szekciója
Divi-ben erre ott a harmonika (accordion) elem: a látogató rákattint a kérdésre, és megjelenik a válasz. Rendezetten, kompaktan.
A kérdések legyenek valódiak – olyanok, amiket tényleg felteszik az érdeklődők. Ez is bizalomépítés: azt mutatja, hogy ismered a célközönségedet.
8. Header és Footer – minimalista megközelítés
A landing oldal fejlécében ne legyen teljes menü, ami elvezeti a látogatót a blogra, a kapcsolati oldalra vagy máshova. A cél, hogy az oldalon maradjon.
A legjobb megoldás: az oldal saját szekciói közötti navigáció. A header menüpontjai csak az oldalon belüli részekre mutassanak (anchor linkekkel), például: Tartalom | Ár | GYIK | Vásárlás.
A láblécben elég egy egyszerű copyright sor és az adatkezelési tájékoztató linkje. Semmi más. Minél kevesebb lehetőség van az oldalról „kiszökni”, annál valószínűbb, hogy a látogató a célodat megvalósítja.
Egy kis tipp: a copyright évszámot állítsd be Divi-ben automatikus dátummezőként – így minden évben automatikusan frissül, nem kell hozzányúlnod.
Összefoglalás: a landing oldal felépítése
- Hero szekció: főcím, rövid szöveg, kép/videó, gomb
- Vélemények: rögtön a hero alatt, képpel és névvel
- Probléma / Megoldás: a látogató fájdalompontjai és a te megoldásaid
- Szolgáltatás: részletes leírás, képek, gombok
- Rólam: emberi, sztorialapú bemutatkozás
- Ár szekció: ha van fix árad
- GYIK: harmonika elem, valódi kérdésekkel
- Header és Footer: minimalista, csak oldalon belüli navigáció
Szeretnéd megtanulni a weboldal készítés többi részét is?
Ha a teljes WordPress weboldaladat saját kezűleg szeretnéd felépíteni nézd meg a WordPress tanfolyamomat. Megmutatom, hogyan kell Divi-vel weboldalt készíteni nulláról, beleértve a kapcsolati űrlapok beállítását, a dizájnt és mindent, ami egy működő vállalkozói weboldalhoz kell.
Tanulj saját tempódban, videókon keresztül és végre legyen olyan weboldalad, ami nem csak szép, hanem elad is.
Budai Kristóf
Helló, Budai Kristóf vagyok, WordPress weboldal készítő. A célom az, hogy mindenkinek profi és jól működő weboldala legyen. Ezért is írom ezt a blogot, hogy minél több embernek tudjak segíteni.