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

The7 kinézet – alapbeállítások 41 percben

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

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

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.

    

Egyedi felsorolásjel listákhoz

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

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:

    

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

    

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:

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.

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