# Reszponzív stílusok

> Egy blokknak különböző beállításokat adhatsz táblagépen és mobilon: egy blokktípusra az egész webhelyen, vagy egyetlen blokkra.

A reszponzív stílusokkal egy blokk beállításai a képernyő méretétől függően eltérhetnek. Például mobilon kisebb lehet a betűméret, táblagépen szűkebb a belső margó. Csak blokkos témákban működik, és legalább WordPress 7.1 kell hozzá.

Kétféleképp állíthatod be:

- egy **blokktípusra** az egész webhelyen, a Stílusokban (például minden Címsor legyen kisebb mobilon);
- egyetlen **blokkra** egy bejegyzésben, oldalon, mintasablonban vagy mintában.

Mindkettőnél módosíthatod a tipográfiát, a színt, a hátteret, a szegélyt, a méreteket, a térközöket és az elrendezést. Hogy pontosan mi állítható, azt az adott blokk támogatása szabja meg.

## Hogyan működik?

Az alapstílus minden képernyőszélességen érvényes, amíg felül nem bírálod. A táblagépes és a mobilos stílus csak a saját tartományában írja felül.

| Nézet | Mikor érvényes |
|---|---|
| Mobil | legfeljebb 480 px széles képernyőn |
| Táblagép | 480 px-nél szélesebb, legfeljebb 782 px széles képernyőn |
| Alapértelmezett | minden szélességen, és tartalék ott, ahol nem adtál meg táblagépes vagy mobilos értéket |

A táblagépes és a mobilos stílus nem hat egymásra. Ha csak a táblagépes értéket állítod, a mobil nem örökli azt, hanem az alapértelmezett stílust kapja. Ha azt akarod, hogy a módosítás mobilon is érvényes legyen, azt külön állítsd be.

A téma módosíthatja, hogy pontosan mekkora szélességtől számít egy képernyő táblagépnek vagy mobilnak, ezért a webhelyeden a határok kissé eltérhetnek a fentiektől.

Csak a Stílusok panelen és a blokk **Beállítások** oldalsávjában található beállításoknak lehet külön táblagépes vagy mobilos értéke (tipográfia, szín, térköz, szegély, méretek, elrendezés). A blokk eszköztárában lévő vezérlők, például a szöveg igazítása, minden képernyőméretre érvényesek, bármelyik nézet van is kiválasztva. Ha egy blokkot egy bizonyos képernyőméreten el akarsz rejteni, használd a blokk eszköztárának hárompontos menüjében a blokkok megjelenítése és elrejtése lehetőséget.

## Reszponzív stílus egy blokktípusnak

Ezzel a módszerrel egy blokk megjelenése változik az egész webhelyen, például minden Címsor kisebb lesz mobilon.

1. Menj a **Megjelenés → Szerkesztő** oldalra, nyisd meg a **Stíluslapok** panelt, és kattints a **Blokkok** pontra.
2. Válaszd ki a módosítani kívánt blokktípust.
3. A blokk panelének tetején nyisd meg az állapotok legördülőjét (a felületen **States**).

![Az állapotok legördülője a Címsor blokk stílusainál](./kepek/webhelyszerkeszto-reszponziv-blokk-stilus.webp)

*Az állapotok legördülője a Címsor blokk stílusainál* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks%2Fcore%252Fheading)

A képen a Címsor blokk stílusbeállításai láthatók, a jobb felső sarokban az állapotok legördülőjével.

4. A **Viewport** csoportban válaszd a **Táblagép** vagy a **Mobil** nézetet.

![A Viewport csoport az állapotok legördülőjében](./kepek/webhelyszerkeszto-reszponziv-allapotok.webp)

*A Viewport csoport az állapotok legördülőjében* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks%2Fcore%252Fheading)

A képen a három választható nézet látszik: **Alapértelmezett**, **Táblagép** és **Mobil**.

5. Módosíts egy beállítást, például válassz kisebb betűméretet. A panel ilyenkor csak azokat a beállításokat mutatja, amelyeknek lehet reszponzív értéke.

![A Címsor beállításai Táblagép nézetben](./kepek/webhelyszerkeszto-reszponziv-tablet.webp)

*A Címsor beállításai Táblagép nézetben* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks%2Fcore%252Fheading)

A képen a kiválasztott nézetet egy **Táblagép** jelzés mutatja a panel tetején.

6. Az alapértelmezett (asztali) stílus szerkesztéséhez nyisd meg újra a legördülőt, és válaszd az **Alapértelmezett** pontot.

## Reszponzív stílus egyetlen blokknak

Ezzel a módszerrel egy bejegyzés, oldal, mintasablon vagy minta egy blokkját módosítod, a többi ugyanilyen blokkot nem érinti.

1. Nyisd meg a szerkesztőben a bejegyzést, oldalt, mintasablont vagy mintát.
2. Kattints a felső eszköztáron a nézetváltó ikonra (a felületen **Megtekintés**), és kapcsold be a **Responsive styles** opciót.

![A nézetváltó menü a Responsive styles kapcsolóval](./kepek/webhelyszerkeszto-reszponziv-nezet-menu.webp)

*A nézetváltó menü a Responsive styles kapcsolóval* (https://minta-bolt.hu/wp-admin/post.php?post=1&action=edit)

A képen a menü az **Asztali**, **Táblagép** és **Mobil** nézettel, alatta a bekapcsolt **Responsive styles** és a **Sablon megjelenítése** pontokkal látszik.

3. Válts **Táblagép** vagy **Mobil** nézetre.
4. Jelöld ki a módosítandó blokkot.
5. A blokk **Beállítások** paneljén változtass meg egy stílust, például a betűméretet vagy a belső margót.

Amíg a reszponzív stílusok be vannak kapcsolva, és Táblagép vagy Mobil nézetben vagy, a kijelölt blokk beállításai mellett egy jelvény mutatja, melyik eszköz stílusát szerkeszted. Asztali nézetben nincs jelvény, mert ott a módosítás minden képernyőméretre érvényes.

Bármikor visszaválthatsz Asztali nézetre, hogy lásd, a blokk alapstílusa változatlan, vagy vissza Táblagép és Mobil nézetre, hogy lásd, a felülírás megmaradt. Ha kikapcsolod a **Responsive styles** opciót, ismét az alapstílust szerkeszted, bármelyik nézetben vagy.

Ez a bejegyzésszerkesztőben, a sablonszerkesztőben és a Webhelyszerkesztőben, a mintaszerkesztőben és a navigációs szerkesztőben is ugyanígy működik.

## Kontraszt ellenőrzése

Ha egy szöveg- vagy háttérszínt szerkesztesz, miközben egy nézet ki van választva, a kontrasztellenőrző továbbra is működik. Azt a színkombinációt vizsgálja, amelyik az adott töréspontnál ténylegesen érvényes, ugyanúgy, ahogy a lebegő (hover) állapotoknál.

## Ha nem látod ezeket a lehetőségeket

Ha az állapotok legördülőjében nem látod a **Viewport** csoportot, vagy a nézetváltó menüben nincs **Responsive styles** opció, lehet, hogy a webhely adminisztrátora kikapcsolta a reszponzív stílusok szerkesztését. A korábban beállított táblagépes és mobilos stílusok ilyenkor is helyesen jelennek meg, csak szerkeszteni nem tudod őket.