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 2025-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 (hivatalos oldal) 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é.

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.

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:

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!

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.

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.

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.

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.

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.

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.

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 elérhető éves előfizetéssel vagy egy egyszeri, életre szóló használati jog díjának a kifizetésével is.

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

1) Éves előfizetés: 89$/év (vagy Divi Pro 277$/é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: 249$ (vagy Divi Pro 297$). 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.

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 Divi ➝ Sablon beállítások ➝ Frissítés menüpont alatt tudjuk elérni.

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.

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.

Végezetül menjünk a Megjelenés ➝ Sablon 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ése ➝ WordPress 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ása ➝ Bővítmény feltöltése.

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. Bővebben: WordPress weboldal készítés.

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: szerk@kiszervezettmarketing.hu

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