A Divi sablon és a kreatív weboldal tervezés

A Divi egy népszerű WordPress sablon és weboldalkészítő plugin, amelyet elég egyszer megvásárolnunk, és akárhány honlapot tervezhetünk vele.
Divi borítókép

A Divi sablon és a kreatív weboldal tervezés

Mindenki egy olyan WordPress weboldalról álmodik, ami rendelkezik az összes elképzelhető funkcióval és design elemmel, amire egy sikeres honlapnak szüksége lehet 2022-ben. A Divi sablon egy kihagyhatatlan lehetőséget ajánl fel minden kezdő és profi weboldalkészítőnek, amit cikkünkben részletesen be is mutatunk. Tarts velünk! 🙂

1. A Divi fogalma

A Divi egyrészt a legnépszerűbb WordPress sablon (angolul theme) az egész világon, másrészt előszeretettel használják WordPress weboldalak építésére is.

Pontosabban: a Divi sablon automatikusan tartalmazza a Divi Builder nevezetű honlapkészítőt, viszont ha már használatban van egy másik sablon a weboldalunkon, akkor külön letölthetjük a Divi plugint, ami csak a weboldalépítést teszi lehetővé.

Divi főoldal

Sokban hasonlít tehát az Elementor bővítményhez, de legalább ugyanannyi dologban el is tér tőle, ahogy az a cikk folyamán világossá fog válni.

Az Elegant Themes nevű vállalat már 2008 óta foglalkozik WordPress sablonok létrehozásával és árusításával. A legnépszerűbb termékük a Divi, amelyet a hivatalos oldalukról tölthetünk le, de erre később visszatérek.

A Divi sablon 2013-ban került kiadásra, azóta a legtöbbet használt WordPress sablonná nőtte ki magát, és sikere továbbra is töretlen.

A termék saját weboldalkészítő funkciója lehetővé teszi az egyszerű és könnyen testre szabható drag-and-drop elvén működő honlapépítést, amihez semmilyen HTML, CSS vagy PHP kódolási ismeret sem szükséges.

Rengeteg mindent adhatunk hozzá újonnan épített weboldalunkhoz: képgalériákat, boltokat, számlálókat, kapcsolatfelvételi űrlapokat, stb.

A Divi megvásárlását követően végtelen számú weboldal tervezéséhez használhatjuk ugyanazon felhasználóval! 🙂

A sablonokat és modulokat minden téren egyedi megjelenéssel lehet ellátni. Azonban ha nincs kedvünk az önálló tervezéssel bajlódni, több mint 800 előre elkészített weboldal-design jár a Divi mellé ingyenesen.

2. Milyen funkciói vannak a Divinek?

A Divi hasonló elven működik, mint az Elementor: a fogd és vidd rendszerben a weboldal készítéshez szükséges elemeket egyszerűen behúzzuk a tervezőfelületre, és azok meg is jelennek honlapunk felületén.

A vizuális szerkesztés előnye, hogy valós időben láthatjuk építés alatt lévő weblapunk kinézetét.

Divi weboldal tervező

A fejlesztők saját CSS kódjaikat is integrálhatják a Divi platformjára, valamint a reszponzív design által azt is megtekinthetik, hogyan fog kinézni weboldaluk mobil készülékeken.

A fenti képen láthatjuk, hogyan néz ki egy fejléc szakasz szerkesztése a Divi segítségével. Ha a desktop nézetet átváltjuk telefonos nézetre, az alábbi képet kapjuk:

Divi telefonos nézet

Megszámlálhatatlan tervezési opció közül válogathatunk: beépíthető modulok tucatjait használhatjuk, és ezeket több szempontból is testre szabhatjuk, ami több ezer lehetőséget ad a kezünkbe!

Divi widgetek

A kép bal oldalán az elérhető tervezési lehetőségek csak egy kicsiny szegletét láthatjuk, még rengeteg dolgot testreszabhatunk weboldalunk kinézetén.

Az elkészített elrendezéseket és sablonokat elmenthetjük, hogy későbbi bejegyzések létrehozása során is használni tudjuk őket.

Ha nemcsak egy oldal kinézetét akarjuk megtervezni, hanem az egész weboldal lapjainak designját szeretnénk beállítani egységesen, akkor ezt is gond nélkül megoldhatjuk a globális elemek és stílusok használatával.

Divi sablonok létrehozása

A tervezés közbeni hibáktól sem kell tartanunk, mert egy kattintással visszacsinálhatjuk a nem kívánt változtatásokat!

3. Kinek ajánljuk a Divit?

A Kiszervezett Marketing weboldalát is a Divi szerkesztővel építettük fel, így bátran ajánljuk mindenkinek! 🙂

  • Szabadúszó webfejlesztőknek: gyorsabb, könnyebb és élvezhetőbb a weboldal készítés. A Divi használatával szinte mindent megvalósíthatunk egy sablonon belül, nincs szükségünk más modulokra.
  • Weboldalkészítő ügynökségeknek: sokkal hatékonyabb a tervezési fázis, mivel összekapcsolhatjuk a csapattagok munkáját, fejleszthetjük az együttműködést, valamint végtelen számú weboldal készíthető az ügyfelek számára egyetlen megvásárolt licenccel.
  • Weboldal-tulajdonosoknak: a kezdő honlaptulajok is létre tudnak hozni az elképzelésüknek megfelelő weboldalakat, köszönhetően a vizuális szerkesztő könnyű kezelhetőségének és a több száz elérhető előkészített sablon elrendezésnek.

4. Weboldal készítése Divi Builder segítségével

Weboldalunk tervezőfelülete kisebb szakaszokra, oszlopokra és sorokra van bontva, ezeket tudjuk igény szerint szerkesztgetni.

Így néz ki egy üres Divi sablon, amit szinte végeláthatatlan módon fel tudunk tölteni tartalommal, design elemmel és speciális funkciókkal.

Üres Divi sablon

Modulokkal tölthetjük fel a sorokat, ezek lesznek lényegében a widgetek. Például: galéria, blog, audió, oldalsáv, ikon, opt-in e-mail, kereső, fülszöveg, kapcsoló, és így tovább.

Az üres sablonból például egy ilyen weboldalt tudunk kreálni néhány perc leforgása alatt.

Új létrehozott oldal

Egy ajánlói felületet, opt-in e-mail marketingre való feliratkozási lehetőséget, valamint blogbejegyzéseket adtam hozzá az új weboldalamhoz a widgetek közül.

Ezeket olyan mértékben tehetjük egyedivé és variálhatjuk, ahogy az igényeinknek megfelel, tényleg csak a képzeletünk szabhat határt! 🙂

A Divi funkcióit kipróbálhatjuk egy ingyenesen elérhető demó verzióban is, hogy meggyőződjünk a program által kínált lehetőségekről.

Divi demó verzió

Láthatjuk a fenti képen is, hogy lényegében végtelen számú lehetőségünk van álmaink weboldalának létrehozásához: teljesen szabadjára engedhetjük képzeletünket!

Lehetetlen lenne összefoglalni, mi mindent tudunk beállítani, kezdve a háttereken megjelenő minta árnyékolásának színétől, egészen a legapróbb CTA gomb felületén megjelenő szöveg betűtípusáig.

5. Divi Téma testreszabása

Egy apróbb ízelítő a testreszabási lehetőségek tárházából. Mindenkinek ki kell próbálnia a Divi nyújtotta lehetőségeket, hogy megértse a hatalmas mennyiségű kreatív beállítási lehetőséget.

Nézzük, hogy meglévő weboldalunkat milyen beállításokkal tehetjük még egyedibbé:

1) Általános beállítások:

  • Honlap azonosítása: a weboldal nevének, ikonjának, egysoros leírásának meghatározása;
  • Szerkezeti beállítások: az elrendezés méretezése, téma főszíne;
  • Tipográfia: külön betűméret, betűtípus, betűszín, hivatkozási szín, sorköz, betűtávolság beállítása a fejléc, lábléc és törzsszöveg számára;
  • Háttér: a háttér színe és háttérkép beállítása.

2) Olvasási sáv: az olvasási folyamatjelzőt állíthatjuk be, hol jelenjen meg, milyen méretben, színben, vastagságban.

3) Gombok: a gombok stílusát határozhatjuk meg a weboldalon, külön stílust megadva az egérmutató alatt megjelenő gombok kinézetére.

Gombok testreszabása

4) Olvasási idő: a bejegyzések elolvasásához szükséges percek számát mutatja ki.

5) Blogbejegyzések: a meta és fejléc tipográfiájának teljes testreszabása (szövegméret, sormagasság, betűköz, betűtípus, betűtávolság, betűstílus).

6) Mobil stílusok:

  • Tablet: a weboldal táblagépeken megjelenő verziójának elrendezése;
  • Telefon: a weboldal mobiltelefonokon megjelenő változatának elrendezése;
  • Mobil menü: logók és színek testreszabása.
Tablet nézet

7) Színsémák: a weboldal által használt színek beállítása.

8) Menük: főmenük és másodlagos menük testreszabása, menüpontok meghatározása.

9) Widgetek: az alkalmazott widgetek kinézetét teljesen személyre szabhatjuk!

10) Kezdőoldal beállítások: a kezdőlap lehet egy állandó statikus oldal, vagy egy blogbejegyzések mintájára, időben visszafelé haladó oldal is.

11) WooCommerce: üzleti értesítések, termékképek, katalógusok, és a pénztár beállításait határozhatjuk meg.

12) További CSS: a fejlesztő által hozzáadott extra CSS kódok listázása.

6. Mennyibe kerül a Divi?

A Divi egy fizetett sablon és weboldalkészítő plugin, amely évente néhány alkalommal 20%-os leárazást tart néhány napon át.

2022 áprilisában például egészen április 27-ig él ez a kedvezmény, tehát ha be akarod szerezni a Divit, akkor ez a tökéletes alkalom!

Divi vásárlása

Két csomag közül választhatunk:

1) Éves előfizetés: jelenleg 70$ / év az ára, leárazás nélkül 89$ / év. A csomag tartalmaz hozzáférést a Divihez, több száz elérhető elrendezést és sablont, folyamatos frissítéseket, prémium támogatást, valamint korlátlan számú weboldal építését.

A Divi 30 napos pénzvisszafizetési garanciát is ad, ha nem vagyunk elégedettek a vásárolt termékkel. Tényleg kihagyhatatlan ajánlat! 🙂

Ez a tarifa azonban csak egy évig érvényes, utána meg kell újból venni a csomagot.

2) Egyszeri előfizetés: jelenleg 199$ / év az ára, leárazás nélkül 249$ / év. Egyszer megvásároljuk, és egész életünkben használhatjuk a Divit. A csomag ugyanazt tartalmazza, mint az éves előfizetés, de korlátlan ideig érvényes.

Ha tovább szeretnéd bővíteni a Divi által kínált lehetőségeket, látogass el a Divi Marketplace weboldalára, ahol harmadik féltől származó modulokat vásárolhatsz, így új témákhoz, bővítményekhez, tervező eszközökhöz, elrendezésekhez juthatsz.

7. A Divi integrálása WordPress weboldalra

Korábban említettük, hogy létezik Divi plugin, amit weboldalak építésére használunk, illetve Divi sablon, ami egész honlapok működtetését és elrendezését biztosítja.

7.1. Divi sablon feltelepítése

Első lépésként szükségünk lesz egy regisztrált felhasználóra az Elegant Themes weboldalán.

Ezután megvásároljuk a számunkra ideális csomagot: éves vagy egyszeri előfizetés. A terméket .zip formátumban fogjuk megkapni.

Divi licenckulcsot is a profilunkon belül tudunk generálni a Username & API Key menüpont alatt.

Divi API key

Ezzel az API kulccsal tudjuk majd összekötni Elegant Themes profilunkat és a WordPress felületére telepített Divi sablonunkat, hogy hozzáférhessünk a több száz elérhető elrendezéshez, és folyamatos frissítésekhez juthassunk.

Ezt a telepítést követően a DiviSablon beállításokFrissítés menüpont alatt tudjuk elérni.

API kulcs megadása

A telepítés folytatásához nyissuk meg a WordPress Vezérlőpultját, ahol a SablonokÚj hozzáadása menüpontokat követve tudjuk majd alkalmazni az új sablonunkat.

Divi hozzáadása WordPress

Ezt követően kattintsunk a Sablon importálása gombra, majd a megjelenő ablakban válasszuk ki a korábban letöltött .zip fájlt, ami tartalmazza a Divi sablont, és töltsük fel WordPress weboldalunkra.

Sablon feltöltése

Végezetül menjünk a MegjelenésSablon menüpontra, keressük ki a Divit, és kapcsoljuk be.

7.2. Divi Builder plugin feltelepítése

A weboldalépítő bővítmény integrálása nagyon hasonlóan működik: RegisztrációTermékvásárlás .zip fájl letöltéseWordPress Vezérlőpult megnyitása.

Miután ez megvan, megnyitjuk a WordPress bővítmények bemutatása során ismertetett útvonalon a bővítménytárt: BővítményekÚj hozzáadásaBővítmény feltöltése.

Divi plugin integrálása

A telepítés után ne felejtsük el bekapcsolni a Divi Builder plugint!

8. Divi ajánlatunk számodra

Azt tapasztaltuk, hogy sokan kezdenek bele az önálló weboldal készítésbe, azonban útközben elakadnak, hiába megvásárolták a Divit vagy valamilyen más programot. Ez így csak ablakon kidobott pénz.

Tekintsd meg egyedi ajánlatunkat:

A Kiszervezett Marketingnél mi biztosítjuk az ügyfeleknek ingyenesen a Divi szoftverét az újonnan kézhez kapott weboldaluk mellé!

Vedd fel velünk a kapcsolatot most, ha szeretnél egy profi weboldalt vállalkozásod számára, valamint egy nagyszerű weboldalkészítő alkalmazást is hozzá.

9. Összefoglaló

A Divi az Elegant Themes egyik terméke, egyszerre van jelen WordPress sablonként (ami egyébként a világon a legnépszerűbb) és weboldalépítő pluginként.

Rengeteg testreszabási lehetőséggel tudunk teljesen egyedi weboldalt létrehozni a semmiből.

A Divi nagy előnye, hogy elég egyszer megvásárolnunk, és végtelen számú weboldalt tervezhetünk meg ugyanazzal a felhasználóval.

Hátránya viszont, hogy nincs ingyenes verziója, csak egy kipróbálható demó verzió érhető el.

Hasznosnak találtad írásunkat? Akkor ne habozz megosztani másokkal is ezt az értékes tudást! 🙂

Hibát találtál? Írj nekünk az alábbi e-mail címre: [email protected]

10. Gyakran ismételt kérdések és válaszok

❓ Mi az a Divi?

A Divi a legnépszerűbb WordPress sablon a világon, és egyben weboldalak készítésére is használják, a Divi Builder honlapkészítő formájában.

❓ Hol tudnék elérhető áron minőségi WordPress oldalt készíttetni?

Lépj velünk kapcsolatba, és a Kiszervezett Marketing profi csapata egy héten belül elkészíti álmaid weboldalát.

❓ Megéri megvásárolni a Divit?

Igen, mivel rengeteg testreszabási lehetőséget ad és egyetlen verzióval akár végtelen számú honlapot is készíthetünk, nincs korlátozás.

Dávid Ádám

Dávid Ádám

Szia, Dávid Ádám vagyok a Kiszervezett Marketing Ügynökség alapítója. Több mint 120+ weboldalt építettünk már sikeresen az ügyfeleink számára. Az így szerzett tapasztalataimat blog formájában szeretném megosztani veled. Sok sikert számodra a megvalósításban!

Hozzászólások