# Divi 5 modulok: táblázat és tartalomjegyzék

> A Supreme Table (adatforrások, sablonok, keresés, rendezés, könyvtár) és a Supreme Table Of Contents modul beállításai a Divi 5 Visual Builderben.

Két modul a **Divi Supreme** kategóriából. A **Supreme Table** adattáblázat (árak, összehasonlítás, menetrend, élő adatok), a **Supreme Table Of Contents** az oldal címsoraiból épít tartalomjegyzéket. Ne keverd össze őket. A beállítások feliratai a builderben angolul maradnak.

## Táblázat (Supreme Table)

Egyetlen modul (nem szülő-gyermek páros). A táblázatot szerkesztheted a Visual Builderben, vagy betöltheted mentett könyvtári táblázatból, nyilvános CSV-ből, nyilvános Google Táblázatból, nyilvános JSON-fájlból, illetve közzétett WordPress-bejegyzésekből. A látogatók kereshetnek, rendezhetnek, lapozhatnak és CSV-t tölthetnek le. A modul egy kész árazási kezdősablonnal (három csomag, kiemelt Pro oszlop, „legjobb ár” szalag, gombsor) érkezik, így rögtön látsz egy kész táblázatot.

Mielőtt használod, ellenőrizd, hogy a **Table** be van kapcsolva a **Divi Supreme Pro → Modulok** fülön. A könyvtárkezelő menü (**Divi Supreme → Tables**) is csak bekapcsolt modulnál látszik.

### Első lépések

1. Add hozzá a **Supreme Table** modult.
2. A **Content → Data Source** alatt hagyd a **Manual** értéket, vagy válts **Library**, **CSV URL**, **Google Sheets**, **JSON file** vagy **Loop** forrásra.
3. A **Content → Table** alatt kattints az **Edit Table Data** gombra a cellák szerkesztéséhez, vagy válassz egy sablont, és kattints az **Apply template** gombra (a **Replace table** megerősítés után).
4. Szükség esetén kapcsold be a **Settings** alatt a **Search**, **Click to sort**, **Pagination** vagy **Export CSV** opciót.
5. Szükség esetén állítsd be a **Comparison** alatt a kiemelt oszlopot és a „legjobb ár” szalagot.
6. A **Design** fülön formázd a fejlécet, a törzset, a láblécet, a gombokat és a jelvényt.
7. Mentsd az oldalt, és nézd meg a közzétett oldalon.

### Adatforrások

| Forrás | Mit csinálsz |
|---|---|
| **Manual** | A táblázatot a builderben építed és szerkeszted. Importálhatsz CSV-t, és a **Save to library** gombbal újrahasználhatóvá teheted. |
| **Library** | Kiválasztasz egy mentett táblázatot. A szerkesztése minden olyan modulban frissül, amely ugyanazt használja. |
| **CSV URL** | Nyilvános HTTPS hivatkozás egy CSV-fájlra. |
| **Google Sheets** | Nyilvános Google Táblázat hivatkozása. A privát táblázat nem töltődik be. A `gid=` paraméterrel választhatod ki a lapot. |
| **JSON file** | Nyilvános HTTPS hivatkozás JSON-fájlra. Privát vagy belépéshez kötött fájl nem tölthető be. A sorok listája működik a legjobban. |
| **Loop** | Közzétett WordPress-elemek listája. Megadhatod a bejegyzéstípust, a darabszámot, a sorrendet, az oszlopokat és a taxonómiákat. |

A JSON nem hitelesített API-kapcsolat, csak nyilvános sorlista. Nagyon nagy vagy állandóan változó adathalmazhoz inkább külön adatkezelő eszközt használj.

Távoli források (CSV, Google Táblázat, JSON) beállításai:

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **First row is header** | be | A fájl első sorát oszlopcímnek veszi. |
| **Live refresh** | ki | Be: a közzétett táblázat az URL-ből ütemezetten frissül. Ki: a fájl tartalma a táblázatba kerül. |
| **Refresh interval** | 15 perc | 5 / 15 / 30 / 60 perc. A legrövidebb idő 5 perc. Csak bekapcsolt **Live refresh** mellett látszik. |

**Loop** oszlopok: Title, Date, Author, Excerpt, Link, Image, Status (alapból Title, Date, Author, Excerpt). A bejegyzések száma alapból `10` (üresen vagy `0` esetén nincs korlát). Rendezés (**Order by**): Date / Title / Modified / Menu order / ID / Random. Sorrend (**Order**): Descending vagy Ascending.

### A táblázatszerkesztő

A **Content → Table** alatt megnézheted az előnézetet, majd az **Edit Table Data** gombbal sorokat és oszlopokat adhatsz hozzá, cellákat vonhatsz össze vagy oszthatsz szét, és cellatípust választhatsz. A teljes táblázatot CSV-be is exportálhatod a builderből (ez nem azonos a látogatók **Export CSV** gombjával).

Cellatípusok:

| Típus | Mire való |
|---|---|
| Text | Egyszerű szöveg (dinamikus tartalom használható). |
| Rich text | Formázott szöveg (dinamikus tartalom használható). |
| Image | Kép URL-je, opcionális alt szöveggel és hivatkozással. |
| Icon | Ikon és opcionális szöveg. |
| Button | Gomb szövege és címe. |
| Star rating | Értékelési érték. |
| Icon list | Listaelemek. |
| Badge / ribbon | Jelvény szövege. Stílusok: Default, Ribbon, Success, Warning, Danger. |
| Shortcode | Shortcode vagy szöveg (dinamikus tartalom használható). |

A sorok szerepe: Header, Body, Footer, CTA. Opcionális sorsúgó is megadható, ez akkor látszik, ha valaki a sor fölé viszi az egeret.

Oszloponként a szerkesztőben beállítható az alapértelmezett szövegigazítás, az oldalirányú görgetésnél rögzítés, és a tablet vagy telefon nézetről való elrejtés (ha a **Responsive mode** értéke **Hide columns by breakpoint**).

### Sablonok

Válassz egy kezdősablont, majd kattints az **Apply template** gombra, és erősítsd meg a **Replace table** kérdést. A sablon lecseréli a sorokat, oszlopokat, összevonásokat és cellatípusokat. Könyvtári táblázatnál a könyvtári elemet is frissíti minden olyan modulban, amely használja. Ha még kellenek a jelenlegi adatok, kattints a **Cancel** gombra.

| Sablon | Mi ez |
|---|---|
| Pricing | Háromcsomagos árazás kiemelt Pro oszloppal, „legjobb ár” szalaggal és gombsorral (az alap kezdősablon). |
| Feature comparison | Csomagonkénti funkciómátrix. |
| Pros / cons | Kétoszlopos összehasonlítás. |
| Schedule | Idő és előadás elrendezés. |
| Spec sheet | Műszaki adatok soronként. |
| Team | Személyek listája. |
| Menu | Étel- vagy tétellista. |
| Invoice lite | Tételes számla. |
| Compatibility | Kompatibilis / nem mátrix. |
| Yes / no matrix | Pipa / kereszt rács. |
| Annual pricing | Éves csomagok oszlopai. |

### Keresés, rendezés, lapozás, exportálás

A **Content → Settings** alatt. Alapból minden ki van kapcsolva.

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Search** | ki | Keresőmező, amely szűri a sorokat. Állítható a hely (Top / Bottom), az igazítás és a helykitöltő szöveg (alapból „Search…”). |
| **Click to sort** | ki | Az oszlopcímre kattintva rendez, újabb kattintásra megfordítja, majd visszaállítja az eredeti sorrendet. Összevont törzscelláknál nem elérhető. Megadható az alapértelmezett oszlop és irány (Ascending). |
| **Pagination** | ki | Oldalakra osztja a sorokat. Állítható a hely, az igazítás, az oldalankénti sorok száma (5 / 10 / 25 / 50, alapból 10) és a Previous / Next felirat. |
| **Export CSV** | ki | Gomb a közzétett táblázaton. A látogató a szűrt sorokat tölti le CSV-ben, Excel vagy PDF nincs. |
| **Empty table message** | üres | Üzenet, ha a táblázatnak nincs sora. Üresen az alapszöveg jelenik meg. |
| **No search results** | üres | Üzenet, ha a keresésre nincs találat. |

A teljes táblázat letöltéséhez a builderben a **Content → Table** alatti **Export CSV** gombot használd. A közzétett oldal gombja csak a szűrt nézetet adja.

### Felirat és összehasonlítás

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Caption** | üres | A táblázat címe (dinamikus tartalom használható). |
| **Show header row** | be | A fejlécsort oszlopcímként mutatja. |
| **First column is row header** | be | Az első oszlopot soronkénti címnek tekinti. |
| **Highlight column** | None | Egy oszlop kiemelése. |
| **Best value column** | None | Az oszlop, amely megkapja a szalagot. |
| **Best value ribbon** | üres | A szalag felirata (például „Legjobb ár”). |

### Reszponzív működés

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Responsive mode** | Horizontal scroll | **Horizontal scroll**: oldalra görgethető. **Stacked cards**: minden sor kártya lesz, az oszlopcímek feliratként ismétlődnek. **Hide columns by breakpoint**: a szerkesztőben kijelölt oszlopok el vannak rejtve tableten vagy telefonon. |
| **Sticky header** | be | Görgetés közben látható marad az oszlopfejléc. Az eltolás a **Design → Layout** alatt állítható. |
| **Zebra stripes** | be | Váltakozó sorszínek. |
| **Row hover** | be | A sor kiemelődik, ha fölé viszed az egeret. |

### Táblázatkönyvtár

1. Építs egy **Manual** táblázatot (vagy importálj CSV-t).
2. A **Content → Table** alatt írj be egy nevet, és kattints a **Save to library** gombra.
3. Egy másik Table modulban állítsd a **Data Source** értékét **Library**-re, és válaszd ki a táblázatot.
4. A könyvtárat a **WordPress → Divi Supreme → Tables** menüben kezelheted, szerkesztheted, és CSV-t is importálhatsz.

A könyvtári táblázat szerkesztése (a builderben vagy az adminban) minden olyan modulban frissül, amely használja. A **Tables** menü rejtve van, amíg a Table modul ki van kapcsolva a **Modules** fülön. Egy kész árazási táblázatot érdemes könyvtárba menteni, hogy ne kelljen minden céloldalon újraépíteni.

### Design

| Csoport | Mit formáz |
|---|---|
| Header / Body / Footer | Betűk, háttér, szegély, függőleges igazítás (alapból Middle). |
| Caption / Links | A felirat és a táblázaton belüli linkek betűi. |
| Buttons | A cellákban lévő gombok (Next / CTA cellák). |
| Badge | A jelvény és szalag cellák. |
| Column item styles | Egy oszlop jelvény- és gombszíneinek, betűméretének és lekerekítésének felülírása. Az üres érték a globális Badge és Buttons csoportból öröklődik. |
| Best Value Ribbon | Az összehasonlító szalag (betű, háttér, szegély, térköz). Elhelyezés: Before label / After label. |
| Sorting Arrows | A rendezési nyilak színe. Üresen a fejléc szövegszínét örökli. |
| Toolbar | A keresőmező, a lapozó és az exportgomb. |
| Icons | A cellákban használt ikonok. |
| Table | A teljes táblázat háttere és szegélye. |
| Layout | **Sticky Header Offset** (alapból `0px`) és **Stacked Card Gap** (alapból `12px`). |

A szokásos Divi méret, térköz, szegély, árnyék, szűrő, transzformáció és animáció csoportok is érvényesek.

### Tippek

- Ha a modul vagy a **Tables** menü nem látszik, nézd meg, be van-e kapcsolva a **Table** a **Modules** fülön.
- A sablon alkalmazása az egész táblázatot lecseréli, ezért ha kellenek a jelenlegi adatok, kattints a **Cancel** gombra.
- Google Táblázatnál a lapnak nyilvánosnak kell lennie. Adott laphoz add meg a `gid=` paramétert.
- A **Live refresh** nem lehet gyorsabb 5 percnél.
- Ha a látogatók nem tudnak rendezni, kapcsold ki a **Click to sort** opciót, vagy bontsd szét az összevont törzscellákat.

## Tartalomjegyzék (Supreme Table Of Contents)

Az oldal címsoraiból épít tartalomjegyzéket, hogy a látogatók könnyebben eligazodjanak a hosszabb cikkekben és belső oldalakon. Adattáblázathoz a Supreme Table modult használd.

1. Add hozzá a **Supreme Table Of Contents** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön add meg a címsor-választókat (**Heading selectors**), és szükség esetén a tartalom burkolóját.
3. A **Design** fülön állítsd be a mobil kapcsoló ikonját.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Content wrapper CSS selector** | Az a terület, ahonnan a címsorokat gyűjti. Üresen automatikusan felismeri a fő bejegyzés- vagy cikkterületet (`.et-db` régiók, `article`, `main`, `#main-content`). |
| **Heading selectors** | Vesszővel elválasztott lista, például `h2, h3, h4` (kis- és nagybetűre nem érzékeny). |
| **Ignore selector** | Vesszővel elválasztott CSS-választók azokhoz a területekhez, amelyek címsorait ki kell hagyni. Üresen nincs kihagyás. |
| **Skip empty headings** | Kihagyja az üres címsorokat. |
| **Message when no headings found** | Az üzenet, ha nincs egyetlen címsor sem. |
| **Smooth scroll on click** | Kattintásra finoman görget a címsorhoz. |
| **Scroll offset** | A címsor távolsága a nézet tetejétől görgetéskor (rögzített fejlécnél hasznos). |
| **Numbered list** | Számozott lista. |
| **Collapse inactive** | Csak azt az ágat nyitja ki, amelyben a most látható szakasz van. |
| **List max height** | A lista legnagyobb magassága. |
| **Collapsible on mobile** | Kis képernyőn gomb jelenik meg a lista le- és felnyitásához. |
| **Mobile toggle label** | A mobil gomb felirata. |
| **Mobile toggle icon** | A felirat melletti ikon. |
| **Mobile toggle icon placement** | Az ikon helye a feliratnál. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Icon color** | A mobil kapcsoló ikonjának színe. Változatlanul a gomb szövegszínét örökli. |
| **Icon size** | Az ikon mérete. |

A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) is érvényesek.