DIVI sablon használata weboldalak készítéséhez WordPressben

Pro rovatunk állandó vendégei a különféle Final Cut Pro és Premiere plug-inek  és ott szoktuk kielemezni az Adobe legújabb alkalmazásait is, nem beszélve megannyi alternatív, de profiknak szánt képszerkesztőről, videoszerkesztőről, fejlesztőeszközről. Mostanában viszont egyre több jelzés érkezik olyanoktól, akik elkezdtek ismerkedni a WordPress rejtelmeivel, de elakadnak itt-ott a saját honlap készítése során. Nekik próbálunk meg segíteni most induló sorozatunkkal, amelynek első részében a DIVI sablon használata lesz terítéken. Összefoglaljuk, miért érdemes ezzel a sablonnal és a hozzá tartozó kiegészítőkkel nekifogni egy honlap felépítésének.

 

DIVI sablon használata testreszabott oldalak készítésére

Be kell valljuk, nem megyünk túl messzire a DIVI bemutatásával, hiszen nem titok, hogy a Techwok és testvéroldalaink – például a Paleolcsó – is erre a sablonra épülnek. A Techwok és a Paleolcsó közötti különbség persze azonnal szemet szúr, s nem is véletlen. Míg a Paleolcsó esetében kifejezetten a DIVI adja az alapot, addig a Techwok a DIVI-ből származtatott Extra sablont használja. Utóbbi inkább csak online magazinoknak ajánlható jószívvel, ellenben maga a DIVI szinte mindenre képes: blogtól az üzleti oldalakon át a webshopig bármit ráépíthetünk (néhány példa: itt, itt és itt). A végletekig testreszabható, alig vannak benne kötöttségek. Ha mégis valami nagyon egyedire lenne szükségünk, szinte minden elemet át tudunk rendezni CSS kódokkal, amelyeket a haladóbbak kiötölhetnek kútfőből, a kezdőknek pedig érdemes a DIVI terméktámogatást igénybe venni (sajnos csak angolul), mert a lelkes fejlesztőcsapat szinte azonnal reagál, s ha a tanács nem elég, az engedélyünkkel akár bele is nyúlnak az oldalba, hogy “kiigazítsák” a dolgokat. Felépíteni nem fogják helyettünk a honlapot, de gyakorlatias módon és gyorsan segítenek, ha más nem a fórumban. A DIVI egyébként elég jól dokumentált, nem beszélve arról, hogy népszerűségének köszönhetően rengeteg kódrészletet és tanácsot találunk hozzá az interneten. Így ha kicsit félre szeretnénk lökni mondjuk a menüt az alapból beállítható elrendezési lehetőségekhez képest, nem lesz vele gond.

Mindezt sajnos nem adják ingyen, de az évi 89 dolláros (+adó) árban nem csak a DIVI sablon és a hozzá tartozó frissítések, támogatás van benne, hanem az Extra téma, s további kevésbé testreszabható viszont adott témakörökhöz remekül illeszkedő sablonok, hírlevél feliratkoztató plug-in, közösségi média plug-in, és a DIVI Builder, amely a DIVI alap szerkesztőfelületének – majdnem – minden tudását képes beépíteni egyéb WordPress sablonokba (elsősorban posztokat és oldalelrendezéseket szerkeszthetünk ezzel a megoldással).

 

Modulokból építkezve

A DIVI egy vizuális, fogd és dobd oldalépítő megoldás. Segítségével nagyjából úgy rakhatunk össze egy WordPress alapú weboldalt, mintha tördelőprogramban dolgoznánk: elrendezzük a szekciókat, kiválasztjuk azok vízszintes felosztását (oszlopok száma és elrendezése), majd egyszerű fogd és dobd módszerrel a megfelelő helyekre tesszük a szövegdobozokat, képeket, videókat, blog-modulokat, lapozókat, gombokat, idézeteket, kiemeléseket, űrlapokat, zenelejátszót, térképet, portfóliókat, galériákat, számlálókat, slidereket stb. Minden modul a végletekig testreszabható, s ha a simán klikkelgethető opciók (szövegstílusok, háttérkép, ikon, margó, szegély, árnyék, animáció stb.) között nem találnánk meg valamit amire szükségünk van, mindegyiknél adott a lehetőség egyedi CSS kódok használatára is. A szekciókra-oszlopokra történő építkezés fő oka (amellett, hogy ez így nagyon könnyen kivitelezhető) elsősorban az, hogy a DIVI reszponzív oldalak építésére hivatott. Az így összerakott honlap automatikusan képes alkalmazkodni a különféle felbontásokhoz és rendszerekhez (asztali gépek, tabletek, okostelefonok).

A szerkesztésre két megoldás van a rendszerben: dolgozhatunk a WordPress oldalszerkesztőjébe beépülő DIVI szerkesztővel, de akkor kicsit szokni kell a modulokat (kis gyakorlás után simán felismerünk minden összetevőt és átlátjuk, hogy amit modulos elrendezésben látunk, az milyen lehet élesben), vagy használhatjuk a Visual Builder felületet, amelyet bármilyen oldal esetén bekapcsolhatunk, és a böngészőben valóban megjelenő felületen tudjuk szerkeszteni vele az összes elemet. Tényleg nem sokkal bonyolultabb, mint egy otthoni felhasználóknak készült kiadványszerkesztő. Van visszavonás és ismétlés funkció is, így ha valamit elrontunk, azonnal javíthatjuk egy kattintással (vagy ujjmozdulattal, ha billentyűkombinációt használunk).

A sablonnal érkeznek minta elrendezések is, például kapcsolati oldal, termékbemutató, cégbemutató aloldalak stb. De ilyenekből tengernyit találunk az interneten, így ha elhatalmasodik rajtunk a lustaság, akár vásárolhatunk is DIVI-re épülő oldalfelépítéseket, amelyek pár kattintással importálhatók és professzionális külsőt kölcsönöznek weboldalunknak, percek alatt. Természetesen ezek is átszerkeszthetők később, ahogy arra is van lehetőségünk, hogy a magunk alkotta elrendezéseket is mentsük és exportáljuk, hogy aztán közreadjuk, vagy éppen felhasználjuk egy másik oldalhoz. A sablonok és kifejezetten DIVI-hez készülő kiegészítők egyik központi oldala az Elegant Marketplace, ahol a sablon esetleges hiányosságait orvosló plug-inektől a DIVI child témákig szinte bármit megvehetünk. Azt viszont meg kell jegyeznünk, hogy sokkal élvezetesebb dolog nulláról, a saját elképzeléseink szerint felépíteni egy oldalt, ráadásul így nem kerül plusz pénzbe a DIVI éves díján felül. Különösebben nagy hiányosságai amúgy sincsenek a rendszernek, így pusztán az alap DIVI-re építve is professzionális oldalt hozhatunk létre.

 

A kor gyermeke

A DIVI egyik nagy előnye, hogy folyamatosan frissítik, ami nem csak hibajavításokat szokott takarni, hanem legtöbbször új funkciókat is. Ez a sablon a mai kor gyermeke, ennek megfelelően tökéletesen jelenik meg az asztali gépek böngészőiben és az okostelefonokon, tableteken egyaránt. Remekül SEO-zható (együttműködik a népszerű Yoast plug-innel is) és a DIVI-re épülő oldalak sebessége is jól optimalizálható (Minify és Combine funkciók CSS és Javascript fájlokhoz stb.), bár egy cache plug-in még így is ajánlott hozzá. Cserébe viszont a népszerűbb cache megoldásokkal zokszó nélkül együttműködik.

Természetesen elő van készítve a közösségi oldalakkal való kommunikációra is, de erre még rátesz egy lapáttal az előfizetőknek ingyen használható Monarch plug-in, amely kényelmessé teheti oldalunk tartalmainak megosztását a látogatók számára. Emellett hasznos a szintén a csomag részét képező Bloom is, amely számtalan hírlevél szolgáltatás (Mailchimp, AWeber, Infusionsoft, iContact stb.) stílusos integrálására ad lehetőséget (widget, pop-up. fly-in, cikkbe épülő megoldásokkal stb.). Még azt is megoldhatjuk vele, hogy egy adott tartalomhoz (ez jellemzően kód, letöltési link stb.) csak akkor férjen hozzá a látogató az oldalon, ha feliratkozik a hírlevelünkre. Ez egyébként bizonyos esetekben kicselezhető, szóval nagy titkot ne bízzunk rá, de kezdetnek megteszi, ha nem akarunk komolyabb jogosultságkezelő rendszert tenni WordPress oldalunk mögé (ilyenekről is lesz majd még szó nálunk).

Talán sokaknak fontos, ezért külön is kiemeljük: a DIVI sablon honosított, vagyis – eltekintve néhány új funkció lassított tempóban érkező fordításától – teljesen magyar nyelven tudjuk használni a magyar WordPressre telepítve. De több nyelvű oldalak készítésekor sem lesz gondunk, automatikusan vált minden általa ismert nyelvre és szinte minden népszerű többnyelvű plug-innek összelőhető.

Ha pedig már a hírlevelek és edm-ek szóba kerültek, érdemes még megemlíteni, hogy a sablon rendelkezik AB Split Testing funkcióval, vagyis felmérhetjük, hogy egy aloldal két változata közül melyik teljesít jobban (például honnan szakadoznak le kevésbé a felhasználók és nézelődnek tovább).

 

Összegzésül

Mindent egybevetve a DIVI remek választás, ha saját weboldal készítésén törjük a fejünket. Legyen szó személyes blogról, vagy céges honlapról, ezzel a sablonnal nem foghatunk mellé. Kezdőktől a profi fejlesztőkig mindenki megtalálhatja benne a számítását. A tudását egyébként ingyen és bérmentve tesztelhetjük erre a linkre kattintva. A DIVI, bár szinte tényleg a végletekig testreszabható, azért rendelkezik olyan tulajdonságokkal, amelyek miatt a vele készült oldalak felismerhetők. Ezek a külsődleges jegyek persze eltüntethetők teljesen is, ha kicsit a PHP és CSS kódokba belenyúlunk (mondjuk ha egy nemzetközi cég esetben a céges policy ad megkerülhetetlen előírást az oldal külsejére vonatkozóan), de az esetek nagy többségében erre egyáltalán nem lesz szükség, hiszen a DIVI egy letisztult, modern külsőt ad az oldalnak, az elemek elrendezése, a honlap felépítése pedig teljesen egyedi lehet. Nem kell attól félnünk, hogy a megvásárolt sablonra még ezren rákaptak és ettől kezdve egy halom a miénkkel szinte teljesen egyező oldal lesz a világhálón.

Ha valaki inkább “statikus” oldalakra vágyna és nem merülne el a WordPress és a DIVI világában, annak tudjuk javasolni korábbi összeállításunkat, amelyben mutattunk két olyan megoldást, amely kifejezetten praktikus lehet a kezdő (vagy gyors eredményre vágyó) és spórolós felhasználóknak (mindkettő ingyenes ugyanis).

Ne maradjon le erről sem!