# A konténer Haladó fülének beállításai

> Margó, belső térköz, szélesség, saját igazítás, sorrend, méret, pozíció, Z-Index, CSS ID és osztályok.

A **Haladó** fül további lehetőségeket ad a rugalmas tervezéshez. A konténeren és a benne lévő widgeteken is ott van, de néhány beállítás (például a **Szélesség**) csak a widgeteken jelenik meg.

![A konténer Haladó füle az Elrendezés szekcióval](./kepek/kontenerek-halado-1.webp)

*A konténer Haladó füle az Elrendezés szekcióval* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

A képen a konténer **Elrendezés** szekciója látszik: margó, padding, saját elem igazítása, sorrend, méret és pozíció.

![A widget Haladó füle: itt a Szélesség mező is megjelenik](./kepek/kontenerek-halado-widget-1.webp)

*A widget Haladó füle: itt a Szélesség mező is megjelenik* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

Egy widgetnél (itt egy Címsornál) a **Padding** alatt megjelenik a **Szélesség** is.

## Margó

A margó az elem „kívüli” helye. PX, EM, % és REM egységben adhatod meg, a lánc ikonnal pedig szétkapcsolhatod a négy oldalt, ha külön értékeket szeretnél.

Ha egy legfelső szintű konténeren bal vagy jobb margót adsz meg (például 200 px bal margót), a böngésző a teljes szélességet 100% + 200 px-nek számolja. Mivel ez szélesebb a képernyőnél, a konténert jobbra tolja, és vízszintes görgetősáv jelenik meg. Ha bal vagy jobb margó kell, tedd egy gyermek konténerre.

## Padding

A padding (belső térköz) az elem „belső” helye, ugyanúgy PX, EM, % és REM egységben, szétkapcsolható oldalakkal. A margó és a padding különbségét a [Térköz margóval és paddinggel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-terkoz-margo-padding/) fejezet részletezi.

## Szélesség (csak widgeteknél)

Azt szabályozza, mennyi vízszintes helyet foglal az elem a konténerben. A lehetőségek: **Teljes szélesség** (100%), **Beágyazott** (auto) és **Egyéni**. Egyéni választásnál megjelenik egy csúszka és egy mező, ahol PX, % vagy VW egységben adod meg az értéket. Ez fontos beállítás, és a **Tördelés** bekapcsolásával együtt használva jobb elrendezést kapsz.

A **Beágyazott (auto)** érték konténerekben nem működik: helyette a konténer **Irány** beállítása dönt.

Ha egy elem pozíciója **Abszolút** vagy **Rögzített**, a **Szerkezet** ablakban az elem mellett fekete függőleges sáv és egy négyirányú nyíl ikon jelenik meg. Az ikon fölé víve az egyéni pozícionálás tippje látszik, így könnyű észrevenni a normál elrendezésből kilógó elemeket.

## Saját elem igazítása

Az elem igazítását adja meg a konténeren belül, és felülírja a konténer **Elemek igazítása** beállítását. Lehetőségek: **Indítás** (az elem a konténer elejére kerül), **Középre**, **Vége** (a konténer végére) és **Nyújtott** (kitölti a konténert).

## Sorrend

Főleg a reszponzív töréspontokkal együtt hasznos: így az elemek sorrendjét nézetenként módosíthatod (például három vagy több elemet mobilon átrendezel). Választhatsz: **Kezdet**, **Vége**, vagy **Egyéni** sorrendet, amikor megjelenik az **Egyéni sorrend** mező, ahová a számot beírod.

A **Sorrend** a rugalmas elrendezés (Flexbox) `order` tulajdonságát kezeli, amelyet CSS-ben általában az `:nth` választóval együtt kell használni, és ez bonyolult. Az Elementorban viszont minden konténer és widget **Haladó** fülén ott van, számokkal vagy gombokkal állítható. A sorrend módosításával reszponzív nézetben nem kell további, elrejtett szakaszokat felvenned: például egy három vagy több elemből álló fejlécben középre teheted a logót, vagy felcserélheted a menüikont és a kosarat.

Ha **Egyéni** sorrendet adsz meg, a többi elem sorrendjét is meg kell adnod, hogy az elrendezés jól álljon össze. Könnyebb, ha hátulról kezded: előbb a legutolsó elemet szerkeszd.

## Méret

A rugalmas növekedés és zsugorodás azt mondja meg, hogyan viselkedik az elem a konténer többi elemhez képest: **Nincs**, **Növekedés**, **Zsugorítás**, vagy **Egyéni**, ilyenkor két mező jelenik meg (egyéni növekedés és egyéni zsugorodás értéke).

A **Méret** a rugalmas elrendezés `flex-grow` és `flex-shrink` tulajdonságát használja: azt adja meg, hogyan viselkedik az elem a konténer többi eleméhez képest, amikor az ablak mérete változik.

- **Növekedés:** az elem megpróbálja kitölteni a konténer szabad helyét. Az alapérték 1.
- **Zsugorítás:** ha a konténer elemei együtt túl nagyok, az elem összébb húzódik. Az alapérték szintén 1.
- **Egyéni:** a növekedés és a zsugorodás értékét külön megadhatod. Erre akkor van szükség, ha egy vagy több elemnek a rendelkezésre álló hely meghatározott részét kell elfoglalnia.

Ha a **Növekedés** vagy a **Zsugorítás** ikont választod, az Elementor automatikusan úgy állítja be a tulajdonságot, hogy az elrendezéshez illeszkedjen.

Fontos: a **Méret** csak akkor működik, ha az elem **Szélesség** beállítása az alapértéken áll, vagy üres. Ha a szélességet megadtad, a növekedés és a zsugorítás nem hat.

## Pozíció

- **Alapértelmezett:** az elem a megszokott módon, az oldal természetes folyásában áll. Minden elem alapból ilyen.
- **Abszolút:** az elem az első pozicionált szülőjéhez képest helyezkedik el.
- **Rögzített:** az elem a böngészőablakhoz képest van rögzítve, görgetéskor is a helyén marad.

Abszolút vagy rögzített pozíciónál a **Vízszintes tájolás** és a **Függőleges tájolás** mező megadja a vonatkoztatási pontot (kezdet vagy vég), az **Eltolás** mezőkben pedig számokkal adhatod meg az X és Y helyzetet. A pozíciót eszközönként, külön állíthatod asztali gépre, táblagépre és mobilra. Widgetnél a **Haladó** fülön az egyéni pozícionálásnál az elemet a vásznon is megfogva az óhajtott helyre húzhatod, a pontos számokat pedig az eltolás mezőkbe írhatod.

A rögzített pozíció a nézetablakhoz, a ragadós (sticky) görgetési hatás viszont ahhoz a szakaszhoz képest működik, amelyben az elem áll. Az abszolút pozícionálás nem ajánlott elrendezések építésére, de sok esetben hasznos, ha szabadabban kell elhelyezned egy elemet.

## Z-Index

Az elemek egymásra rakódási sorrendje. A nagyobb értékű elem mindig a kisebb értékű előtt jelenik meg: a 10-es Z-Index az 5-ös fölött van. Ha negatív margó, Z-Index vagy abszolút pozíció miatt egy szakasz vagy a fogantyúja elérhetetlenné válik (másik elem takarja, vagy a sablon fejléce mögé kerül), a **Szerkezet** ablakban egy kattintással elérheted és szerkesztheted. Lásd: [Szerkezet ablak és jelzők](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szerkezet-ablak/). A V4 elemeknél a Z-index a **Stílus** fül **Pozíció** szakaszában van, lásd: [Rögzített pozíció widgetekhez](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-fix-pozicio/).

## CSS ID

A konténerhez egyedi azonosítót adhatsz, amellyel eseményt indíthatsz vagy horgonylinket készíthetsz. A **#** jelet ne írd be a mezőbe.

## CSS-osztályok

Az osztályokra az egyedi CSS-ben hivatkozhatsz. A **.** jelet ne írd be a mezőbe. Példa: a `pink-link` osztályt rárakhatod bármelyik elemre, ha az egyedi CSS-ben ez áll:

```css
.pink-link a { color: #f876f8; }
```

![A Haladó fül alsó része: Pozíció, Z-Index, CSS ID, CSS-osztályok és a további szekciók](./kepek/kontenerek-halado-2.webp)

*A Haladó fül alsó része: Pozíció, Z-Index, CSS ID, CSS-osztályok és a további szekciók* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

A képen a lejjebb görgetett panel látszik a további szekciókkal (**Mozgási hatások**, **Átalakítás**, **Reszponzív**, **Attribútumok**, **Egyedi CSS**).

## A widget Haladó füle

A widgeteknél ugyanezek a beállítások vannak meg, kiegészítve a **Háttér**, **Szegély** és **Maszk** szekciókkal.

![A widget Haladó füle lejjebb görgetve a Z-Index, CSS ID és további szekciókkal](./kepek/kontenerek-halado-widget-2.webp)

*A widget Haladó füle lejjebb görgetve a Z-Index, CSS ID és további szekciókkal* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)