Már a délután folyamán láttam egy érdeklődő posztot egy Divi fejlesztőkből álló Facebook csoportban, hogy ki mennyire várja a 4.0-át… Egy vicces kommentnél persze nem is görgettem tovább – “Can’t wait to break my site..:D” – a lényeget megjegyeztem: hamarosan megérkezik a Divi sablon legújabb verziója. És nemcsak egy bug javítás (ahogy az egyébként hétről hétre, sőt napról napra jönni szokott, hála az Elegant Themes szorgos fejlesztői csapatának), hanem egy kompletten új verzió, sok újdonsággal, lehetőséggel, kreatív funkcióval. Legalábbis ezt lehetett remélni. Nézzük, beváltak-e a várakozásaim a “Sablonok frissítése” gomb megnyomása után.
Divi 4.0 – az első benyomások
Természetesen ahogy ennek a rendkívül ígéretes WordPress sablonnak a legújabb változatát mélyebben megismerem, igyekszem majd a cikket frissíteni saját tapasztalataimmal. Egyelőre most az első benyomásokon és a legfontosabb újdonságokon szeretnék végigszaladni. Szóval rányomtam a frissítés gombra, és pikk-pakk, fél perc se telt bele, már a Divi 4.0-val futott a Weboldalkészítés Vállalkozásoknak weboldala.
Mindenekelőtt nézzük meg Nick Roach-nak, a Divi atyjának pár perces bemutató videóját. Sokminden már ebből a videóból egyértelmű lesz. (Egyébként bírom őt, szerény, mégis mindig nagy örömmel mutatja be a Divi új képességeit.)
Oldalgyorsaság, betöltődési idő
Miután frissítettem, egyből megnéztem a gtmetrix.com adatait, és azt találtam, hogy az előző, (nálam 3.29.3-as) verzióhoz képest a 4.0-ás Divi sablonnal átlagosan fél másodpercet gyorsult az oldalam betöltődése, szám szerint 2,9-3,5 másodpercről 2,3-2,4 másodpercre. Mivel többször is mértem, azt hiszem a gyorsabb betöltődés nem a véletlen műve, de persze bizonyítani ezt nehéz.
A weboldal GTmetrix értékei a Divi 4.0. témával
Egyedi fejlécek és egyedi láblécek!
Aki ismeri a Divi témát, tudja, hogy a fejléc és a lábléc mindeddig kissé korlátolt volt testreszabhatóságban. Ha hihetünk a szemünknek (merthogy egyelőre még nem teszteltem, de hamarosan fogom!) akkor ez nagyot változott. Mutatok is pár példát a hivatalos bemutatóoldalról.
…melyekkel például ilyen termékoldalakat alkothatunk. De éppenséggel ez is egy érdekes elrendezés. És ami az igazán lényeges ebben, hogy az eddig Page Builder lényegében Theme Builder-ré változott, nemcsak elnevezésében, hanem valóságosan is. Magyarul elég egyszer létrehoznunk egy termékoldal mintát és azt ráhúzhatjuk az oldalon lévő összes termékre. Vagy csak egy bizonyos kategóriára. És még folytathatnám.
Megjelent a Theme Builder menüpont
Egyedi kategória oldalak
Ugyanez igaz az kategóriaoldalakra is. Innentől sokkal letisztultabban, egyedibb módon jeleníthetjük meg a kategóriákat, legyen szó termékkategóriákról, vagy a blogban lévő bejegyzéskategóriákról. Gondolom a címkékre ugyanez érvényes, bár erről nem találtam részleteket. Tehát, el lehet felejteni a régebbi WordPress verziókban és sablonokban szinte kötelező jobboldali oldalsávot a kategóriák esetében. Ez innentől választás kérdése. (Természetesen eddig is meg lehetett oldani, hogy másképp nézzen ki, de ez mostantól egyszerűbb lett.)
Először azt hittem, gyorsan rá is jöttem a hiba okára, ugyanis a Divi Support Center (oldalt a Divi-ből nyílik) azt jelezte, hogy bizonyos rendszer értékek nem jók: pl. post_max_size, a memory_limit vagy a max_execution_time.
Ezeket mind át is írtam a tárhelyen a public-html mappában található .htaccess fájlban és utána a Support Center voilá, mindent értéket rendben talált. De ettől még a Theme Builder menüpont nem akart működni. Ürítettem a Cache-t is. Semmi.
Aztán a cikk írása közben eszembe jutott, hogy frissítem a Divi-t egy másik oldalamon is és megnézem hátha ott megjelenik valami. Így is történt és láss csodát: ott nemcsak egy üres oldal fogadott a Theme Builder menüpontra kattintva. Ki is próbáltam az egyedi oldalminták létrehozását és bár nem jutottam a végére, az elképzelés jónak tűnik.
Divi 4.0. – Theme Builder
A tanulság kendőzetlenül
(Néha tényleg annyira az orrunk előtt van a hiba… Megnéztem a biztonság kedvéért, és jaj, igen. Bizony, a WordPress nem a legfrissebb verzióval futott. Frissítettem, most már ok a Theme Builder betöltése.)
Egyedi 404 oldalak
Aki esetleg nincs képben ezzel, a 404-es oldalak arra valók, hogyha egy nem létező címre (például korábban létező, de azóta megszűnt aloldalra) jutunk egy weboldalon belül, akkor a 404-es hibaüzenetet kapjuk, vagy magyarul kiírva: “A keresett oldal nem található.” Ennek persze az igényesebb weboldalakon egyedi megjelenése van, de a fejlesztőknek nem mindig jut eszébe vagy nem mindig jut rá idő. Magamnak is kiosztok egy ejnyebejnyét, mert előfordul velem is, hogy elmulasztom. Nyilván a legtöbb esetben egy honlapot böngésző felhasználó nem, vagy csak ritkán találkozik vele, azért érdemes megalkotni valami ötletesre. Azt hiszem nemsokára végigmegyek az utóbbi munkákon és létrehozok egy ilyet, ahol esetleg elmaradt…
Szóval ennek a hibaoldalnak a design-ját elvileg most már lehet a Divi-n belül is szerkeszteni, egyszerűen. Persze aki akarta, korábban is meg tudta oldani, még bővítmények is voltak rá, de így most lényegesen egyszerűsödött a helyzet.
Írásom legfontosabb forrása, az Elegant Themes oldalán megjelent Divi 4.0-át bemutató cikk itt érhető el.
Egyedi fejléc létrehozása a Theme Builder-rel
Ahogy ígértem, a cikk folytatódik. Szóval a Theme Builderen belül, az elején meg kell szokni a struktúrát. A baloldali tömb az alapértelmezett sablon, ha ezt megváltoztatjuk, akkor az az egész oldalra kiterjedően megváltoztatja az adott weboldalrészletet (a fejlécet, a törzset, vagy a láblécet).
Ettől jobbra számtalan új oldalsablont létrehozhatunk (Add New Template), melyeket bárhogyan alkalmazhatunk: beállíthatjuk, hogy az új sablon az összes oldalra, csak a főoldalra, vagy csak egy adott aloldalra legyen érvényes. Ha szeretnénk alkalmazhatjuk csak egy-egy adott kategóriaoldalon, vagy címkeoldalon, tehát számtalan variációban. Az összes létező oldal fel van sorolva és ezek közül akár egyenként is kiválaszthatjuk, hogy mely oldalakon jelenjen meg az általunk készített, egyedi fejléc, vagy épp lábléc.
Amikor hozzáadunk egy új fejlécet, azt úgy képzeljük el, mintha nulláról húznánk fel egy Divi oldalt a korábbi Page Builderrel, csak éppen nincs a felső menüsáv sem. Mert azt is mi tervezzük oszloponként, modulonként (van választható Menü modul is.)
Összedobtam egy saját menüt
Végül mutatok valami kézzelfogható eredményt is, hogy látszódjon, mire jó konkrétan az egyedi fejléc készítő (Custom Header). Egy kiegészítő sávot tettem a főoldalam menüjébe, melyen felhívom a látogatók figyelmét egy új ajánlatomra. A személyes WordPress oktatás szolgáltatásomat szeretném kiemelni ily módon, de csak a főoldalon. Most elsőre egy ilyet alkottam, de még csiszolni kell úgy érzem.
És akkor ha már itt tartunk… az ajánlatról pár sorban: egy 2,5-3 órás nagyon tömör, privát weboldalkészítő műhelymunkát kínálok, melyen átadok minden tudást és eszközt ahhoz, hogy valaki vállalkozóként elinduljon és érvényesüljön az online térben. Mindezt egy nagyon kedvező áron.
A Divi kipróbálása, megvásárlása
Ha megtetszett a Divi 4.0 (egyébként már az előzőekkel is rengeteg mindent lehetett…) és kipróbálnád, írj nekem és lehetőséget biztosítok Neked egy teszt aloldalamon! Én majdnem mindegyik weboldalam elkészítéséhez ezt a témát használom, mert jól testreszabható, sok praktikus eszközével sok értékes munkaidő megtakarítható.
Ha pedig meg is vásárolnád, akkor is jó helyen jársz, mert az Elegant Themes partnereként mind az örökös licensz (Lifetime Access) mind az éves licensz (Yearly Access) árából 20% kedvezményt tudok biztosítani. Nekem se és senki másnak ne hagyd, hogy rábeszéljen bármire, amiben nem vagy biztos, inkább kérdezz előtte! Simán elképzelhető, hogy semmi szükséged nincs a Divi-re. De az is lehet, hogy igen. Ha elhatároztad, hogy szeretnéd megvenni a sablont, őszintén úgy gondolom, hogy ez egy kedvező ajánlat. (A kedvezmény a linkre kattintva elérhető). Természetesen ezzel mindenki jól jár: te is, én is és a fejlesztői csapat is.
Vendégposzt a betöltési sebesség gyorsításáról, Jobbágy András tollából.
Senki sem szereti a lassú weboldalakat. Az interneten mindenki türelmetlen, még türelmetlenebb, mint az offline világban. A kutatások szerint elég pár pillanatnyi késés, és az átlagos felhasználó már is hajlamos továbblépni a honlapról.
Ennek ellenére nagyon sok honlaptulajdonos nem foglalkozik a betöltési sebességgel. Talán mert remélik, hogy a szuper tartalom és szép webdesign majd kárpótolja a felhasználót. Vagy csak egyszerűen nincsenek tisztában, mennyire fontos kritérium a gyorsaság egy weboldalnál.
Szeretném végigjárni ebben a cikkben, hogy miért életbevágó kérdés minden honlap számára a minél rövidebb betöltési idő. A cikk második felében konkrét tippeket is adok ahhoz, hogyan tudod gyorsítani a WordPress weboldalad. (Ha még csak most ismerkedsz a WordPress világával, ajánlom a honlapkészítés kezdőknek cikkemet.)
A betöltési sebesség és az online marketing
A betöltési sebesség nem csupán felhasználói élmény (UX), hanem kőkeményen online marketing kérdés is. Elsőre talán nem egyértelmű a kapcsolat a kettő között. A kulcs a Google algoritmusának működésében rejlik.
A Google 2010-ben jelentette be, hogy a rangsorolási metódusában fontos szerepet kap a weboldal sebesség is. Egyszerűen azért, mert a gyorsan betöltődő weboldal elégedetté teszi a felhasználókat. A Google pedig elégedett felhasználókat szeretne, hiszen a jövőben is piacvezető akar maradni a keresőmotorok között.
A gyors betöltési sebesség ezért segíthet előrébb jutni a Google keresőjében. Vagyis pozitív hatással van a honlapod online marketingjére is.
Ebből következik, hogy a lassú betöltődés viszont árt a weboldaladnak. Rontja a helyezésedet a keresőben, miközben megfojtja a felhasználói élményt is. Egy lekérésekre lassan reagáló honlapon az emberek kevesebb időt hajlamosak eltölteni, és sokkal magasabb lesz a visszafordulási arány. Ráadásul a hosszas betöltés tönkreteszi a konverziót is.
Egy, a legnagyobb webáruházak teljesítményét vizsgáló 2017-es tanulmány szerint minden 100 milliszekundumos (0,1 másodperc!) késés a betöltési sebességben hét százalékos esést jelenthet a konverziós rátában. Kettő másodperces késés pedig akár a visszafordulási arány 103 százalékos emelkedésével járhat! Elég sokkoló adat itt nálunk, a szégyenletesen lassú webáruházak* országában.
A betöltési sebesség tehát kulcskérdés, ha sikeresek akarunk lenni az e-kereskedelemben, vagy bármilyen más online üzletágban.
Mennyi az ideális betöltési sebesség?
Az ideális betöltési sebesség nagyjából 2-5 másodperc között van, azzal a megkötéssel, hogy a felmérések szerint a felhasználók 40-53 százaléka elhagy egy olyan weboldalt, ami nem töltődik be három másodperc alatt. Két másodperc felett pedig már minden másodperc a visszafordulási arány növekedésével jár. A felhasználók 47 százaléka asztali és számítógépen ráadásul két másodpercnél is rövidebb betöltési időt vár el.
Vagyis, ha nem akarod, hogy a weboldaladat a felhasználók tekintélyes része dühösen hagyja el, próbáld legalább három, de inkább két másodperc körül/alatt tartani a betöltési sebességet.
Egy 5 másodperces oldalbetöltődés már határesetnek számít – vannak akik nem várják meg és “lepattannak”.
Honnan tudom, hogy mennyire gyors a honlapom?
Az oldalsebesség mérésére több ingyenes eszköz is létezik. Használhatod például a GTmetrix vagy a Dotcom-monitor tesztjét. Az előbbi jellemzője, hogy rengeteg tippet ad a weboldal sebesség növelésére, az utóbbié pedig, hogy a világ 24 különböző pontjáról futtatja lesz a tesztet, ezért nagyon jó megoldás, ha a nemzetközi piacra szeretnél betörni a weboldaladdal.
Az én személyes kedvencem a Google saját sebesség tesztje(Ez még pontosabban fogalmazva a weboldal “teljesítményét” méri, melynek természetesen fontos része a sebesség is). Egy nullától százig terjedő skálán osztályozza a weboldalakat, és külön eredményt ad meg az asztali és a mobilos nézetre. Érdemes figyelembe venni a teszt javaslatait, mert ha követjük őket, nagyon szép eredményeket lehet elérni egy átlagos WordPress weboldallal is.
Egy tipp a Google sebesség teszt használatához: alapvetően nem az abszolút eredmény a fontos, tehát önmagában nem az, hogy 65, 70 vagy 82 pontot kaptál. De azt azért mindenképpen ajánlom, hogy a fent már részletezett okok miatt igyekezz három másodperc alatt tartani a betöltési időt.
Amire inkább figyelned kell, hogy a versenytársaidhoz képest legyél tartósan jobb a betöltési sebesség terén, mert ez komoly előnyt jelenthet neked a keresőben. Ha a konkurens weblapok 40 pontot kapnak a teszten, a tied szerezzen legalább 55 pontot. Ha hetvenet, akkor a tied legyen 80 felett, és így tovább. És most lássuk, mit tehetsz, hogy szuper gyors legyen a honlapod.
Betöltési sebesség: az alapok
Az első, és legfontosabb, hogy az alapok rendben legyenek, mert megfelelő üzemeltetési környezet nélkül akármit csinálsz, mindig lassú lesz a weboldalad. Mit értek ez alatt?
Jó tárhely
Jó sablon
Rendszeresen karbantartott és frissített eszközök
Kezdjük a tárhellyel. Tele az internet magyar és külföldi szolgáltatók ajánlataival, de egyáltalán nem egyszerű feladat igazán jót választani közülük, pláne ha gyorsat akarunk. Sokszor sajnos csak utólag derül ki, hogy a papíron remek választásnak tűnő szolgáltatás lassú tárhelyet ad.
Általánosságban elmondható, hogy az olcsó (30-40 ezer forint/év alatt) szegmensben nagyon könnyű rossz szolgáltatásba belefutni. Rossz alatt nem azt értem, hogy neked kell foglalkozni a sebesség optimalizációval, hanem azt, hogy bármit is csinálsz, mindig lassú marad a honlapod. A lassú tárhely jele, amikor a Google tesztje tartósan nagyon magas, több másodperces értéket ad meg a szerver válaszidejére (TTFB). Ilyenkor általában a szolgáltatóváltás hoz csak érdemi eredményt.
Amennyiben szeretnél biztosra menni, érdemes drágább szolgáltatást választani, például egy jó managed hosting szolgáltatást, ami leveszi a válladról az összes tárhellyel kapcsolatos terhet. Ha sok-sok ezer látogatód van, vagy ennyire számítasz, válassz virtuális dedikált szervert (VPS). Webáruház esetén keress direkt erre specializálódott tárhelyet.
Viszont ha csak egy átlagos forgalmú (havi 5000 látogató alatt) weboldalad van, és szívesen foglalkozol legalább alapszinten a tárhellyel kapcsolatos tennivalókkal, például a sebesség optimalizációval is, vagy csak nem akarsz havi szinten sok ezer forintot elkölteni tárhelyre, akkor nyugodtan próbálj ki több egyszerű osztott tárhelyet. Lehet, hogy nem elsőre, de előbb-utóbb találni fogsz olyat, ami passzol az igényeidhez.
Ha már van egy jó tárhelyed, szükséged lesz még egy kiváló minőségű WordPress sablonra.
Amennyiben pénzt akarsz keresni a honlapoddal, vagy egyszerűen csak nem akarsz kockáztatni, mindenképpen válassz prémium (fizetős) sablont.
Személyes tapasztalatom alapján a Divit, a StudioPress termékeit, valamint az Oxygent tudom ajánlani. Mindegyiknél alapvető fejlesztési szempont a gyorsaság, bármelyikkel jó eredményeket lehet elérni a sebesség optimalizálás területén (is).
És végül nem szabad megfeledkezni a rendszeres karbantartás fontosságáról sem. Hiába választottál szuper tárhelyet és kiváló minőségű sablont, hiába döntöttél körültekintően arról, hogy milyen bővítményeket (plugin) telepítesz a honlapodra, ha nem figyelsz a frissítésekre, az egész fabatkát sem fog érni fél-egy év múlva.
A hanyagul, vagy sehogy karbantartott weboldal egy idő után belassul, és működési zavarok jelentkeznek. Végül a honlap szép csendben kileheli a lelkét – általában mindig a legrosszabb pillanatban.
Hat módszer WordPress weboldalak gyorsítására
Ha a fentiek rendben vannak, de továbbra sem vagy megelégedve a weboldalad sebességével, akkor még mindig tudsz mit tenni. Mutatok néhány eszközt / módszert, amivel a személyes tapasztalatom szerint sokat lehet javítani a betöltési sebességen.
1. GZIP tömörítés beállítása
Ez azért lényeges, mert ha tömörítve szolgálja ki a szerver a honlapodat, a felhasználóknak sokkal kisebb adatmennyiséget kell letölteniük, amikor a weboldalra kattintanak. Kisebb adatmennyiség pedig egyenlő a gyorsabb lekéréssel.
Ha a tárhelyed online kezelőfelülete cPanel (ez a leggyakoribb megoldás), akkor a Gzip tömörítést a Szoftver >> Webhely optimalizáció >> Az összes tartalom tömörítése úton keresztül tudod beállítani. A Gzip tömörítést tudja emellett szinte az összes elterjedt cache bővítmény (például a WP Fastest Cache és a W3 Total Cache) is.
2. Legfrissebb PHP verzió beállítása
A PHP egy nagyon népszerű, nyílt forráskódú, szerver oldali webes programnyelv, ezen íródott a WordPress magja is. Nagyon nem mindegy, hogy a PHP melyik verziója fut a tárhelyeden.
Sok hazai tárhelyszolgáltató a már teljesen elavultnak számító 5.6-os verziót használja alapbeállításként. A WordPress viszont már csak a 7-es verziót támogatja, ami sokkal-sokkal gyorsabb, mint a régebbi változatok.
A PHP verziót a cPanelen a Multi PHPManager >> PHP verzió beállítása útvonalon állítható át. Válaszd a lehető legfrissebb verziót, ami jelenleg (2019 őszén) a 7.3-as.
3. Képek optimalizálása
Rengeteg weboldal azért nagyon lassú, mert tele van rakva szép nagy, több megás képekkel, amiket aztán csak vért izzadva tudnak betölteni a böngészők. A megoldás szerencsére egyszerű: tömöríteni kell a képeket.
Ezt megteheted felöltés előtt online eszközökkel, jó tapasztalataim vannak például a JPEG Optimizer, a Compressor.io vagy a Compress PNG webes alkalmazással. (De a TinyPNG is egy régi jó bevált oldal képek tömörítésére.)
A TinyPNG oldalon egyszerűen csak a “Fogd és vidd” módszerrel kell a tömörítendő képeket az ablakra húzni.
Feltöltés után is tömörítheted a képeket bővítményekkel. Ilyen plugin például az Imagify, havi 25 MB-ot tömöríthetsz vele ingyenesen.
Tartsd a képek méretét 200 kB alatt.
Elsőre talán nem hiszed, de 200 kB igazából tényleg mindenre untig elég lesz. Sőt, legtöbbször sokkal kisebb méretű képek is bőven élvezhetőek, még nagyobb (pl. 2000 x 1000 pixeles) méretben is.
4. Lusta betöltés alkalmazása
Hatásos és nagyon egyszerű trükk a “lusta betöltés”. A lényege, hogy a weboldal lekérésekor elsőre csak azok a “hajtás feletti” (above the fold) tartalmak töltődnek be, amelyek görgetés nélkül, egyből megjelennek a böngészőben a felhasználó szemei előtt.
A honlap többi, “hajtás alatti” (below the fold) része csupán akkor töltődik le, amikor a felhasználó odagörget. Ezzel csökkenteni lehet az egyidejű HTTP lekérések számát, az eredmény pedig egy gyorsabb honlap lesz.
A lusta betöltést könnyen beállíthatod az úgynevezett Lazy Load bővítményekkel. A kedvencem a képek, videók és iFrame-k késleltetett betöltésére fejlesztett Lazy Load by WP Rocket alkalmazás. Villám gyorsan lehet konfigurálni és nagyon hatékony.
5. Gyorsítótárazás (cache)
A rövid betöltési idő elérésének egyik legfontosabb eszköze a hatékony gyorsítótárazás (cache). A lényege, hogy amikor egy felhasználó a weboldaladra kattint, a böngésző gyorsítótára lementi a honlap statikus, nem változó részeit, így a legközelebbi látogatáskor már csak a változó, dinamikus elemeket kell újból letöltenie. A betöltési sebesség ezáltal sokkal jobb lesz – de csak akkor, ha jól van beállítva a gyorsítótár-házirend.
A leghatékonyabb megoldás, ha a tárhelyhez tartozik szerver oldali cache szolgáltatás. Ezt azonban csak a drágább szolgáltatók tudják. A másik megoldás egy cache bővítmény telepítése.
A cache bővítményeket alapvetően két “iskolába” lehet kategorizálni kezelési bonyolultság szerint. Léteznek nagyon egyszerűen beállítható és kezelhető pluginok, ilyen az ingyenes WP Fastest Cache vagy a fizetős WP Rocket. Előnyük, hogy minimális háttértudás szükséges csupán a konfigurálásukhoz, néhány lehetőségből választhatunk, és kész is vagyunk.
Általában kicsit hatékonyabbak az olyan belemenősebb, sokkal több választást felajánló bővítmények, mint az ingyenes W3 Total Cache, vagy a magyar fejlesztésű, fizetős Swift Performance(van ingyenes verziója is). Főleg az előbbinél pepecs munka a helyes konfiguráció megtalálása, de ha sikerül, nagyon szép eredményt lehet elérni vele.
A Swift Performance plugin admin felülete
6. Adatbázis takarítás
A WordPress weboldalak minden tartalmat és beállítást MySQL adatbázis táblákban tárolnak. Az adatbázisban nyomot hagy minden változtatás, bejegyzés módosítás, telepítés és törlés, stb. Olyan ez, mint a por lakásban, rendszeres takarítás nélkül egy idő után mindent belep. A “teleporolt” adatbázis pedig belassul, növeli a betöltési időt.
Az adatbázis kitakarításához egy sor bővítményt használhatsz. A legjobb talán a WP-Optimize. Pofon egyszerű a kezelése, csupán a WordPress admin kezelőfelületen a WP-Optimize >> Database menüpontban rá kell nyomnod a Run all selected optimizations lehetőségre, és megvárni, amíg végigfut a folyamat.
Érdemes ezt pár havonta elvégezni, főleg, ha gyakran adsz hozzá új tartalmat a honlapodhoz, például blogot írsz. Egyet nem szabad elfelejteni: készíts mindig biztonsági mentést az adatbázis karbantartása előtt!
Összegzés
Ha az összes, fent részletezett megoldáson végigmentél, a WordPress honlapod mostanra biztosan sokkal gyorsabb lett, mint eredetileg volt. Gratulálok! Amennyiben kérdésed van, vagy segítségre van szükséged, nyugodtan írj hozzászólást.
Írta: Jobbágy András, a Honlapszaki.hu tulajdonosa és bloggere.
* 2 példa rendkívül gyenge Google PageSpeed Insights értékekre a hazai webáruházak világából: itt és itt…
Kevés olyan hírlevél van, ami bármennyi izgalommal is eltöltene. (Sok ilyen e-mail a kukában végzi, vagy az unroll.me felgöngyölíti nekem 1 db levélbe, amit napjában egyszer megkapok.) A Divi csapatának azonban sikerült elérnie, hogy mindegyik hírlevelükre legalább rápillantok – de gyakran el is olvasom ezeket, mert a legtöbbször hasznos dolgokat küldenek. A kedvenceim a frissítéseiknek az összefoglalói. Ma is érkezett egy, és szerintem érdemes most röviden magyarul is összefoglalni a frissítéseket. Elég egyedülálló a WordPress sablon fejlesztők között az, amilyen gyorsan és látványosan a Divi sablont fejlesztik. Nem készülök most egy hosszú cikk írására, egyszerűen csak szeretném megosztani azokat az apró örömöket, amik egy weboldalkészítőt érnek, ha egy fontos munkaeszköze – amire korábban “befizetett” – ennyit fejlődik.
Új funkciók a Divi Visual Builder-ében
A Visual Builder a Divinek az a szerkesztői felülete, ahol egy az egyben látom mi történik a front-end felületen (ez az a felület, amit egy egyszerű weboldal látogató lát), ha egy bizonyos kódot irogatok. Csakhogy már kód sem kell – leginkább a technikai érzékünkre, a Divi használatában megszerzett gyakorlatra és a kreativitásra kell hagyatkozni e program használata esetén. Na lássuk, miket fejlesztettek megint. Ha a kedves Olvasó a videós bemutatót kedveli, álljon itt először a cégvezető, Nick Roach bemutatója. Utána én is leírom pár sorban az új funkciókat.
Margók és helykitöltés állítása kattintgatással
Ami külön egy új lehetőség, hogy összekapcsolható a felső és alsó érték így egyszerre álíthatunk be ugyanannyi pixelnyi margót felnt és lent – időt spórolva. Ugyanez igaz a bal és jobb oldalra is. Ez volt egyébként egy olyan funkció amiben előrehaladottabnak éreztem a szintén profi Thrive Architect “landing page” építőt. Most sem tudom melyik a jobb összességében, de én a Divire szavaznék. Ahogy előrehaladunk időben, úgy lesz egyre kevesebb különbség bármelyik nagy WordPress sablon fejlesztő cég között.
Címsorok finomhangolva
Címek méretét is látványosan egérhuzugatással állíthatjuk. Ez is megkímél bennünket attól, hogy először érzésre állítsuk be a méretet, majd azt változtassuk tovább. Egyből az ideális betűméretet állíthatjuk be egy címsornál.
Színkezelés, még egyszerűbben
Az alapértelmezett színek palettáján ezentúl könnyen hozzá is nyúlhatunk a színekhez, színkódokhoz és úgy változtathatjuk élőben kedvünkre, hogy egyből látjuk is, milyen lenne a végeredmény. (Az alapértelmezett színeket egyébként az általános sablonbeállításoknál lehet kiválasztani.)
A galéria modul szerkeztése a Divi Visual Builder-rel
Megintcsak egy új időspóroló funkció. Korábban amikor a képeket rakosgattuk a galéria modul szerkesztőjében, akkor meg kellett jegyezni, hogy hogyan vannak sorban a képek “a jelenlegi állás szerint”, majd a szerkesztőbe lépve elképzeltük, hogy milyen új sorrend lenne ideális. Ehelyett, most helyben látjuk ismért, hogy mi történne a weboldal “éles” látogatók által is látott felületén. Nem kell találomra képzelődni többé.
Remélem hasznos volt ez a szösszenet. Hogy mikre képes ma a webdesign szakma, vagy maga a Divi sablon, további nézelődésre az Elegant Themes honlapját, annak is ezt az aloldalt ajánlom – itt nagyon részletesen be van mutatva ez a kis weboldalkészítő csodafegyver.
Bárhol is van, sok sikert kívánok a vállalkozásának,
Bognár Balázs
Jegyzetek
A cikkben bemutatott Visual Builder a Divinek csak a front-end szerkesztői felülete, és ez csak a felszín.
Az írásban található linkek egy része úgynevezett Affiliate link, ami azt jelenti, hogy partneri megállapodásom révén, mely által kedvezmény is igénybe bevehető a linkeimmel (!), jutalékot is kapok az Elegant Themes-től, ha ezeken keresztül vásárolja meg valaki a Divi témát. Ez tehát mindhárom fél számára egy előnyös megállapodás.
A Divi az egyetlen ilyen szolgáltatás, amit nyíltan reklámozok és amit ennyire magabiztosan ajánlok, mert egyrészt teljesen elégedett vagyok azzal, amit a pénzemért kaptam – sokszorosan megtérült – másrészt úgy hiszem, hogy biztosan az egyik legjobb WordPress sablon ma az egész világon. Természetesen nemcsak ez a sablon képes csodákra, de az ár-érték arányban is talán a legjobb. Azoknak ajánlom, akik saját maguk szeretnék elkészíteni a weboldalukat.
10 éves az Elegant Themes, a Divi sablon fejlesztője
10 éves születésnapját ünnepli a Divi sablon fejlesztői csapata. Én csak 1 éve követem a fejlődésüket – de az pazar. Ezt az egy évet foglaltam most össze. Még pár napig, 2018. március 21-ig születésnapi kedvezménnyel kínálják fő művűket, a Divit. ( A kedvezmény itt érhető el.)
Az Elegant Themes elmúlt 10 éve
Az Elegant Themes egy nagyon jó közösséget is épített a Divi köré. Középen Nick Roach, alapító.
Még mielőtt az én kis 1 évemet ünnepelném a Divivel, nézzük csak meg, mit ért el az Elegant Themes 10 év alatt. Bámulatos, hogy milyen úton mentek végig és milyen ügyesen, tudatosan építenek egy valóban JÓ termék köré egy márkát és egy közösséget. Nick kezdő lépése az volt, hogy létrehozott egy Worpress témát. Majd mégegyet és mégegyet. Elindított egy kezdetben lassú, majd egyre gyorsabb folyamatot. Aztán felvett egy alkalmazottat, aztán született a kezei között még néhány téma, aztán jött még pár ezer felhasználó, aztán még pár tucat blogposzt: évről évre megduplázódtak, mind létszámban, mind bevételben. Emellett pedig a lényeg: egyre több értéket és segítséget nyújtottak a webdesign szakmának. Majd elérkezünk 2018-ig, amikor is már majdnem félmillió felhasználója van a Divi témának. (És azokról akkor nem beszéltünk, akik illegálisan használják a szoftvert.) A stílusosan elkészített 10 éves idővonalukat itt lehet megtekinteni. De hogy is jön ez az egész ide? Mi ez az Elegant Themes és mi az a Divi? Ezekről a következő bekezdéseimben írok.
WordPress és sablonok
Először is, miért WordPressben építem weboldalaimat? Abban a korban, amikor már lényegében mindenre van egy kész szoftver, teljesen feleslegesnek érzem az alapoktól kezdve lekódolni egy weboldalt. Egyszerűen nincs rá szükség, hogy a nulláról kezdjem.
Hogy mennyire megbízhatóan és jól működik a WordPress (mint weboldal-váz), azt jól mutatja, hogy a világ összes honlapjának ~30%-a ezen a rendszeren fut. Az összes tartalomkezelő rendszer között pedig (CMS = Content Management System) 60% körüli a népszerűsége! Ez nem véletlen. (Az összes WordPress weboldalnak egyébként a 0,4%-a fut magyar nyelven.)
Ugyan vannak akik megkérdőjelezik a WordPress biztonságát, és van némi alapjuk is rá, megfelelő beállításokkal – saját tapasztalatom szerint is – egy erős biztonsági szint megteremthető rajta és megbízhatóan működik. Hogy milyen biztonsággal kapcsolatos kérdéseket érdemes körüljárni, arról a weboldal karbantartást taglaló cikkemben írtam.
A WordPress weboldalak készítése során szinte mindig az első kérdések között szokott szerepelni, hogy “milyen WordPress témát, sablont használjak?” 13-14 évesen, amikor az első honlapomat készítettem – az akkori internetes rádióm adásait töltöttem fel a világhálóra – még nem gondolkoztam ilyen dolgokon: választottam egyet a sok ingyenes – és amúgy normálisan működő, de eléggé korlátolt – WordPress sablon közül.
Aztán később, amikor már komolyabb igényeket kellett megvalósítani, megállt az ingyenes sablonok tudománya. Először az Avadával próbálkoztam, de valamiért nem győzött meg teljesen. Aztán tavaly április környékén mégegyszer alaposan körülnéztem a WordPress témák piacán és az akkor legjobbnak tűnő Divi sablon mellett tettem le a voksom. Hosszútávú befektetésnek szántam, mert akkor már láttam mikre képes: ezekkel minőségi szinteket tudok ugrani más – egyébként főként kódokkal bajlódó – webdesignerekhez képest.
Divi – 1 éve: kissé kiforratlan. Ma: maga a mágia.
A Divi sablonban a “Fogd és vidd!” módszerrel is lehet szerkeszteni. Ez pedig egyszerűvé és gyorssá teszi. Egy kivétel van: ha a tárhelyszolgáltató régimódi és lassú…
Még mielőtt kitérek a részletekre, fontos megemlítenem, hogy a Divi sablonra mutató linkek ajánlói linkek, tehát jutalékot is kapok a Divitől. Viszont ezekkel a linkekkel, a partneri megállapodásom révén, kedvezőbb áron érhető el a Divi sablon.
Én örökös hozzáférést vettem tavaly (egyébként ugyanilyen ajánlói linken keresztül) és nagyon jó beruházásnak tekintem ma is.
Természetesen soha nem ajánlanék terméket csak a jutalékért, ez a csapat viszont messzemenően megérdemli. Az anyagi haszontól függetlenül is mindenképpen írtam volna a Diviről, mert nagyon elégedett vagyok vele és sokat jelentett az elindulásomban.
Szóval 1 éve vettem meg a Divi sablont és azóta – ha jól számolom – 9 weboldalt építettem vele. Ezalatt az idő alatt pedig nemcsak magára a termékre, hanem az azt fejlesztő csapat hozzáállására is rálátásom volt. Illúzió lenne azt gondolni, hogy létezik tökéletes szoftver, vagy olyan online termék, mellyel nem merül fel hiba menetközben. Mindig előfordulhatnak apró hibák, lehetetlen tökéleteset fejleszteni elsőre. A Divit sem éreztem tökéletesnek, voltak is néha kisebb zűrök vele, viszont 1 évvel később, ma úgy érzem, hogy maradéktalanul elégedett vagyok. És, ha fel is merülne hiba, akkor számít igazán, hogy kik állnak a termék mögött. Az én tapasztalatom az, hogy bármikor, amikor problémám volt a Divi sablon beállításaival, (az elmúlt egy év alatt körülbelül háromszor-négyszer volt olyan, hogy valamire nem találtam azonnali megoldást a Google módszerrel), azonnal a segítségemre volt az Ügyfélszolgálatuk.
Divi 3.0 – bemutatja az ET vezetője, Nick Roach
“Divi nation”
Amiben szintén egyediek, hogy egy szuper közösségé alakítják a sablon felhasználóit, Divi nation megnevezéssel. Remek márkaépítési megoldás. Ami pedig szintén feltűnt menetközben, hogy bármelyik problémammegoldó vagy útmutató (tutorial) videójukat is néztem, kellemes hangulatot ébresztettek bennem, jó kedélyűek a tartalomgyárosaik. Ez is egy olyan dolog, ami megkülönbözteti a többi márkától, hogy magát a tanulás folyamatát is élvezetessé varázsolják. Látszik, hogy tudatos elképzelés van mögötte.
Frissítések
Fontos kérdés, hogy fejlesztik-e egyáltalán, fejlődött-e ez a WordPress téma? (Jogos kérdés lehet, hogy például megéri-e az örökös hozzáférés?) Erre egy hatalmas, határozott igen a válaszom. Mára a Divi sablon a WordPress weboldalaknak egy egyszerűen és nagyon sokoldalúan használható, minőségi “díszítőeszköze” lett. Gyakran hetente, kéthetente jönnek ki verziófrissítései a sablonnak, alig lehet követni. Természetesen az egy év alatt nemcsak hibákat toldozgattak-foltozgattak, hanem nagyon sok lényeges újítás volt: színátmenetek beállítása a front-end felületen, sokféle szegély-díszítőelem, beépített választható elrendezések, új szerkesztői nézetek, új animációk és még napestig lehetne sorolni. Beépítették a sablonba az összes Google betűtípust is, mint választható szöveg-, cím- vagy alapértelmezett betűtípust, mely nagyon nagy könnyebbség az arculattervezésnek és a weboldal kivitelezésének az összehangolásában. Az Ügyféllel végignézhetjük a Google oldalán, hogy az elképzelt betűtípusokból mi egyezik az ő elképzeléseivel és gyorsan, hatékonyan haladhat tovább a munka. Korábban erre is néha külön WordPress bővítményt kellett használni.
A Divi sablon funkciói, lehetőségei
Sokan írtak már a sablonról itthon is, külföldön is, Youtube-on is számtalan értékelés született a Diviről, de a legjobban szerintem továbbra is a saját weboldalukon van összefoglalva, mi mindenre képes e rendkívül kreatív weboldal-formaöntő. Amik ott le vannak írva, meg tudom erősíteni, hogy nem túlzások, és én is ennyire szupernek érzem eme a WordPress témát. A Divi sablon funkcióit bemutató oldal megtekintése.
Egy weboldal sablontól ma már elvárható, hogy a legtöbb létező felhasználói igényt kielégítse. Az, hogy a Weboldalkészítés Vállalkozásoknak által készített weboldalak ma már a Divivel készülnek, az jól jelzi az eszköz képességeit. A legtöbb esetben nem szükséges kódsorokat sem írni és az elképzelt, megtervezett arculat szinte minden eleme megalkotható a WordPress + Divi kombinációban. Persze, olykor hozzá kell toldani néhány sornyi CSS-t is, de általában csak elenyésző mértékben. Nagyon fontosnak érzem, hogy önmagában a Divi a kreativitást nem helyettesíti: ahhoz, hogy valaki profi weboldalakat rakjon össze ezzel az eszközzel, alapvető fontosságú, hogy jó esztétikai és stílusérzéke legyen. Máskülönben van egy olyan professzionális sablonunk, aminek a lehetőségeit nem tudjuk jól kihasználni.
A Divi sablon általános beállításainak egy szelete. Ezeken kívül még több száz lehetőség vár ránk…
“Fogd és vidd” ajánlat
Amellett, hogy elkészítem Megrendelőim weboldalát, egy prémium WordPress sablont, a Divit is odaadom ajándékba, örökös hozzáférési licensszel, örökös frissítési lehetőséggel.
Aki kezdő vállalkozó és szeretne a cégével az online térben is fejlődést elérni, az nem kerülheti meg, hogy legyen egy jó weboldala. Én ebben segítek, kezdő, vagy szintlépésre vágyó vállalkozásoknak. Az általam készített weboldalakhoz a Divi sablont ajándékba adom. Így ha a vállalkozó közben úgy dönt, hogy bele is tanulna egy-két hónap alatt weboldalának a szerkesztésébe, akkor lényegében megspórolta a Divi sablon árát is, hiszen ezt a szolgáltatásom mellé ingyen odaadom (75.000 Ft értékben).
A weboldalkészítés szolgáltatásom részeként egy 2-3 órás oktatóalkalmat is tartok, melyben véginézzük a WordPress kezeléséhez szükséges alapvető tudást, illetve ízelítőt adok a Divi szerkesztéséből is. Nyilván, ha az ember korábban még nem találkozott WordPress-szel, akkor egy alkalom nem elég arra, hogy teljesen átlássuk az egész honlap működését. Viszont a későbbiekben is tudok ebben segíteni, a személyre szabott oktatási alkalmaimon. Így később már nem lesz szükséges kiszervezni az “itt az írásom, tegyük fel a honlapra” jellegű munkáinkat.
Az Elegant Themes céggel kötött partnerségem révén, a következő linkekkel az eredeti árnál kedvezőbben vásárolható meg a Divi sablon: 20 % kedvezmény az 1 éves licensz árából VAGY 10%-os kedvezmény az örökös tagság árából!
A döntés, weboldalkészítés előtt
Ha van elég időnk rá, mindenképpen érdemes kezünkbe venni a munkát és folyamatosan képezve magunkat megtanulni a weboldalszerkesztést. Ma már ez nem olyan ördöngősség mint azt sokan gondolnák. A Divi nagyon leegyszerűsíti a folyamatokat. Ha gyorsan, hatékonyan és minőségi munkát végezve szeretnénk haladni, akkor én az ingyenes WordPress tartalomkezelő rendszer és a fizetős Divi sablon kombinációját javaslom. Ez ma biztosan az egyik legköltséghatékonyabb és legminőségibb megoldás a piacon. Számolnunk kell azzal, hogy munka mellett 1-2 hónapot igénybe fog venni, amíg az ember beletanul. De megéri rászánni az időt. Vagy…
Ha pedig az időnkből van kevesebb, de van ráfordítható pénzünk, célszerű a weboldalkészítést lehetőleg olyannak kiszervezni aki a Divivel készíti a honlapját. Biztos vagyok benne, hogy ez egy hosszútávú garancia arra, hogy évekkel később is szintekkel előrébb járjunk minőségben versenytársainknál. Ebbe azt hiszem megéri időt és/vagy pénzt belefektetni.
Néhány weboldalam, ami a Divi sablonnal készült…
Hogy ne csak a levegőbe beszéljek, itt van néhány weboldal, ami a Divi sablon segítségével készült el a Weboldalkészítés Vállalkozásoknak műhelyben.
maga a Weboldalkészítés Vállalkozásoknak honlap, amin a kedves Olvasó jelenleg is idejét tölti
az üZENEt együttes weboldala – a zenekar ünnepélyes, romantikus zenét játszik esküvőkön, alkalmakon, fogadásokon
az Egészség Kert honlapja – biogazdálkodás Őrbottyánban két lelkes kertész lány irányításával
Dinnyés Lilla személyre szabott étrend tervező és személyi edző weboldala.
Nagyon sokat köszönhetek ennek a sablonnak, rengeteg időt megspórolt és sok örömet szerzett nekem is az alkotói munka folyamán illetve Ügyfeleimnek, akik elégedettek voltak munkámmal. Köszönöm az olvasásra fordított figyelmet! Minden etikus és jó ügyekért dolgozó vállalkozásnak sok sikert kívánok!
Bognár Balázs
Kiemelt kedvezmény a Rank Tracker #1 seo szoftverre
Weboldalkészítés Vállalkozásoknak
Igényes, gyors, keresőbarát weboldalt készítünk a vállalkozásának.
