Kevés olyan online marketingeszköz van, amelynek iparágfüggetlenül vitathatatlan a jelentősége és egyúttal tűpontosan tudjuk mérni a hatékonyságát.

A landing page ilyen eszköz.

Szinte mindegy, hogy egy cipőbolt webshopjának termékoldaláról, szoftverfejlesztő cég havi előfizetési rendszerben működő programjának sales page-éről vagy nagy értékű irodaszék érkezőoldaláról van szó. A digitális meggyőzés és lezárás vezető online platformja a landing page.

A webanalitikai eszközökhöz való hozzáférésnek köszönhetően ráadásul a hatékonyság megítélése sem vesz igénybe pár percnél többet. A legfontosabb mérőszámokról (oldalon eltöltött idő, visszafordulási arány és legfőképp a konverziós arány) ugyanis valósággal ordít egy landing page sikeressége vagy épp sikertelensége.

Életbevágó, hogy marketingesként képes legyél:

• jó minőségű
• jól konvertáló
• és esztétikus landing oldalakat építeni.

Mindezt egyszerűen, hatékonyan, nagy mennyiségben, reszponzívan és akár fejlesztői segítség nélkül.

Ezért ebben a cikkben a legnépszerűbb tartalomkezelő (CMS) rendszer, a WordPress zászlóshajó sablonját, a Divit vesszük górcső alá. Mire végzel az olvasással, égni fogsz a vágytól, hogy elkezdhesd összekattintgatni benne a saját 0-24 órás pénztermelő gépezetedet.

Miért WordPress?

Egy korábbi cikkünkben részletesen megindokoltuk „szakmai vonzalmunkat” a rendszer iránt, de a legfontosabb előnyökről még egyszer, röviden:

• felhasználóbarát, könnyen és több platformról (laptop, okostelefon, tablet) kezelhető;
• fenntartása olcsó, ingyenes sablonok és pluginok garmadájából válogathatsz a szerkesztés során;
• egyszerre többen is kezelhetik, ráadásul a differenciált jogosultsági szinteknek köszönhetően kockázatmentesen;
• rendszeresen frissítik és folyamatosan fejlesztik;
• a Google robotok és a közösségimédia-platformok egyszerűen imádják.

Ennek fényében érthető, hogy a világszerte elérhető weboldalak harmada erre a nyílt forráskódú rendszerre épül (ez több százmillió honlapot jelent), hiszen a 423 759 kódsor lefejlesztése (és inkább az összes belerakott munkaóra) egy szakembernek 112 munkaévébe került volna, a 6 milliárd dolláros becsül fejlesztési költségről nem is beszélve.

Ha maradtak volna kétségeid, most végképp eloszlatom őket: a világ 100 legsikeresebb weboldalából 15 WordPress-alapú és olyan globális márkák használják, mint a Walt Disney, a PlayStation, a CNN, a TechCrunch, a People magazin vagy az NFL. Ha ez sem tántorít el az egyedi fejlesztéstől, akkor nézd meg, mely Fortune 500-as cégek váltottak WordPressre és talán meggondolod magad.

Miért ajánljuk a Divi sabloncsaládot?

A választás részben önkényes volt, mivel ebben a sablonban hoztam létre az elmúlt 2 évben több mint ötven landing page-et. Az ez idő alatt felhalmozott gyakorlati tapasztalataimat és munkagyorsító tippjeimet szeretném veled megosztani.

De csak részben, mivel e cikk születésének pillanatában 437 821 felhasználó tette le a digitális garast a Divi mellett, amely így globálisan az egyik legnépszerűbb a WordPress-sablonok közül.

(Ez a sablont megvásárlók száma, amibe ugyanúgy beletartoznak a 20-30 landing oldalt „üzemeltető” kkv-k, mint a Diviben dolgozó webdizájnerek, akik akár havonta is legyártanak ugyanekkora mennyiségű érkezőoldalt. Mivel pontos arányokat nem tudunk, ezért maradjunk annyiban, hogy ez konzervatívan becsülve is több millió landing page-et jelent.)

Nem is csoda, hiszen a CMS-rendszerektől megszokott felhasználóbarát kezeléshez szinte korlátlan A/B-tesztelési lehetőség, igényes vizuális megjelenés és „természetes” reszponzivitás társul.

Mielőtt rátérünk a sablon részletes és marketingszempontú bemutatására, muszáj tennem egy utolsó gondolati kitérőt.

Megtiltom, hogy elolvasd ezt a cikket, ha…

Ebben a cikkben nem tanítalak meg landing page-et írni. Nem adok tanácsokat a már elkészült oldalad konverziós arányának javítására.

Arról sem fogok beszélni, hogyan ismerd ki a célpiacod stílusát, milyen CTA-kat használj vagy építs brandet egyetlen érkezőoldallal.

Ha nem tudod, hogyan állj neki a landing oldal készítésnek, akkor alaposan olvasd el cikkgyűjteményünket a témában, ahol ezekre a kérdésekre válaszolunk és ezután ugorj neki a szerkesztésnek.

Ha viszont már felvértezted magad a szükséges (tartalom)marketinges ismeretekkel és már csak a megvalósítás van hátra, akkor vegyél elő tollat és papírt vagy nyiss egy jegyzettömböt, mert lépésről lépésre bemutatom a sablon működését.

9 tipp a hatékony és gyors landing page készítéshez

Miután feltelepítetted a tárhelyedre a sablont és megadtad a belépéshez szükséges adatokat az adminisztrációs felületen, egy ehhez hasonló kép tárul majd a szemed elé:

Ezen a DiviPlus sablonban készült weboldalon 605 cikk és 132 oldal található, amelynek túlnyomó többsége a menürendszerből nem elérhető landing page.

Azért csak hasonló és nem pont ugyanilyen, mert a sablonhoz bekapcsolt bővítmények miatt hosszabb és rövidebb is lehet a képernyő balján elhelyezkedő funkciólista.

Az Oldalak menüpont Új hozzáadása alpontjára kattintva kezdheted meg az oldalad felépítését.

1. tipp: Válts azonnal Divi-szerkesztőre

A „hagyományos”, szövegszerkesztőre emlékeztető kezelőfelület blogbejegyzések megírására tökéletes – hatékony landing page építésre viszont csak magas (értsd: nem felhasználói) szintű HTML-kódolási ismeretek birtokában alkalmas.

A Divi szerkesztőjével egy sokkal barátságosabb, átláthatóbb és könnyebben kezelhető felületre jutsz.

A nézetváltás nem csak esztétikai szempontok és a mentális egészséged megőrzése miatt fontos.

Ebben a módban:

• férsz hozzá kulcsrakész oldalsablonokhoz;
• élvezheted a WordPressre jellemző felhasználóbarát tartalomkészítést;
• alakíthatod ki könnyedén az oldalad struktúráját programozói tudás nélkül;
• használhatod leghatékonyabban a 40+ beépített tartalmi modult;
• aknázhatod ki a 20+ előre kialakított sortípusban rejlő lehetőségeket.

2. tipp: Akár egy kattintással létrehozhatod a célodnak megfelelő oldalt

Az Elrendezés betöltése gombra kattintva szabadon válogathatsz a profi webdizájnerek által létrehozott több száz oldalminta közül.

A Diviben view módban böngészheted végig a listát, ami azért hasznos, mert anélkül tehetsz virtuális sétát az oldalakon, hogy külön-külön be kellene töltened a sablonokat.

Ez pl. egy kávézó oldalának a demója (a képre kattintva éred el a teljes oldalt):

A mintákat kategóriákra bontva is megnézheted, így kapásból a saját iparágadban jól működő, válogatott oldalakra ugorhatsz. Nyilván senki nem fogja neked megtiltani, hogy szerszám-nagykereskedőként beauty elrendezést válassz magadnak, de azért nem árt az óvatosság.

3. tipp: A (majdnem) kész jobb sablon, mint a nem létező tökéletes

Nem kell pixelre pontosan olyannak lennie egy előre gyártott sablonnak, amilyet előre megálmodtál.

Elég, ha 80-90%-ban a célnak megfelelő mintát találsz, mert sokkal könnyebb és még ennél is gyorsabb egy közel kész struktúrába beilleszteni néhány új modult, mint teljesen elölről felépíteni a komplett landing page-et.

A gyorsaság mellett pedig van még egy nagy előnye a kulcsrakész sablonoknak. Megszokhattad, hogy marketingesként multifunkcionális problémamegoldónak kell lenned, hiszen a munkádhoz szükséged van pl. alapszintű grafikai, SEO, hírlevélkezelő, chatbotépítő és egyéb technológiai ismeretekre is.

Egy landing page hatékonyságában a szövegezés mellett sors- és konverziódöntő tényező a felépítés funkcionalitása és a dizájn minősége.

Az előregyártott oldalminták mellett szóló legerősebb páros érv – főleg kezdő landolóoldal-építők esetében -, hogy:

• több tízezer oldalon tesztelt és leghatékonyabbnak talált elrendezésmintákat, illetve
• profi szakemberek által megálmodott dizájnt tudsz a másodperc törtrésze alatt a saját terméked eladásának szolgálatába állítani.

Nem kell betűméreteket állítgatnod és fontokkal vacakolnod. Nem kell okosabbnak lenned a benchmark-számoknál és „feltalálnod” a CTA legjobb helyét vagy a tökéletes gombméretet.

Nyugodt szívvel rábízhatod ezt a WordPressre. Az így felszabaduló időt olvasmányos, egyedi, értékes és eladásösztönző szövegírásra fordíthatod.

WordPress Divi miniszótár

A WordPress-oldalak szakaszokból, sorokból, oszlopokból és modulokból épülnek fel. Egy szakaszhoz több sor, egy sorhoz pedig több, változatos oszlopstruktúrában elrendezett modul tartozhat. Mindegyik elemből elméletileg végtelen számú hozható létre az oldalon.

A szakaszok lehetnek teljes (tehát egész képernyőt kitöltő) vagy normál szélességűek, amikor az oldalsáv szabadon marad. Van lehetőséged speciális, vagyis előzetesen megkomponált szakaszok hozzáadására is és egyedileg (pixelben vagy százalékban) is megadhatod a szakasz szélességét.

A sorok oszlopokból állnak. A Diviben 11 különböző tagolás közül választhatsz. Az oszlopelrendezés kiválasztását követően tudod a megadott helyre beilleszteni a kívánt modult (sima szöveg, videó, térkép, gomb, elválasztó, ártáblázat stb.).

4. tipp: Ezzel a két trükkel gyerekjáték egy sablon testre szabása

Egy sablon nyilvánvalóan nem képes tökéletesen tükrözni a céged arculatát, viszont két apró igazítással könnyedén testreszabhatod a landing oldal megjelenését.

• Cseréld ki a sablonos stockfotókat saját képekre. Ezt nemcsak a termékfotókra, hanem a háttérképekre is igaz. A cseréhez keresd a szerkesztést jelző, három egymás alatti vonalat a modul vagy szakasz „dobozának” bal oldalán, majd az adott egységen belül a „tartalom” fület.

• Színezd át a kiemelt vagy hangsúlyosan szövegeket a márkád alapszíneire. Ezt a Wordhöz hasonló módon, a modulba való belépésnél és a szöveged kijelölésénél tudod megtenni, ahol egyéni színkódot is megadhatsz. Ha nincs (vagy csak nincs kedved az arculati kézikönyv után kapkodni minden szerkesztésnél), akkor a Colorzilla nevű ingyenes Chrome-bővítmény használatával bármelyik korábbi oldaladról le tudod szedni a logód színkódját, amit a #-tel jelzett sávba kell bepötyögnöd.

Ha elvégezted ezeket a kisebb esztétikai ráncfelvarrásokat, nincs más teendőd, mint az előre gyártott sablon moduljaiba feltölteni a korábban megírt tartalmaidat.

5. tipp: Így egészítheted ki három lépésben a gyári sablont saját elemekkel

Hiányzik egy szöveges blokk a beillesztett mintából?

Betennél egy testimonialvideót a jelentkezési űrlap alá?

Úgy érzed, elférne egy plusz kifogáskezelő szekció a technikai információk fölött?

Könnyedén orvosolhatod a kész sablon hiányosságait anélkül, hogy széttörnéd az oldal struktúráját és megbontanád az egységes dizájnt.

1. lépés: keress ahhoz hasonló felépítésű szakaszt az alapelrendezésből, amit be szeretnél illeszteni (főcím + alcím + három hasábos szöveg, vagy főcím + visszaszámláló + szöveg stb.).

2. lépés: másold le a teljes szakaszt és a bal egérgomb nyomvatartásával húzd a kívánt helyre a blokkot.

3 lépés: töröld ki a fölösleges oszlopokat ésvagy helyettesítsd be a modulokat a megfelelő tartalmi elemmel (szöveg esetében egyszerűen csak illeszd be a plusz tartalmat a meglévő helyére).

Mit nyersz azzal, ha így jársz el és ezúttal sem nulláról indulva építkezel?

• Megőrzöd a sablon gyári beállításait (betűtípus, alapszínek, oszlopszélesség stb.).
• Rengeteg időt spórolsz meg azzal, hogy nem neked kell egyesével elvégezni a beállításokat.
• Az új tartalmi egység garantáltan harmóniában marad az oldal többi elemével.

6. tipp: Használj univerzális elemeket és spórold időmilliomossá magad

Ezt a tippet akkor fogod tudni maximálisan kihasználni, ha korábban már több landing oldalt létrehoztál.

Tételezzük fel, hogy meghatározott időszakonként kampányolsz. (Reméljük, jó sűrűn.) Rendezvényeket, tréningeket szervezel, van egy szezonális terméked, amire speciális promóciót építesz vagy új szolgáltatást veszel fel a portfóliódba, amit megtolsz egy beharangozó kampánnyal.

Tételezzük fel, hogy mindegyik kampányodhoz készítesz egy landing oldalt, néha-néha A/B-tesztelsz is, a különböző célcsoportoknak pedig saját szájtokat készítesz. Így egy éven belül akár 12-14 landing oldalt is létrehozol különösebb erőfeszítés nélkül.

Egy év alatt kitapasztalod (értsd: kiolvasod az analitikából, hőtérképes vizsgálatokból, az ügyfélvisszajelzésekből stb.), hogy melyik landing oldalaidon mely elemek voltak hatékonyak. Persze minél többet kampányolsz és tesztelsz, annál gyorsabban be tudod azonosítani a sikeres megoldásokat.

Ezeket az elemeket, vagy ezeknek az elemeknek a variánsait ezután érdemes átvinni egy másik kampány landing oldalára is – de ki mondta, hogy mindig újra és újra be kell állítgatnod az új oldalon ugyanazt a modult?

A megoldás: mentsd el ésvagy csinálj belőle unverzális elemet.

A mentés gomb megnyomását követően elnevezheted ezt a „minisablont” és később (amikor landing page-et raksz össze) egyszerűen csak be kell illesztened a megfelelő helyre.

A sima elraktározásnál eggyel komolyabb szint az univerzális elemként való mentés. Míg a másolatoknál a beillesztést követően módosítva nem változik az eredeti tartalom, az univerzális elemek együtt változnak a weboldal összes pontján.

Mondok két hétköznapi példát, hogy milyen esetekben lehet érdemes univerzális elemet használni.

• Térképjelölő cím: ha a weboldaladon mindenhol univerzális elemként van beillesztve egy teljes szélességű térkép, akkor egy esetleges költözésnél elég egy helyen átírnod a címet – a többi oldalon automatikusan frissül a tartalom.
• Számlálók: ha valamilyen okból mindenhol meg szeretnél jeleníteni egy lájk-, karakter- vagy ügyfélszámlálót, akkor is érdemes így eljárnod.

De ugyanígy járhatsz el kapcsolati adatoknál, kiemelt cikkeknél, közösségimédia-platformjaid ajánlóinál, díjak, elismerések, testimonialok megjelenítésénél is.

7. tipp: Nézd valós időben az oldalad szerkesztését

A WordPress oldalak szerkesztésében a Visual Builder használata lesz talán az egyik legnagyobb segítséged.

E kiegészítő funkció révén nem kell minden változás után elmentened és lefrissítened a szerkesztőfelületet, majd a készülő landinget, hanem valós időben láthatod a módosításokat.

A Visual Builder funkció segítségével ugyanúgy:

• szerkesztheted a modulok tartalmát,
• változtathatod az elemek megjelenését,
• és adhatsz hozzá új modulokat, oszlopokat, sorokat, szekciókat az oldaladhoz, mintha csak a „gépházban” dolgoznál.

8. tipp: Zárd ki a duplikációban rejlő veszélyeket három kattintással

Előfordul, hogy ugyanabból a landing page-ből akár 2-3 különböző variációt is készítesz nagyon hasonló tartalommal.

Ugyanez igaz lehet a köszönőoldalakra is, ahol szintén nem kizárt a közel azonos tartalom (főleg ha a sales funnel különböző elemei egy pontban futnak össze).

A duplikált tartalomért viszont könnyen a keresőkben elfoglalt pozícióid romlásával fizethetsz, hiszen a Google nemcsak egy tartalom hasznosságát, hanem eredetiségét is figyelembe veszi a rangsorolásban.

A Diviben erre is könnyen találsz megoldást: lépj be a Yoast SEO fülbe, kattints a kis fogaskerék ikonra és az alapértelmezett beolvasási opciókat állítsd át „no”-ra.

Ha így teszel, akkor a Google nem fogja indexálni az oldaladat, a keresőóriás robotjai pedig nem olvassák duplikációként az oldalaidon található információkat, vagyis elkerülsz egy lehetséges büntetést.

Sőt az a veszély sem fenyeget, hogy egy olyan ügyfeled téved rá valamelyik akciós termékoldaladra, aki kívül esett a kampányod célzásán és mondjuk 20%-kal magasabb áron vásárolta meg két nappal korábban ugyanazt.

9. tipp: Az átlátható oldal titka a jó elnevezés

Gyakran elhangzó vád a WordPress-oldalakkal kapcsolatban, hogy a „sok doboz” egy idő után teljesen átláthatatlanná válik. Erre a problémára is létezik egy pofonegyszerű megoldás.

Tételezzük fel, hogy egy rendezvény landing page-én be akarod mutatni az előadókat. Minden előadót a Személy/Person modul segítségével szeretnél promózni.

(Ez a példa még inkább megállná a helyét, ha mondjuk egy többnapos konferencia tízes nagyságrendű előadói névsoráról vagy egy közepes méretű cég munkatársait bemutató aloldalról lenne szó.)

A megoldás: a modul tartalommal való feltöltése során (kép, bemutatkozó szöveg, kapcsolati adatok stb.) görgess le a Tartalom fülecske aljára és az Admin címkesorba írd oda az illető nevét.

Ugyanígy járj el minden olyan esetben, amikor azonos típusú modulokból építkezel egy adott szakaszon belül. A címkézéssel elkerülheted a vétlen törlést vagy az időrabló bogarászást, mert ránézésre tudni fogod, hogy melyik dobozban mi a tartalom.

Bízom benne, hogy ezzel a 9 gyakorlatias tippel felkészültebben és a beavatottak magabiztos mosolyával vágsz neki az első (vagy a következő) landing page-ed összerakásának.

Marketingesként a mi feladatunk és felelősségünk, hogy a minőségi tartalomnak méltó formát adjunk – a WordPress pedig ebben az egyik legjobb szövetségünk.