MagyarmagyarDark Mode: elemek kizárása a sötét módból
Egyes elemek, például fotók, logók vagy kiemelt szekciók kihagyása a sötét módból CSS-osztály alapján.
A sötét módnak az oldalt kell megváltoztatnia, de nem az egészet. Egy fotó, egy márkalogó vagy egy gondosan megtervezett nyitó szekció jellemzően rosszabbul néz ki invertálva, különösen a Mix Blend típusnál, amely kérdezés nélkül mindenre rátesz egy réteget. A Dark Mode widget lehetővé teszi, hogy CSS-osztály alapján megnevezd, mit hagyjon békén. A widget többi beállítását a Dark Mode áttekintése írja le. A widget panelja angolul marad, ezért a feliratait szó szerint idézzük.
Előfeltételek
Szekció neve “Előfeltételek”- A widget az ingyenes bővítményben is megvan. Az Elementor legyen aktív, és a The Plus Addons → Widgets oldalon kapcsold be a Dark Mode widgetet.
- A védeni kívánt elemnek kell egy CSS-osztály, amelyet meg tudsz nevezni. Az Elementor minden widgeten és tárolón a Haladó → CSS-osztályok mezőt kínálja erre.
Lépések
Szekció neve “Lépések”- Jelöld ki a kihagyandó widgetet vagy tárolót. Nyisd meg a Haladó fület, és a CSS-osztályok mezőbe írj egy osztálynevet, például
hero. - Jelöld ki a Dark Mode widgetet, és nyisd meg a Tartalom fül Extra Option szakaszát.
- Kapcsold be az Ignore Dark Mode beállítást. Két újabb mező jelenik meg.
- Az Ignore Dark Mode Classes mezőbe írd be az osztályt egy ponttal az elején:
.hero. Többet vesszővel válassz el:.hero, .logo, .chart. - A The Plus Ignore Class Default beállítást hagyd bekapcsolva, hacsak nincs okod másra. Ez egy beépített kép- és listaelem-listát tesz a kizáráshoz.
A képen az Extra Option szakasz látszik bekapcsolt Ignore Dark Mode-dal és egy kitöltött Ignore Dark Mode Classes mezővel. A The Plus Ignore Class Default kapcsoló a képen No állásban látszik, ezért állítsd be tudatosan a kívántra.
A pont kötelező. A mező CSS-szelektorokat vár, nem osztályneveket. Ha a hero osztályt pont nélkül írod be, az elem nincs kizárva: a többivel együtt sötétre vált, és semmi nem figyelmeztet.
Mit látsz az oldalon
Szekció neve “Mit látsz az oldalon”Egy próbaoldalon egy kf-hero osztályt kapott, és .kf-hero néven felsorolt cím a kapcsoló átváltása után megtartotta a világos hátterét, miközben körülötte az oldal feketére váltott.
A képen a kizárt cím világos hátterű sávban áll a fekete oldalon.
Mit fed le a The Plus Ignore Class Default
Szekció neve “Mit fed le a The Plus Ignore Class Default”Ez a kapcsoló egy rögzített szelektorlistát tesz a kizáráshoz, hogy a képek és a listák bélyegképei munka nélkül védettek legyenek. Lefedi az Elementor saját Kép widgetét és a képcímkéket, a The Plus Addons hotspot, animált kép, parallax kép és előtte-utána elemeit, valamint a csapat, termék, galéria és blog listák bélyegképterületét.
Az érintett beállítások
Szekció neve “Az érintett beállítások”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Ignore Dark Mode | Megjeleníti az alatta lévő két mezőt | ki |
| Ignore Dark Mode Classes | A kihagyandó CSS-szelektorok vesszővel elválasztva, mindegyik elején ponttal | üres |
| The Plus Ignore Class Default | Egy beépített kép- és listaelem-listát is kizár | bekapcsolt a leírás szerint, de a panelen kezdetben No látszik |
Működés
Szekció neve “Működés”- Az illeszkedő elemek az oldal betöltésekor megkapják a
theplus-darkmode-ignoreosztályt, és a sötét mód stíluslapja kihagyja azt, ami ezt viseli. - Mindkét Type értéknél ugyanúgy működik, de a Mix Blend esetében számít a legtöbbet, ahol egyébként az egész oldal invertálódik.
- A kizárás CSS-szelektorral történik, ezért bármilyen, a böngésző által értett szelektorral kizárhatsz. Az osztály csak a legegyszerűbb, mert az Elementorból könnyen hozzáadható.
Korlátok
Szekció neve “Korlátok”- A pont nélküli osztálynév nem csinál semmit. Nincs figyelmeztetés és hiba, az elem egyszerűen sötétre vált.
- A kizárási lista a Dark Mode widgeten van, nem az elemen. Ha a widget a fejléc-sablonodban áll, az összes oldal kizárása abban az egy mezőben van felsorolva.
- A beépített lista rögzített. A The Plus Ignore Class Default ki- és bekapcsolható, de nem szerkesztheted a tartalmát.
Hibaelhárítás
Szekció neve “Hibaelhárítás”Az elem még mindig sötétre vált
Szekció neve “Az elem még mindig sötétre vált”Nézd meg, hogy az Ignore Dark Mode Classes mezőben az osztály előtt van-e pont, és hogy ugyanez az osztály tényleg ott áll-e az elem Haladó → CSS-osztályok mezőjében.
Nincsenek ott a mezők
Szekció neve “Nincsenek ott a mezők”Az Ignore Dark Mode nincs bekapcsolva. Mindkét mező rejtve van, amíg be nem kapcsolod.
A képeim már ki vannak zárva, pedig nem csináltam semmit
Szekció neve “A képeim már ki vannak zárva, pedig nem csináltam semmit”A The Plus Ignore Class Default a beépített lista részeként már lefedi az Elementor Kép widgetét. Ha ezt nem akarod, kapcsold ki.
Kizártam egy tárolót, de a benne lévő szöveg mégis invertálódik
Szekció neve “Kizártam egy tárolót, de a benne lévő szöveg mégis invertálódik”Add az osztályt magára a widgetre is. Egy szülő kizárása nem garantáltan fedi le az összes gyermeket.
Készült: