Bricks Builder Block elem: Mire való és hogyan használd helyesen? (2026)
Mi az a Block elem a Bricks Builderben?
A Block egy blokk szintű wrapper elem, amely alapértelmezetten tag-et generál, és elsősorban önálló tartalmi egységek – kártyák, dobozok, kiemelt szövegblokkok – köré való. Nem Flexbox vagy Grid alapú, hanem normál blokk-szintű elem, amelynek fő feladata a tartalom vizuális és szemantikai csoportosítása.
Miben különbözik a Block a Container-től és a Div-től?
Mire való a Block a gyakorlatban?
- Kártyák (cards).
- A legklasszikusabb eset: egy kép, egy cím, egy rövid szöveg és egy gomb tartozik össze. Ez egy Block – önálló egység, amely belül tetszőlegesen tagolható.
- Feature boxok.
- Ikon + cím + leírás hármasa egy szolgáltatásjellemzőhöz. Ezeket Container rendezi sorba, de maga az egység egy Block.
- Testimonial (vélemény) doboz.
- Idézet + profilkép + név – logikailag összetartoznak, vizuálisan körülhatárolt egység.
- Pricing box (árazás doboz).
- Csomagnév, ár, felsorolás, gomb – önálló, kiemelkedő doboz.
- Értesítési sávok, callout boxok.
- Figyelmeztetés, tipp, fontos megjegyzés kiemelésére – Block-ba tett ikon + szöveg kombináció.
Hogyan add hozzá a Block elemet az oldalhoz?
- Nyisd meg a Bricks Builder szerkesztőt.
- Kattints az „Add element” (+) gombra, vagy nyomj `E` billentyűt.
- Keresd meg a „Block elemet, és húzd egy Container-be.
- Alapértelmezetten üres blokként jelenik meg – add hozzá a belső elemeket (szöveg, kép, gomb stb.).
**Tipp:** Ha egy kártyasort építesz, először hozd létre az első Block-ot a teljes tartalmával, majd duplikáld (`Ctrl+D` / `Cmd+D`) annyiszor, ahány kártyára szükséged van. Így minden kártya azonos struktúrával indul.
Milyen beállítási lehetőségek vannak a Block-ban?
Méret és elrendezés
– Width / Height: Alapértelmezetten `auto` – a tartalom szabja meg. Kártyáknál érdemes `width: 100%`-ra állítani, hogy a szülő Container egyenlően ossza el a szélességet.
– Min-height: Ha azt szeretnéd, hogy az összes kártya egyforma magas legyen, adj `min-height` értéket (pl. `300px`). Rugalmasabb megoldás: a szülő Container `Align Items → stretch` beállítása, amely automatikusan egyforma magasságúvá teszi a Block-okat.
– Overflow: Ha a Block-on belül kép vagy más elem kilóg, állítsd `hidden`-re (pl. lekerekített sarkú kártyáknál, ahol a kép sarkait is levágja a border-radius).
Háttér, keret, árnyék
A Block vizuális megjelenésének fő eszközei:
– Background: Egyszínű, gradient, kép – ugyanazok az opciók, mint Section-nél.
– Border. Keret vastagsága, stílusa (`solid`, `dashed`, `dotted`), színe és sugara (`border-radius`). Lekerekített kártyáknál tipikusan `8px`–`16px` border-radius elegendő.
– Box Shadow: Árnyék hozzáadásával a kártya „kiemelkedik” a háttérből. Ajánlott értékek: `0 2px 12px rgba(0,0,0,0.08)` (enyhe), `0 4px 24px rgba(0,0,0,0.15)` (erős).
– Padding: A belső tartalom és a Block széle közötti távolság. Kártyáknál tipikusan 24px–40px.
Hover állapot (Interactions)
A Block egyik erőssége, hogy könnyen adhatsz hozzá hover effekteket:
– Hover háttérszín változás: Style → Background → Hover állapotra váltva adj meg új háttérszínt.
– Hover árnyék: Hover állapotnál növeld a box-shadow értékét – ez adja a „felemelkedő kártya” effektet.
– Hover border: Keret szín vagy vastagság változtatása hover-re.
– Transition: A hover animáció simításához adj `transition: all 0.3s ease` értéket a Custom CSS fülön.
Konkrét példa – lebegő kártya hover effekt:
/* Normal állapot */
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transform: translateY(0);
transition: all 0.3s ease;
/* Hover állapot */
box-shadow: 0 8px 32px rgba(0,0,0,0.16);
transform: translateY(-4px);
HTML tag
Alapértelmezetten de ha a Block önálló tartalom-egységet képvisel, érdemes szemantikusabb taget választani:
Mikor használd?
- Általános vizuális blokk, nincs önálló szemantikai értéke.
- Önálló tartalom (blogkártya, termékkártya.
- Kiegészítő információ, oldalsó tartalom.
- Kép + felirat egysége.
Linkké alakítás
A Block teljes területe kattinthatóvá tehető anélkül, hogy minden belső elemet linkelni kellene:
Style → Link: Add meg az URL-t, és a teljes Block kattintható lesz. Ezzel elkerülhető a beágyazott elemek halmozása, ami HTML-hibát okozna.
Ez az egyik leggyakoribb feladat – három egyforma kártya egymás mellett.
Felépítése:
Mikor NE használj Block elemet?
- -Ne használj Block-ot layout-elrendezésre (oszlopok, sorok rendezésére) – erre való a Container. A Block Flexbox módba is állítható, de ha az a célja, hogy elemeket rendezzen sorba, Container-t válassz helyette.
– Ne ágyazz Block-ot Block-ba indokolatlanul – ha az egymásba ágyazásnak nincs vizuális vagy szemantikai oka, egyszerűbb Div-et használni.
– Ne használj Block-ot apró, önállótlan elemek köré – egy ikon köré Div való, nem Block.
Hibák és megoldások
A Block-ok nem egyforma magasságúak egy sorban
Ok: A Block magasságát a tartalom szabja meg, és a különböző mennyiségű szöveg eltérő magasságot eredményez.
Megoldás: A szülő Container `Align Items → stretch` beállításával a Block-ok automatikusan a legmagasabb elem magasságát veszik fel. Vagy adj `min-height` értéket minden Block-nak (pl. `320px`).
A kép kilóg a lekerekített sarkú Block-ból
Ok: A Block `border-radius` értéke le is vágja a saját keretét, de a belső kép önállóan jelenik meg.
Megoldás: A Block `Overflow → hidden` beállítása gondoskodik arról, hogy a belső kép is a lekerekített sarokhoz igazodjon. Ezt szinte minden kártyánál be kell állítani, ha a kép a Block szélétől indul.
A Block hover effektje hirtelen vált, nincs animáció
Ok: Nincs `transition` beállítva.
Megoldás: A Block Custom CSS fülén add hozzá: `transition: all 0.3s ease;` – ez minden CSS tulajdonság változását animálja a hover állapot ki-be kapcsolásakor.
A Block teljes területe nem kattintható, csak a szöveg
Ok: A link a belső szövegelemen vagy gombon van, nem a Block-on.
Megoldás: A linket a Block szintjén add meg (Style → Link), ne az egyes belső elemeken. Így a teljes kártya területe kattintható lesz, és nem kell minden belső elemet külön linkelni.
Block beállítások ellenőrzőlista
A Block-ok nem egyforma magasságúak egy sorban
Ok: A Block magasságát a tartalom szabja meg, és a különböző mennyiségű szöveg eltérő magasságot eredményez.
Megoldás: A szülő Container `Align Items → stretch` beállításával a Block-ok automatikusan a legmagasabb elem magasságát veszik fel. Vagy adj `min-height` értéket minden Block-nak (pl. `320px`).
Mielőtt élesbe teszed az oldalt, ellenőrizd minden Block-nál:
- A Block a hierarchia megfelelő szintjén van (Container gyerekeként)?
- A HTML tag szemantikailag helyes (`article`, `div`, stb.).
- Overflow: hidden` be van állítva, ha a belső kép a sarokig ér?
- Align Items: stretch` be van állítva a szülő Container-en, ha egyforma magasságú kártyák kellenek?
- Hover effektnél van `transition` beállítva?
- Ha a teljes kártya kattintható, a link a Block szintjén van megadva?
- Mobilon a szélességek és padding értékek be vannak állítva?
- Nincs feleslegesen egymásba ágyazott Block a struktúrában?
Összehasonlítás: Block vs. Container vs. Div
| Block | Container | Div | |
|---|---|---|---|
| Fő feladata | |||
Alapértelmezett display | block | flex | block |
Kártyákhoz | Ideális | Nem erre való | Túl általános |
Hover effekt | Igen | Igen | Igen |
Hierarchia szintje | 3. szint | 2. szint | 4. szint |
Tipikus use-case | Kártya, feature box, panel | Kártyasor, kétoszlopos layout | Ikon wrapper, badge |
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 layout-elrendezésre való, nem önálló tartalmi egységre. Ha következetesen Block-ot használsz kártyákhoz, az oldalad struktúrapanelje sokkal átláthatóbb lesz, és más fejlesztő is könnyebben eligazodik benne.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 több, vizsgáld meg, hogy valóban egy egységről van-e szó, vagy több Block-ra lenne érdemesebb bontani.Hogyan készítsek egyforma méretű kártyákat különböző mennyiségű szöveggel?
Két megközelítés:1. A szülő Container `Align Items → stretch` beállítása – a Block-ok automatikusan a legmagasabb méretéhez igazodnak.2. A Block-on `min-height` érték megadása – minden kártya legalább ennyire magas lesz, de a tartalom kibővíti, ha több szöveg kerül bele.A Block és a Section background beállításai ugyanazok?
Igen, a háttérbeállítások (szín, kép, gradient, overlay, videó) mindkét elemnél ugyanúgy működnek. A fő különbség: Section teljes szélességű és az oldal fő blokkjaira való, Block pedig egy tartalmi egység a Section-ön belül.
Összefoglaló
A Bricks Builder Block elem látszólag egyszerű, de a hierarchiában betöltött szerepe kulcsfontosságú.
A legfontosabb elvek:
– Block = önálló tartalmi egység a Container-en belül – kártya, feature box, panel.
– Ne cseréld fel a Container-rel: a Container rendez, a Block tartalmaz.
– `Overflow: hidden` szinte minden kártyánál szükséges, ha a kép a szélig ér.
– Hover effekthez mindig adj `transition`-t, különben hirtelen vált.
– A teljes kártya linkjét a Block szintjén add meg, ne a belső elemeken.
– Tartsd be a **Section → Container → Block → Div** hierarchiát – ez az átlátható, karbantartható Bricks oldal alapja.
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.