# Az elrendezés elemei

> A Szakasz, Tároló, Blokk és Div elem szerepe, többoszlopos elrendezés készítése, elemek beszúrása, becsomagolása és átalakítása.

A tartalom csoportosításához és elrendezéséhez a Bricks négy elrendezéselemet ad: **Szakasz**, **Tároló**, **Blokk** és **Div**. Ha új vagy a webdizájnban, a Szakasszal, a Tárolóval és a Blokkal kezdd: ezek előre beállított értékekkel jönnek, így a leggyakoribb beállításokat nem kell elemenként megismételned.

- **Szakasz**: az oldal tagolására szolgál (egy téma, egy szakasz).
- **Tároló**: a tartalmat 1100 px szélességben, középre igazítva fogja össze.
- **Blokk**: 100% széles flexbox, például egy oszlop.
- **Div**: sima, stílus nélküli div, amely a benne lévő elemekhez igazodva nő.

A Szakasz, a Tároló és a Blokk valójában előre beállított Div. Alapból a flexbox elrendezési modellt használják, így könnyen irányíthatod, igazíthatod és oszthatod el bennük az elemeket. A Div a legalapvetőbb csoportosító elem: a Bricksben nincs előre megadott stílusa, így úgy formázod, ahogy akarod.

Minden elrendezéselem rendelkezik **Megjelenítés** (display) beállítással. Maradhatsz a flexnél, válthatsz `grid`-re a CSS Grid vezérlőihez, vagy használhatod a `block`, `inline-block`, `inline` és `none` értéket, ha az elrendezés ezt kívánja. Bármelyik elrendezéselem alapértékét átállíthatod a sablonstílusokban.

| Elem | Címke | Megjelenítés | Szélesség | Hol használd |
|---|---|---|---|---|
| Szakasz | `section` | flex | 100% | Legfelső szinten |
| Tároló | `div` | flex | 1100 px | Szakaszban |
| Blokk | `div` | flex | 100% | Szakaszban vagy Tárolóban |
| Div | `div` | nincs Bricks-alapérték | - | Bárhol |

## Szakasz

A Szakasz a legkülső építőelem: az oldal egyes részeit választja el és tartja távol egymástól. A rendelkezésre álló szélesség 100%-át foglalja el, magassága a tartalmához igazodik, és a szakaszok egymás alatt sorakoznak.

Új Szakasz beszúrásakor a Bricks automatikusan egy **Tároló** elemet is tesz bele. Ezt törölheted, ha semmit nem kell „összetartanod”, például egy teljes magasságú (`100vh`) hős szakasznál.

A szakaszok alapértékeit a **Stíluskezelő → Sablonstílusok → Elem → Szakasz** részben írhatod felül. A szakaszok közötti távolságot a `margin` vagy a `padding` beállításával adhatod meg, és módosíthatod az alapértelmezett `display` és `height` értéket is.

## Tároló

A Tároló automatikusan középre kerül, alapszélessége 1100 px. Ezt a **Stíluskezelő → Sablonstílusok → Elem → Tároló** részben módosíthatod. A Tárolót Szakaszba tedd, a Blokk vagy Div elemeket pedig a Tárolóba, ha több oszlopos vagy több soros elrendezést akarsz.

Egy tipikus példa: egy 60 px belső margójú Tároló egy háttérképes Szakaszban.

## Blokk

A Blokk ugyanazokat a vezérlőket kínálja, mint a Tároló (elrendezés, lekérdezési ciklus és így tovább). Az egyetlen különbség, hogy az alapszélessége 100%, nem rögzített 1100 px. Egyenlő oszlopok vagy sorok kialakítására használd Szakaszon vagy Tárolón belül.

### Többoszlopos elrendezés készítése

Háromoszlopos elrendezés egy Tárolóban:

1. Jelöld ki a Tárolót.
2. Az **Irány** beállítást állítsd **Vízszintes**re.
3. A vásznon a kis „+” ikonra háromszor kattintva szúrj be három Blokkot.

Az eredmény: Szakasz, benne Tároló, benne három Blokk.

A leggyorsabb mód: jelöld ki a Tárolót, kattints a vásznon a kis „oszlop” elrendezés ikonra, és válaszd ki az előre elkészített oszloposztások egyikét. A beszúrt elrendezés alapból Blokk elemekből áll. Az „Oszlop” felirat csak címke, az elem továbbra is Blokk: ezt a szerkezetpanelen az ikon mutatja, és ha az elem ikonja fölé viszed az egeret, kiírja az elem nevét is.

## Div

A Div a legáltalánosabb csoportosító elem. A többi elrendezéselemmel ellentétben a Bricksben teljesen stílus nélküli, így a jelölése és a formázása fölött teljes a szabadságod. Ha más elrendezéselemen belül használod, a benne lévő elemekhez igazodva nő vagy zsugorodik.

## Elemek beszúrása, becsomagolása és átalakítása

Bármely elrendezéselemen jobb gombbal kattintva előjön a helyi menü. Itt egy kattintással **beszúrhatsz**, **becsomagolhatsz** és **átalakíthatsz** elrendezéselemeket. Például a szerkezetpanelen a „Hős” gyökérszintű Tárolóra jobb gombbal kattintva az **Átalakítás** alatt a Szakasz ikont kiválasztva a Tároló Szakasszá alakul.

Elrendezéselem szerkesztésekor a vásznon a „+” ikon fölé víve a **Tároló**, **Blokk** és **Div** lehetőséget kapod. A `Cmd / Ctrl` lenyomva tartásával az elemet az aktív elem után szúrja be a Bricks.

### Az alapértelmezett elem megváltoztatása

A **Bricks → Beállítások → Szerkesztő → Elemműveletek** részben módosíthatod, melyik elrendezéselemet használja alapból a **Beszúrás**, a **Becsomagolás** és az elrendezés eszköz.

### Meglévő Tároló-alapú webhely átalakítása

Ha a webhelyed eddig Tárolókra épült, az új Szakasz és Blokk elemekre az átalakítóval térhetsz át: a **Bricks → Beállítások → Általános → Átalakító** részben kapcsold be a „Tároló” elemek átalakítását az új „Szakasz” és „Blokk” elemekre, majd futtasd az átalakítót.

## Masonry elrendezés

Minden elrendezéselemnél bekapcsolhatod a masonry (kváderes, egymásba illeszkedő) elrendezést a **Stílus → Elrendezés → Masonry** részben. Részletek: [Masonry elrendezés](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-masonry/).