Divi Toolbox

Mi ez és milyen problémát old meg?

A Divi Toolbox a Divi témához készült kiegészítő bővítmény. Arra való, hogy a megszokott „kellene egy kis CSS/PHP/JS” feladatokat kattintgatós beállításokkal oldd meg. Egy helyre hozza a gyakran hiányzó finomhangolásokat: fejléc és mobilmenü vezérlés, lábléc trükkök, blogelrendezések, előtöltő, popupok, részecskés hátterek, mikróinterakciók. Így nem kell sok apró plugint összeraknod és kódot toldoznod: gyorsabb a munka, kevesebb a hiba.

Hogyan működik?

Aktiválás után két helyen kapsz beállításokat:

• a Divi menüben (Divi → Divi Toolbox) külön szekciókra bontva,
• a Theme Customizerben élő előnézettel (Divi → Theme Customizer → Divi Toolbox).

Csak Divivel működik. A bővítmény teljesítménybarát: kizárólag a bekapcsolt opciókhoz tölti be a szükséges egy darab CSS/JS fájlt; a látványos effektek (pl. Particles, Parallax Scroll, 3D tilt) külön JS-t igényelnek, ezeket is csak akkor kapod meg, ha tényleg használod. Modern PHP környezet javasolt.

Fő funkciók, érthetően

Admin és rendszer

• Login oldal arculata: logó, színek, hátterek átállítása céges brandre.
• Divi Library shortcode: elrendezéseket shortcode-ként is beilleszthetsz, így Widgetekben vagy klasszikus tartalmakban is használhatod őket.
• Projects poszttípus elrejtése/átnevezése: ha nem használod a Divi Projects-et, egyszerűen tüntesd el.
• SVG és betűtípus-feltöltés engedélyezése: designerek kedvence, nem kell külön „MIME fix” plugin.

Globális UI és effektek

• Előtöltő (preloader): töltőanimáció a tartalom előtt; brandingelt élmény, kevesebb „villogás”.
• Popupok (max. 5): Divi Library-vel felépített tartalmakat jeleníthetsz meg felugróként; kampányokhoz, űrlapokhoz ideális.
• Közösségi ikonok bővítése: YouTube, LinkedIn, Pinterest és társaik támogatása, stílusban egységesítve.
• Sticky elemek: bármely szekciót vagy modult görgetéskor rögzíthetsz.
• Jelszóval védett űrlap stílus: egységes, márkázott megjelenés.
• Particles háttér és egyedi görgetősáv: modern, mégis könnyen állítható látvány.

Fejléc és navigáció

• Hover- és lenyíló animációk a menüpontokon: gördülékeny, profi menüélmény.
• Logócsere és árnyékváltás fixált fejlécnél: jobb olvashatóság és kontraszt.
• CTA gomb a menüben: kiemelt hívás a navigációban (pl. Ajánlatkérés).
• Overlapping logó, egyéni fix fejléc: egyedi arculati megoldások kód nélkül.
• Divi Library szekciók a menü elé/mögé: például info-sávok, promo csíkok.

Lábléc és widgetek

• Sticky footer és „footer reveal”: a lábléc elegánsan gördül a tartalom fölé.
• Vissza az elejére gomb: testreszabható, akár más horgonyra is mutathat.
• Widget-stílusok és Library-blokkok a lábléchez: rugalmas elrendezési lehetőségek.

Mobil fejlesztések

• Mobil böngésző témaszín és breakpoint: jobban illeszted az arculatot és a töréspontokat.
• Fix mobil menüsáv vagy egyéni trigger: gyors elérés mobilon.
• 20+ nyit/zár animáció és 9 féle hamburger animáció: finom, reszponzív mikróinterakciók.
• Mobil logócsere, menü-tartalom (logó, kereső, közösségi ikonok, kosár link): valódi, használható mobil navigáció.
• Összecsukható al-menük, mobil parallax, oszlopszám-váltás: jobb mobil olvashatóság és teljesítmény.

Blog és archívumok

• 9 kész bloglista-elrendezés: archívumokhoz és a Blog modulhoz, kód nélkül.
• Post meta ikonokkal, oldalsáv globális stílusai vagy elrejtése.
• „Read more” gomb hozzáadása/testreszabása.
• Kapcsolódó bejegyzések, előző/következő navigáció, szerződoboz, szépített hozzászólás-forma.

Modul-kiegészítések

• Egérkövető overlay Portfolio/Galéria modulhoz: látványos hover a képeken.
• Email optin „inline”: kompakt feliratkozó űrlap tartalmon belül.
• Typing effekt és 3D Tilt: néhány kattintással aktiválható, CSS osztállyal célzott.
• Magasság-kiegyenlítés (blurbs, testimonials, pricing): rendezett kártyarácsok.
• Térkép pin cseréje, másodlagos gomb-stílus, accordion/toggle ikon animáció.
• Egyszerű parallax sebességek egyedi CSS osztályokkal.

Gyakorlati példák

• Ügynökségi sablon: beállítasz egy fix mobil menüsávot, egységes hamburger animációt, 2-3 blogelrendezést és egy előtöltőt. Ezt exportálod, majd minden új Divi-projektnél 1-2 óra finomhangolással kész a konzisztens UX.
• Kampány-popup: a Divi Library-ben építesz egy kuponos felületet, a Toolboxban popupként kijelölöd, majd meghatározod, mikor és hol jelenjen meg. Nem kell külön popup-bővítmény.
• Tartalomfókuszú blog: bekapcsolod a szerződobozt, a kapcsolódó posztokat és a „Read more” gombot, egységes oldalsáv-stílussal. A blog áttekinthetőbb, a mélyebb olvasás aránya javul.
• Webáruház mobil UX: a mobilmenübe bepakolod a logót, keresőt és kosár linket, a menü-animációkat és az al-menük összecsukhatóságát bekapcsolod – kevesebb koppintás, gyorsabb navigáció.

Telepítés és licenc

• Telepítés: Bővítmények → Új hozzáadása → Feltöltés → divi-toolbox.zip → Telepítés → Aktiválás.
• Licenc: Beállítások → Divi Toolbox Activation alatt add meg az API-kulcsot a frissítésekhez.
• Beállításcsoportok: Admin, Global, Header, Footer, Blog, Mobile, Modules.

Előnyök és értékajánlat

• Kevesebb plugin, kevesebb kód: a tipikus Divi-hiányosságokat egy csomag kezeli.
• Időmegtakarítás: élő előnézetben kapcsolgatható opciók, azonnali eredmény.
• Konzisztens arculat: ugyanolyan menü-, lábléc- és blogviselkedés több projekten.
• Teljesítmény-tudatos: csak a használt funkciók erőforrásait tölti be.

Kinek ajánlott?

• Ügynökségeknek és szabadúszóknak: skálázható, ismételhető Divi-setup, gyors átadás.
• Egyéni weboldal-tulajdonosoknak: látványos effektek és hasznos UX-elemek kódolás nélkül.
• Tartalomközpontú oldalaknak: professzionális blog/archívum megoldások egy kattintásra.
• Divi fejlesztőknek: kevesebb karbantartás, tisztább projektstruktúra.

Bevált gyakorlatok és korlátok

• Csak Divivel működik; más sablon alatt nem helyettesít funkciókat.
• Projekt elején érdemes bevezetni: ha már sok egyedi CSS-ed van, ütközhet a beállításokkal.
• Child theme továbbra is hasznos a sablonfájlszintű, fejlettebb módosításokhoz.

Szükséged van egy gyors induló check-listára különböző projekttípusokhoz? Jelezd, és adok egy lépésről lépésre listát a legfontosabb opciók bekapcsolásához.