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

> A Divi 5 Visual Builder sötét mód kapcsoló (Dark Mode Toggle) és dupla címsor (Dual Heading) moduljának beállításai.

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. |