Mi az a Block elem a Bricks Builderben
A Block egy blokk szintű wrapper elem, ami alapértelmezetten block taget generál. Összefog egy logikailag összetartozó tartalomcsoportot. Sorbrandezhet Flexbox vagy Grid alapon, és a feladata a csoportosítás, vagy az elrendezés. Egy kártya, egy feature box, egy testimonial doboz, egy pricing panel: mind egy-egy Block, benne a képpel, címmel, szöveggel és gombbal.
A layout-hierarchiában ez a harmadik szint: a Section adja a teljes szélességű oldalblokkot, a Container végzi az elrendezést, a Block egy önálló tartalmi egység a Container-en belül, a Div pedig már csak apróságokat fog össze. Ez a sorrend teszi átláthatóvá az oldalt, és a legtöbb kusza Bricks-struktúra pontosan ott romlik el, ahol Container-eket és Block-okat kezdenek azonos szerepben használni. Ha minden szinten Container-t teszel Block helyett, feleslegesen bonyolítod a szerkezetet, és hónapok múlva már te sem fogod látni, melyik elem mit csinál.
Block, Container vagy Div. Melyik mire való
| Block | Container | Div | |
|---|---|---|---|
| Elsődleges cél | Önálló tartalmi egység | Elrendezés (Flex / Grid) | Apró segéd-wrapper |
| Alapértelmezett display | block | flex | block |
| Flexbox / Grid | Manuálisan bekapcsolható | Alapból aktív | Manuálisan bekapcsolható |
| Hierarchia szintje | 3. szint | 2. szint | 4. szint |
| Hover állapot | Igen | Igen | Igen |
| Jellemző eset | Kártya, feature box, panel | Kártyasor, kétoszlopos layout | Ikon wrapper, badge |
A gyakorlati különbség egy mondatban: ha egy kártyát építesz (kép, cím, szöveg, gomb), az egy Block, ha ezeket a kártyákat egymás mellé rendezed, azt a Container végzi. Technikailag Container-rel is összerakható egy kártya, hiszen a képességeik átfednek, de szemantikailag és a struktúrapanel átláthatósága szempontjából a Block a helyes választás. Ugyanígy lefelé is: egy ikon és egy felirat összefogásához nem kell Block, arra ott a Div. Block-ot Block-ba pedig csak akkor ágyazz, ha annak vizuális vagy szemantikai oka van, egyébként csak mélyíted a DOM-ot.
Hozzáadása
E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Block”, és egy meglévő Container-be húzod. Üres blokként jelenik meg, innen pakolod bele a belső elemeket: képet, címet, szöveget, gombot. Kártyasornál a leggyorsabb út, ha az első Block-ot teljesen felépíted, és utána duplikálod (Ctrl+D / Cmd+D) annyiszor, ahány kártya kell, így mindegyik azonos struktúrával indul, és már csak a tartalmat kell cserélni. A Ctrl+Shift+Z az utolsó módosítást vonja vissza, ha elrontanál valamit szerkesztés közben.
Amit be tudsz állítani hozzá
Méret. A Width és a Height alapból auto, tehát a tartalom szabja meg. Kártyáknál a Width jellemzően 100%, hogy a szülő Container egyenlően ossza el a helyet, a magasságot pedig vagy min-height-tel korlátozod alulról (például 320px), vagy ami rugalmasabb, a szülő Container Align Items értékét állítod stretch-re, és a Block-ok automatikusan a legmagasabbhoz igazodnak. Az Overflow-t szinte minden kártyánál hidden-re kell tenni: enélkül a lekerekített sarkú Block-ból kilóg a belső kép sarka.
Háttér, keret, árnyék. A háttérbeállítások ugyanazok, mint Section-nél: egyszínű, gradient, kép, overlay. A Border adja a keret vastagságát, stílusát (solid, dashed, dotted), színét és a lekerekítést, kártyáknál tipikusan 8–16px border-radius elég. A Box Shadow emeli ki a kártyát a háttérből, jól használható értékek: 0 2px 12px rgba(0,0,0,0.08) enyhe, 0 4px 24px rgba(0,0,0,0.15) erősebb árnyékhoz.
Padding. A belső tartalom és a Block széle közti távolság, kártyáknál 24–40px a bevált tartomány. A Block-ok egymás közti térközét ne ezzel oldd meg, arra a szülő Container gap értéke való.
Hover állapot. A Block egyik erőssége, hogy pár kattintással kap hover effektet: a Style panelen Hover állapotra váltva megadhatsz más háttérszínt, erősebb árnyékot vagy más keretszínt. Egy dolgot viszont mindig tegyél hozzá, különben ugrásszerűen vált: a Custom CSS fülre egy transition: all 0.3s ease értéket. A klasszikus „felemelkedő kártya” így néz ki: alapállapotban box-shadow: 0 2px 12px rgba(0,0,0,0.08) és transform: translateY(0), hoveren box-shadow: 0 8px 32px rgba(0,0,0,0.16) és transform: translateY(-4px).
HTML tag. Alapból ha a Block valódi önálló tartalmat képvisel, érdemes szemantikusabb taget választani:
- blogkártyához vagy termékkártyához,
- kiegészítő tartalomhoz,
- kép és felirat egységéhez.
Ez SEO és akadálymentesítés szempontjából is számít.Link. A Style → Link mezőben megadott URL-lel a Block teljes területe kattinthatóvá válik. Ezt mindig a Block szintjén add meg, ne az egyes belső elemeken: így nem kell külön linkelni a képet, a címet és a gombot, és elkerülöd az egymásba ágyazott elemeket, ami érvénytelen HTML-t eredményezne.
Kártyasor és reszponzív viselkedés
A leggyakoribb felhasználás a háromkártyás sor, és a felépítése mindig ugyanaz: a Section adja a hátteret, benne egy Container row iránnyal és 24px gap-pel, azon belül három Block, egyenként 33.33% szélességgel, 12px border-radiusszal és 32px paddinggel. Minden Block-ban ott a kép, a cím, a szöveg és a gomb. Ugyanez a séma működik feature boxoknál (ikon, cím, leírás), testimonial dobozoknál (idézet, profilkép, név), pricing panelnél (csomagnév, ár, felsorolás, gomb) és a callout sávoknál is, ahol csak egy ikon és egy figyelmeztető szöveg van a Block-ban.
A reszponzív viselkedés két beállításon múlik, és mindkettő a szülő Container-en. Tableten a Container Wrap értéke wrap, a Block-ok szélessége 50%, így kettő fér el egy sorban. Mobilon a Container Direction értéke column, a Block-ok szélessége 100%, tehát a kártyák egymás alá kerülnek. A Block-on magán csak a szélességet és a paddinget kell nézeteneként újragondolni, a szerkezetet nem kell duplikálni mobilra.
Amivel a leggyakrabban bajlódnak
A leggyakoribb panasz, hogy a Block-ok egy sorban nem egyforma magasak. Ez természetes, hiszen a magasságot a tartalom szabja meg, és a kártyákba nem egyforma mennyiségű szöveg kerül. A megoldás a szülő Container Align Items → stretch beállítása, ettől a Block-ok a legmagasabbhoz igazodnak, vagy ha fix alsó határt akarsz, adj mindegyiknek ugyanazt a min-height értéket (például 320px).
Ha a kép kilóg a lekerekített sarkú Block-ból, a border-radius csak a Block saját keretét vágja le, a belső kép önállóan jelenik meg fölötte. Ilyenkor a Block Overflow értékét kell hidden-re állítani, és szinte minden olyan kártyánál kell, ahol a kép a Block széléig ér.
Ha a hover effekt hirtelen vált, animáció nélkül, egyszerűen hiányzik a transition. A Block Custom CSS fülére írt transition: all 0.3s ease minden CSS tulajdonság változását megsimítja a hover ki- és bekapcsolásakor.
Ha csak a szöveg kattintható, nem az egész kártya, akkor a link a belső elemen vagy a gombon ül. Vedd le onnan, és add meg a Block szintjén (Style → Link), ettől a teljes kártyafelület kattinthatóvá válik.
Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: a hierarchia megfelelő szintjén van-e a Block (Container gyerekeként), szemantikailag helyes-e a HTML tag, be van-e állítva az Overflow: hidden ott, ahol a kép a sarokig ér, stretch-en van-e a szülő Container Align Items értéke az egyforma magasságú kártyákhoz, van-e transition a hover mellett, a Block szintjén van-e a link, be vannak-e állítva mobilra a szélességek és a paddingek, és nem maradt-e feleslegesen egymásba ágyazott Block a struktúrában. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.
Gyakori kérdések (FAQ)
Kell-e mindig Block-ot használni kártyához, vagy megteszi a Container is?
Technikailag Container-rel is megépíthető egy kártya, de szemantikailag és strukturálisan a Block a helyes választás. A Container elrendezésre való, nem önálló tartalmi egységre. Ha következetesen Block-ot használsz kártyákhoz, a struktúrapanel sokkal átláthatóbb marad, és más fejlesztő is gyorsan eligazodik az oldalon.
Hány elem kerülhet egy Block-ba?
Nincs technikai limit. Egy kártyában tipikusan 3–5 elem van: kép, cím, szöveg, gomb. Ha ennél lényegesen több, érdemes megnézni, valóban egyetlen összetartozó egységről van-e szó, vagy jobban járnál több Block-kal.
Hogyan készítsek egyforma méretű kártyákat különböző mennyiségű szöveggel?
Két út vezet oda. Az egyik a szülő Container Align Items → stretch beállítása: ilyenkor a Block-ok automatikusan a legmagasabb kártyához igazodnak. A másik a Block-on megadott min-height: minden kártya legalább ekkora lesz, de több szöveg esetén kibővül. A stretch a rugalmasabb megoldás, a min-height akkor jó, ha fix vizuális ritmust akarsz.
Ugyanazok a Block és a Section háttérbeállításai?
Igen, a szín, kép, gradient, overlay és videó beállítások mindkét elemnél ugyanúgy működnek. A különbség a szerepükben van: a Section teljes szélességű és az oldal fő vizuális blokkjaira való, a Block pedig egy tartalmi egység a Section-ön belül, tipikusan Container-be ágyazva.
Mikor NE használj Block-ot?
Ha elrendezésről van szó. Sorok, oszlopok és rácsok rendezése a Container dolga, a Block ugyan átállítható Flexbox módba, de ha az a célja, hogy elemeket sorba rakjon, akkor Container-t válassz. Ugyanígy nem érdemes Block-ot tenni apró, önállótlan elemek köré: egy ikon és egy felirat összefogására a Div való. Block-ot Block-ba pedig csak akkor ágyazz, ha annak valódi vizuális vagy szemantikai oka van.
Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.