# Árlista widget: stílusok, étlap és Lottie

> Az Árlista widget három stílusa, a tartalom mezői, a klasszikus étlapstílus képpel vagy Lottie-animációval.

Az **Árlista** (angolul Pricing List) widget egy tétel nevét, változatait, árát és leírását jeleníti meg rendezett dobozban. Étlaphoz, szolgáltatáslistához vagy árjegyzékhez jó. A widget a Pro változatban érhető el; az ingyenes bővítményben nincs benne.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Pricing List** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében keresd az **Árlista** widgetet, és húzd az oldalra. Egy widget egy tételt jelenít meg; több tételhez több widgetet tegyél egymás mellé vagy alá.

## A stílus kiválasztása

![Az Árlista widget panelje](./kepek/dobozok-gombok-1-arlista-panel.webp)

*Az Árlista widget panelje* (https://minta-bolt.hu/wp-admin/post.php?post=79&action=elementor)

Az **Elrendezés** szakasz **Stílus** választójában három lehetőség van:

| Stílus | Megjelenés |
| --- | --- |
| **Modern** (alap) | Egy doboz: a címkék, a cím, a leírás és az ár egymás alatt. |
| **Egyszerű** | A doboz előlapján a címkék, a cím és az ár látszik; a leírás a hátoldalon van, és rámutatáskor a doboz átfordul, hogy megmutassa. Érintőképernyőn koppintásra működik. |
| **Klasszikus** | Statikus elrendezés: bal oldalon kép vagy Lottie-animáció, mellette a cím, az ár és a leírás. Nincs átfordulás. |

![A Modern stílusú árlistatétel](./kepek/dobozok-gombok-1-arlista-modern.webp)

*A Modern stílusú árlistatétel* (https://minta-bolt.hu/tp-arlista-modern/)

A **Modern** stílusban a címkék (itt a méretek), a cím, a leírás és az ár külön sorban állnak.

## A Tartalom szakasz

| Beállítás | Mit csinál |
| --- | --- |
| **Cím** | A tétel neve. |
| **Címke** | A tétel változatai vagy méretei egyetlen mezőben, a `|` jellel elválasztva, például `Kicsi | Közepes | Nagy`. |
| **Ár** | A kiírt ár szövegként, így a pénznemet és a formátumot te adod meg (például `1 990 Ft`). |
| **Leírás** | A tétel leírása szerkesztővel. |

## Egyszerű stílus: átfordulás rámutatáskor

![Az Egyszerű stílusú árlistatétel előlapja](./kepek/dobozok-gombok-1-arlista-egyszeru.webp)

*Az Egyszerű stílusú árlistatétel előlapja* (https://minta-bolt.hu/tp-arlista-egyszeru/)

Az **Egyszerű** stílus előlapján a címkék, a cím és az ár látszik. Ha az egérrel a dobozra mutatsz, az előlap elfordul, és a hátoldalon a **Leírás** szövege jelenik meg. A leírás tehát csak rámutatáskor (érintőképernyőn koppintásra) látszik, nem az előlappal együtt.

1. Húzd az **Árlista** widgetet az oldalra.
2. A **Stílus** választóban válaszd az **Egyszerű** lehetőséget.
3. Add meg a **Címet**, a **Címkét** és az **Árat**: ezek az előlapon jelennek meg.
4. Írd meg a **Leírást**: ez a hátoldalon lesz.

## Klasszikus stílus: étlap képpel

Étlaphoz a **Klasszikus** stílus való, mert minden tétel mellé képet tehetsz.

![A Klasszikus stílusú árlistatétel képpel](./kepek/dobozok-gombok-1-arlista-klasszikus.webp)

*A Klasszikus stílusú árlistatétel képpel* (https://minta-bolt.hu/tp-arlista-klasszikus/)

A képen a tétel bal oldalán a kép helye (itt a helyőrző kép), mellette a cím, a változatok, a leírás és jobbra az ár látszik.

1. A **Stílus** választóban válaszd a **Klasszikus** lehetőséget.
2. Töltsd ki a **Címet**, a **Címkét**, az **Árat** és a **Leírást**.
3. A **Kép** szakaszban az **Ikon típusa** mezőben hagyd a **Kép** értéket, és válaszd ki az étel fotóját.
4. Ismételd meg a widgetet minden étlaptételhez.

### A Kép szakasz beállításai

![Az Árlista widget Kép szakasza](./kepek/dobozok-gombok-1-arlista-panel-kep.webp)

*Az Árlista widget Kép szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=79&action=elementor)

A **Kép** szakasz csak a **Klasszikus** stílusnál jelenik meg.

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon típusa** | **Kép** vagy **Lottie**. Alapérték: **Kép**. |
| **Kép** | A feltöltött vagy kiválasztott kép (**Kép** típusnál). |
| **Jobb oldali térköz** | A távolság a kép és a szöveg között pixelben; eszközönként állítható. |
| **Képfelbontás**, **Kép méretei** | Az Elementor szokásos képméret-választója. |
| **Kép alakja** | A kép alakja: nincs, lekerekített vagy kör. |
| **Lottie URL** | A Lottie-animáció címe (**Lottie** típusnál). |

## Lottie-animáció a statikus kép helyett

A **Klasszikus** stílusban a kép helyett animált Lottie-fájlt is használhatsz.

1. Szerezz egy Lottie JSON-fájlt, amely nyilvános webcímen elérhető (például a LottieFiles oldaláról).
2. Az **Árlista** widgetben a **Stílus** legyen **Klasszikus**.
3. A **Kép** szakaszban az **Ikon típusa** mezőt állítsd **Lottie**-ra.
4. A megjelenő **Lottie URL** mezőbe másold be a JSON-fájl webcímét.

A Lottie-fájlnak nyilvános címen kell lennie: a widgetben nincs fájlválasztó a Lottie-fájlokhoz.

## Egyéb opció

Az **Egyéb opció** szakasz a **Klasszikus** stílusnál nem jelenik meg. A **Doboz igazítása** mező a másik két stílusnál más-más lehetőségeket kínál:

| Stílus | Lehetőségek | Alapérték |
| --- | --- | --- |
| **Modern** | **Bal**, **Középre**, **Jobb** | Bal |
| **Egyszerű** | **Bal felső**, **Jobb felső**, **Bal alsó**, **Lent jobbra** | Bal alsó |

## Stílus fül

A **Stílus** fül külön szakaszokban formázza a címet, az elválasztóvonalat, a címkét, az árat, a leírást, a képet, a hátteret (az előlapét és a hátoldalét külön) és a Lottie-animációt. A színek, a térközök, a szegélyek és a lekerekítések a szokásos Elementor-mezőkkel állíthatók.