A Bricks Builder Div elem a layout-hierarchia negyedik, legalsó szintje – apró, önállótlan wrapper elemekhez való (ikon, badge, overlay, tooltip). Nem tartalmi egységre, hanem segédszerepre tervezték. A leggyakoribb hiba: fejlesztők Div-et használnak ott, ahol Block kellene, és fordítva – ami következetlen struktúrát és feleslegesen mély DOM-ot eredményez.

Rövid válasz: A Div egy általános célú, blokk szintű wrapper elem, amely <div> HTML taget generál. A Section → Container → Block → Div hierarchia legalsó szintje: olyan kis, önállótlan elemek köré való, amelyek nem képviselnek önálló tartalmi egységet, csak vizuális vagy struktutális segítséget nyújtanak.

Neve a HTML <div> elemből ered (division = részleg, elválasztó). A Bricks Builder ezt az elemet a legkisebb granularitású wrapperként kezeli – mindent meg tud csinálni, amit a Block, de ez egyben a veszélye is: ha mindenhova Div-et használsz, elveszti a hierarchiában betöltött szerepét, és az egész struktúra értelmét veszti.

Mire való konkrétan:

• Ikon + szöveg együttes elhelyezésére egy sorban.
• Badge, label, tag elem kiemelésére (pl. „Új”, „Akció”).
• Overlay réteg elhelyezésére kép felett.
• Tooltip vagy popover trigger wrapper-ként.
• Dekoratív elem köré (vízszintes vonal, spacer, divider).
• Egy elem pozícionálásához szükséges köztes wrapper-ként.

Mire való konkrétan – rövid összefoglaló:

• Div: ikon wrapper, badge, overlay, tooltip, dekoratív elem
• Block: kártya, feature box, testimonial, pricing box
• Container: vízszintes sor, kétoszlopos layout, grid elrendezés
• Section: hero szekció, CTA blokk, footer, teljes szélességű tartalom

Saját tapasztalatom alapján ez a döntési pont okozza a legtöbb strukturkális hibát. A fejlesztők egy része minden kis elemköré Div-et rak, mások mindent Block-ba tesznek – mindkettő helytelen.

Div-et válassz, ha:

• Az elem önmagában nem hordoz tartalmi jelentést – csak vizuálisan csoportosít valamit.
• Az elem 1-2 gyerekből áll, és nem fog bővülni.
• Dekoratív szerepe van (spacer, díszítővonal, ikon wrapper).
• Pozícionáláshoz kell egy köztes réteg (pl. position: relative szülő egy position: absolute gyerekhez).

Block-ot válassz, ha:

• Az elem önállóan is értelmes tartalmat képvisel (kártya, feature, testimonial).
• Az elem több kisebb egységből áll (kép + cím + szöveg + gomb).
• Az elemet sablonént szeretnéd kezelni és duplikálni.
• Hover effektje van az egész egységnek.

Helyes példa – ikon + szöveg kombináció:

Block (feature box)
  ├── Div (ikon wrapper)
  │     └── Icon elem
  ├── Heading (cím)
  └── Rich Text (leírás)

Helytelen példa – felesleges Div-ek:

Div
  └── Div
        └── Div
              └── Szöveg  ← három szint csak egy szöveghez, indok nélkül

1. Nyisd meg a Bricks Builder szerkesztőt.
2. Kattints az „Add element” (+) gombra, vagy nyomj E billentyűt.
3. Keresd meg a „Div” elemet, és húzd a megfelelő szülőelembe.
4. Alapertelméretten üres <div> wrapper – add hozzá a belső elemet.

Tipp: Ha egy Div-et átnevezed a struktþrapanelen (pl. „Ikon wrapper”, „Badge”, „Overlay”), az oldal sokkal átláthatóbb lesz. Egy névtelen Div láncot három hónap múlva senki sem fog érteni – beleértve saját magadat is.

A Div alapértelmezetten display: block, de átállítható:

• Flex: Ha a Div-en belül több elemet kell vízszintesen vagy függőlegesen igazítani (pl. ikon + szöveg egy sorban).
• Inline-block: Ha a Div szélességét a tartalma határozza meg, és sorba kell illeszkednie más elemekkel (pl. badge, tag).
• Grid: Ritkán szükséges Div szinten, de lehetséges.

Konkrét példa – ikon + szöveg vízszintes sorba igazítása:

Div
  display: flex
  align-items: center
  gap: 12px
  └── Icon
  └── Heading (H3)

• Width / Height: Általában auto – a tartalom szabja meg. Badge esetén fix px érték adja az egyforma méretű jelölőket.
• Position: relative – akkor szükséges, ha a Div-en belül position: absolute gyereket helyezel el (pl. overlay, badge sarokba pozícionálva).
• Z-index: Overlay rétegnél mindig állíts be z-index értéket, különben a rétegek sorrendje véletlenszerű lesz.

Az overlay egy Div, amely egy kép vagy Section felett helyezkedik el, félig átlátszó vagy teljesen egyszínű rétegként.

Beállítás lépései:

1. Helyezz egy Div-et a képet tartalmazó Block-ba.
2. Div → Style → Position → absolute
3. Top: 0, Left: 0, Width: 100%, Height: 100%
4. Background → rgba(0, 0, 0, 0.45) (félig átlátszó fekete)
5. A szülő Block vagy Container → Position → relative
6. Z-index: az overlay Div-é legyen magasabb, mint a képé, de alacsonyabb, mint a szövegé

Block (position: relative)
  ├── Kép (z-index: 1)
  ├── Div – overlay (position: absolute, z-index: 2, background: rgba(0,0,0,0.45))
  └── Container – szöveg (position: relative, z-index: 3)

Badge-ek (pl. „Új”, „Akció”, „Top”) tipikusan Div-ek, amelyek a szülő Block sarkába vannak pozícionálva.

Block (position: relative)
  ├── Kép
  ├── Div – badge (position: absolute, top: 16px, right: 16px)
  │     └── Rich Text („Akció”)
  └── Container – tartalom

Stílus beállítások badge-nél:

• Background: #e74c3c (piros) vagy brand szín
• Padding: 4px 12px
• Border-radius: 4px vagy 999px (pill forma)
• Font size: 12px–14px, félkövér

A Div a legkisebb egység a hierarchiában – ha ennél nagyobb dologhoz nyúlsz Div-vel, valószínűleg Block vagy Container kell helyette. Tartsd be a Section → Container → Block → Div sorrendet, és az oldalad struktúrája átlátható marad.

• Ne használj Div-et önálló tartalmi egységhez – ha kártyát, feature boxot vagy panelt épít esz, az Block, nem Div.
• Ne ágyazz Div-et Div-be indok nélkül – minden extra szint növeli a DOM mélységét és rontja a karbantarthatóságot.
• Ne használj Div-et layout-elrendezéshez – ha oszlopokat vagy sorokat rendezel, az Container feladata.
• Ne hagyj üres, névtelen Div-eket az oldalon – ha egy Div-nek nincs funkciója, töröld.

A Div nem látszik az oldalon

Ok: Üres Div-nek nincs mérete – ha nincs benne tartalom és nincs explicit width / height értéke, 0×0 pixeles lesz.

Megoldás: Adj explicit width és height értéket, vagy helyezz tartalmat a Div-be. Overlay esetén a position: absolute + width: 100% + height: 100% kombináció mindig láthatóvá teszi.

Az overlay Div takarja a gombot vagy szöveget

Ok: A z-index értékek nincsenek helyesen beállítva – az overlay magasabb z-index-en van, mint a felette lévő tartalom.

Megoldás: Ellenőrizd a z-index sorrendet:

• Háttérkép: z-index: 1
• Overlay: z-index: 2
• Szöveg / gomb: z-index: 3

A badge kilóg a kártya keretéből

Ok: A szülő Block nincs position: relative-re állítva, ezért a position: absolute badge a legközelebbi positioned ancestor-hoz képest pozícionálódik – ami lehet az egész oldal.

Megoldás: A szülő Block → Style → Position → relative. Eztán a badge a Block sarkához képest pozícionálódik.

A Div-en belüli ikon és szöveg nem igazítja egy sorba

Ok: A Div alapértelmezett display: block értéke miatt az elemek egymás alá kerülnek.

Megoldás: Div → Style → Display → flex, Align Items → center, Gap → 8px–12px. Ez egy sorba és vertikálisan középre igazítja az ikon-szöveg párt.

Mielőtt élesbe teszed az oldalt, ellenőrizd minden Div-nél:

• Valóban Div kell ide, vagy Block / Container lenne helyesebb?
• A Div-nek van neve a struktþrapanelen (pl. „Overlay”, „Badge”, „Ikon wrapper”)?
• Ha position: absolute van beállítva, a szülőelemen van position: relative?
• Az overlay Div z-index értéke alacsonyabb, mint a felette lévő tartalomié?
• Nincs üres, funkció nélküli Div az oldalon?
• Ha ikon + szöveg van benne, a display flex-re van állítva?
• Badge esetén a szülő position: relative-re van állítva?

A Bricks Builder Div elem a legalapvetőbb és egyben a legkönnyebben visszaélhető elem a hierarchiában.

A legfontosabb elvek:

• Div = apró, önállótlan segéd-wrapper – ikon, badge, overlay, tooltip.
• Ha az elem önálló tartalmat képvisel, Block kell, nem Div.
• Ha elrendezést végez, Container kell, nem Div.
• Minden Div-et nevezz el a struktþrapanelen – névtelen Div-láncok olvashatatlan struktúrát okoznak.
• position: absolute Div-hez mindig kell position: relative szülő.
• Overlay z-index sorrendje: háttér → overlay → tartalom.
• 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 szakertő. 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.