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 2024-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é.

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.

WordPress tárhely

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.

Weboldal készítés

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 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 287$/é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 365$). 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. 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

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

Oszd meg! Küldd el! Nyomtasd ki!

Facebook
LinkedIn
Email
Nyomtatás
Dávid Ádám

Dávid Ádám

Dávid Ádám vagyok, a Kiszervezett Marketing Kft. alapítója, az online marketing megszállottja.

150+ szöveges ötcsillagos ügyfélvéleményünkkel előrevetítjük, hogy milyen egy igazán profin megtervezett, ügyfélközpontú marketing ügynökséggel dolgozni.

A Kiszervezett Marketing 13x-os Marketing Diamond Awards-díjas ügynökség. Ezt a díjat a Magyar Marketing Szövetség ítélte oda számunkra, ami bizonyítja, hogy szakmailag kimagasló szolgáltatásokat nyújtunk az online marketing területén.

Büszkék vagyunk arra, hogy 2023-ban a Kiszervezett Marketing Kft. lett Az Év Marketing Nagykövete!

A Kiszervezett Marketing az a marketing ügynökség, amely nem olyan, mint a suszter és a cipője.

Ezt alátámasztja a 350+ szakmai blogcikkünk is, amelynek köszönhetően több mint 160.000 látogatónk van éves szinten a saját weboldalukon a Google Keresőből, fizetett hirdetések nélkül. Mindezt alig 1,5 év alatt értük el.

A megtervezett médiamegjelenésekkel folyamatosan ott vagyunk nagy hírportálok hasábjain a területünk szakértőjeként. Párat kiemelve: penzcentrum.hu, hirado.hu, hrportal.hu, origo.hu, blikk.hu.

Azért lehetünk Google Partnerek, mert rendelkezünk a Google által elismert szakértővel. Az ügyfeleink hirdetési kampányai kivétel nélkül minden esetben elérik a minimum 70%-os optimalizáltságot.

Tartottam már szakmai előadást több egyetemen online marketing témában, többek között: BME, BGE, ELTE, MATE, Óbudai Egyetem. Emellett a Magyar Marketing Fesztivál rendszeres előadójaként mutatom be a siker kulcsát a digitális térben.

Hogyan legyen vevőszerző weboldalam?

HOVÁ KÜLDHETJÜK AZ INGYENES E-BOOKUNKAT?

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Ajánlatkérés

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Hogyan legyen vevőszerző weboldalam?

Töltsd le az e-bookot, és a megvalósítás menete is kristálytiszta lesz előtted.