# 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 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:
```html
<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.

2) 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.

3) 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.