Divi Responsive Helper

A Divi Responsive Helper egy Divihez készült bővítmény, amely egy átfogó, reszponzív eszköztárat ad a kezedbe. Több mint 50 beállítással egészíti ki a Divit, hogy pontosan irányítsd a töréspontokat (breakpoints), a globális tipográfiát, a rácselrendezést és oszlopsorrendet, a menük viselkedését, valamint a szerkesztési élményt.
A cél a gyors, kódmentes finomhangolás mobilra, tabletre és asztali nézetre, konzisztensen az egész webhelyen. A bővítmény a Divi Theme Options felületébe és magukba a modulokba épül be, és a Divi újabb főverzióival is kompatibilis.

Hogyan működik?

Telepítés után a WordPress Vezérlőpultban a Divi > Theme Options alatt megjelenik a „Divi Responsive Helper” fül. Itt funkciócsoportonként kapcsolhatod be az extrákat (Preview/Editor, Custom Breakpoints, Typography, Column Stacking, Menu, Misc).
Az aktivált funkciók hatására a Divi modulokban új, eszközönkénti vezérlők jelennek meg. A globális beállítások alapértelmezett értékként működnek, de modulonként bármikor felülírhatók.

Előnézeti méretek és szerkesztési élmény

Lehetőséged van egyedi előnézeti méreteket megadni a Visual Builderben, akár előre definiált gombokkal, akár konkrét pixelértékekkel. Szerkesztés közben folyamatosan látod az aktuális viewport szélességét és magasságát.
Bekapcsolható, hogy a Design fül reszponzív alfülei automatikusan nyíljanak meg, így gyors egymásutánban szerkesztheted a Desktop, Tablet és Phone nézeteket. Igény esetén a Divi alap „Responsive Views” nézetei ki is kapcsolhatók.

Breakpointok és media query-k kezelése

A Divi alap töréspontjai globálisan átállíthatók, így pontosabban igazíthatók valós eszközökhöz (például iPad méretekhez). Másodlagos breakpointok is hozzáadhatók finomabb kontrollhoz.
Custom CSS Media Queries mezők állnak rendelkezésre tipikus eszköztartományokra, ahol elég a CSS-t beilleszteni, a bővítmény automatikusan a megfelelő @media szabályba helyezi.

Globális tipográfia

Központilag beállíthatod a H1–H6 címsorok és bekezdések betűméretét eszközönként, amelyek alapértékként szolgálnak a teljes oldalon. Ugyanígy vezérelhető a sorköz (line-height) is.
A Widow Fixer funkció automatikusan kezeli az „árva szavakat” címekben és szövegekben, javítva az olvashatóságot. Oldalak vagy konkrét elemek kivonhatók ez alól.

Oszlopkezelés és rácselrendezés

Mobilnézetben szabályozható az oszlopok sorrendje és az, hogy hány oszlop maradjon egymás mellett. Ez speciális szekciókban is működik, és figyelembe veszi az eltérő gutter beállításokat.
A Blog modul esetén eszközönként megadható az oszlopszám, ami a Divi alapból hiányzó funkciója. Galéria, Portfólió és WooCommerce termék moduloknál külön állítható az elemszám és az oszlopszám Desktop, Tablet és Phone nézetre.

Menü és navigáció

A WordPress Menük felületén eszközönként megadható, mely menüpontok jelenjenek meg vagy tűnjenek el. A Divi Menu modulban akár külön mobilmenü is választható.
Fejlett mobilmenü-opciók érhetők el: összeomló almenük, egyedi ikon- és háttérszínek, külön mobil breakpoint, görgethető menümagasság, valamint „egyik nyílik – másik zár” viselkedés.
A „Vissza a tetejére” gomb láthatósága szintén eszközönként szabályozható.

Egyéb hasznos UX-funkciók

Megakadályozható a vízszintes görgetés mobilon, engedélyezhető a pinch-zoom, valamint külön logó állítható be tablet és mobil nézetre. Android Chrome böngészőben a címsor színe is testreszabható.
Egyes modulokhoz speciális reszponzív viselkedések érhetők el, például Tabs modul elrendezésváltás vagy Blurb modul ikon- és képáthelyezése mobilon.

Gyakorlati példák és workflow

Webshopnál a Woo termékrács beállítható 2 oszloposra tableten és 1 oszloposra telefonon, csökkentett elemszámmal a gyorsabb betöltésért.
Blognál használható 3 oszlop desktopon, 2 tableten és 1 mobilon, miközben a globális tipográfia biztosítja az egységes címméreteket.
Navigációnál hosszú menüpontok elrejthetők mobilon, és dedikált mobilmenü használható.

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

Jelentős időmegtakarítást ad a kevesebb egyedi CSS és a gyors beállítások révén. Konzisztens megjelenést biztosít központi tipográfiával és breakpointkezeléssel. Javítja a mobil UX-et finoman szabályozható rács- és menülogikával, miközben csökkenti a hibákat a pontos előnézetnek köszönhetően. A globális értékek modulonként felülírhatók, így megmarad a rugalmasság.

Kinek ajánlott?

Divi építőknek és ügynökségeknek, akik skálázható, konzisztens reszponzív megoldást keresnek. Webshopoknak, ahol a WooCommerce termékrács mobiloptimalizálása kritikus. Tartalomintenzív oldalaknak, például blogoknak és magazinoknak, ahol a tipográfia és elemszám kontrollja fontos. Kezdőknek, akik CSS nélkül akarnak precíz reszponzív irányítást, és haladó felhasználóknak, akik gyorsítani és egységesíteni szeretnék a Divi-alapú munkafolyamatokat.