Mi az a Section elem a Bricks Builderben
A Section a Bricks oldalak legfelső szintű építőeleme: teljes szélességű HTML taget generál, ami a sorok és oszlopok gazdakonténere. Önmagában sosem tartalmaz közvetlenül szöveget vagy képet, ahhoz mindig egy Container kell bele, viszont ő felelős a háttérért, a paddingért, a shape dividerért és a láthatósági szabályokért.
A Bricks 1.5-ös verziója (2022 szeptember) cserélte le a régi Row/Column rendszert a mai Container-alapú felépítésre, de a Section elem szerepe azóta is ugyanaz maradt: az oldal vizuális blokkjait (hero, features, CTA, footer) választja el egymástól, teljes szélességű háttérrel, opcionális shape dividerrel, és sticky beállítással akár lebegő navigációs sávként is működhet.
Section, Container vagy Div - melyik mire való
| Section | Container | Div | |
|---|---|---|---|
| HTML tag | section | div | div |
| Tipikus használat | Oldal fő vizuális blokkjai | Belső layout, grid, flex | Apró wrapper, utility |
| Shape Divider | Igen, beépített | Nem natívan | Nem |
| Alapértelmezett szélesség | 100% | Manuálisan állítod | Manuálisan állítod |
| Beágyazhatóság | Legfelső szint, ne ágyazd Section-be | Bárhol | Bárhol |
| Jellemző eset | Hero, Features, CTA, Footer | Többoszlopos layout, kártya grid | Ikon wrapper, badge, overlay |
Section-t akkor válassz Container helyett, ha teljes oldalszélességű hátteret (kép, videó, szín) vagy shape dividert akarsz egy önálló tartalmi blokknak. Fordítva: ha csak a belső elrendezést kell megoldanod grid, flex, kártyasor, az már a Container dolga, a Section-t nem érdemes egymásba ágyazni, mert zavaros lesz a layout és sérül a szemantikus HTML is. Apró segédelemekhez (ikon köré, badge-hez) pedig egyik sem kell, arra ott a Div.
Hozzáadása
E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Section”, és a vászonra húzod, akkor automatikusan kap egy üres Container-t is belül, ide kerül majd a tartalom. Ha egy meglévő Section-t másolsz (Ctrl+D / Cmd+D), a teljes tartalmával együtt klónozódik, ami jó módja a sablonszerű blokkok gyors sokszorosításának. 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á
Elrendezés. A Width alapból 100%, ezt Section szinten szinte soha ne változtasd meg a kisebb szélességet a belső Container-en állítsd be. A Height lehet fix (600px), viewport-alapú (100vh), vagy hagyd auto-n, hogy a tartalom szabja meg. Ha egy shape divider vagy abszolút pozicionált elem kilóg a keretből, az Overflow-t állítsd hidden-re, különben vízszintes görgetősáv jelenik meg. Sticky szekciónál a Position legyen sticky.
Háttér. A Style → Background fülön egyszínű, lineáris, radiális vagy kúpos gradienst adhatsz meg, vagy képet (pozíció, cover/contain méretezés, no-repeat, fixed attachment parallax hatáshoz). Videó háttérnél elég egy MP4 URL vagy egy YouTube/Vimeo link, ez automatikusan muted és loop módban megy de iOS Safarin az autoplay gyakran nem indul el, ezért mindig legyen mobilra egy fallback kép. Sötét overlay-t (pl. rgba(0,0,0,0.45)) a szöveg olvashatóságához szoktam rátenni képes vagy videós háttérre.
Padding és margin. A padding belülről tolja el a tartalmat a Section szélétől, a margin kívülről ad térközt a szomszédos elemekhez Section-nél tipikusan csak padding-top és padding-bottom értékeket állítunk, margin-nál vigyázz a margin collapse jelenségre (két egymás melletti margin összeolvadhat). Szokásos értékek: desktopon 80–120px, tableten 60px, mobilon 40px — és mindhárom nézetet külön állítsd be, ne hagyatkozz az öröklésre.
Shape Divider. CSS clip-path vagy SVG-alapú díszítőelem a Section tetején vagy alján, ami vizuálisan összeköti a szomszédos szekciókat. Pozíció (top/bottom), típus (Wave, Triangle, Slant, Curve, Zigzag és még jó pár), szín, szélesség (100%, vagy 120%-ra növelve eltünteti a széli artifaktokat), magasság és flip mind állítható a Style → Shape Divider alatt. A színnek mindig egyeznie kell a szomszédos szekció hátterével, különben látszik az elválasztás és ha a divider kilóg a kereten, ugyanaz az Overflow: hidden segít, mint fentebb.
Láthatóság. Elrejthető eszközönként (Style → Visibility), Bricks Pro-val pedig feltételes megjelenítés is beállítható például csak bejelentkezett felhasználóknak, vagy adott post type-on.
Teljes szélesség és sticky viselkedés
A Section alapból teljes szélességű, de a benne lévő tartalom a Bricks → Theme Styles → Layout → Content Width értékéhez igazodik (pl. 1200px). A leggyakoribb eset, hogy a háttér teljes szélességű, a tartalom viszont középre igazított — ehhez a belső Container kap egy max-width-et és margin: 0 auto-t. Ha inkább edge-to-edge, mindent teljes szélességűre akarsz, akkor a belső Container szélességét is 100%-ra állítod, minden max-width nélkül.
A sticky Section görgetés közben egy adott pozícióban „ragad meg” tipikusan navigációs sávnál, sticky CTA-nál vagy sidebar szekciónál hasznos. A Style → Position legyen sticky, a Top érték 0px (ha közvetlenül a viewport tetejéhez rögzíted), és adj hozzá magas z-indexet (pl. 999), hogy a többi elem felett maradjon. Egy dolog, amit érdemes fejben tartani: a sticky csak akkor működik, ha a szülőelemen nincs overflow: hidden ha nem ragad meg, először ezt nézd meg.
Amivel a leggyakrabban bajlódnak
A leggyakoribb panasz, hogy a Section nem lesz teljes szélességű ez szinte mindig a WordPress téma saját wrapper divje miatt van, ami korlátozza a szélességet. A megoldás: a Bricks → Settings → Template alatt aktiváld a „Canvas” sablont, ez eltávolítja a téma wrapperét; ha nem Canvas-ban dolgozol, keresd meg a téma CSS-ében a .site-content, .entry-content, .container osztályokat és töröld a max-width értéküket, vagy kapcsold be a Bricks → Settings → General alatt a „Disable default WordPress content width” opciót.
Ha a shape divider rossz színűnek látszik, majdnem mindig az az ok, hogy a szomszédos szekció háttere azóta megváltozott, a divider színe viszont kézzel be lett állítva és nem követte. Egyszerűbb, ha CSS változót használsz (pl. –bb-color-primary) mindkét helyen, így egy helyen módosítva mindkettő frissül.
A videós háttér mobilon való elmaradása szinte mindig az iOS Safari 15+ autoplay-blokkolása erre nincs univerzális trükk, egyszerűbb, ha mobilra egy statikus fallback képet adsz meg, vagy teljesen elrejted a videós Section-t mobilon és helyette CSS gradientet mutatsz.
A sticky Section villogása görgetés közben általában abból jön, hogy egy transition CSS tulajdonság interferál a sticky pozicionálással, vagy a Section magassága dinamikusan változik. Egy will-change: transform hozzáadása a Custom CSS fülön, és annak ellenőrzése, hogy nincs height-animáció a szülőelemeken, általában megoldja.
Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: van-e szemantikailag helyes HTML tag minden Section-nél, jól néz-e ki a háttérkép mobilon is, be van-e állítva reszponzívan a padding minden nézetben, egyezik-e a shape divider színe a szomszéd szekcióval, és nem maradt-e véletlenül üres Section az oldalon. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.
Gyakori kérdések (FAQ)
Hány Section elemet érdemes használni egy oldalon?
Nincs pontos limit. Általánosan minden önálló vizuális blokk (hero, features, about, CTA, testimonials, footer) egy-egy Section-t kap. Egy átlagos landing oldalon 5–10 Section egészséges. Ha ennél több van, vizsgáld meg, hogy valóban szükséges-e minden szekció, vagy néhányat össze lehet vonni.
Befolyásolja-e a Section a SEO-t?
Igen, közvetve. A
HTML5 landmark elem segíti a keresőmotorokat és a képernyőolvasókat a tartalom strukturálásában. Az aria-labelattribútum hozzáadásával (Custom Attributes →aria-label = "Hero szekció") tovább javítható az akadálymentesítés és az SEO.Tudok-e globális Section sablont készíteni Bricksben?
Igen. Bricks → Templates → New Template → Type: Section. Ezután a szerkesztőben bárhova beszúrhatod. Frissítés esetén az összes oldalon automatikusan frissül ez ideális footer, header, CTA vagy értesítési szalaghirdetésnél (announcement bar).
Bricks 1.5 előtt hogyan működött a Section?
Bricks 1.5 előtt a hierarchia: Section → Row → Column volt. A Section-be kerültek a Row elemek, a Row-ba a Column elemek, és a Column-okba a tényleges tartalom. Az 1.5-ös verzióban a Container elem váltotta fel a Row-t és a Column-t, de a Section elem megmaradt és ugyanúgy működik.
Miért nem jelenik meg a Section a frontend-en?
Ellenőrizd sorban:
1. A Section nincs elrejtve (Visibility → nincs bepipálva az eszközre a „hide” checkbox)?
2. A feltételes megjelenítés (Conditions) nem szűri ki a jelenlegi felhasználó számára?
3. Nincs CSS konfliktus a témával (display: nonevagyvisibility: hiddenoverride)?
4. A Bricks cache frissítve van (Bricks → Cache → Purge All)?
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.