Weboldalunk linkeket tartalmaz a partneroldalakra. Ha webhelyünkről a partner webhelyére kattint és ott vásárolja meg a szolgáltatásait, jutalékot kapunk a közvetítésért (További információ). Az együttműködés ezen formája nem befolyásolja felülvizsgálataink objektivitását. Minden egyes vásárlással egy kattintással a weboldalunkról támogatni fogja szerkesztőségünket, hogy a jövőben is minőségi és hasznos tartalmat tudjunk létrehozni. Köszönöm.

| |

Áttekintés: Ha megismeri Divi-t, más sablont már nem fog akarni

Divi témaépítő teljesítmény

A Divi a leggyakrabban használt WordPress sablon a világon. Számos hasznos eszközt tartalmaz, amelyekkel vizuálisan eredeti weboldalakat hozhat létre. Mindezt műszaki ismeretek nélkül. Hogyan lehetséges? Ebben az áttekintésben megtudhatja.

Mi a Divi?

A Divi egy sokoldalú WordPress sablon és vizuális builder weboldalak létrehozására egyben. Ez az összeköttetés lehetővé teszi, hogy szép, professzionális megjelenésű weboldalakat hozzon létre a WordPress programban HTML programozásnyelvű vagy kódolási ismeretek nélkül.

Gondoljon úgy a Divire, mint a weboldal egyszerű létrehozásának eszközére. Könnyű létrehozni az oldalak vizuális drag&drop szerkesztőjének (fogd és ereszd) köszönhetően. A drag&drop szerkesztőben az oldalakat úgy állítják össze, hogy modulok (oszlopok, képek, galériák, gombok, árlisták, szövegek, űrlapok, fejlécek, térképek stb.) mozognak az eszköz menüjéből az oldal egy adott pozíciójába, ahol majd módosítja és beállítja a végső megjelenésüket. A modulban például megváltoztathatja a betűtípus színét, méretét, behúzását, vagy vizuális effektusokat, például árnyékolást adhat.

Divi sablon drag&drop szerkesztőjének bemutatása.

Hogy a weboldal készítése még könnyebb legyen, ebben az builderben elkészítik az elrendezési sablonokat. Ezek valójában kész sablon dizájnok, amelyekben csak az alapvető elemeket kell megváltoztatni (szövegek, fényképek stb.) sajátjainkra. Programozás nélkül a Divivel percek alatt elkészítheti és elindíthatja saját weboldalát.

Kinek van szánva a Divi sablon?

A Divi egy sokoldalú sablon. Egy ilyen sablon bármilyen területre, témára vagy projektre használható. Létrehozhat egy kisvállalati weboldalt és egy hatalmas webportált, magazint vagy e-shopot.

Használhatja például egy szabadúszó, kézműves, maszek weboldalához, de használhatja bloggerként, kreatív munkásként, tanácsadóként is. A sablon kifinomult landing page létrehozására is kiváló.

A sablon variabilitása és licencbeállításai lehetővé teszik a sablon korlátlan számú weboldalon történő használatát, lehetővé teszik független webdizájnerek és ügynökségek számára, hogy a Divi-t klienseik projektjeiken használják. Ennek köszönhetően egy igazán hatékony eszközt kapnak, amely megkönnyíti számukra az új profi weboldal tervezését és elkészítését.

Ki áll Divi mögött?

A sablont az amerikai San Francisco-i Elegant Themes hozta létre és fejlesztette ki. A céget 2008-ban alapították. Alapította és máig vezeti Nick Roach, aki a wordpress-es sablonok programozója és fejlesztője.

Kezdetben az Elegant Themes egy úgynevezett one man show projekt volt. Szakterülete a prémium sablonok fejlesztése volt, amelyekre az ügyfelek előfizettek a frissítéseikre és újításaikra.

Az Elegant Themes ajánlata évről évre nőtt más sikeres modern sablonokkal, amelyeket 2013-ban világszerte több mint 210 000 felhasználó használt.

Az év végén, 2013. december 11-én Nick Roach bejelentette a Divi sablon létrehozását az Elegant Themes blogon. Már a poszttól kezdve érezhető volt, hogy Divi nagy reményeket fűz a jövőbe. És végül valóra váltak. 2020-ban ezt a népszerű WordPress sablont világszerte több mint 1 300 000 weboldalon használják. A Built Width weboldal statisztikái szerint ez a világ leggyakrabban használt sablonja. Népszerűsége pedig még mindig növekszik. Csak Csehországban és Szlovákiában összesen csaknem 10 000 weboldal használja.

A Divi fő tulajdonságai és funkciói

Amint azt a cikkben jeleztem, a Divi nem egy “buta” WordPress sablon, hanem egy multifunkcionális eszköz a weboldalak létrehozásához. Legfőbb előnye, hogy mindent tartalmaz, amire szükség van, amikor weboldalakat hoz létre a WordPress-en.

A Divi sablon fő tulajdonságai
A Divi sablon fő tulajdonságai

A fenti kép nem ezt sugallja, de Divi szinte teljes egészében csehre van lefordítva. Sajnos az Elegant Themes weboldalnak nincs cseh verziója, a sablonnak viszont igen. Ha nem is tud angolul, gond nélkül használhatja ezt a sablont. Tényleg csehül van.

A Divi sablonban már előre örülhet azoknak a funkcióknak, melyeket lejjebb körülírok.

Divi builder

A Divi Builder egy WYSIWYG weboldal szerkesztő (What You See Is What You Get). Ez azt jelenti, hogy az oldalak valós nézetben készülnek benne. Tehát amikor új oldalt hoz létre, azonnal meglátja annak végleges megjelenését. Ennek a weboldal létrehozásnak az előnye főleg az alacsony időigényesség és az egyszerűség.

A sablon és a builder beállításainak intuitivitása elég jó szinten van. Véleményem szerint még egy kezdő is megérti a drag&drop buildert, de ismernie kell a CMS WordPress adminisztrációját, mert ezt a sablon nem nélkülözheti.

Ha képes tájékozódni a WordPress-ben, akkor könnyen meg fogja érteni az oldalak szerkesztését ezzel a sablonnal. Szerintem Divi sokkal felhasználóbarátabb, mint a jelenlegi WordPress szerkesztő, a Gutenberg.

Fejléc és lábléc szerkesztő

A Divi segítségével elkészítheti saját fejlécét (a rész a logóval és menüvel) vagy a web láblécét. Mindkettőt egy vizuális builder segítségével készíti el. Például lehetővé teszi az oldalak kifinomultabb fejléceinek létrehozását, ahol nem csak logó és menü található, hanem lehetnek telefonszámok, gombok és egyéb elemek is, amelyekre szüksége van. Nagyon jó, hogy ezeket a fejléceket és lábléceket beállíthatja akár a teljes webhelyre, akár csak egy adott oldalra.

Felhasználói szerepszerkesztő

A szerepszerkesztő segítségével korlátozhatja bizonyos felhasználók tevékenységeit. Például az ügyfél vagy a szerkesztők nem kerülnek bonyolultabb sablonbeállításokba, ahol figyelmetlenségükkel megbonthatnák az oldal teljes kinézetét vagy működését.

Modulok

Jelenleg valamivel több mint 40 modul van a Divi-ben. Valójában ezek azok az elemek, amelyekből a weboldal áll. Lehetnek sliderek, címek, szövegek, galériák, gombok, árjegyzékek vagy akár űrlapok. Szükség szerint állíthatja össze ezeket a modulokat az oldalon. Programozás nélkül létrehoz egy összetettebb weboldalt, amely méghozzá minden eszközön helyesen jelenik meg, mert az így kapott megjelenés reszponzív lesz.

A/B tesztelés

Több slider A/B tesztelésének eredményei. Forrás: Elegant Themes.
Több slider A/B tesztelésének eredményei. Forrás: Elegant Themes.

Az split tesztek (A/B tesztek) hasznos funkció, amellyel egyszerűen tesztelheti az oldal vagy csak annak egyes elemeinek hatékonyságát. Ez lehetővé teszi, hogy meglássa, hat jobban a felhasználókra. A lehető legjobb eredmény elérése érdekében a tesztek eredményeit és statisztikáit közvetlenül az adminisztrációban jeleníti meg, amelyek segítenek az oldal leghatékonyabb változatának kiválasztásában.

Saját CSS

A Divi sablon használatakor CSS nélkül is mindent megold, mert az elemek beállításának és stílusának lehetőségei szinte korlátlanok a builderben. A haladó felhasználók és fejlesztők azonban néha saját CSS-t szeretnének használni. A builderben egyszerűen kombinálhatja stílusait a Divi vizuális dizájnjával.

SEO beállítások

Az oldal SEO beállítása

A Diviben szerkesztheti az oldal címét és leírását, illetve a gyűjtő URL-eket. Valójában egy egyszerű SEO-pluginek helyettesítője, mint például a Yoast vagy a Rank Math. Habár ez a SEO beállítás segít befolyásolni a keresőmotorokban megjelenő címsorokat és leírásokat, már nem foglalkozik például sitemap létrehozásával. Ezért jó, ha nagyobb webes projektekhez az említett SEO pluginek egyikét használja.

Elkészített megjelenés elrendezések (sablonok)

A Divi ereje az oldalak egyszerű létrehozásában rejlik. Ezt leginkább a kreatív emberek élvezik, akik teljes mértékben kihasználhatják saját fantáziájukat a weboldal tervezésénél. Kevésbé kreatív vagy tapasztalt emberek számára az Elegant Themes professzionális weboldalterveket készített. Ezek valójában olyan weboldal-tervezősablonok, amelyeket azonnal fel lehet használni a saját weboldalához.

Előre elkészített minták dizájnjai a Divi készítőben.
Előre elkészített minták dizájnjai a Divi készítőben.

Az előre elkészített dizájnokkal jelentősen leegyszerűsítheti munkáját. Például kiválaszthatja a megjelenéseket a besorolt kategóriák alapján. Ha például egy étterem weboldalát hozza létre, akkor a Food&Drinks kategóriában választja ki a megjelenést. A kiválasztott dizájnt letöltheti weboldalára, ahol szövegeket, képeket és egyéb elemeket szerkeszthet. Néhány perc múlva van egy kedves, reszponzív és professzionális megjelenésű weboldala, amely a látogatóknak tetszeni fog.

Az Elegant Themes adatbázisban jelenleg 160 előkészített weboldal dizájn található. Ez összesen több, mint 1100 oldalelrendezés.

Hogy érthető legyek. A fenti képen megjelenési példákat láthat. Minden megjelenés átlagosan 5 oldalból áll (bevezető, rólunk, szolgáltatások, értékelések, elérhetőségek stb.). Nem kell teljes kész dizájnt használni a weboldalához, kiválaszthatja az elrendezésnek csak az egyik oldalát. Saját weboldalát elkészítheti saját dizájnját kombinálva az előre elkészítettel, vagy néhány előre elkészített dizájn keverékével.

Saját weboldal dizájn

Az előre gyártott tervek jól jelzik, hogy mi hozható létre a Divivel. A kreativitásnak és a fantáziának nincsenek határai az builderben. A Divi builder segítségével elkészítheti saját tervét egy üres oldalon. Nem kell csak meghatározott beállításokra és elrendezésre korlátozódnia, hanem létrehozhat saját eredeti tervet.

A Divi előnye, hogy az Ön által létrehozott weboldalterv teljes mértékben reszponzív. Ez azt jelenti, hogy az oldalak sokféle eszközön megfelelően jelennek meg a számítógéptől a mobiltelefonig.

Divi licenc ára

Divi licenc ára
A Divi sablon licenc ára – egy éves és életre szóló

A licenc ára két csomagra oszlik – egy éves és egy életre szóló licencre. Mindkét csomag minden előnyét megkapja, például a Divi korlátlan számú webhelyen történő használatát, az összes dizájnhoz való hozzáférést, a prémium támogatást és a frissítéseket. Tehát az egyetlen különbség az, hogy éves engedéllyel minden évben fizetnie kell ezekért a kiváltságokért, míg egy életre szóló engedéllyel csak egyszer fizet, és korlátlanul élvezheti az összes előnyét.

Útmutató: oldal készítése Divi sablon használatával

Rövid bemutatóban megpróbálom bemutatni a weboldal készítésének elvét a Divi builderben. Létrehozunk egy bevezető oldalt a weboldalról egy üres oldalon.

Ha aktiválta a Divi sablont, akkor a WordPress alkalmazásban válassza az Oldal létrehozása elemet az Oldalak menüben. Tehát ez nem változik. A szerkesztő oldalra kerül, ahol kiválaszthatja, hogy az oldalt a Divi készítővel vagy az alapértelmezett szerkesztővel kívánja-e létrehozni. De feltétlenül töltse ki az oldal címét.

Divi builder kiválasztása az oldalkészítéshez

A következő részben választhat:

  • Az elejétől szerkeszteni – üres oldalon fog kezdeni
  • Válasszon elrendezést – választhat az előre elkészített dizájnok közül
  • Klónozza a meglévő oldalt – egy már kialakított oldalt másol le
Oldalszerkesztés módjának kiválasztása.

Az elejétől szerkeszteni módot választottam. Eljutottam egy üres oldalra, ahol egy új sor beszúrásával kell elkezdenem.

Új sor behelyezése

Új sor behelyezése

Gondoljon úgy a weboldalra, mint egy táblázatra. Sorokból és oszlopokból áll. Korlátlan számú sort hozhat létre, de a sorban lévő oszlopok száma mindig legfeljebb 6 lehet. Az új oldalam 3 sorból fog állni. 1. sor bevezetéssel és fő címmel, 2. szolgáltatások bevezetésével és 3. elérhetőségekkel és űrlappal.

Modul behelyezése

Már elmagyaráztuk, hogy a modulok az oldal olyan elemei, mint például képek, űrlapok, galériák vagy szövegek. Létre kell hoznom a főoldal címét, szóval megkeresem a Szöveg modult.

Szöveg modul behelyezése.
Szöveg modul behelyezése.

Az elemre kattintás után a modul hozzáadódik az oldalhoz. Ezzel együtt hozzáadódik egy mintaszöveg, és megjelenik az a szövegszerkesztő, amelyben a szöveggel dolgozhat. Egyszerű felületen keresztül tovább igazíthatja szövege stílusát. Megváltoztathatja például a betűtípust, a betűméretet, az árnyékolást vagy a színt.

Szövegszerkesztő.
Szövegszerkesztő.
A szöveg és stílusának beállítása.
A szöveg és stílusának beállítása.

Új szakasz hozzáadása

Az oldal újabb vonalának hozzáadásához kattintson az új szakasz hozzáadása gombra. Ezután eljut a klasszikus sorelrendezés kiválasztásához vagy egy speciális oszlopelrendezés kiválasztásához. Be kell vallanom, hogy ez a funkció kimondottan tetszik.

Új szakasz hozzáadása
Új szakasz hozzáadása
Speciális oszlopelrendezés.
Speciális oszlopelrendezés.

A weboldal létrehozása ezen egyszerű lépésekkel történik, amelyeket az oktatóanyagban említek. Minden egyes hozzáadott modullal különböző beállításokat és stíluslehetőségeket talál. Inspirációként megtekintheti a Diviben létrehozott tervek könyvtárát.

Design elmentése és oldal közzététele

Az oldal dizájnjának létrehozása után feltétlenül tegye közzé az oldalt, hogy a többi felhasználó is megtekinthesse. A készülő oldalt elmentheti piszkozatként és a készet közvetlenül közzé teheti.

Oldal közzététele.
Oldal közzététele.

A Divi előnyei és hátrányai

Pros (+)Cons (-)
+ Egy sablon korlátlan számú weboldalhoz- A sablon néhány fordítása hibákat tartalmaz
+ Divi drag&drop builder- Egy hosszabb és összetettebb oldalon a builder lassabban reagálhat
+ Kompatibilis a legtöbb WordPress pluginnel- A Divi deaktiválása után csak az oldalak "rövid kódjai" maradnak meg. Ezért a létrehozott terv nem jelenik meg másik sablonban
+ Előre elkészített elrendezési dizájnok
+ A sablon folyamatosan fejlődik (gyakori frissítések)
+ Hozzon létre egy reszponzív weboldalt programozás nélkül
+ Korlátlan életre szóló licenc

Értékelés és befejezés

Divi hihetetlen felhasználói bázissal rendelkezik. Ennek eredményeként a fejlesztők elegendő pénzkészlettel rendelkeznek, amelyet részben a további fejlesztésekre fordíthatnak. A végfelhasználó számára ez főként azt jelenti, hogy ha nem tudja, hogyan kell valamit kezelni, akkor valószínűleg talál utasításokat az interneten.

A nagy felhasználói bázis azt is jelenti, hogy más pluginek fejlesztői gondoskodnak arról, hogy műveik kompatibilisek legyenek a Divivel. Például a népszerű e-shop rendszer, a WooCommerce tökéletesen működik a Divivel, így ezek kombinálásával remek online áruházat hozhat létre.

Kissé nem tetszik, hogy a Divi sablon deaktiválása után csak egy csomó rövid kód marad. Emiatt nem használhat más sablont a weboldalához, mert az eredeti dizájn ott nem jelenik meg. Korlátozás? Valószínűleg nem. Feltételezzük, hogy a Divi megvásárlása után nem lesz szüksége újabb sablonra, mert ez kellően variabilis és széleskörűen felhasználható.

A Divi egyszerűen olyan, mint minden sablon. Néhány hiba itt-ott megjelenik, de a fejlesztők hamarosan megjavítják. Az egyetlen különbség az lehet, hogy ez a sablon alkalmas-e nem programozók számára. Műszaki ismeretek nélkül pár kattintással kialakíthatja saját eredeti weboldalát. Ezért nem félnék a Divit ajánlani a WordPress legtöbb felhasználójának.

Rate this post

Similar Posts

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük