Szerkesztés mobilra és táblagépre

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.

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.

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.

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 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.

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ő.