MagyarmagyarReszponzí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?
Szekció neve “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
Szekció neve “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.
- Menj a Megjelenés → Szerkesztő oldalra, nyisd meg a Stíluslapok panelt, és kattints a Blokkok pontra.
- Válaszd ki a módosítani kívánt blokktípust.
- A blokk panelének tetején nyisd meg az állapotok legördülőjét (a felületen States).
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.
- A Viewport csoportban válaszd a Táblagép vagy a Mobil nézetet.
A képen a három választható nézet látszik: Alapértelmezett, Táblagép és Mobil.
- 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 képen a kiválasztott nézetet egy Táblagép jelzés mutatja a panel tetején.
- 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
Szekció neve “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.
- Nyisd meg a szerkesztőben a bejegyzést, oldalt, mintasablont vagy mintát.
- 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 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.
- Válts Táblagép vagy Mobil nézetre.
- Jelöld ki a módosítandó blokkot.
- 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
Szekció neve “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
Szekció neve “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.
Készült: