GenerateBlocks Pro

Prémium kiegészítő a GenerateBlocks-hoz, amellyel a Gutenberg szerkesztőből gyors, kódszegény és professzionális oldalépítőt varázsolsz, globális stílusokkal, overlay panelekkel és fejlett reszponzív vezérléssel.

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

A GenerateBlocks Pro a GenerateBlocks ingyenes blokkbővítmény prémium kiegészítője. Célja, hogy a WordPress blokkszerkesztőjét profi oldalépítővé emelje – kompromisszumok nélkül, felesleges kód és lassulás nélkül. Ha eleged van a nehéz page builderek bloatjából, széttartó stílusokból és a sok „még egy plugin kell” helyzetből (popup, mega menü, feltételes megjelenítés), akkor ez a bővítmény pont neked való: tiszta HTML/CSS kimenet, reszponzív finomhangolás és kevesebb külön eszköz.

Fontos: a Pro önmagában nem fut, a GenerateBlocks ingyenes bővítmény az alap.

Hogyan működik röviden?

A szerkesztőben ugyanazokkal a blokkokkal dolgozol (Container, Grid, Headline, Button stb.), mint az ingyenes kiadásban.
A Pro új paneleket és eszközöket ad a blokkokhoz: globális stíluskezelő, haladó hátterek, effektek, overlay panelek, feltételek, mintakönyvtár, egyedi töréspontok és attribútumok.
A stílusok osztályalapon, újrahasznosíthatóan épülnek, így a kimenet tiszta és karcsú marad. Nem CSS‑t kell írnod, hanem vizuális stílusbuilderben dolgozol – a rendszer mégis fejlesztőbarát HTML/CSS‑t állít elő.

Fő funkciók részletesen

Globális stílusok

Egy helyen hozol létre újrahasznosítható stílusokat (osztályokat), amelyeket bármely blokkon alkalmazhatsz.
Kezelheted az állapotokat (hover/focus), célzhatsz haladó szelektorokra, és több töréspontot definiálhatsz.
Eredmény: konzisztens design rendszer, villámgyors egységesítés, kevesebb lokális „tűzoltás”.

Pro mintakönyvtár

Közvetlenül a szerkesztőből érsz el több száz professzionális mintát (szekciók, hero, pricing, lábléc, teljes oldalak).
Drag‑and‑drop beillesztés után csak a tartalmat cseréled – a reszponzív és a stíluslogika adott.

Haladó hátterek és effektek

Több háttérréteg képpel, gradienssel, külön eszközökre és állapotokra.
Finom vizuális hatások: transzformációk, szűrők, áttűnések – mind blokkszinten szabályozva.

Overlay panelek és feltételek

Beépített popup, slide‑in, modális, off‑canvas és mega menü megoldások – külön plugin nélkül.
Feltételek: megmondhatod, mikor és kinek jelenjen meg egy elem (oldaltípus, dátum/idő, eszköz, UTM, referrer, user‑szerep, cookie, nyelv, szerző, meta stb.).
Ezzel pontosan célozhatsz, miközben karcsú marad a rendszered.

Reszponzív vezérlés és egyedi töréspontok

Eszköz‑láthatóság: megjelenítés/elrejtés mobilon, tableten, asztali eszközön.
Saját media és container query‑k: ott finomhangolsz, ahol tényleg szükséges – nem kell kompromisszumos fix töréspontokhoz ragaszkodnod.

Asset Library, stílus másolás és konténer linkek

Saját ikonok/shape‑ek központi kezelése és beszúrása.
Stílusok copy/paste és „Clear styles” a gyors újrafelhasználáshoz.
Konténer link: teljes szekció kattintható, tökéletes kártya‑UI‑hoz.

Egyéni attribútumok, hozzáférhetőség

Tetszőleges HTML és data-* attribútumok, ARIA címkék megadása a blokkoknál.
Integrációkhoz és akadálymentesítéshez nélkülözhetetlen.

Példa:

<div class="gb-container card -elevated"
     aria-label="Ajánlat kártya"
     data-utm-source="newsletter"
     data-track="cta-card">
  ...
</div>

Fülek és harmonikák

Teljesen testreszabható Tabs/Accordions komponensek, a már ismert blokkok logikájára építve.

Query Loop bővítések

Tartalomlisták dinamikus építése, lekérdezés meta/option mezők alapján is – célzott listák, grid-ek egyszerűen.

Gyakorlati példák

Landing oldal 30 perc alatt

Válassz egy Pro hero és pricing mintát, illeszd be.
Adj globális gomb‑ és tipográfia stílust; az egész oldal egyszerre frissül.
Állíts be egy lead‑mágnes popupot Overlay Panellel, ami csak mobilon és UTM kampányból érkezőknek jelenik meg (feltétel: eszköz + query paraméter).
A pricing kártyák kapjanak konténer linket és hover effektet.

Mega menü és mobil off‑canvas

Készíts menüpanelt Overlay Panelben, Grid + Headline blokkokkal.
Asztali nézetben mega menü, mobilon off‑canvas.
Feltételek: eszköz szerinti megjelenítés, így egy konfiguráció két viselkedés.

Design rendszer egy délután alatt

Hozz létre globális stílusokat: „heading‑lg”, „btn‑primary”, „card‑base”, töréspontokkal.
A mintákat ezekhez a stílusokhoz igazítsd; új oldalaknál csak mintát illesztesz be, és kész a konzisztens UI.

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

Gyorsabb webhelyek: minimális kimeneti kód, célzott CSS.
Kevesebb plugin: popup, slide‑in, mega menü, feltételek – mind beépítve.
Következetes design: globális stílusokkal megszűnik a „minden oldal más” probléma.
Gyorsabb csapatmunka: minták, stílus copy/paste, közös eszköztár.
Profibb hozzáférhetőség: ARIA, egyéni attribútumok, szemantikus HTML.

Kinek ajánlott?

Ügynökségeknek és freelance‑eknek: skálázható design rendszerek és minták több ügyfélhez.
Marketing csapatoknak: gyors kampányoldalak, célzott popupok/feltételek, A/B iterációk bloat nélkül.
Fejlesztőknek: vizuális stílusbuilder, mégis tiszta, kontrollálható kimenet; egyedi query‑k és attribútumok.

Telepítés röviden

Telepítsd és aktiváld a GenerateBlocks (free) bővítményt.
Szerezd be a Pro kiegészítőt, töltsd le a zip fájlt.
WordPress → Bővítmények → Új hozzáadása → Feltöltés → Telepítés és aktiválás.
Add meg a licencet a Vezérlőpultban (GenerateBlocks menü), majd kapcsold be a Pro modulokat.

Best practice tippek

Nevezéktani rend: állíts be következetes globális osztályneveket (pl. btn‑, card‑, heading‑, layout‑ prefix).
Töréspont‑stratégia: üzleti igények alapján határozd meg a media/container query‑ket; ne csak „mobil‑tablet‑desktop” sémát kövesd.
Hozzáférhetőség: overlay paneleknél adj ARIA‑címkéket, jelöld a bezáró gombot, és tartsd a fókuszt a panelen.

Ha Gutenbergben szeretnél valóban gyors, tiszta és fenntartható oldalakat építeni, a GenerateBlocks Pro az a réteg, ami a blokkokból komplett, vállalati szintű rendszeré teszi a szerkesztőt – felesleges kód és külső „mankók” nélkül.