# Ártáblázat widget: beállítások, szalag, további opciók és Lottie a gombon

> Az Ártáblázat widget szakaszai, a funkciólista „összes opció megjelenítése” linkkel, a szalag és a Lottie-animáció a gombon.

Az árkártyának gyorsan négy dolgot kell elmondania: kinek szól a csomag, mennyibe kerül, mit tartalmaz, és mire kattintson az olvasó. Az **Ártáblázat** (angolul Pricing Table) widget ezt építi fel az Elementoron belül, külön bővítmény nélkül. A fejezet a widget szakaszait a panel sorrendjében mutatja.

## Előkészületek

- A widget az alap bővítményben is elérhető. A **2. és 3. elrendezés**, az eszköztippek, a további opciók linkje, a **Felhívás cselekvésre** szöveg, a Lottie ikon a gombon és a **2.** és **3. szalagstílus** Pro.
- Kapcsold be: **The Plus Addons → Widgets**, keress rá a **Pricing Table** szóra, kapcsold be, majd mentsd. Utána az Elementor panelén **Ártáblázat** néven találod.
- Egy widget egy csomag. Háromoszlopos árszakaszhoz három **Ártáblázat** widgetet tegyél egymás mellé egy tárolóba.

## A widget szakaszai

![Az Ártáblázat Tartalom szakasza](./kepek/dobozok-gombok-6-arazas-tartalom.webp)

*Az Ártáblázat Tartalom szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=130&action=elementor)

A képen a **Tartalom** szakasz a **Stílus**, a **Cím**, az **Alcím** és az **Ikon kiválasztása** mezővel látszik, alatta a többi szakasz összecsukva.

### Elrendezés

Az **Elrendezés** szakasz **Stílus** mezője a kártya elrendezését adja: az ingyenes változatban az **1. stílus** érhető el, a 2. és a 3. Pro. Az **Import Presets** gomb a widget előre elkészített beállításait nyitja meg.

### Tartalom

| Mező | Mit csinál |
| --- | --- |
| **Stílus** | A cím elrendezése. Egy lehetőség van: **Stílus 1**. |
| **Cím** | A csomag neve, például „Haladó”. |
| **Alcím** | Rövid sor a név alatt. |
| **Ikon kiválasztása** | Mi áll a cím fölött: **Nincs**, **Ikon**, **Kép** vagy **SVG** (az utóbbi Pro). Alapból **Nincs**, vagyis nincs ikon. |
| **Ikonbetűkészlet** | **Font Awesome**, **Font Awesome 5** vagy **Icons Mind** (az utóbbi Pro). |

### Ár

| Mező | Mit csinál |
| --- | --- |
| **Ár stílusa** | **Stílus 1**, **Stílus 2** vagy **Stílus 3**. A 2. és a 3. Pro. |
| **Előtag szövege** | A pénznem jele vagy bármi a szám előtt. |
| **Ár értéke** | Maga az összeg. |
| **Utótag szövege** | Ami utána áll, például „ Ft / hó”. |

### Előző ár

Az **Előző ár** szakaszban a kapcsoló bekapcsolva áthúzott régi árat mutat a jelenlegi előtt. Ugyanaz a három mező van benne (**Előtag szövege**, **Ár értéke**, **Utótag szövege**), és egyetlen, áthúzott szövegsorként jelennek meg ugyanabban a sorban, közvetlenül a jelenlegi ár előtt.

### Leírás

A **Stílus** dönti el, hogyan íródik a funkciólista:

- **Stílusos lista**: egy sor egy funkció, saját ikonnal és (Pro-ban) saját eszköztippel.
- **WYSIWYG**: egyetlen szövegszerkesztő a lista helyett.

![A Leírás szakasz a funkciólistával](./kepek/dobozok-gombok-6-arazas-leiras.webp)

*A Leírás szakasz a funkciólistával* (https://minta-bolt.hu/wp-admin/post.php?post=130&action=elementor)

A képen a **Stílusos lista** hét sora, az **Elem hozzáadása** gomb és a további opciók mezői látszanak.

**Stílusos lista** esetén megjelenik a **Lista stílusa** (**Stílus 1** vagy **Stílus 2**) és a sorok listája. Egy sort megnyitva ezeket állíthatod:

- **Listaelem leírása**: a funkció szövege.
- **Ikonbetűkészlet** és ikonkönyvtár: a pipa vagy a felsorolásjel.
- **Buboréksúgó opciói**: az eszköztipp, Pro extra (**Eszköztipp megjelenítési helye**: **Doboz** vagy **Ikon**, **Tartalomtípus**, **Eszköztipp tartalma**, **Szöveg igazítása**).

### Gomb

A **Gomb** alapból be van kapcsolva, a felirata „Free Trial” angol alapszöveg, ezért írd át.

![A Gomb szakasz](./kepek/dobozok-gombok-6-arazas-gomb.webp)

*A Gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=130&action=elementor)

A képen a **Gomb típusa**, a három gombstílus, a **Gomb szövege**, a **Gomb hivatkozása** és az ikonmezők látszanak.

| Mező | Mit csinál |
| --- | --- |
| **Gomb típusa** | **Alap** (a lenti stílusok) vagy **Globális stílus** (mentett globális gombstílus). |
| **Stílus** | Három kép: az 1. és a 3. Pro, a 2. az alap, és az ingyenes változatban az egyetlen. |
| **Gomb szövege**, **Gomb hivatkozása** | A felirat és a cél. |
| **Ikon típusa** | **Ikon** vagy **Lottie** (Pro). |
| **Ikonbetűkészlet**, ikon, **Ikon pozíciója**, **Ikon térköze** | Csak a 2. stílusnál jelennek meg. Az **Ikon pozíciója** lehet **Utána** (alap) vagy **Előtte**. |

A három gombstílus nem névvel ellátott beállításcsomag, hanem kép, ezért érdemes megnyitni a **Stílus** mezőt és megnézni őket. Az ingyenes változatban az 1. és a 3. stílus üres hivatkozást rajzol, ezért ott a 2. stílust használd.

### Felhívás cselekvésre

A **Felhívás cselekvésre** szöveg (angolul Call To Action, CTA) egy Pro szerkesztőmező: közvetlenül a gomb alá nyomtat egy sort, például megnyugtatásul („Nem kell bankkártya”). Ingyenes változatban a szakaszban csak a frissítésre felszólító tábla áll.

### Szalag

A **Szalag megjelenítése** kapcsoló egy csomagot emel ki. Részletesen lásd lentebb.

## Stílus fül

A **Stílus** fülön a kártya minden részének saját szakasza van: **Ikon**, **Cím**, **Alcím**, **Előző ár**, **Ár**, **Tartalom**, **Tartalom háttere**, **Gomb**, **Felhívás cselekvésre** és **Szalag/jelvény**. Két további szakasz külön említést érdemel:

- **Háttérbeállítások**: az egész kártya térközei, szegélye, háttere és dobozárnyéka, mind **Normál** és rámutatásos állapotra. A rámutatásos animációk Pro-k.
- **További effektusok**: a nagyítás (angolul Scale Zoom) az egyik kártyát megnöveli, hogy kitűnjön a többi közül. A skála 0,6 és 1,8 között mozog, az alapérték 1.

Néhány szakasz csak akkor jelenik meg, ha használod a hozzá tartozó beállítást: a **Lottie** a Lottie ikontípus kiválasztása után, a **Buboréksúgó opciói** az eszköztippekhez, a **Szalag/jelvény** a szalag bekapcsolása után, az **SVG**, **Ikon** vagy **Kép stílusa** pedig az **Ikon kiválasztása** értékétől függ.

## Szalag hozzáadása

Ha három csomag áll egymás mellett, az olvasók azt a csomagot keresik, amelyet ajánlasz. A kártyán átfutó szalag a legrövidebb út ehhez.

1. Jelöld ki az **Ártáblázat** widgetet a kiemelendő csomaghoz.
2. Nyisd meg a **Szalag** szakaszt a **Tartalom** fül alján.
3. Kapcsold be a **Szalag megjelenítése** kapcsolót.
4. Válassz alakot a **Stílus** mezőben.
5. Írd be a szöveget a **Szalag/jelvény szövege** mezőbe.
6. Formázd a **Stílus → Szalag/jelvény** szakaszban, amely a kapcsoló bekapcsolása után jelenik meg.

![A Szalag szakasz a Tartalom fülön](./kepek/dobozok-gombok-6-arazas-szalag.webp)

*A Szalag szakasz a Tartalom fülön* (https://minta-bolt.hu/wp-admin/post.php?post=130&action=elementor)

A képen a **Szalag megjelenítése** kapcsoló látszik kikapcsolt állapotban, alatta a szakaszok.

A szalagnak három alakja van:

| Stílus | Hogyan néz ki | Kiadás |
| --- | --- | --- |
| **Stílus 1** | A kártya teljes szélességű sávja, közvetlenül a kártya fölött. | alap |
| **Stílus 2** | Négyzet alakú jelvény a kártya jobb felső sarkán. | Pro |
| **Stílus 3** | Kis kitűző a kártya jobb felső részén. | Pro |

![Három csomag, a középső kártya szalaggal](./kepek/dobozok-gombok-6-arazas.webp)

*Három csomag, a középső kártya szalaggal* (https://minta-bolt.hu/tp-d6-arazas/)

A képen a középső, **Haladó** csomag fölött fekete szalag fut.

Működés és korlátok:

- A **Stílus 1** sávja a kártya fölötti helyen jelenik meg, a **Stílus 2** és a **Stílus 3** a kártya jobb felső sarkára kerül. Egyik sem tolja lejjebb a címet vagy az árat.
- A szalag szövegét a widget nagybetűsre állítja: a „Legnépszerűbb” szöveg „LEGNÉPSZERŰBB” alakban jelenik meg.
- A **Szalag/jelvény szövege** szerkesztőmező, de a szalag keskeny sáv, ezért maradj két-három szónál.
- Pro-val a szalag mindhárom kártyaelrendezésen (1., 2., 3. stílus) működik.
- Csak egy szalag lehet egy kártyán, és minden kártya külön widget, ezért csomagonként állítod be.
- A szalag sarkát nem választhatod: a **Stílus 1** mindig felső sáv, a **Stílus 2** és a **Stílus 3** mindig jobb felső.
- Pro nélkül a **Stílus 2** és a **Stílus 3** semmit nem rajzol, a kártya egyszerűen szalag nélkül marad, és a szerkesztő nem figyelmeztet.
- A **Stílus → Szalag/jelvény** szakasz csak bekapcsolt szalagnál látszik.

Ha a szalag szövege levágódik, a sáv csak olyan széles, mint a kártya: rövidítsd a szöveget, vagy csökkentsd a betűméretet a **Stílus → Szalag/jelvény** alatt. Ha a 2. vagy 3. stílus eltakarja az ikont, adj a kártyának felső paddinget a **Stílus → Háttérbeállítások** alatt, vagy told lejjebb az ikont. Ha az 1. stílus sávja levágódik vagy a fölötte lévő sorba ér, a kártya fölötti helyre rajzolódik: adj a tárolónak elég felső paddinget.

## Több funkció elrejtése: „összes opció megjelenítése”

Egy tizenöt funkciós csomag nagyon magas kártyát ad, miközben az első három sor szokott eladni. A kibontó link rövid kártyát ad, de mindent elolvashatóvá tesz. Az **Alapértelmezés szerint megjelenő listaelemek száma** mező adja meg, hány funkciósor látszik a link előtt. Ez Pro funkció, a widget többi része Pro nélkül is működik.

1. Jelöld ki az **Ártáblázat** widgetet, és nyisd meg a **Leírás** szakaszt.
2. Állítsd a **Stílus** mezőt **Stílusos lista**, a **Lista stílusa** mezőt **Stílus 1** értékre.
3. Vegyél fel a listába több sort, mint a következő lépésben megadott szám, különben nem jelenik meg a link.
4. A lista alatti **Alapértelmezés szerint megjelenő listaelemek száma** mezőbe írj számot.
5. Ha mást szeretnél, írd át a **Szakasz kibontásának címe** és a **Szakasz összecsukásának címe** szöveget.
6. Publikálj, és nézd meg a kártyát az oldalon.

Működés:

- A szám pontosan annyi sort jelent, amennyi látszik. Hétnél 3-as érték mellett három sor látszik, a többi a link mögött van.
- A linkre kattintva minden sor megjelenik, a felirat pedig a **Szakasz összecsukásának címe** értékére vált. Újabb kattintásra a sorok újra elrejtőznek, és a **Szakasz kibontásának címe** tér vissza.
- Az alapszövegek a magyar felületen „+ összes opció megjelenítése” és „- Kevesebb opció”.
- Ha a mezőt üresen hagyod, a widget 3-ra esik vissza.
- A link csak akkor jelenik meg, ha több sor van, mint a szám. Három funkció mellett a 3 vagy az 5 érték is mindhármat mutatja, link nélkül.
- Minden kártya külön számol: egy oldalon két ártáblázat lehet 3 és 5 sorral, és a linkjeik egymástól függetlenül működnek.

Korlátok:

- Pro nélkül a mezők nincsenek a panelen, és minden funkciósor mindig látszik.
- A link csak a **Lista stílusa: Stílus 1** esetén működik. A **Stílus 2** mellett a beállítások szerkeszthetők, de a link sosem jelenik meg, és az egész lista látszik, figyelmeztetés nélkül.
- A WYSIWYG leírásstílusra nem hat, mert az egyetlen szövegblokk, nem sorok.
- A sorokat JavaScript rejti el az oldal betöltése után, ezért a keresők és a képernyőolvasók a teljes listát látják.
- Nincs animáció és nincs eszközönkénti beállítás: asztalon, tableten és mobilon ugyanaz a szám érvényes.

![Három ártáblázat kártya, mindegyiken három funkciósor és a kibontó link](./kepek/dobozok-gombok-6-arazas.webp)

*Három ártáblázat kártya, mindegyiken három funkciósor és a kibontó link* (https://minta-bolt.hu/tp-d6-arazas/)

A képen minden kártya alján ott a „+ összes opció megjelenítése” link.

## Lottie-animáció a gombon

A gombon futó kis ismétlődő animáció odavonzza a tekintetet ahhoz az egyhez, amire kattintani szeretnéd. Az **Ártáblázat** a gomb ikonja helyett Lottie-animációt is használhat. Ez Pro funkció.

### Feltételek

- A **Gomb** legyen bekapcsolva, a **Stílus** pedig a 2. stílus: az ikonvezérlők, a Lottie is, csak ennél jelennek meg, és ez az alapérték.
- JSON URL kell az animációhoz, nem letöltött fájl.

### A Lottie JSON URL beszerzése

1. Jelentkezz be a LottieFiles-ba, és nyisd meg a kiválasztott ingyenes animációt.
2. Mentsd a munkaterületedre, hogy megnyíljon a szerkesztőben.
3. A jobb oldali panelen nyisd meg a **Handoff** fület, és kapcsold be az **Enable asset CDN** lehetőséget.
4. Az **Asset link format** értéke legyen **Lottie JSON**.
5. Másold ki az URL-t az **Asset link** mezőből.

### A gombra helyezés

1. Jelöld ki az **Ártáblázat** widgetet, és nyisd meg a **Gomb** szakaszt.
2. A **Gomb** maradjon bekapcsolva, a **Stílus** pedig a 2. stílus.
3. Az **Ikon típusa** legyen **Lottie**.
4. Illeszd be a JSON linket a **Lottie URL** mezőbe.
5. Az **Ikon pozíciója** mezővel az animációt a gomb szövege elé vagy mögé teheted.
6. A méretet és az időzítést a **Stílus → Lottie** szakaszban állítod.

Az animáció a publikált oldalon a gombon belül játszik.

Működés:

- Az animáció a gomb linkjén belül Lottie-lejátszóként jelenik meg, alapból 25 × 25 képponttal, kis térközzel a szöveg és közte.
- Ismétlődik, és az oldal betöltésekor magától indul.
- A lejátszó szkriptje csak azokon az oldalakon töltődik be, amelyeken tényleg van Lottie ikon.
- A **Stílus → Lottie** szakasz csak akkor látszik, ha az **Ikon típusa** **Lottie**. Szélesség, magasság, sebesség, a két margó, a függőleges igazítás, az animáció ismétlése és a rámutatásos lejátszás kapcsolója van benne, és a kapcsolókon kívül minden eszközönként állítható.
- Ha visszaváltasz **Ikon** típusra, a Font Awesome ikon visszatér, a beillesztett URL pedig megmarad.

Korlátok:

- Az **Ikon típusa** és a **Lottie URL** Pro vezérlő: ingyenes változatban nincs a panelen, és a gomb megtartja a szokásos ikonját.
- Csak a gomb 2. stílusának vannak ikonvezérlői, ezért az 1. és a 3. stílushoz nem adható Lottie.
- Az animációt a megadott URL-ről tölti le. Ha az a szerver lassú, blokkolt vagy megszűnt, a gombon egyszerűen nincs ikon, tartalék nincs.
- `.json` fájlt nem tölthetsz fel a médiatárba, hogy itt kiválaszd: a mező URL-t vár.
- Nincs színvezérlő: a Lottie fájl a saját színeit hordozza, átszínezéshez előbb a LottieFilesban szerkeszd a fájlt.
- Egy gombon egy animáció van, és kártyánként egy gomb.

## Eszköztipp egy funkciósorhoz

Van olyan sor, amelyhez egy mondat magyarázat kell: mit jelent a „korlátlan”, vagy mi történik a benne foglalt keret fölött. Ha ezt a sorba írod, hosszú lesz a kártya. Az eszköztipp (a panelen **Buboréksúgó**) rövidre hagyja a kártyát, a magyarázat pedig rámutatáskor jelenik meg. Ez Pro funkció.

1. Jelöld ki az **Ártáblázat** widgetet, és nyisd meg a **Leírás** szakaszt.
2. A **Stílus** legyen **Stílusos lista**. Az eszköztipp a lista soraihoz tartozik, a **WYSIWYG** stílusban nincs.
3. Nyisd meg azt a sort, amelyet magyarázni szeretnél, és kapcsold be a **Buboréksúgó opciói** kapcsolót.
4. Az **Eszköztipp megjelenítési helye** mezőben válaszd a **Doboz** értéket (a tipp a teljes sor fölé mutatva jelenik meg), vagy az **Ikon** értéket (a sor végén kis ikon jelenik meg, és csak az ikonra mutatva nyílik a tipp).
5. A **Tartalomtípus** legyen **Tartalomszöveg** egyszerű mondathoz, vagy **Tartalom WYSIWYG** formázott szöveghez, hivatkozáshoz vagy képhez.
6. Írd meg a tippet az **Eszköztipp tartalma** mezőben (vagy a **Leírás** mezőben, ha **Tartalomszöveg**-et választottál), és szükség esetén állítsd a **Szöveg igazítása** értéket és a szöveg színét.

![Egy funkciósor megnyitva a Leírás szakaszban, bekapcsolt Buboréksúgó opciókkal](./kepek/dobozok-gombok-7-arazas-tooltip-panel.webp)

*Egy funkciósor megnyitva a Leírás szakaszban, bekapcsolt Buboréksúgó opciókkal* (https://minta-bolt.hu/wp-admin/post.php?post=135&action=elementor)

A képen a „Napi mentés” sor látszik megnyitva: a **Buboréksúgó opciói** kapcsoló **Igen** állású, alatta az **Eszköztipp megjelenítési helye** (**Doboz**), a **Tartalomtípus** és a tipp szövege.

![A Napi mentés sorra mutatva megnyílik az eszköztipp a kártyán](./kepek/dobozok-gombok-7-arazas-tooltip.webp)

*A Napi mentés sorra mutatva megnyílik az eszköztipp a kártyán* (https://minta-bolt.hu/tp-d7-arazas/)

A kész oldalon a sorra mutatva megnyílik a tipp, a kártya hosszát pedig nem növeli.

### Közös eszköztipp-beállítások

A tipp helyét, kinézetét és időzítését nem soronként, hanem egyszer, az egész widgetre állítod a **Stílus → Buboréksúgó opciói** szakaszban.

![A Stílus fül Buboréksúgó opciói szakasza](./kepek/dobozok-gombok-7-arazas-tooltip-stilus.webp)

*A Stílus fül Buboréksúgó opciói szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=135&action=elementor)

A képen az **Eszköztipp ikonja**, a **Bal oldali eltolás**, a **Méret** és a **Szín** mező látszik; fölötte a **Buboréksúgó opciói** és a **Stílus** ablakocskák nyílnak.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Pozíció** | Melyik oldalon nyílik a tipp: bal, jobb, fent, fent elöl, fent hátul vagy lent. | Fent |
| **Sablon** | A tipp színvilága: sötét, világos vagy áttetsző. | Sötét |
| **Eseményindító** | Rámutatásra vagy kattintásra nyílik. | Rámutatás |
| **Animáció** | A megjelenés módja: elúszás, beúszás, áttűnés, nagyítás vagy perspektíva. | Beúszás |
| **Nyilak** | A tipp mutatójának alakja: nincs, alap vagy kerek. | Alap |
| **Interaktív súgóbuborékok** | Az egérrel beléphetsz a tippbe, így a benne lévő hivatkozások kattinthatók. | Be |
| **Eszköztipp ikonja** | A sor végén álló ikon, ha a megjelenítési hely **Ikon**. | Információs ikon |
| **Méret** | Az ikon mérete. | Üres |

Működés:

- **Doboz** esetén a sor bárhol az egérrel érintve megnyitja a tippet. **Ikon** esetén az ikon a sor szövege után áll, és csak az nyitja.
- A tippet működtető szkript csak azokon az oldalakon töltődik be, ahol van bekapcsolt tipp.
- A tipp soronként állítható, így az egyik funkciót magyarázhatod, a többit hagyhatod simán.
- A **Tartalom WYSIWYG** hivatkozásai kattinthatók, mert az **Interaktív súgóbuborékok** alapból be van kapcsolva.

Korlátok és tippek:

- Pro nélkül a **Buboréksúgó opciói** kapcsoló Pro jelzéssel látszik, és bekapcsolva sem jelenít meg tippet.
- Az **Ikon** megjelenítési helyhez állítsz be **Méret** értéket (kb. 16 képpont): üresen az ikon nulla szélességű, nincs mire mutatni.
- Az ikonhoz Font Awesome 5 ikont válassz, a Font Awesome 4 ikon üres helyként jelenik meg.
- A **Pozíció**, a **Sablon**, az **Eseményindító** és a méret widgetenként közös, egy kártya minden tippjére ugyanaz érvényes.
- A tipp alapból rámutatásra nyílik, ami érintőképernyőn kényelmetlen: ha számít a mobil, válts az **Eseményindító** mezőben kattintásra.
- Ha a tipp a képernyő szélén kilóg, változtasd a **Pozíciót**: a kártya szélén a **Fent** általában jobb, mint a bal vagy a jobb oldal.
- Ha a tipp hivatkozása nem kattintható, használd a **Tartalom WYSIWYG** típust, és hagyd bekapcsolva az **Interaktív súgóbuborékok** kapcsolót.
- Ha rámutatásra semmi nem történik, nézd meg, hogy a kapcsoló a jó soron van-e bekapcsolva, a tipp szövege nem üres-e, és ürítsd az oldal gyorsítótárát.

## Az ajánlott csomag kiemelése nagyítással

Három csomag közül az a kártya vonja el a tekintetet, amelyik kicsit nagyobb a szomszédainál, külön szín vagy szöveg nélkül. A **Nagyítás mértéke** (angolul Scale Zoom) egy kártyát nagyít vagy kicsinyít. Ez nem Pro funkció.

1. Tedd az **Ártáblázat** widgeteket egymás mellé egy tárolóba.
2. Jelöld ki a kiemelendő csomag widgetjét.
3. Nyisd meg a **Stílus → További effektusok** szakaszt.
4. Húzd a **Nagyítás mértéke** csúszkát 1 fölé. Az 1,1 és 1,15 közötti érték már jól látszik, de nem töri szét a sort.
5. Ha kell, tablet és mobil nézetben külön értéket adj meg.

![A További effektusok szakasz 1,12 értékű nagyítással](./kepek/dobozok-gombok-7-arazas-nagyitas-panel.webp)

*A További effektusok szakasz 1,12 értékű nagyítással* (https://minta-bolt.hu/wp-admin/post.php?post=135&action=elementor)

A képen a **Stílus** fül **További effektusok** szakasza látszik, a **Nagyítás mértéke** 1,12.

![Három csomag, a középső nagyobb a szomszédainál](./kepek/dobozok-gombok-7-arazas-nagyitas.webp)

*Három csomag, a középső nagyobb a szomszédainál* (https://minta-bolt.hu/tp-d7-arazas/)

A képen a középső, **Haladó** csomag nagyobb az **Alap** és a **Pro** kártyánál.

Működés:

- A csúszka 0,6 és 1,8 között mozog 0,05-ös lépésekkel, az alapérték 1. Az 1 alatti érték kicsinyít.
- A kártya a widgeten belül nagyodik, a widget doboza nem változik, ezért a sor nem tolódik el. Emiatt a megnagyított kártya ráérhet a szomszédaira.
- A beállítás eszközönként állítható: asztali nézeten nagyíthatsz, tableten és mobilon maradhat 1.
- A 3. kártyastílusnál a nagyítás a kártya felső részére hat, nem az egészre.

A kártya a szomszédai fölött maradjon:

- A nagyítás nem változtatja a rétegsorrendet: a nagyított kártya a szomszédja alá kerülhet. Adj a widgetnek magasabb **Z-index** értéket a **Haladó → Elrendezés** szakaszban (2 elég), és szépen rájuk fedhet.

Korlátok:

- A widget doboza nem nő a kártyával, ezért nagy értéknél a kártya a szomszédaira vagy a tárolón kívülre lóghat, és levágódhat. Adj a tárolónak vízszintes paddinget, vagy csökkentsd az értéket.
- A nagyítás a szöveget is nagyítja, ezért nagy értéknél a betűk felfújtnak hatnak. Nagyobb különbséghez a térközöket és a betűméreteket is módosítsd.
- Nincs csak rámutatásra működő változat és átmenetbeállítás: a kártya mindig a megadott méretben látszik.
- A beállítás widgetenként érvényes, ezért háromoszlopos sorban csak arra a kártyára kell megadnod, amelyiket ki akarod emelni.
- Ha a mobilnézetben ugrál a sor, állítsd mobilon vissza 1-re: egymás alatti kártyáknak a nagyítás nem ad semmit.

## Korlátok és tudnivalók

- A widget saját, Font Awesome 4 ikonjai üres helyként jelennek meg, mert nem töltődik be Font Awesome stíluslap. Az alapértelmezett pipa (`fa fa-plus`) és a gomb alapnyila (`fa fa-chevron-right`) ezért nem látszik. Válaszd az **Ikonbetűkészlet** mezőben a **Font Awesome 5** értéket: ezek az ikonok beágyazott SVG-ként mindig megjelennek.
- Az oldalon minden Ártáblázat ugyanazt a HTML azonosítót kapja, ezért a horgonylinkek és az azonosítóra írt egyedi CSS vagy JavaScript csak az első kártyát éri el. A **Haladó** fülön adj saját osztályt, és arra célozz.
- Nincs beépített havi/éves váltó, kártyák közötti összehasonlító táblázat, és egy widgetből nem építhető több csomag. A havi és éves ár váltásához lásd a [Kapcsoló](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-kapcsolo/) fejezetet.
- Ha egy oldalt Pro elrendezésstílussal mentettél, majd Pro nélkül futtatod, a kártya üres dobozként jelenik meg, nem esik vissza az 1. stílusra.
- A **Felhívás cselekvésre** sor közvetlenül a gomb után jelenik meg, és akkor is látszik, ha a **Gomb** kapcsolót kikapcsolod.
- Ha a **Pozíció** (**Stílus → Gomb**) **Középen** (alap), a gomb az ár és a funkciólista között áll, **Lent** értéknél a lista alá kerül.

## Hibaelhárítás

| Jelenség | Teendő |
| --- | --- |
| A funkciók melletti ikonok hiányoznak. | Font Awesome 4 ikonok, és nincs betöltött Font Awesome stíluslap. Állítsd az **Ikonbetűkészlet** értékét **Font Awesome 5**-re, és válaszd újra az ikont. |
| A 2. vagy 3. stílus üres kártyát ad. | Ezek az elrendezések Pro-k. Pro nélkül a widget üres burkolót nyomtat: állítsd a **Stílus** mezőt **Stílus 1**-re. |
| A gombon nincs szöveg. | A gombstílus 1 és 3 Pro. Ingyenesen üres hivatkozást adnak: használd a 2. stílust. |
| A **Szalag** vagy a **Felhívás cselekvésre** nincs a panelen. | Mindkettő a **Tartalom** fül alján áll. Ingyenesen a **Felhívás cselekvésre** csak a frissítési figyelmeztetést tartalmazza. |
| Beállítottam a számot, de nincs link. | Vagy nincs több sor a számnál, vagy a **Lista stílusa** **Stílus 2**. Vegyél fel még egy sort, vagy válts **Stílus 1**-re. |
| Nem találom az **Alapértelmezés szerint megjelenő listaelemek száma** mezőt. | A sorok lista alatt van a **Leírás** szakaszban, csak **Stílusos lista** mellett, és Pro vezérlő. |
| Az éles oldalon minden sor látszik. | Ellenőrizd a **Lista stílusa** értékét (**Stílus 1**), majd ürítsd az oldalgyorsítótárat. A sorokat a widget saját szkriptje rejti el, és egy csonkolt vagy halasztott szkriptcsomag elrontja. |
| A link szövege nem változott. | A **Szakasz kibontásának címe** a zárt, a **Szakasz összecsukásának címe** a nyitott állapot felirata. Mentsd az oldalt szerkesztés után. |
| A szalag nem jelent meg. | Nézd meg a **Stílus** mezőt: a 2. és a 3. Pro, és Pro nélkül nem rajzol semmit. Válts **Stílus 1**-re. |
| A **Stílus** fülön nincs **Szalag/jelvény** szakasz. | Feltételes: előbb kapcsold be a **Szalag megjelenítése** kapcsolót, majd nyisd meg újra a **Stílus** fület. |
| Nem találom az **Ikon típusa** listát. | Csak a gomb 2. stílusánál jelenik meg, és Pro vezérlő. Ellenőrizd a **Stílus** mezőt a **Gomb** alatt, és hogy a Pro aktív. |
| A gombon nincs ikon, pedig Lottie-t adtam meg. | Nyisd meg a Lottie URL-t egy böngészőlapon: JSON-t kell adnia. Megosztási oldal, előnézeti link vagy lejárt CDN-link nem játszik le. |
| Az animáció túl nagy vagy túl kicsi. | Állítsd a **Szélesség** és **Magasság** értékét a **Stílus → Lottie** alatt. Az alapméret 25 × 25 képpont. |
| Az animáció egyszer lefut, és megáll. | Kapcsold be az **Animáció ismétlése** kapcsolót a **Stílus → Lottie** alatt, vagy nézd meg, hogy a fájl maga egyszeri animáció-e. |
| Az animáció túl közel van a szöveghez. | Használd a margókat és a függőleges igazítást a **Stílus → Lottie** alatt. |
| A három kártya különböző magas. | Mindegyik widget a saját tartalmához igazodik. Állítsd a tároló **Elemek igazítása** értékét nyújtásra, vagy adj minden kártyának ugyanannyi funkciósort. |