Divi 5 modulok: sötét mód kapcsoló és dupla címsor

Ebben a fejezetben a sötét mód kapcsoló modulját és a háromrészes címsormodult találod. A modulok a Divi Supreme kategóriában vannak, és a Divi Supreme Pro → Modulok beállításai fülön kell bekapcsolnod őket. A beállítások feliratai a builderben angolul maradnak.

Sötét mód kapcsoló (Supreme Dark Mode Toggle)

Az elrendezésbe tehető kapcsoló a Dark Mode Toggle kiterjesztéshez. Akkor használd, ha a váltót az elrendezésen belül szeretnéd látni (főleg Theme Builder fejlécben vagy láblécben), a lebegő kapcsoló helyett vagy mellett.

A modul csak azokon az oldalakon működik, ahol a sötét mód aktív (a testreszabó Display on beállítása szerint), és előbb be kell kapcsolnod a kiterjesztést a Divi Supreme → Extensions alatt. Ha a kiterjesztés ki van kapcsolva, vagy az oldal kívül esik a Display on körén, a modul nem vált színsémát. Ha csak egy fix sarokgombra van szükséged, elég a testreszabó lebegő kapcsolója.

A modul tud:

• fejlécben, láblécben, menüben vagy bármelyik szekcióban elhelyezkedni;
• a lebegő kapcsolótól eltérő stílust és tartalmi módot használni, vagy a lebegő kapcsoló megjelenését átvenni;
• alapértelmezett nap és hold ikont, saját ikont, szöveges feliratot, ikon és szöveg párost vagy saját képet mutatni;
• a buildervásznon rákattintva megmutatni a sötét palettát az adott munkamenetre (ez nem menti el a látogatók beállítását).

Hozzáadás

1. Kapcsold be a Dark Mode Toggle kiterjesztést a Divi Supreme → Extensions alatt.
2. Nyisd meg az oldalt vagy a Theme Builder elrendezést a Visual Builderben.
3. Szúrd be a Supreme Dark Mode Toggle modult.
4. Állítsd be a Switch style és a Content mode értékét, valamint az ikonokat, feliratokat vagy képeket.
5. A Design fülön állítsd be az igazítást és a kapcsoló megjelenését (vagy kapcsold be a sötét mód testreszabóban az Apply floating switch design to Dark Mode Toggle module opciót).
6. Mentsd, és próbáld ki a weboldalon, olyan oldalon, amelyet a Display on tartalmaz.

Példa: kapcsoló a Theme Builder fejlécben

1. Kapcsold be a kiterjesztést, és nyisd meg a sötét mód testreszabóját (a builder sávjának Dark gombja). Állítsd be a palettát és a Display on értékét.
2. Ha a fejlécben lévő modul az egyetlen vezérlő, kapcsold ki a Show floating switch beállítást.
3. Szerkeszd a Theme Builder fejléc elrendezést.
4. Add hozzá a Supreme Dark Mode Toggle modult (például a menü mellé).
5. Ha a fejléc háttere sötét módban is más legyen, a fejléc szekción nyisd meg az Advanced → Dark Mode Overrides részt. A fejléc logójának cseréjéhez kapcsold be a testreszabóban a Swap logo in dark mode opciót.
6. Mentsd az elrendezést, és nézd meg az éles oldalt.

Content: Toggle

Beállítás	Mit csinál
Switch style	A kapcsoló formája: Pill, Icon vagy Switch. Független a tartalmi módtól.
Content mode	Default (nap és hold), Custom icons, Text labels, Icon + text vagy Custom images.
Icon (light scheme), Icon (dark scheme)	Az ikon világos és sötét sémában (Custom icons módban).
Label (light scheme), Label (dark scheme)	A felirat világos és sötét sémában (szöveges, illetve ikon és szöveg módban).
Image (light scheme), Image (dark scheme)	A kép világos és sötét sémában (Custom images módban).

A Content fülön megtalálod a szokásos háttér- és adminisztrációs címke csoportot is. A Switch stílus szándékosan nem mutat ikont: ha nap és hold vagy saját ikon kell, válaszd a Pill vagy az Icon stílust.

Design

Csoport	Beállítások
Alignment	Balra, középre vagy jobbra.
Label Typography	A felirat betűbeállításai, szöveges vagy ikon és szöveg módban.
Switch Style	Background és Foreground (világosra és sötétre külön), Icon colour (üresen a Foreground színét örökli), Accent (fókusz, illetve a Switch stílus csúszkája), Track colour (a Switch stílus sávja), Size, Icon size (üresen a Size-ból számolódik).

Ha a testreszabóban be van kapcsolva az Apply floating switch design to Dark Mode Toggle module, a modul átveszi a lebegő kapcsoló színeit, szegélyét és árnyékát. Ha ki van kapcsolva, a modul saját Switch Style csoportját használd.

Az Advanced fülön a szokásos Divi-csoportok vannak: HTML-attribútumok, egyéni CSS, feltételek, láthatóság, átmenet, pozíció és görgetés.

Tippek: elég egy elsődleges vezérlő (lebegő kapcsoló vagy fejlécmodul), de ha szándékosan szeretnéd, lehet mindkettő. A buildervásznon a modulra kattintás csak a szerkesztői munkamenetre mutatja a sötét módot. A webhelyszintű beállítások (paletta, időzítés, logócsere, Display on) a Dark Mode Toggle kiterjesztésben vannak.

Dupla címsor (Supreme Dual Heading)

Háromrészes címsor: Before Text (előtte álló szöveg), Middle Text (középső rész) és After Text (utána álló szöveg). Mindhárom résznek külön háttérszíne és megjelenítési módja van, így a középső rész kiemelhető. Hero-címsorokhoz, szekciócímekhez, akciós sorokhoz való, rövid kifejezésekhez. Hosszú folyószövegnél használj sima szöveget.

1. Add hozzá a Supreme Dual Heading modult a Divi Supreme kategóriából.
2. A Content fülön töltsd ki a három szöveget, és válaszd ki a címsor HTML-jelölését.
3. A Design fülön állítsd be a színeket, a betűket és a távolságokat.
4. Mentsd, és nézd meg a weboldalon.

Content

Beállítás	Mit csinál
Before Text	Az első rész szövege.
Middle Text	A középső rész szövege.
After Text	A harmadik rész szövege.
Heading HTML Tag	A címsor jelölése.
Parts layout	Horizontal: a három rész egy sorban, szükség esetén tördelve. Vertical: egymás alatt.
Horizontal gap	A részek közti távolság vízszintes elrendezésnél.
Vertical gap	A részek közti távolság függőleges elrendezésnél.
Stacked segment width	Függőleges elrendezésnél: a teljes szélességű változat a hátteret szélről szélre kitölti, a „fit” változatok a szöveghez igazodnak.

Design

Mindhárom részhez (előtte, középső, utána) külön:

Beállítás	Mit csinál
Background Color	Az adott rész egyéni háttérszíne.
Display	Az adott rész megjelenítési módja.