Ugrás a fő tartalomhoz

GenerateBlocks Pro

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 blokk­szerkesztő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​

  1. 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.
  1. 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.
  1. 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​

  1. Telepítsd és aktiváld a GenerateBlocks (free) bővítményt.
  2. Szerezd be a Pro kiegészítőt, töltsd le a zip fájlt.
  3. WordPress → Bővítmények → Új hozzáadása → Feltöltés → Telepítés és aktiválás.
  4. 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.