# Kapcsoló (Switcher) widget: havi és éves árak, horgonyok, Távoli carousel

> A Kapcsoló widget két tartalma, sablonok használata, azonosítók horgonyhoz és a Távoli carousellel való összekötés.

A **Kapcsoló** (angolul Switcher) widget két tartalom között vált egy kapcsolóval. Tipikus használata az árazási tábla havi és éves változatának átváltása, de bármilyen két tartalomhoz jó.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Switcher** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a **Kapcsoló** nevet keresd.

## Felépítés

A widget három szakaszra oszlik: **Tartalom 1** és **Tartalom 2** (a két oldal tartalma), valamint **Kapcsoló** (a kapcsoló maga). Csak két tartalom fér a widgetbe.

![A Kapcsoló widget panelje](./kepek/dobozok-gombok-1-kapcsolo-panel.webp)

*A Kapcsoló widget panelje* (https://minta-bolt.hu/wp-admin/post.php?post=85&action=elementor)

A képen a szakaszok sora és a nyitott **Kapcsoló** szakasz látszik.

![A Kapcsoló widget kész állapota, a havi tartalommal](./kepek/dobozok-gombok-1-kapcsolo-havi.webp)

*A Kapcsoló widget kész állapota, a havi tartalommal* (https://minta-bolt.hu/tp-kapcsolo/)

A kép a kapcsolót mutatja a bal oldali (**Havi**) címkénél: alatta a havi csomaghoz tartozó tartalom látszik.

![A Kapcsoló átváltva, az éves tartalommal](./kepek/dobozok-gombok-1-kapcsolo-eves.webp)

*A Kapcsoló átváltva, az éves tartalommal* (https://minta-bolt.hu/tp-kapcsolo/)

Átváltás után az **Éves** címke aktív, és az éves csomag tartalma jelenik meg.

## A Tartalom 1 és a Tartalom 2 szakasz

![A Kapcsoló widget Tartalom 2 szakasza](./kepek/dobozok-gombok-1-kapcsolo-panel-tartalom2.webp)

*A Kapcsoló widget Tartalom 2 szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=85&action=elementor)

A két szakasz ugyanazokat a mezőket tartalmazza.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Cím** | A kapcsolónál megjelenő felirat ehhez az oldalhoz. | A kapcsoló / B kapcsoló |
| **Forrás kiválasztása** | **Egyéni tartalom**: a tartalmat közvetlenül a widgetben írod meg. **Sablon**: egy mentett Elementor-sablon jelenik meg. | Egyéni tartalom |
| **Tartalom** | A közvetlenül megírt tartalom szerkesztővel (Egyéni tartalom esetén). | mintaszöveg |
| **Tartalomtípus** | Sablon esetén azt adja meg, hogyan választod ki a sablont: legördülő listából vagy a sablon shortcode-jával. | Legördülő menü |
| **Elementor-sablonok** | A mentett sablonok legördülő listája (a **Legördülő menü** tartalomtípusnál). | nincs kiválasztva |
| **Add meg az Elementor-sablon shortcode-ot** | A sablon shortcode-ja (a shortcode-os tartalomtípusnál). | üres |
| **Ikon** | Egy ikon vagy kép a kapcsolócímke mellé. | nincs |
| **Egyedi ID** | Horgonyazonosító ehhez az oldalhoz, hivatkozáshoz vagy navigációhoz. | üres |

## Havi és éves árazás kapcsolóval

Ha a két árazási táblát (havi, éves) külön sablonként építed meg, a **Kapcsoló** egy kattintással váltogat közöttük.

1. Építsd meg és mentsd el az Elementor-sablonokat: egyet a havi, egyet az éves árazáshoz (**Sablonok → Mentett sablonok**). A sablonnak előbb léteznie kell, különben a legördülő lista üres marad.
2. Add az oldalhoz a **Kapcsoló** widgetet.
3. A **Tartalom 1** szakaszban írd be a **Címet** (például „Havi”), a **Forrás kiválasztása** mezőnél válaszd a **Sablon** lehetőséget, és az **Elementor-sablonok** listából válaszd ki a havi sablont.
4. A **Tartalom 2** szakaszban ugyanígy add meg az „Éves” címet és az éves sablont.
5. Tedd közzé az oldalt, és kattints a kapcsolóra: a két sablon váltakozik.

Háromféle időszak (például havi, éves és élethosszig tartó) nem fér egy widgetbe, mert a **Kapcsoló** csak két tartalmat kezel. Háromhoz két **Kapcsoló** widgetet használhatsz egymás mellett, vagy összekötheted a **Távoli carousel** widgettel.

## A Kapcsoló szakasz

![A Kapcsoló widget Kapcsoló szakasza](./kepek/dobozok-gombok-1-kapcsolo-panel-toggle.webp)

*A Kapcsoló widget Kapcsoló szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=85&action=elementor)

A képen a szakasz mezői látszanak.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Egyedi kapcsoló ID** | Ezzel az azonosítóval kötheted össze a kapcsolót a **Távoli carousel** widgettel. | üres |
| **Kapcsoló megjelenítése** | A kapcsoló vezérlőelemének megjelenítése vagy elrejtése. | Megjelenítés |
| **Kapcsolócímke** | A két címke megjelenítése vagy elrejtése. | Megjelenítés |
| **Kapcsolóstílus** | A kapcsoló kinézete: **Stílus 1**, **Stílus 2**, **Stílus 3**, **Stílus 4**. | Stílus 1 |
| **Eszköztipp** | Magyarázó szöveget jelenít meg rámutatáskor mindkét oldalhoz. | Elrejtés |
| **Cím HTML-címke** | A címkék HTML-címkéje (például H5). | H5 |
| **Igazítás** | A kapcsoló balra, középre vagy jobbra igazítása. | Középre |
| **Címke térköze** | A távolság a címke és a kapcsoló között. | 15 |
| **Kapcsoló mérete** | A kapcsoló mérete. | 14 |

Egyes stílusoknál a kapcsoló maximális szélessége is állítható (**Kapcsoló maximális szélessége**).

## Horgonylink a kapcsoló egyik oldalához

Az **Egyedi ID** mező mindkét tartalomnál azonosítót ad az adott oldalnak. Így az oldal bármely más pontjáról hivatkozhatsz rá.

1. A **Tartalom 1** (vagy **Tartalom 2**) szakasz **Egyedi ID** mezőjébe írj rövid azonosítót, szóköz nélkül (például `havi`).
2. Egy gombon vagy hivatkozáson az oldal másik részén a **Link** értéke legyen `#` jel és az azonosító, például `#havi`.
3. Tedd közzé az oldalt, és próbáld ki a hivatkozást.

Az azonosítónak egyedinek kell lennie az oldalon: ha két elemnek ugyanaz az azonosítója, a működés kiszámíthatatlan.

## Összekötés a Távoli carouselrel

A **Kapcsoló** vezérelhető a **Távoli carousel** widgettel is, amely **Következő** és **Előző** gombokat vagy lapozópontokat ad bárhol az oldalon.

1. A **Kapcsoló** widget **Kapcsoló** szakaszában add meg az **Egyedi kapcsoló ID** mezőt (például `arak`).
2. Tedd a **Távoli carousel** widgetet ugyanarra az oldalra, és az **Egyedi kapcsolati ID** mezőbe írd ugyanazt az azonosítót.
3. A **Távoli vezérlés típusa** mezőnél válaszd a **Kapcsoló** lehetőséget.
4. Szükség esetén válassz a **Kapcsolóstílus** mezőben az elrendezésedhez illő megjelenést.
5. Tedd közzé az oldalt, és próbáld ki, hogy a két widget reagál-e egymásra.

A két widgetnek ugyanazon az oldalon kell lennie, és az azonosítónak pontosan egyeznie kell. A szerkesztőben nem látszik, hogy a kapcsolat él-e, ezért mindig a közzétett oldalon ellenőrizd. A **Távoli carousel** beállításairól a [Forgó doboz fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-flipbox/) is szól.