# Szakasz és Tároló elem

> A Szakasz és a Tároló elem: szerepük, a közös elrendezési beállítások (rács és flex), masonry, valamint a régi elrendezés átalakítása Tárolókra.

A **Szakasz** és a **Tároló** két a négy elrendezéselem közül (a másik kettő a **Blokk** és a **Div**, lásd [Blokk és Div elem](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-blokk-es-div/)). Az elrendezéselemek közös szerepéről és arról, mikor melyiket érdemes használni, az [Az elrendezés elemei](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-elrendezes/) fejezet szól.

## Szakasz

A **Szakasz** az oldal legkülső építőeleme: az oldalt önálló területekre bontja (egy téma, egy szakasz), például nyitóblokkra, tartalmi részre vagy láblécre.

- Alapértelmezett szélessége 100%, a `section` címkét használja, és flexboxot alkalmaz.
- A teljes rendelkezésre álló szélességet kitölti, magassága a tartalmához igazodik.
- A szakaszok függőlegesen egymás alá kerülnek.
- Legfelső szinten használd. Amikor új Szakaszt adsz a vászonhoz, a Bricks automatikusan beletesz egy **Tároló** elemet is. Ha nincs rá szükség, törölheted, ez csak az oldalépítést gyorsító alapértelmezés.

Példa a szerkezetre: **Szakasz > Tároló > Címsor**.

Tipp: a szakaszokkal külön háttérrel, térközzel és elrendezéssel bíró, jól elkülönülő oldalrészeket készíthetsz.

![A Szakasz elem beállításai a szerkesztőben](./kepek/elemek-5-section.webp)

*A Szakasz elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a Szakasz elem **HTML-címke** mezője `section` értéket mutat, a **Megjelenítés** `flex`. Alatta az irány és az igazítás beállításai látszanak.

## Tároló

A **Tároló** volt az egyetlen elrendezéselem a Bricks 1.5-ös változata előtt, azóta a Szakasz, a Blokk és a Div egészíti ki.

- Alapértelmezett szélessége 1100 px, középre igazított, és flexbox elrendezést használ. Így egyszerűen irányíthatod, igazíthatod és oszthatod el a benne lévő elemeket.
- Legfelső szinten vagy Szakaszon belül használd.
- A Tároló szerkesztésekor a vásznon az „oszlop" elrendezés ikonjára kattintva gyorsan beszúrhatsz egy előre megtervezett, oszlopalapú elrendezést.

![A Tároló elem beállításai a szerkesztőben](./kepek/elemek-5-container.webp)

*A Tároló elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a Tároló **Lekérdezési ciklus** kapcsolója, a **HTML-címke** (`div`), a **Megjelenítés** (`flex`), a térközök, az **Irány** és az igazítások láthatók.

## Közös beállítások

A Szakasz, a Tároló, a Blokk és a Div ugyanazokat a beállításokat kínálja, az alapértékek eltérnek.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Rácsoszlop** | Az elem oszlopkiterjedése (`grid-column`), ha a szülő rácsot használ. | |
| **Rácssor** | Az elem sorkiterjedése (`grid-row`), ha a szülő rácsot használ. | |
| **Lekérdezési ciklus** | Bekapcsolja a lekérdezési ciklust dinamikus tartalomhoz. Szakaszon, Tárolón, Blokkon és Divén érhető el. | Ki |
| **Link** | Hivatkozás beállításai, ha a HTML-címke `a`. Ilyenkor kötelező. | |
| **HTML-címke** | Az elem HTML-címkéje: `div`, `section`, `a` (link), `article`, `nav`, `ol`, `ul`, `li`, `aside`, `address`, `figure` vagy egyéni. | `div` (Szakasznál `section`) |
| **Egyéni címke** | Az egyéni címke neve attribútumok nélkül. Kötelező, ha a címke „egyéni". | |
| **Megjelenítés** | A CSS `display` értéke: `flex`, `grid`, `block`, `inline-block`, `inline` vagy `none`. | `flex` |

### Rácselrendezés (ha a Megjelenítés `grid`)

| Beállítás | Mit csinál |
| --- | --- |
| **Térköz** | A rácselemek közti távolság (`grid-gap`). |
| **Rácssablon oszlopai**, **Rácssablon sorai** | A rács oszlopainak és sorainak sablonja. Dinamikus adatot és változókat is elfogad. |
| **Automatikus rácsoszlopok**, **Automatikus rácssorok** | Az automatikusan létrejövő oszlopok és sorok mérete. Dinamikus adatot és változókat is elfogad. |
| **Automatikus rácselrendezés** | A rácsba töltés iránya: `row`, `column` vagy `dense`. |
| **Elemek igazítása** | A rácselemek igazítása a saját cellájukban (két mező: vízszintes és függőleges). |
| **Tartalom igazítása** | A teljes rács igazítása a tárolóban (két mező: vízszintes és függőleges). |

### Flex-elrendezés (ha a Megjelenítés `flex`)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Flex tördelése** | Tördelés: nincs, tördelés, fordított tördelés. | Nincs |
| **Irány** | A `flex-direction`: sor vagy oszlop. | |
| **Saját igazítás** | Az elem saját igazítása a szülőjében (`align-self`, `!important`-tal). | |
| **Főtengely igazítása** | A `justify-content`. | |
| **Kereszttengely igazítása** | Az `align-items`. | |
| **Oszloptávolság** | Az oszlopok közti távolság (`column-gap`). | |
| **Sortávolság** | A sorok közti távolság (`row-gap`). | |
| **Rugalmas növekedés** | A `flex-grow`, legalább 0. | 0 |
| **Flex zsugorítás** | A `flex-shrink`, legalább 0. | 1 |
| **Flex alapméret** | A `flex-basis`. Dinamikus adatot és változókat is elfogad. | auto |

A **Sorrend** (`order`, legalább -999, alapérték 0) akkor érhető el, ha a megjelenítés nem `none`.

### Masonry (Stílus fül)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Masonry elrendezés** | Bekapcsolja a masonry elrendezést a gyermekelemeknek. | Ki |
| **Oszlopok** | A masonry oszlopainak száma (`--columns`). | 3 |
| **Térköz** | Az elemek közti távolság (`--gutter`). | 10px |
| **Vízszintes sorrend** | Vízszintes sorrendbe rendezi az elemeket. | Ki |
| **Átmenet: Időtartam** | Az átmenetek hossza. A „0" kikapcsolja az alapanimációkat. | 0,4s |
| **Felfedési animáció** | Az elemek megjelenési animációja: skálázás, áttűnés, becsúszás balról vagy jobbról, ferdítés. Csak az újonnan a DOM-ba kerülő elemekre vonatkozik. | Skálázás |

A masonry részleteit a [Masonry elrendezés](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-masonry/) fejezet írja le.

## Régi (1.2 előtti) elrendezés átalakítása Tárolókra

Ha az oldalad a Bricks 1.2 előtt, a régi szakasz, sor és oszlop elrendezéssel készült, az adatokat át kell alakítani az új Tároló-alapú elrendezésre. A Bricks beépített átalakítóval egy kattintással elvégzi ezt, nem kell mindent újraépítened.

- Az új elrendezés teljesen rugalmas, nincs előre megadott „szakasz", „sor" vagy „oszlop" fogalma, ezért az átalakítás után valószínűleg kézzel is igazítanod kell.
- A régi adatok a frontenden továbbra is megjelennek, de nem teljesen pontos formában.
- Az átalakító nem törli a meglévő (szakaszalapú) Bricks-adatokat, így szükség esetén visszaléphetsz egy régebbi Bricks-változatra.
- Oldalanként haladj, hogy egyetlen oldal átnézését se hagyd ki. Óvatosságból az átalakítást előbb egy másolaton vagy tesztkiszolgálón is elvégezheted.

### 1. lépés: az át nem alakított tartalmak megkeresése

A bejegyzések, oldalak és sablonok listáján az át nem alakított tételek címe mögött a „(not migrated)" felirat áll.

### 2. lépés: az átalakító futtatása

1. Jelöld ki az átalakítandó oldalt a listában.
2. A **Tömeges műveletek** menüben válaszd a **Migrate Bricks Data** műveletet.
3. Kattints az **Alkalmaz** gombra.

### 3. lépés: az eredmény ellenőrzése

Nyisd meg az átalakított oldalt a Bricksben, és végezd el a szükséges igazításokat. Nézd meg az oldalt a frontenden is, hogy az elrendezés megfelel-e az elvárásaidnak.

### Átalakítási tippek

- A szakaszok alapértelmezett, 30 px-es alsó margóját a **Sablonstílusok → Általános → Gyökérkonténer margója** beállításnál állíthatod vissza.
- Az elemek alapértelmezett, 15 px-es alsó margóját az **Elem margója** beállításnál állíthatod vissza ugyanott.