Dark Mode: globális színek cseréje

Az oldal invertálása gyors, de tompa eszköz. Ha azt szeretnéd, hogy a sötét mód megtervezettnek látsszon, ne megfordítottnak, használd a Global Color típust: az Elementor minden globális színéhez megadsz egy második, sötétebb értéket, és a widget kicseréli őket, amikor a látogató átkapcsolja a kapcsolót. Semmi nem keveredik és semmi nem invertálódik, csak a színértékek változnak, és csak azoknál az elemeknél, amelyek ténylegesen globális színt használnak. 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

• 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.
• Az Elementor globális színeinek már el kell lenniük mentve a Webhely beállításai → Globális színek alatt. Ez nem opcionális: ha a paletta üres, a widget semmit nem ír ki, és az oldal helyette invertálódik.
• Az oldalaidon lévő elemeknek ezeket a globális színeket kell használniuk. Amit kézzel választott színnel állítottál be, az nem változik.

Lépések

1. Állítsd be előbb a világos módú palettádat az Elementor Webhely beállításai → Globális színek alatt, és ezeket a színeket használd az oldalaidon.
2. Add hozzá a Dark Mode widgetet: az egész webhelyhez fejléc- vagy lábléc-sablonba, egyetlen oldalhoz arra az oldalra.
3. A Layout szakaszban állítsd a Type értékét Global Color-ra.
4. Megjelenik a Global Color szakasz. Nyisd meg: négy sort tartalmaz, primary, secondary, text és accent felirattal.
5. Nyisd ki az egyes sorokat, és a Color mezőben add meg a megfelelő globális szín sötét módú értékét. A Label mező csak a sor neve.

https://minta-bolt.hu/wp-admin/post.php?post=37&action=elementor

A képen a Global Color szakasz a négy alapértelmezett sorral és az Elem hozzáadása gombbal látszik.

A sorok a palettádhoz sorrend szerint kapcsolódnak. Az első sor az első globális színt cseréli, a második a másodikat, és így tovább. A sor átnevezése nem változtat semmin. Ha saját globális színeket is felvettél, használd az Elem hozzáadása gombot, és tartsd ugyanazt a sorrendet, mint a Webhely beállításai alatt.

Mit látsz az oldalon

Egy olyan próbaoldalon, amelynek a címe, a szövege, a szekciója háttere globális színt használt, a kapcsoló egyszerre cserélte le a négy értéket:

Globális szín	Világos	Sötét
primary (cím)	#1B2A4A	#E8EAF2
secondary (szekció háttere)	#F3F5FA	#101826
text (bekezdés)	#333333	#C7CEDB
accent	#2E7DF7	#6FA8FF

https://minta-bolt.hu/tp-sotet-mod-globalis/

A képen az oldal a kapcsoló átváltása előtt: halvány háttér, sötétkék cím és sötét szöveg.

https://minta-bolt.hu/tp-sotet-mod-globalis/

A képen a szekció háttere sötétkék, a cím és a szöveg világos lett, az oldal többi része nem változott. Minden elem követte a saját globális színét, és semmi más nem mozdult.

Az érintett beállítások

Beállítás	Mit csinál	Alapérték
Type	A Global Color palettaértékeket cserél keverés helyett	Mix Blend
Global Color (ismétlő)	Globális színenként egy sor, ugyanabban a sorrendben, mint a Webhely beállításai alatt	4 sor
Label	A sor neve, a párosításra nincs hatása	Label
Color	A globális szín sötét módú értéke	üres

Működés

• A widget egyetlen szabályt ír ki, amely a globális színváltozóidat újradefiniálja, amíg az oldalon a sötét mód állapota aktív, ezért minden, ami ezeket használja, együtt frissül.
• A keverőréteget átlátszóvá teszi, ezért ennél a típusnál semmi nem invertálódik: a két módszer nem rakódik egymásra.
• Az a sor, amelyben nincs szín megadva, kimarad, ezért a paletta egy részét átállíthatod, a többit békén hagyhatod.

Korlátok

• Üres Elementor-palettával a beállításnak nincs hatása. Ha a webhelyen még soha nem mentettél globális színt, a widget semmilyen szabályt nem ír ki, a keverőréteg sosem kapcsol ki, és az oldal úgy invertálódik, mintha Mix Blend-et választottál volna. A szerkesztő erre nem figyelmeztet.
• A kézzel választott színeket nem érinti. Minden elem, amelynek színét a színválasztóból és nem a palettáról állítottad, sötét módban megtartja a színét.
• A sorrend számít, a címke nem. A rossz helyre tett sor rossz dolgot színez át.
• A képeket sem érinti. Ez a típus nem változtat a fotókon, ami általában jó, de egy fehér logó fehér marad.

Hibaelhárítás

Az oldal feketére vált a színeim helyett

Az Elementor-paletta üres, ezért a widget az invertálásra tér vissza. Mentsd el a színeidet a Webhely beállításai → Globális színek alatt, és töltsd újra az oldalt.

Egyes elemek változnak, mások nem

Amelyik nem változott, az nem globális színt használ. Nyisd ki az elemet, és a színt a színválasztó helyett a palettáról állítsd be.

Rossz dolgok változtak színt

A sorok rossz sorrendben vannak. Igazítsd őket a Webhely beállításai → Globális színek sorrendjéhez.

A Global Color szakasz nincs a panelen

A Type még Mix Blend. A szakasz csak Global Color esetén jelenik meg.