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

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.