# Elrendezés és pozíció

> Hogyan rendezed a szülő blokkon belüli blokkokat (igazítás, irány, tördelés, szélesség, rács), és hogyan teheted ragadóssá a fejlécet.

Az **Elrendezés** és a **Pozíció** beállításokkal azt szabályozod, hogyan állnak egymás mellett a beágyazott blokkok, és hogyan helyezkedik el egy blokk az oldalon. A beállítások a blokkszerkesztőben és a Webhelyszerkesztőben is ugyanúgy működnek.

## Elrendezés

Az elrendezés beállításai a szülő blokk gyerekblokkjainak igazítását és irányát adják meg. Ezek a beállítások mindig a szülő blokkban vannak, abban, amelyik a többit tartalmazza (például Csoport, Sor, Stack, Gombok).

### Hol találod?

1. Kattints a szülő blokkba ágyazott egyik blokkra.
2. A blokk eszköztárának első ikonjával kijelölheted a szülő blokkot. Ugyanezt megteheted a **Listanézetben** is: a szerkesztő bal felső részén lévő **Dokumentum áttekintése** gombbal nyisd meg, és válaszd ki a szülőt.
3. Nyisd meg a **Blokk** oldalsávot (a Mentés/Közzététel gomb melletti ikon), és keresd meg az **Elrendezés** szakaszt.

![A Sor blokk beállításai az oldalsávban, az Elrendezés szakasszal](./kepek/webhelyszerkeszto-elrendezes-panel.webp)

*A Sor blokk beállításai az oldalsávban, az Elrendezés szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=edit)

A képen az **Elrendezés** szakasz az **Igazítás** és az **Irány** vezérlőkkel látszik.

Minden blokk más elrendezési beállításokat kínál, a támogatott blokkoknál a következők érhetők el.

### Igazítás

A gyerekblokkokat balra, középre vagy jobbra igazíthatod. Néhány blokknál, például a **Gombok** blokknál, van egy **Térköz az elemek között** választás is: ez a gyerekelemeket vízszintesen, egyenlő távolsággal osztja el. Csak vízszintes irányú elrendezésnél működik.

### Irány

Amikor több blokkot teszel egy szülő blokkba, a gyerekblokkok alapból vízszintesen, egymás mellett jelennek meg. Az irányt átállíthatod függőlegesre, így egymás alá kerülnek. Ha a Gombok blokkot függőlegesre állítod, az **Igazítás** között megjelenik az **Elemek nyújtása** lehetőség is, amely a gombot a rendelkezésre álló teljes szélességre kihúzza.

### Tördelés több sorba

A **Tördelés több sorba** beállítás alapból be van kapcsolva: a gyerekblokkok kisebb képernyőn, például telefonon, automatikusan új sorba törnek. Ha kikapcsolod, minden gyerekblokk egy sorban marad, bármilyen keskeny is a képernyő.

A beállítást úgy éred el, hogy az **Elrendezés** szakaszban a hárompontos menüre kattintasz, és a **Tördelés** pontot választod: ekkor megjelenik a kapcsoló.

### Az elrendezés szélessége

Egyes blokkoknál, például a **Lekérdezés hurok**, a **Bejegyzéssablon** és a **Csoport** blokknál, az elrendezés szélességét is megadhatod a beágyazott blokkokra.

- Ha a **Belső blokkok a tartalom szélességét használják** kapcsolót kikapcsolod, a beágyazott blokkok a szülő tároló teljes szélességét kitöltik.
- Ha bekapcsolod, a beágyazott blokkok a tartalom szélességét használják, és megadhatod a **Tartalom szélességét** és a **Széles szélességet** is.

A hárompontos menüvel kapcsolhatod be a **Tartalom szélessége**, a **Széles szélesség** és az **Igazítás** vezérlőket. Az értékekhez mértékegységet is választhatsz: PX, %, EM, REM, VW vagy VH. Az igazítással eldöntheted, hogy a beágyazott elemek balra, középre vagy jobbra kerüljenek a szülő tárolóban.

### Rács oszlopai

A **Rács** blokknak és a rács módba állított **Lekérdezés hurok** blokknak három külön beállítása van: a **Legtöbb oszlop**, a **Legkisebb oszlopszélesség** és a **Rendelkezésre álló hely kitöltése**.

### Összes visszaállítása

Ha módosítottál ezeken a beállításokon, és gyorsan vissza akarsz térni az eredetihez, kattints a hárompontos menüre, és válaszd az **Összes visszaállítása** pontot. Ez törli az összes módosításodat az adott szakaszban.

## Pozíció

A pozícióbeállításokkal azt adod meg, hogyan helyezkedjen el egy elem a webhelyen. Néhány blokknál érhető el, és csak akkor, ha a blokk az oldal gyökerében van, tehát nincs másik blokkba ágyazva.

### Hol találod?

Tegyél egy **Csoport**, **Sor** vagy **Stack** blokkot az oldal gyökerébe, vagyis ne másik blokkon belülre. A blokk oldalsávjában megtalálod a **Pozíció** szakaszt. Ha nem látod, a blokk vagy nem támogatja a pozícionálást, vagy be van ágyazva egy másik blokkba.

### A két beállítás

| Beállítás | Mit csinál |
|---|---|
| **Alapértelmezett** | A blokk a megszokott módon helyezkedik el a többi blokkhoz képest. Ez van kiválasztva automatikusan. |
| **Ragadós** | A legfelső szintű blokk az oldal tetejére rögzül, amikor a látogató görget. Ugyanazt csinálja, mint a CSS azonos nevű tulajdonsága. |

### Példa: ragadós fejléc

A leggyakoribb használat a fejléc, amely görgetéskor fent marad.

1. Nyisd meg a **Listanézetet**, és válaszd ki a **Fejléc** sablonrész blokkot. Ellenőrizd, hogy nincs másik blokkba ágyazva.
2. A hárompontos menüben (a Listanézetben vagy a blokk eszköztárában) válaszd a **Csoport** lehetőséget. Ez egy Csoport blokkba csomagolja a fejlécet.
3. Jelöld ki az új Csoport blokkot, és nyisd meg a **Blokk** oldalsávot.
4. A **Stílusok** fülön adj a Csoport blokknak háttérszínt. Így görgetéskor a fejléc elemei nem zavarják az alatta elhaladó tartalmat.
5. Görgess le a **Pozíció** beállításhoz, és válaszd a **Ragadós** lehetőséget.