Ugrás a fő tartalomhoz

GenerateBlocks

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

A GenerateBlocks egy könnyű, Gutenberg‑alapú blokk‑készlet. Célja, hogy néhány sokoldalúan paraméterezhető alapblokkal (nem tucatnyi „kész” elem) felépíthess bármilyen elrendezést – felesleges bloat és külső függőségek nélkül. Tökéletes, ha gyors, tiszta, karbantartható kódot szeretnél, és eleged van a nehézkes oldalépítőkből.

Megoldja:

  • a lassú oldalépítést: mintákkal és rugalmas blokkokkal gyorsít,
  • a dizájn‑inkonzisztenciát: központi stíluskezeléssel egységesít,
  • a plugin‑dzsungelt: pop‑up, slide‑in, feltételes megjelenítés és mega menü egy helyen,
  • a bloatot: csak a használt blokkokhoz generál minimális CSS‑t.

Fő funkciók – mit csinál pontosan?​

Alapblokkok​

  • Container és Grid: reszponzív szekciók és rácsok építéséhez. Részletes vezérlés padding, gap, háttér, árnyék, szegély, kerekítés, igazítás és breakpoint‑specifikus beállítások felett.
  • Text/Headline/Button: tipográfia és állapotok (hover/focus) pontos állítása; gomboknál kitöltés/outline, ikonok, spacing és reszponzív méretek.
  • Image: képarány, objektum‑pozíció, kerekítés, keret és maszkolás; képek rácsba illesztése egyszerű.
  • Shape: dekoratív alakzatok (pl. szeparátorok, hullámok) teljesen vektoros, CSS‑barát megoldással.
  • Query (Looper, Loop Item, No Results, Page Numbers): tartalmi listák és kártyarácsok építése. Saját lekérdezés vagy az aktuális sablon öröklése; összetevőnként állítható elrendezés.

Dinamikus tartalom (Dynamic Tags)​

Blokkon belül használhatsz dinamikus címkéket poszt‑ és szerző‑adatokhoz, taxonómiákhoz, linkekhez – kódolás nélkül.

{{post_title}}
{{post_date}}
{{term_list taxonomy="category"}}
{{author_name}}

Ezeket bármely szöveg‑ vagy gombblokkban használhatod, akár Query loopban is.

Teljesítmény és kimenet​

  • Minimalista CSS: csak a ténylegesen használt beállításokra generál stílust.
  • Tiszta HTML5: felesleges wrapper és függőség nélkül, így gyors és SEO‑barát.

Mintakönyvtár​

  • Beépített minták (patternök) segítenek pillanatok alatt összerakni hero, pricing, feature, testimonial, CTA és footer szekciókat. Öröklik a téma tipográfiáját és színeit, így már alapból egységes a megjelenés.

GenerateBlocks Pro kiegészítések​

  • Global Styles: új generációs stílus‑motor saját osztályokkal, pseudo‑elemekkel/állapotokkal és fejlett breakpoint‑kezeléssel. Egyetlen helyen definiálod a gombok, tipók, kártyák mintáit, majd bárhol újrahasznosítod.
  • Pattern Library (Pro): több száz professzionális minta, amelyek a Global Styles‑t használják – így percek alatt „oldalszintű” eredményt kapsz.
  • Asset Library: saját SVG ikonok és formák központi tárhelye; egy kattintással beszúrhatod és újrahasznosíthatod őket.
  • Device Visibility: blokkok megjelenítése/elrejtése eszköz‑nézetenként.
  • Copy/Paste/Clear Styles: lokális stílusok gyors másolása és tisztítása a szerkesztőben.
  • Overlay Panels + Feltételek: pop‑up, slide‑in, off‑canvas, tooltip és mega menü beépítve. Megjelenítési szabályokkal célozhatsz oldal‑típusra, user‑szerepre, eszközre, dátum/időre, UTM‑re stb.
  • Query bővítések: meta és opciós adatok olvasása, azonnali lapozás és örökölt lekérdezés sablonokhoz.
  • GenerateCloud: saját mintakönyvtárak megosztása több webhely között (ügynökségi és multisite workflow‑hoz ideális).

Gyakorlati példák​

1) Hero szekció 5 perc alatt​

  1. Helyezz el egy Container blokkot, adj háttérképet vagy színt.
  2. Tegyél bele egy Grid‑et: bal oszlop Headline + Text + Button, jobb oszlop Image.
  3. Reszponzív finomhangolás: oszlopszélesség, gap, tipóméret mobil/tablet nézetben.

2) Blogkártya‑rács a Query‑vel​

  • Helyezz el egy Query blokkot, állítsd „örökölt” módra vagy adj meg saját feltételeket.
  • A Loop Item belsejébe pakold a kártyaelemeket:
Image (featured)
Headline ({{post_title}} linkelve)
Text ({{post_excerpt}})
Button ("Tovább")
  • Adj hozzá Page Numbers blokkot lapozáshoz és No Results blokkot üres állapotra.

3) Pop‑up lead‑gyűjtő feltételekkel​

  • Hozz létre egy Overlay Panel‑t modal módban.
  • Tartalom: Headline, rövid Text, Email mező/gomb.
  • Feltétel: csak blogcikkeken, csak mobilon, és csak akkor, ha a látogató nem bejelentkezett.

4) Dizájnrendszer Global Styles‑szal​

  • Készíts egy gombstílust, majd osztály alapján alkalmazd bárhol:
.gbtn--primary { /* gombváltozat */
  --gb-button-bg: var(--color-primary);
  --gb-button-text: #fff;
}
.gbtn--primary:hover { filter: brightness(1.1); }

Ezzel elkerülöd az ismétlést, és egy frissítéssel az egész oldalrendszert átszínezheted.

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

  • Sebesség: minimális kód, gyors betöltés.
  • Karbantarthatóság: központi stílusok, kevesebb egyedi CSS.
  • Kevesebb plugin: overlay, feltételek, ikonkezelés egy csomagban.
  • Gyors szerkesztés: minták + másolható stílusok = kevesebb munkaóra.
  • Skálázhatóság: dizájnrendszeres megközelítés nagy projektekhez.
  • Tiszta kimenet: SEO‑ és fejlesztőbarát HTML/CSS.

Kinek ajánlott?​

  • Ügynökségek és multisite csapatok: egységes dizájn és minta‑megosztás.
  • WordPress fejlesztők: teljes kontroll, tiszta kimenet, bővíthetőség.
  • Site builderek és tartalomkészítők: gyors építés mintákból, kód nélkül.
  • Teljesítmény‑mániások: bloatmentes, optimalizált megoldás.

Telepítés és támogatás​

A bővítményt a WordPress adminban a bővítménytelepítőből, vagy .zip feltöltéssel teheted fel. Részletes dokumentáció és fórum alapú támogatás érhető el; a Pro változat előfizetéshez kötött és prémium támogatást biztosít. Elérhető ingyenes és Pro kiadás, továbbá csomag, amely a kapcsolódó termékekkel együtt érkezik.

Megjegyzések és korlátok​

  • Alapblokk‑filozófia: nem kapsz „kész” testimonial/pricing blokkokat; ezeket mintákból és kombinált alapblokkokból rakod össze. Cserébe kisebb a bloat és nagyobb a kontroll – a tanulási görbe eleinte meredekebb lehet.
  • Új funkciók stabilitása: a „feltételes megjelenítés minden blokkra” típusú újdonságok frissen érkezhetnek; élesítés előtt ellenőrizd az aktuális stabil állapotot és a változásnaplókat.