“Marketingesek” szoktak élni azzal a lehetőséggel, hogy adott egy mondat (pl.: képváltogatón, vagy egy szimpla képen), amelyben egy szó úgy jelenik meg, mintha éppen “gépelnék” be, majd visszatörlődik, és helyette másik szó “gépelődik” be.

Példa:

Az alábbi bővítménnyel nagyon egyszerűen készíthetsz te is ilyen animációt a weboldaladra.

    

A Twenty Eleven a 2011-es év alapértelmezett WordPress kinézete. Az egyik munkám során belefutottam egy olyan problémába, hogy a bejegyzések mellett nincs oldalsáv, holott marketing-szempontok alapján szükségesnek gondoltuk volna a meglétét.

A “problémát” egyedi kódolás helyett 2 percen belül meg tudtuk oldani az alábbi bővítménnyel, amely kiegészíti egy kicsit a Twenty Eleven funkcionalitását.

Mit tud ez a bővítmény?

Twenty Eleven Theme Extensions bemutató:

Előállhat olyan helyzet, amikor valamilyen oknál fogva szeretnél hozzáadni egyedi CSS kódot az admin felülethez. Van erre egy nagyon egyszerű, bővítményes (Add Admin CSS) megoldás.

    

Korábban már többször írtam a THE7 kinézetről. Nekem ez a személyes kedvencem, amióta rátaláltam, nagyon sok weboldalt készítettem vele.

A cikk megírásának pillanatáig már több, mint 370 weboldal csináltam teljesen a nulláról, amiből közel 100 weboldalt THE7 kinézettel készítettem, és az ügyfeleim is nagyon szeretik, mivel szuperül alakítható!

Az utóbbi két évben pedig a munkáim közel 75%-át ezzel a kinézettel valósítom meg. Szóval nem csak mondom, hogy jó ez a kinézet, hanem tényleg ezzel is dolgozok (ellenben azokkal, akik azt mondják, hogy pl. az Avada a legjobb kinézet, de Divi kinézetes WordPress oldal hirdeti ezt. 🙂

Amikor majd megújítom a WordPress videók oldalt, THE7 alapúra lesz cserélve.

A lényegre térve – korábbi THE7 videók

A WordPress videók oldalon már többször volt szó a THE7 kinézetről. Pl.:

• Hogyan kell megvásárolni,
• hogyan kell a demo tartalmat importálni,
• hogyan kell child theme létrehozásával egybekötve frissíteni,
• hogyan frissítsd a bővítményeit,
• hogyan rakj ikonokat a menüpontok nevei elé,
• stb.

The7 alapbeállítások – 41 perces videó

Az alábbi, 41 perces videón végigmegyek a THE7 kinézet alapbeállításain, ezeken:

A legfontosabbak:

• Logó- és faviconcsere.
• Betűtípusok, és betűszínek beállítása.
• Általános beállítások.
• Fejléc és felső menü beállítása színezése, elrendezése.
• Oldalcímek és kenyérmorzsák beállítása.
• Oldalsáv beállítási opciók.
• Az oldal alja (bottom bar), és a footer rész beállítása.
• Gombok méretének, betűtípusának, színének beállítása.
• Megosztási gombok.
• Blog beállítások.
• Egyedi  widget területek.
• Stb.

    

Az alábbi, alig több mint 3 perces videón megmutatom, hogyan lehet lecserélni az alapértelmezett “rendezett” (számozott) és “rendezetlen” (bulletpontos) listák jelölőit egyedire.

Mire jó ez?

Ha pl. egy landing oldalon felsorolást használsz az előnyök felsorolásához, az sokkal jobban néz ki pipákkal a pöttyök helyett.

Miért rendezett, és miért rendezetlen egy lista?

• Egy lista attól rendezetlen, hogy az egymást követő elemei nem épülnek egymásra (pl.: bevásárlólista).
• Egy listának akkor kell rendezettnek (számozottnak) lennie, ha az elemei lépéseket jelölnek (pl.: WordPress weboldal – elinduláshoz szükséges dolgok).

A példában erre fogjuk kicserélni egy rendezetlen lista jelölőjét:

És ilyen lesz a végeredmény:

Természetesen az ikon lehet bármi, csak a példa kedvéért lila pipa. Lehetne piros macskatappancs is. Nem hiszed? Egy kép egy korábbi munkámról, egy macskatermékeket forgalmazó webshopból:

    

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. Pontosan ettől olyan hasznos dolog a landing page használata.

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.

Akár úgy is kezdheted a tesztelést, hogy 3 teljesen különböző tematikájú landing oldalt hozol létre, majd mindre “ráeresztesz” 500-1000 látogatót, és mérsz egy “alapkonverziót”. Ezen első teszt után a két “vesztes” koncepciót dobd ki, hogy a legjobban teljesítő landing oldalból hozz létre 3, egymástól csak egy-egy dologban (ez azért fontos, mert ha többet módosítasz egy dolognál, és az űrlap jobban fog teljesíteni, nem tudod, hogy mely módosításnak köszönheted) eltérő verziót. Egyiken pl. csak a címsor szövegét módosítsd, a másikon pedig a fő képet, a 3. oldalon tedd máshová a GY.I.K. részt. Így az eredeti legjobb verziónál is jobb konverziójú landing oldalt tudsz előállítani.

Mik a landing page alapvető követelményei?

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

• Címsor – ígéret.
• Alcím, ami összhangban van a címsorral.
• 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.
• “Megvásárlom most!” gomb – az oldalon több helyen elhelyezve. Feltűnő színnel, hogy jól észrevehető legyen. Erre azért van szükség, hogyha az olvasó már eldöntötte, hogy vásárol, ne kelljen mindent végiggörgetnie ahhoz, hogy ezt megtegye!
• “Miért tőled vásároljanak?” rész.
• Előnyök bemutatása. Pontokba, felsorolásokba rendezve, hogy gyorsan emészthető, átlátható legyen!
• Képek, videók, amelyek az elérendő célt hivatottak közelebb hozni.
• Kifogások kezelése. (akár GY.I.K. szerűen, ha sok van)
• Referenciák, ajánlások. Elégedett ügyfelek őszinte, lehetőség szerint képpel illusztrált véleménye a termékedről, szolgáltatásodról.
• 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.

Konvertálás után – köszönő oldal!

Ha konvertált a landing oldal, érdemes a konverziót visszaigazolni. Magyarra fordítva, vagy érthetően írva: ha pl. rendel valaki valamit, akkor a rendelés leadása után a vásárló böngészője legyen átirányítva egy ún. “köszönő” oldalra, ahol:

• Megköszönöd a vásárlást,
• megerősíted abban, hogy a vásárlással jó döntést hozott,
• megválaszolod a legfontosabb kérdéseket (szállítás, számlázás – mikor, hogyan, stb.)
• esetleg adsz valamit ingyen (pl.: amíg “ez és ez” történik, olvasd el az ingyenes ….. tanulmányomat…),
• élhetsz upsell ajánlattal,
• kiírod az elérhetőségeidet, és azt, hogy kérdés esetén keressen bátran,
• stb.

Persze a konverzió visszaigazolásaként menjen egy megerősítő e-mail is! Pl.: “A rendelésed beérkezett,” 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:

Leggyakoribb elakadási okok, és ezek megoldása:

Ha nem tudsz regisztrálni:
Később próbáld meg ismét. Biztosan sikerülni fog. Ha mégsem, akkor próbáld meg más e-mail címmel a regisztrációt. Ha nincs másik e-mail cím, akkor hozz létre egyet.

Ha nincs olyan bankkártyád (vagy nem fogadja el a rendszer), amivel kifizethetnéd a kinézetet:
Kérd meg egy ismerősödet, hogy segítsen ebben a saját bankkártyájával, és fizesd ki neki készpénzben (vagy utald át neki) a vásárlás összegét.

Nem annyiba kerül a kinézet, mint amennyi a videón szerepel:
A videó nem most készült, ezért a videó célja csak és kizárólag a vásárlási folyamat bemutatása, és nem a fizetendő végösszeg meghatározása. Mindig a kinézet(ek) aktuális árát kell kifizetni, és nem azt, amit a videón látsz.

Egyéb problémám van!
Ha a fentiekben nem tárgyalt problémád van, keress meg. A fentiekre viszont telefonon/e-mailben/hozzászólásban is csak a leírtakat tudom tanácsolni, mint hibaelhárítási/megoldási módokat.