Mi az a landing page?

Magyarra fordítva: “érkező oldal”. Sallangmentesen és leegyszerűsítve: olyan aloldala a weboldalunknak (vagy akár külön aldomain, almappa, domain), amelyen a látogató két dolgot tud tenni: bezárja az adott oldalt, vagy “konvertál”. Ez utóbbi feltételnek úgy tud megfelelni a Landing page, hogy ezen nincs se menü, se oldalsáv, se lábléc, így nem tud a látogató mást tenni: vagy bezárja az oldalt, vagy konvertál.

Mit jelent a konvertál kifejezés?

A landing oldalakat több különböző cél érdekében állíthatjuk hadrendbe, azaz többféle cél teljesülésével (érkező oldalanként 1-1 célt érdemes kitűzni) is elmondhatjuk azt, hogy konvertált a látogató.

A landing oldalak célja lehet:

• Kapcsolatfelvétel.
• Hírlevél feliratkozás.
• Vásárlás.
• Adatok megadása.
• Regisztráció.
• Termékminta igénylése.
• Konzultációs időpont foglalása.
• Stb.

Mikor használjunk landing page-t?

• Adwords hirdetések futtatásakor. Alapvető hiba, ha úgy AdWords-özünk, hogy a főoldalunkra érkezzen egy-egy fizetett látogató.
• Facebook hirdetések futtatásakor.
• 1-1 kampány során.
• Stb.

Mérés – konverziószámítás

A legegyszerűbb metódus a következő: mérni kell Google Analytics követőkóddal, hogy mennyien látják a landing oldalt, és azt, hogy mennyien teljesítik a kitűzött célt. Ha pl. 100 látogatóból 7 vásárol, akkor 7% volt a konverzió. Űrlapos konverziómérés példa.

Emellett persze fontos mérőszám az is, hogy mennyi pénz és idő befektetése árán konvertál az oldal x%-ot. Az arányszámokból pontosan látszani fog, hogyan teljesít a landing oldal.

A/B teszt.

Más néven split teszt. Ennek a segítségével lehet versenyeztetni különböző landing oldalakat. Érdemes egyszerre 2-3 verziót futtatni, és mérni a teljesítményüket. 1-1 verzió között egy kampányban csak kicsi eltérés legyen, pl.: egyiken legyen piros a gomb, a másikon zöld. Vagy egyiken legyen bemutatkozó videó, a másikon csak egy fotó legyen.

Mik a landing page követelményei?

A legfontosabb – szinte minden landing oldalon kötelező – elemek:

• Címsor – ígéret.
• Az érdeklődő problémájára való rávilágítás.
• Ütős ajánlat, ami megoldja az érdeklődő problémáját.
• “Miért tőled vásároljanak?” rész.
• Előnyök bemutatása.
• Kifogások kezelése. (akár GY.I.K. szerűen, ha sok van)
• Referenciák, ajánlások.
• Minta (ha pl. digitális termék értékesítése a cél)
• Bónusz(ok) felsorolása.
• Határidő a motiváció serkentése miatt.
• Megrendelő űrlap.
• Stb.

Mi van a 20 perces landing page videón és a zárt részen?

• Egy saját, jól konvertáló landing oldalon mutatom be a fentieket, és azt, hogyan tudsz hasonlót készíteni.
• A saját landing oldalam elrendezése letölthető, és Visual Composeres weboldaladba importálható!

    

Nem olyan rég bemutattam egy régi, AVADA kinézetet használó weboldalon a kinézet frissítését, méghozzá ún. gyerek kinézet létrehozásával egybekötve. Most meg szeretném mutatni ugyanezt a folyamatot The7 kinézettel.

A The7 frissítése+gyerek kinézet létrehozása egy kicsit egyszerűbb, gyorsabban megvalósítható.

Tudnivalók, teendők a frissítés előtt, illetve a folyamat lépései:
Ugyanazok, mint az AVADA-nál, így kérlek előbb olvasd el az ott leírtakat.

    

Több, mint 30 előre elkészített demo-ból választhatsz, ha a The7 kinézettel szeretnél weboldalt készíteni. Természetesen nem csak ilyen felépítésű lehet a weboldal, ugyanis ezeken túl is szinte bármilyen megjelenés összeállítható kinézethez tartozó a Visual Composer-rel, illetve az importált demo-k is teljesen testreszabhatóak.

A 30+ demo azért készült, hogy:

• Lásd: mennyire sokrétű ez a kinézet.
• Ha valamelyik tetszik, akkor könnyedén fel tudj építeni egy hasonlót.

Néhány The7 demo a 30-ból:

Korábbi videók a témában:

• Link 1.
• Link 2.

    

A The7 kinézet rendelkezik egy ikonkészlet támogatással, egészen pontosan a http://fontawesome.io/icons/ oldalról lehet ikonokat integrálni pl. a menüpontok és almenüpontok nevei elé.

Az alábbi, INGYENES, ~3 perces videón bemutatom a “hogyan?” kérdésre a választ:

Amennyiben kiválasztottál egy fizetős kinézetet a themeforest.net oldalon, vásárlás előtt regisztrálnod kell az oldalra. Erre azért van szükség, mert vásárlás és fizetés után a felhasználói fiókodba belépve fogod tudni letölteni a kinézetet.

Az alábbi videón bemutatom lépésről-lépésre a következőket: hogyan kell kosárba tenni a kinézetet, illetve a PayPalon keresztül hogyan tudsz bankkártyával fizetni, illetve ezek után hogyan tudod letölteni a kiválasztott és immáron megvásárolt kinézetet:

Képzeljük el az alábbi helyzetet: adott egy ~2,5 éve készült weboldal, amely AVADA kinézetet használ, és még csak nem is Child (gyerek) kinézettel működik. Igazi rémálom egy ilyen régi rendszert frissíteni.

A frissítés főbb lépései

Megj.: DIVI, THE7, stb. kinézetnél is hasonló metodikát kell követni!

• Nagyon figyelj, körültekintően járj el a művelet során!
• Tutira akarsz menni? Klónozd le a weboldaladat egy teszt-helyre, és végezd el ott a frissítést. Ha nincs gond, akkor frissítsd az éles weboldalt!
• Készíts biztonsági mentést a tárhelyről, adatbázisról, Avada beállításokról.
• Csinálj képernyőképeket a weboldalról, hogy egy-egy elemet könnyen vissza tudj állítani, ne csak emlékezetből lásd a korábbi állapotot.
• Mentsd el a főoldalad HTML kódját.
• Mentsd el a widgeteket.
• Hozz létre gyerek-kinézetet.
• Állj át a gyerek-kinézetre.
• Töltsd le a legújabb AVADA kinézetet.
• Frissítsd a fő – AVADA – kinézetet FTP-n keresztül.
• Ellenőrizd a kinézet beállításait, illetve a weboldalt.
• Állíts helyre minden “elromló” funkciót.
• Frissítsd a bővítményeket és a WordPress-t is.
• Ellenőrizd az összes bővítmény és widget megfelelő működését.
• Ha bármilyen egyéb probléma felmerül, orvosold.
• Készíts ismét biztonsági mentést a weboldalról.

Az alábbi, közel 21 perces videón végigmutatom a fentieket egy AVADA-frissítés után igazán szana-széjjel csúszó weboldalon.

    

Az alábbi videón azt mutatom be, hogyan kell egyedi fejlécképet és háttérszínt beállítani egy WordPress weboldalon. A megoldás nem általános megoldás, inkább csak inspirációs szándékkal teszem közzé, hogy aki nyitott rá, és megvan a szükséges ismerete, az továbbgondolva a látottakat fel tudja használni.

    

Mi a Divi?

Az Elegant Themes kinézetgyártó cég legnépszerűbb kinézete, amely egy beépített oldalépítgetővel rendelkezik. Ebből következően számtalan elrendezésű weboldalt lehet vele készíteni, viszonylag könnyen, hiszen az oldalépítgető megkönnyíti a különféle igények egyszerű megvalósítását. Az oldalépítgetőt úgy kell elképzelni, mint a Visual Composert, meg az AVADA Fusion Builderét, ez is ugyanolyan könnyen használható és széles körben elterjedt.

Főbb Divi funkciók:

Vizuális szerkesztő:

• Elemek állítható szélességgel és magassággal.
• Fogd és vidd módszerrel történő átrendezés.
• Mobilbarát, reszponzív felépítés.
• ~40 beépített elem, amelyeket könnyedén el lehet helyezni az aloldalakon, pl.: Kapcsolati űrlap, képváltogató, szöveges rész, kép, gombok, ártáblázatok, ügyfélvélemény, keresés, mp3 lejátszó, videó beágyazás, galéria, oldalsáv, blog, tabos elrendezés, toggle-s elrendezés, stb.
• 20+ teljes layout, hogy még könnyebb legyen az elindulás.
• Elmenthető, és beolvasható elrendezés minták.
• Beépített Split teszt funkció.
• Nagyon erős “Testreszabás” menü támogatás. Még egy kinézetnél sem láttam ilyen szintű funkcionalitást.

A Divi kinézet hivatalos elérhetősége, ismertetője: https://www.elegantthemes.com/gallery/divi/

A Divi kinézet előnyei:

• Magyar nyelvű felület. (32 nyelven elérhető)
• Divi Builder – egyszerű, gyors, aprólékosan állítható elemek.
• Folyamatos fejlesztés.
• Menthető, exportálható, importálható elemek.
• Beépített A/B teszt lehetőség.
• Már 69$-ért elérhető, +86 kinézet “jár mellé”.
• Nagy ügyfélkör, az egyik legnépszerűbb kinézet: 371 133 (összes elegantthemes eladás) vs. 275 134 (1 kinézet, az Avada összes eladása) eladás.
• 30 napos pénzvisszafizetési garancia.

A Divi kinézet hátrányai:

• Törlés gomb működési elve.
• Betöltés könyvtárból funkció: felülírás a Visual Composer “mellétöltés” funkciója helyett.
• Divi Builder használata esetén eltűnik az oldalsáv.
• Nagyon ritkán “megfagy”.
• Váltás HTML nézetre: visszaáll minden a Divi Builder használata előtti állapotra.

Divi kinézettel készített weboldalak:

https://www.elegantthemes.com/showcase/

A Divi videó vázlatos tartalomjegyzéke:

A Divi videót olyanoknak ajánlom, akik nem ismerik a Divi-t, mert teljesen az alapoktól indul!

• Elegantthemes bemutató, csomagajánlatok.
• Divi vásárlás: https://www.elegantthemes.com/join/ (mindenképpen vedd meg, ne töltsd le valahonnan!)
• Kiegészítő bővítmények: https://www.elegantthemes.com/plugins/
• Divi Builderre épülő egyéb kinézet: https://www.elegantthemes.com/gallery/extra/
• Dokumentáció elérhetősége: https://www.elegantthemes.com/gallery/divi/documentation/
• Divi kinézet telepítése – ne feledkezz meg a gyerek kinézetről!
• Divi alapbeállítások.
• Testreszabás menü.
• Divi Builder bemutató – vizuális nézettel, könyvtárból való betöltéssel.
• Modulok testreszabása.
• Divi könyvtár funkció.

Részletes tartalomjegyzék, idővonal:

00:00 – Bevezető
00:40 – Mi a Divi?
00:56 – Divi letöltés
02:02 – Legtöbbet eladott kinézet?
02:57 – A Divi előnyei
05:32 – Divi-vel készült weboldalak
06:37 – Elegant Themes előfizetési lehetőségek összehasonlítása
09:43 – Dokumentáció
10:43 – Divi-vel készült weboldalak 2.
12:04 – Divi részletek, megvásárlás
12:42 – Divi telepítés, alap megjelenés
13:42 – Divi – „Sablon beállítások” menüpont
18:47 – Divi – „Téma testreszabás” menüpont
32:58 – Divi – „Modul testreszabás” menüpont (említés)
33:19 – Divi – „Szerepkör szerkesztő” menüpont
34:59 – Divi – „Divi könyvtár” menüpont
35:32 – A Divi Builder használata, működési elv, példák, tippek, trükkök.
51:53 – Visual Builder használata
52:15 – Mentés a Divi könyvtárba, importálás a Divi könyvtárból
54:28 – Visual Builder használata 2.
56:27 – Modulok felfedezése autodidakta módon, Divi Builder használata
1:03:37 – Néhány hasznos Divi link
1:06:09 – Blurb (Fülszöveg) testreszabás példa
1:12:30 – Divi – „Modul testreszabás” menüpont
1:15:08 – Divi – „Divi könyvtár” menüpont 2.
1:17:31 – A Divi hátrányai
1:18:54 – Elakadtál? Dokumentáció!
1:19:19 – Elakadtál? Segítsek?
1:20:30 – Érdekel részletesebben a WordPress? Tanulj velem!

És akkor jöjjön a 82 perces Divi videó:

    

Ha optimalizálni akarjuk a weboldalunkat, akkor annak az is része, hogy mobilos nézeten nem terheljük meg a mobilozó sávszélességét, hanem próbálunk minél gyorsabban betöltődő weboldallal szolgálni. Erre egy remek módszer, ha mobilos nézetről eltüntetjük a képváltogatót. Az alábbi videón mutatom is, hogyan kell ezt végrehajtani!

A videón érintőlegesen arra is kitérek, hogyan kell különböző felbontású eszközökön más stíluslap-elemet használni.

    

Korábban bemutattam egy megoldást arra vonatkozóan, hogyan kell a demón látott kinézetet kialakítani egy fizetős (THE7) kinézetben. Azóta a kinézet fejlődött, és elegánsabb módja is van a demón látott tartalom összerakásának.

Alább két videót találsz:

• az egyiken magának a kinézetnek a különféle demo megjelenítési módjainak importálását mutatom be,
• a másikon pedig a Revolution Slider importálását. Egyébként javaslom inkább a LayerSlider használatát, szerintem egyszerűbb!