# Szerkesztés mobilra és táblagépre

> Eszközök közötti váltás a szerkesztőben, eszközönkénti beállítások, elemek elrejtése és a töréspontok kezelése.

Nem tudhatod, hogy a látogatók asztali gépről, táblagépről vagy telefonról nyitják meg az oldalad. Ezért érdemes úgy tervezni, hogy a webhely legalább ezen a három eszközön jól működjön.

A böngésző az eszközöket a látható képernyőszélesség (viewport) szerint különbözteti meg. A szerkesztő alapból így osztja fel őket:

- **asztali gép:** 1024 képpontnál szélesebb képernyő,
- **táblagép:** 767 és 1024 képpont közötti szélesség,
- **mobil:** 767 képpontnál keskenyebb képernyő.

Azt a szélességet, ahol a megjelenés egyik eszközről a másikra vált, **töréspontnak** nevezzük. Például a menü asztali gépen vízszintes szövegsor lehet, táblagépen és mobilon pedig legördülő menü, a töréspontok döntik el, hol történik a váltás. A szerkesztő alapból három változatot készít az oldalból: asztali, táblagépes és mobilos nézetet.

## Az oldal megtekintése különböző eszközökön

1. Nyisd meg az oldalt a szerkesztőben.
2. A felső sávban kattints annak az eszköznek az ikonjára, amelyiken látni szeretnéd az oldalt. Alapból három ikon van: asztali gép, táblagép és mobil. Ha további töréspontokat is felveszel, azok is megjelennek itt.

![A szerkesztő táblagép nézetben, a felső sávban a táblagép ikon kijelölve](./kepek/reszponziv-tablet-nezet.webp)

*A szerkesztő táblagép nézetben, a felső sávban a táblagép ikon kijelölve* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A képen az oldal táblagép nézetben látszik, a felső sávban a középső ikon az aktív.

![Ugyanaz az oldal mobil nézetben, keskeny vásznon](./kepek/reszponziv-mobil-nezet.webp)

*Ugyanaz az oldal mobil nézetben, keskeny vásznon* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

Mobil nézetben a vászon keskeny, a menü összecsukott ikonná alakul. Ha nem asztali nézetben vagy, a vászon bal és jobb oldalán, valamint alul fogantyúk jelennek meg: ezeket húzva a képernyő méretét szabadon változtathatod.

## Beállítások módosítása egy eszközre

A legtöbb elembeállítás eszközönként külön is megadható. Az ilyen beállítások neve mellett egy eszközikon látszik. Az ikonra kattintva, a legördülő listából választhatod ki, melyik eszköz értékét szeretnéd szerkeszteni.

Ha egy adott eszközre szerkesztesz, érdemes előbb a felső sávban átváltani arra az eszközre, így a vászonon azonnal látod az eredményt.

### Példa: címsor betűmérete mobilon

1. A felső sávban kattints a mobil ikonra.
2. Jelöld ki a **Címsor** widgetet.
3. A panelen kattints a **Stílus** fülre.
4. A **Tipográfia** sor mellett kattints a ceruza ikonra. A **Méret** mellett a mobil ikon jelzi, hogy most a mobilos méretet állítod.
5. A **Méret** csúszkával csökkentsd a betűméretet, hogy a címsor elférjen egy sorban.

![Mobil nézet: a Tipográfia ablak Méret mezője 36 px, a vásznon a kisebb címsor](./kepek/reszponziv-mobil-cimsor-kisebb.webp)

*Mobil nézet: a Tipográfia ablak Méret mezője 36 px, a vásznon a kisebb címsor* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

Figyeld meg, hogy a **Méret** mellett a mobil ikon látszik, a címsor pedig a vásznon kisebb lett. Ha vissza szeretnél térni az asztali nézethez, a **Méret** beállításnál kattints a mobil ikonra, és válaszd ki a legördülő listából az asztali gép ikonját (vagy a felső sávban válts át asztali nézetre).

A reszponzív szerkesztés fentről lefelé öröklődik: egy szélesebb eszközön végzett módosítás a keskenyebb eszközökre is érvényes. Ha a címsort táblagépre módosítod, az mobilon is ugyanígy jelenik meg. Mivel a fenti példában csak a mobilt módosítottuk, az asztali és a táblagépes nézet nem változik. A részleteket lásd az [Örökölt reszponzív értékek](https://hub.hellowp.io/hu/plugins/elementor/reszponziv-orokolt-ertekek/) fejezetben.

## Töréspontok hozzáadása és módosítása

Alapból az asztali gép mellett az álló tájolású táblagép (1024 képpont) és az álló tájolású mobil (767 képpont) töréspontja aktív. Ha finomabb szabályozást szeretnél, további eszközöket és töréspontokat is felvehetsz (például szélesvásznú, fekvő tájolású táblagép vagy mobil), és a meglévők szélességét is átírhatod.

A töréspontok a **Webhely beállításai** panelen vannak.

1. A felső sávon kattints az Elementor ikonra, és válaszd a **Webhely beállításai** pontot.
2. A **Beállítások** alatt válaszd az **Elrendezés** menüpontot.
3. A panelen nyisd ki a **Töréspontok** szakaszt.

![A Webhely beállításai panel Töréspontok szakasza az Aktív töréspontok listával, a 767 és 1024 képpontos értékekkel](./kepek/reszponziv-toresppontok.webp)

*A Webhely beállításai panel Töréspontok szakasza az Aktív töréspontok listával, a 767 és 1024 képpontos értékekkel* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor&active-document=4)

A képen az **Aktív töréspontok** között az **Álló tájolású mobil** és az **Álló tájolású táblagép** látható, alattuk a **Töréspont (px)** mezők a 767 és 1024 alapértékkel.

### Töréspont hozzáadása

1. Nyisd meg a **Töréspontok** szakaszt a fenti módon.
2. Az **Aktív töréspontok** mezőben kattints a **+** ikonra.
3. A legördülő lista a még nem aktív töréspontokat kínálja: **Mobil fekvő**, **Fekvő tájolású táblagép**, **Laptop** és **Szélesvásznú** (az **Álló tájolású mobil** és az **Álló tájolású táblagép** alapból aktív). Mindegyik alapértékét módosíthatod.

### Töréspont módosítása

1. Nyisd meg a **Töréspontok** szakaszt.
2. A kívánt eszköz **Töréspont (px)** mezőjébe írd be az új szélességet képpontban. Ez az érték adja meg az adott töréspont képernyőszélességét.
3. Kattints a **Módosítások mentése** gombra.

### Töréspont törlése

A töréspontok számának csökkentése egyszerűsítheti a tervezést.

1. Nyisd meg a **Töréspontok** szakaszt.
2. Kattints az **X** ikonra a törölni kívánt töréspont neve mellett.
3. Kattints a **Módosítások mentése** gombra.

A két alapértelmezett töréspont (mobil és táblagép) nem törölhető.