Ügyfélszolgálat: +36 70 623 8822

Landing page alapok: általános követelmények, megvalósítás

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

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ó!

    

Régi The7 frissítése, Child theme létrehozásával egybekötve

Szerző: Szűcs Ádám Kategória: Megjelenés - Kinézet - Sablonok, Videó

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.

    

Demo tartalmak importálása a The7 kinézetben

Szerző: Szűcs Ádám Kategória: Megjelenés - Kinézet - Sablonok, Videó

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:

    

Themeforest.net – kinézet liszenszvásárlás lépésről-lépésre

Szerző: Szűcs Ádám Kategória: Cikk, Hasznos lehet, Ingyenes videók, cikkek, Megjelenés - Kinézet - Sablonok, Videó

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:

Több éves Avada frissítése, Child theme létrehozásával egybekötve

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

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.

    

Kategóriánként és oldalanként egyedi fejléckép beállítása

Szerző: Szűcs Ádám Kategória: Megjelenés - Kinézet - Sablonok, Videó

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.

    

82 perces Divi kinézet és Divi Builder bemutató

Szerző: Szűcs Ádám Kategória: Cikk, Ingyenes videók, cikkek, Megjelenés - Kinézet - Sablonok, Videó

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ő:

overview-top

overview-middle

 

overview-bottom

overview-footer

  • 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.

customizer-header

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!

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ó:

    

Képváltogató eltüntetése mobilos nézetről

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Keresőoptimalizálás, Megjelenés - Kinézet - Sablonok, 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.

    

Fizetős WordPress kinézetek – a demón látott oldal összerakása 2.

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

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!

    

Honlapunk cookie-kat használ. Részletek

Egy EU-s törvény alapján kötelező tájékoztatni a látogatókat, hogy a weboldal ún. cookie-kat használ. Ha ezzel nem értesz egyet, akkor a böngésződ megfelelő beállításait használva tiltsd le a cookie-k tárolását. | Részletes adatvédelmi tájékoztató |

Bezárás