# Tartalomjegyzék widget

> Automatikus tartalomjegyzék a címsorokból: címsorszintek, listaikon, összecsukás, sima görgetés, címsorok kizárása.

A **Tartalomjegyzék** widget hosszú oldalak és bejegyzések elejére tehető tartalomjegyzéket készít. A jegyzéket az oldal címsoraiból (H1 és H6 között) állítja össze, a látogató pedig egy kattintással a megfelelő szakaszhoz ugorhat.

Ha a widget nem látszik a szerkesztőben, kapcsold be a bővítmény **Widgetek** beállításainál.

## A widget felvétele

1. Keresd meg a **Tartalomjegyzék** widgetet az Elementor widgetlistájában, és húzd az oldalra.
2. Ha az oldalon még nincs címsor, a widget egy üzenetet mutat, hogy adj hozzá címsort. Ha vannak címsorok, a jegyzék alapból a H1, H2 és H3 szintű címsorokat listázza.
3. A szintek alá-fölé rendezése automatikus: ha egy H2 alatt H3 címsorok vannak, azok beljebb húzva, hierarchiában jelennek meg.

![A Tartalom szakasz a címsorszintekkel, a listaikon stílusával és az elválasztóval](./kepek/tartalom-tartalomjegyzek-tartalom.webp)

*A Tartalom szakasz a címsorszintekkel, a listaikon stílusával és az elválasztóval* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A képen a **Tartalom** szakasz látszik: a megjelenítendő címsorok (H1, H2, H3), a **Listaikon stílusa** és az **Elválasztó** kapcsoló.

![Az elkészült tartalomjegyzék az oldalon, a H3 címsor beljebb húzva](./kepek/tartalom-tartalomjegyzek-elo.webp)

*Az elkészült tartalomjegyzék az oldalon, a H3 címsor beljebb húzva* (https://minta-bolt.hu/tartalom-5-teszt/)

A látogatók oldalán a jegyzék így fest: a „Hűtött italok” H3 címsor a H2 alatt, beljebb húzva jelenik meg.

## Tartalmi beállítások

| Szakasz | Beállítás | Mit csinál |
|---|---|---|
| **Cím** | **Add meg a cím szövegét** | A jegyzék fölötti felirat szövege. |
| **Tartalom** | Címsorok HTML-címkéi | Megadhatod, mely szintek (H1 és H6 között) kerüljenek a jegyzékbe. Alapérték: H1, H2, H3. |
| **Tartalom** | **Listaikon stílusa** | A tételek jelölése: felsorolásjelek, számok vagy semmi. |
| **Tartalom** | **Elválasztó** | Elválasztó elemet kapcsol be a jegyzékhez (alapból kikapcsolva). Bekapcsolva a **Stílus** fülön külön **Elválasztó** szakasz jelenik meg. |
| **Címsorok kizárása** | CSS-osztály | Lásd lent. |
| **Összecsukható** | **Tartalom összecsukhatóvá tétele** | A jegyzék jobb felső sarkában nyíl jelenik meg, amellyel a látogató összecsukhatja a listát. |
| **Görgetés** | **Görgetés az oldal tetejére**, **Sima görgetés** | Lásd lent. |

### Összecsukható jegyzék

Hosszú jegyzéknél a látogató ráérzik a nyílra, és elrejtheti a tartalmat, hogy rögtön a szövegre ugorhasson. A kapcsolót az **Összecsukható** szakaszban találod. A nyíl ikont szövegre is cserélheted, külön szöveggel az elrejtéshez és a megjelenítéshez.

![Az Összecsukható szakasz](./kepek/tartalom-tartalomjegyzek-osszecsukhato.webp)

*Az Összecsukható szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

### Sima görgetés és ugrás az oldal tetejére

A **Görgetés** szakaszban két kapcsoló van:

- **Sima görgetés**: ha a látogató egy tételre kattint, az oldal nem ugrik, hanem folyamatosan odagörget. Az animáció késleltetését is beállíthatod.
- **Görgetés az oldal tetejére**: gomb jelenik meg, amellyel a látogató visszajut a tartalomjegyzékhez.

![A Görgetés szakasz](./kepek/tartalom-tartalomjegyzek-gorgetes.webp)

*A Görgetés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

## Címsorok kizárása a jegyzékből

Néha egy címsort nem akarsz a jegyzékben látni. Tipikus eset: egy bejegyzés alatt a **Bejegyzések** widgettel kapcsolódó írásokat listázol, és azok címsorai bekerülnének a jegyzékbe.

![A Címsorok kizárása szakasz](./kepek/tartalom-tartalomjegyzek-kizaras.webp)

*A Címsorok kizárása szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A kizáráshoz a `uae-toc-hide-heading` CSS-osztályt kell hozzáadnod. Két gyakori eset van.

### Egy teljes widget címsorainak kizárása

Ez az eset például a kapcsolódó bejegyzések listája.

1. Jelöld ki azt a widgetet (például a **Bejegyzések** widgetet), amelynek címsorait ki akarod zárni.
2. Nyisd meg a **Haladó** fület, és ott a **CSS-osztályok** mezőt.
3. Írd be: `uae-toc-hide-heading`
4. Frissítsd vagy tedd közzé az oldalt. A widget címsorai eltűnnek a jegyzékből.

### Egyetlen címsor kizárása szövegszerkesztőből

Ha egy **Szövegszerkesztő** widgetben több címsor van, és csak az egyiket akarod kizárni:

1. Nyisd meg a **Szövegszerkesztő** widgetet, és váltsd át a **Szöveg** (HTML) nézetre, a **Vizuális** fül mellett.
2. Keresd meg a kizárandó címsor nyitó címkéjét, például a `<h3>` elemet.
3. Add hozzá az osztályt, így: `<h3 class="uae-toc-hide-heading">`
4. Frissítsd vagy tedd közzé az oldalt. Csak ez a címsor marad ki a jegyzékből.

Ugyanígy bármely más címsor kizárható: ahol megadhatod a `uae-toc-hide-heading` osztályt, az a címsor nem kerül be a jegyzékbe.

## Stílus

A **Stílus** fülön négy szakasz van (az **Elválasztó** csak akkor, ha bekapcsoltad):

- **Tároló**: a jegyzék dobozának belső margója (**Padding**).
- **Cím**: **Igazítás**, **Szín**, **Tipográfia** és **Cím alsó térköze**.
- **Elválasztó**: az elválasztó megjelenése.
- **Tartalom**: **Tipográfia**, **Tartalmak közötti térköz**, és a tételek **Szöveg színe** külön normál, rámutatás és aktív állapotban.

![A Stílus fül Tartalom szakasza a normál, rámutatás és aktív színekkel](./kepek/tartalom-tartalomjegyzek-stilus-tartalom.webp)

*A Stílus fül Tartalom szakasza a normál, rámutatás és aktív színekkel* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A képen a tételek típusai és a három állapot (**Normál**, **Rámutatás**, **Aktív**) fülei látszanak.