MagyarmagyarDark Mode widget: sötét mód kapcsolója és beállításai
A Dark Mode widget minden szakasza: típus, stílus, pozíció, globális színek, extra opciók, működés és hibaelhárítás.
A sötét mód alacsony fényű nézetet ad a látogatónak az oldalon lévő kapcsolóból. A Dark Mode widget kirakja ezt a kapcsolót, és elvégzi az átszínezést. Kétféleképpen dolgozhat, és a kettő nagyon különbözik: a Mix Blend az egész oldalra egy átfedő réteget tesz, a Global Color pedig az Elementor globális színeit cseréli le. Ez a fejezet a widget összes beállítását végigveszi, és megmondja, melyik mit változtat a látogató szemszögéből. A részleteket a Mix Blend, a Globális színek és a Kizárás fejezetben találod.
Előfeltételek
Szekció neve “Előfeltételek”- A widget az ingyenes bővítményben is megvan: Pro nélkül is megjelenik a kapcsoló, és az oldal átvált.
- Az Elementor (az ingyenes bővítmény) legyen telepítve és aktív.
- Nyisd meg a The Plus Addons → Widgets oldalt, keress rá a Dark Mode névre, és kapcsold be.
- Ha egyetlen oldalra kell, tedd arra az oldalra. Ha minden oldalon legyen kapcsoló, tedd fejléc- vagy lábléc-sablonba, erre a widget saját panelje is javaslatot tesz (Use with Theme Builder).
Először válassz típust
Szekció neve “Először válassz típust”A Layout szakasz első vezérlője a Type, és ez dönti el a többit. Alapértéke Mix Blend.
- Mix Blend: az egész oldalra egy teljes képernyős réteget tesz, és összemossa a mögötte lévővel. A tervezésedből semmi nem változik, az egész oldal egyszerre invertálódik. Gyorsan beállítható, és ezért kell a képeket kizárni.
- Global Color: az Elementor globális színeit az általad megadott sötét értékekre cseréli. Semmi nem invertálódik, csak azok az elemek változnak, amelyek globális színt használnak. Lassabb beállítani, de sokkal jobban szabályozható.
A képen a Layout szakasz látszik a Mix Blend típussal: a Style két képes választása, a Background Color és a Mix Blend Mode (alapérték: Difference).
A Style a kapcsoló kinézetét adja: Style 1 vagy Style 2. Többet számít, mint gondolnád, mert két másik vezérlő függ tőle: a Mix Blend Mode csak a Style 1-nél látszik, az Animation Time csak a Style 2-nél.
Layout
Szekció neve “Layout”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Type | Mix Blend vagy Global Color | Mix Blend |
| Style | A kapcsoló kinézete | Style 1 |
| Background Color | A réteg színe, ez is beleszámít a keverés eredményébe | üres (fehér) |
| Mix Blend Mode | Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue, saturation. Csak a Style 1-nél látszik. | Difference |
| Animation Time | 1-től 100-ig: a váltás hossza. Csak a Style 2-nél látszik. | üres (0,5 mp) |
A Mix Blend Mode csak a Style 1-nél látszik, az Animation Time csak a Style 2-nél. Ha egy beállítást nem találsz, nézd meg először a Style értékét.
Position
Szekció neve “Position”A Position szakasz a kapcsolót az ablak jobb alsó sarkához rögzíti. A Right Offset és a Bottom Offset felugró panel: a jobb oldali csúszka 1 és 150 px között állítható (alapérték: 45), az alsó csúszka 1 és 150 px vagy % között (alapérték: 32), mindkettő eszközönként külön.
Global Color
Szekció neve “Global Color”Ez a szakasz csak akkor látszik, ha a Type Global Color. Egy ismétlőt tartalmaz négy sorral: primary, secondary, text és accent. Minden sornak van Label és Color mezője, a kiválasztott szín az Elementor megfelelő globális színének sötét módú értéke lesz.
A képen a Global Color szakasz látszik a négy alapértelmezett sorral és az Elem hozzáadása gombbal.
A sorok a globális színekhez sorrend szerint kapcsolódnak, nem a címke szerint. Az első sor az első globális színt cseréli, a második a másodikat, és így tovább. Ha az Elementor beépített négy színén túl saját globális színeid vannak, az Elem hozzáadása gombbal vegyél fel sorokat. A részletek a Globális színek fejezetben vannak.
Extra Option
Szekció neve “Extra Option”A viselkedési kapcsolók és a kizárási lista itt vannak.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Save in Cookies | Arra való lenne, hogy megjegyezze a látogató választását a következő látogatásra | Nem |
| Auto Match OS Theme | Követi a látogató eszközének vagy rendszerének témáját | Igen |
| Ignore Dark Mode | Megjeleníti a lenti kizárási mezőket | No |
| Ignore Dark Mode Classes | A kihagyandó CSS-szelektorok vesszővel elválasztva, mindegyik elején ponttal | üres |
| The Plus Ignore Class Default | A beépített kép- és listaelem-listát is kizárja | lásd a Kizárás fejezetben |
Mit látsz az oldalon
Szekció neve “Mit látsz az oldalon”Ha a Type Mix Blend, és minden mást érintetlenül hagysz, az oldalon a kapcsoló a jobb alsó sarokban látszik, és egy kattintás után a fehér háttér feketére vált. A kapcsoló két feliratot mutat: „Normal” és „Dark”.
A képen a világos oldal látszik, a jobb alsó sarokban a kapcsolóval.
A képen az oldal a kapcsoló után fekete hátterű. Az elemek maguk nem változtak: a cím, a bekezdés és a tároló megtartotta a színét, a látható változás a fölé tett keverőréteg műve. Ezért kell a fotókat és a logókat kizárni.
Stílus fül
Szekció neve “Stílus fül”A Stílus fülön két szakasz van. A Switcher a kapcsoló maga (a Style 2-nél látszik), a Switcher Text a kapcsoló melletti szöveg betűtípusát, színét és eltolását adja.
Működés
Szekció neve “Működés”- A sötét mód aktiválásakor az oldal
bodyelemére adarkmode--activatedosztály kerül, minden más erre épül. - A látogató választását a böngésző helyi tárolója jegyzi meg, nem süti, és a Save in Cookies értékétől függetlenül megjegyzi.
- Global Color típusnál a keverőréteg átlátszó, ezért semmi nem invertálódik, csak a színértékek változnak.
Korlátok
Szekció neve “Korlátok”- A Save in Cookies és az Auto Match OS Theme nem kapcsolható ki: mindkettő bekapcsolva kerül az oldalra, akárhogy állítod a kapcsolókat, ezért a panelen való kikapcsolásuk nem változtat semmin.
- A Mix Blend Mode a Style 2-nél rejtve van, az Animation Time a Style 1-nél. Ha egy beállítást nem találsz, nézd meg a Style értékét.
- A Global Color nem csinál semmit, ha nem mentettél Elementor globális színeket. Üres palettával a widget semmilyen színszabályt nem ír ki, és az oldal helyette invertálódik.
- A Mix Blend a fényképeket is invertálja, ami ritkán néz ki jól. Zárd ki őket a kizárási listával.
Hibaelhárítás
Szekció neve “Hibaelhárítás”A kapcsoló nem jelenik meg
Szekció neve “A kapcsoló nem jelenik meg”A widget nincs bekapcsolva. Nyisd meg a The Plus Addons → Widgets oldalt, keress rá a Dark Mode névre, és kapcsold be.
A sötét mód csak egy oldalon működik
Szekció neve “A sötét mód csak egy oldalon működik”A widget csak azon az oldalon van. Tedd fejléc- vagy lábléc-sablonba, hogy mindenhol betöltődjön.
Nem találom a Mix Blend Mode legördülőt
Szekció neve “Nem találom a Mix Blend Mode legördülőt”A Style a Style 2 értéken áll. Állítsd Style 1-re, és a legördülő visszatér.
Global Color van kiválasztva, de az oldal csak feketére vált
Szekció neve “Global Color van kiválasztva, de az oldal csak feketére vált”Az Elementor globális színeit még soha nem mentetted el. Állítsd be őket a Webhely beállításai → Globális színek alatt, és csak utána töltsd ki a négy sort.
Az oldal akkor is megjegyzi a sötét módot, ha a Save in Cookies ki van kapcsolva
Szekció neve “Az oldal akkor is megjegyzi a sötét módot, ha a Save in Cookies ki van kapcsolva”Ez az ismert viselkedés: a beállításnak nincs hatása, a választást mindig megjegyzi a böngésző.
Készült: