Bricks Builder Section: Teljes útmutató kezdőknek és haladóknak (2026)

A Bricks Builder Section elem a legtöbb oldal alapköve: egy teljes szélességű konténer, amely tartalmazza a sorokat és oszlopokat. Beállíthatod a hátteret, paddinget, shape dividert és a láthatósági szabályokat. Ha nem tudod mikor és hogyan használd, az oldalad struktúrája kaotikus lesz – ezt a cikket olvasva elkerülheted a leggyakoribb hibákat.

Rövid válasz: A Section egy teljes szélességű wrapper elem, amely 

Mikor használj Section-t Container helyett?

• Amikor egy teljes oldalszélességű hátteret (kép, videó, szín) akarsz egy blokknak.
• Amikor shape dividert szeretnél a blokk tetején vagy alján.
• Amikor a blokk önálló tartalmi egységet képvisel (pl. hero, features, CTA szekció).

1. Nyisd meg a Bricks Builder szerkesztőt (wp-admin → Szerkesztő megnyitása).
2. Kattints a bal oldali panelen az „Add element” (+) gombra, vagy nyomj E billentyűt.
3. Keresd meg a „Section” elemet a keresőmezőben, vagy húzd be a vászonra.
4. A Section automatikusan egy üres Container-t tartalmaz belül – ebbe kerülnek a tartalom elemei.

Tipp: Ha egy meglévő Section-t másolsz (Ctrl+D / Cmd+D), a teljes tartalmával együtt klónozódik – így gyorsan tudsz sablonszerű blokkokat sokszorosítani.

Billentyűparancs a Section kijelöléséhez: Kattints a vászonon a Section keretére, vagy a bal oldali struktúrapanelen a „Section” elemre. A Ctrl+Shift+Z visszavonja az utolsó módosítást.

• Width: Alapértelmezetten 100% – ezt szinte soha ne változtasd meg Section szinten. Ha kisebb szélességet akarsz, azt a belső Container-en állítsd.
• Height: Beállíthatod fix magasságra (pl. 600px), viewport-alapú értékre (100vh) vagy hagyd auto-n, hogy a tartalom szabja meg.
• Overflow: Ha a shape divider vagy egy abszolút pozicionált elem kilóg, állítsd hidden-re – különben a vízszintes görgetősáv megjelenik.
• Position: Sticky section esetén sticky-re kell állítani (Bricks 1.8+ óta a pozíció beállítások közvetlenül elérhetők a Style panelen).

A Section legnagyobb erőssége a rugalmas háttérkezelés. Bricks Builder 1.9-től a háttérbeállítások a Style → Background fülön találhatók:

• Szín: Egyszínű, lineáris gradient, radiális gradient, kúpos gradient.
• Kép: Pozíció (center center), méret (cover / contain / egyéni px), ismétlés (no-repeat), attachment (fixed = parallax hatás).
• Videó háttér: MP4 fájl URL-je vagy YouTube/Vimeo link – automatikusan muted és loop módban játszik le. iOS Safariban az autoplay nem működik, ezért mindig adj fallback képet.
• Overlay: Félig áttetsző réteg a háttér fölé (pl. rgba(0,0,0,0.45) sötét overlay kép felett).

Konkrét példa – hero szekció beállítása:

• A padding belülről tolja el a tartalmat a Section szélétől.
• A margin kívülről adja a térközt a szomszédos elemekhez képest.
• Section-nél tipikusan csak padding-top és padding-bottom értékeket állítunk. A margin-top / margin-bottom értékekkel ügyelj, mert margin collapse léphet fel (két egymás melletti margin összevonódik).
• Ajánlott értékek: Desktop: 80–120px top/bottom, Tablet: 60px, Mobile: 40px.
• Reszponzív nézetek (Desktop → Tablet → Mobile) külön-külön állíthatók – a mobilos értéket mindig explicit add meg, ne hagyatkozz az örökítésre.

A shape divider CSS clip-path vagy inline SVG alapú díszítőelem, amely a Section tetején vagy alján jelenik meg, és vizuálisan „összeköti” a szomszédos szekciókat.

Beállítási lehetőségek (Style → Shape Divider):
– Pozíció: Top / Bottom
– Típus: Wave, Triangle, Slant, Curve, Zigzag, stb. (20+ lehetőség)
– Szín: Mindig a szomszédos szekció háttérszínével kell egyeznie – különben látszani fog az elválasztás.
– Szélesség: 100% (alapértelmezett), de 120%-ra növelve eltüntetheted a szélső artifaktokat.
– Magasság: px-ben (pl. 60px–150px)
– Flip: Horizontális tükrözés – Wave esetén pl. alternatív iránnyal más hatást kapsz.
– Z-index: Ha a shape divider más elem mögé kerül, növeld a z-index értékét.

Fontos: Ha a shape divider kilóg a Section keretéből, a Section Overflow-ját állítsd hidden-re.

A Section elem szinten is beállítható, hogy melyik eszközön jelenjen meg:

• Elrejtheted mobilon, tableten, asztali gépen (Style → Visibility).
• Bricks Pro: Feltételes megjelenítés (Conditions) – pl. csak bejelentkezett felhasználóknak, csak bizonyos post type-okon, csak adott felhasználói szerepkörnél.

Rövid válasz: A Bricks Builderben a Section alapértelmezetten teljes szélességű (100%), de a belső tartalom egy max-width-re korlátozódik (amit a Bricks → Theme Styles → Layout → Content Width értékkel állítasz be, pl. 1200px).

Teljes szélességű háttér, de középre igazított tartalom (ez a leggyakoribb eset):
– Section szélessége: 100%
– Belső Container max-width: 1200px + margin: 0 auto (középre igazítás)

Edge-to-edge (mindent teljes szélességűre):
– Section szélessége: 100%
– Belső Container szélessége is: 100% (törölj minden max-width beállítást)

Rövid válasz: A sticky Section görgetés közben egy adott pozícióban „ragad meg”. Ez tipikusan a navigációs sávnál, sticky CTA-nál vagy sidebar szekcióknál hasznos.

Beállítás lépései:
1. Section → Style → Position → sticky
2. Top értékét állítsd 0px-re (ha közvetlenül a viewport tetejéhez akarod rögzíteni)
3. Adj magas z-index-et (pl. 999), hogy a többi elem felett legyen

Figyelem: A sticky position csak akkor működik megfelelően, ha a szülőelem nem rendelkezik overflow: hidden beállítással. Ha a Section nem ragad meg, először ezt ellenőrizd.

• Ne ágyazz Section-t Section-be – a layout zavaros lesz, és a szemantikus HTML is sérül.
• Ne használj Section-t apró, belső elemek köré (pl. egy gomb, egy kép köré) – erre való a Container vagy a Div elem.
• Ne állíts fix pixel magasságot Section-re, ha a tartalom változó mennyiségű – inkább min-height-et használj.
• Ne hagyj üres Section-t az oldalon – felesleges DOM elemet és üres térközt generál.

Ok: A WordPress téma saját wrapper <div>-je korlátozza a szélességet.

Megoldás lépései:
1. Bricks → Settings → Template → aktiváld a „Canvas” sablont (ez eltávolítja a téma wrapper-ét).
2. Ha nem Canvas sablonban dolgozol, ellenőrizd a téma CSS-ét: keresd a .site-content, .entry-content, .container osztályokat és töröld a max-width értékeiket.
3. WordPress admin → Bricks → Settings → General → „Disable default WordPress content width” opció bekapcsolása.

Ok: A shape divider színe manuálisan van beállítva, de a szomszédos szekció háttere megváltozott.

Megoldás: Mindig a szomszédos szekció háttérszínének HEX kódját másold be a shape divider színébe. Ha CSS változókat (--bb-color-primary) használsz, azokat shape divider szín mezőben is megadhatod.

Ok: iOS Safari 15+ alapértelmezetten blokkolja az autoplay videókat, még muted módban is egyes esetekben.

Megoldás:
1. Adj fallback háttérképet mobilra (Style → Background → Image → csak mobilon).
2. A videó háttér Section-t rejtsd el mobilon (Visibility → Hide on mobile).
3. Alternatíva: CSS animált gradient háttér mobilon, videó csak desktopon.

Ok: A transition CSS tulajdonság interferál a sticky pozícionálással, vagy a Section magassága dinamikusan változik.

Megoldás: Adj will-change: transform CSS-t a Section-nak (Custom CSS fülön), és győződj meg róla, hogy nincs height animáció a szülőelemeken.

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

• [ ] HTML tag megfelelő (section, div, header, footer, main stb.) a szemantika szempontjából?
• [ ] Háttérkép mobilon is jól néz ki (megfelelő képarány, felbontás min. 1200px széles)?
• [ ] Padding értékek reszponzív nézetekben (Desktop / Tablet / Mobile) be vannak állítva?
• [ ] Shape divider szín egyezik a szomszédos szekció hátterével?
• [ ] Overflow: hidden be van állítva, ha shape divider vagy abszolút pozicionált elem kilóg?
• [ ] Sticky szekciónál a z-index magasabb, mint a többi elemnél (legalább 100)?
• [ ] Videó hátterű szekciónál van fallback kép mobilra?
• [ ] Visibility / feltételek (Conditions) helyesen vannak beállítva?
• [ ] Üres Section nincs az oldalon véletlenül visszahagyva?

A szekciók helyes beállításához akár árajánlatot is kérhet!

A Bricks Builder Section elem látszólag egyszerű, de a helyes használata meghatározza az egész oldal layout-jának minőségét és karbantarthatóságát.

A legfontosabb elvek:
– Section = legfelső szintű blokk, teljes szélességű háttérrel.
– Ne ágyazz Section-t Section-be – zavaros layout és hibás szemantika lesz a vége.
– Mindig állíts be reszponzív paddinget minden nézethez külön.
– A shape divider színét szinkronizáld a szomszédos szekció hátterével.
– Videó háttérnél mindig legyen mobilos fallback kép.
– Sticky Section esetén ellenőrizd a szülőelem overflow beállítását.

Ha ezeket betartod, az oldalad vizuálisan következetes, szemantikailag helyes, és könnyen karbantartható lesz – bármilyen ügyfélen is dolgozol.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. 18+ éve foglalkozik weboldalak tervezésével és fejlesztésével.