# Ártáblázat

> Az Ártáblázat widget beállításai, a sorrend módosítása és a fejléc színátmenetes háttere.

Az **Ártáblázat** widget az ártáblázat egyetlen oszlopát hozza létre: fejlécet, árat, funkciólistát és műveletgombot. Egy oszlopot érdemes egyszer megformázni, majd annyiszor megkettőzni, ahány csomagot mutatsz.

## A widget felvétele

1. Nyisd meg az oldalt az Elementorral.
2. Adj hozzá új szakaszt a kívánt oszlopszámmal.
3. Keresd meg az **Ártáblázat** widgetet, és húzd egy oszlopba.

A widget alapból minden szükséges elemet tartalmaz. A **Tartalom** fülön hét szakasz van: **Általános**, **Ár**, **Funkciók**, **Műveletgomb**, **Eszköztippek**, **Összecsukás beállításai** és **Összecsukó gomb**. Az utóbbi kettő csak akkor látszik, ha az összecsukást bekapcsolod.

## Általános

![Az Ártáblázat widget Általános szakasza](./kepek/tartalom-widgetek-artablazat-altalanos.webp)

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

A képen az **Általános** szakasz látszik, a Cím és az Alcím kitöltve.

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon** | Ikon a könyvtárból, vagy saját SVG-fájl. Használhatod a fejléc díszítésére, vagy a cím helyett is. |
| **Ikon pozíciója** | Az ikon a fejlécen belül vagy kívül jelenik meg. Belül a címmel egy sort alkot, kívül külön sorként kezeli a widget. |
| **Cím** | A csomag neve. |
| **Cím HTML-címkéje** | A cím HTML-címkéje (alapérték: H2). |
| **Alcím** | Rövid magyarázat a címhez. |
| **Alcím HTML-címkéje** | Az alcím HTML-címkéje (alapérték: H4). |
| **Kiemelt?** | Kiemeli az oszlopot. Bekapcsolás után kiválaszthatod a kiemelés jelvényét (ikonkönyvtárból vagy SVG-fájlból) és a pontos helyét. |

## Ár

![Az Ár szakasz mezői](./kepek/tartalom-widgetek-artablazat-ar.webp)

*Az Ár szakasz mezői* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Ár előtagja** | Az ár elé kerülő szöveg, általában a pénznem jele. |
| **Ár értéke** | Maga az összeg. |
| **Ár utótagja** | Az ár után álló kiegészítés, például „Ft / hó”. |
| **Ár leírása** | Hosszabb magyarázat az árhoz. |

## Funkciók

![A Funkciók szakasz egy kibontott tétellel](./kepek/tartalom-widgetek-artablazat-funkciok-tetel.webp)

*A Funkciók szakasz egy kibontott tétellel* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

Itt adod meg a csomag funkcióit. A tételek száma oszloponként eltérhet. Egy tétel mezői:

- **Szöveg**: a funkció neve. Ha törlöd, csak az ikon marad meg.
- **Benne van?**: **Felvéve** vagy **Kizárva**, vagyis melyik ikon jelenjen meg a funkció mellett.
- **Eszköztipp**: a funkciót magyarázó felugró szöveg.

A lista alatt két ikont választhatsz: **A benne foglalt tételek felsorolásának ikonja** és **A kizárt tételek felsorolásának ikonja**. Ha a funkciók külön vannak felsorolva, elég csak az ikonokat meghagyni.

## Műveletgomb

![A Műveletgomb szakasz beállításai](./kepek/tartalom-widgetek-artablazat-muveletgomb.webp)

*A Műveletgomb szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Szöveg a műveletgomb előtt** | Bevezető szöveg a gomb fölött. |
| **Gomb szövege** | A gombra írt felirat. |
| **Gomb URL-je** | Az oldal, ahová a gomb vezet. |
| **Megnyitás új ablakban** | A cél új ablakban nyílik meg. |
| **Nofollow hozzáadása** | A hivatkozás „nofollow” jelölést kap. |
| **Ikon hozzáadása** | Bekapcsolás után ikont és az ikon helyét is választhatod. |
| **Szöveg a műveletgomb után** | Szöveg a gomb alatt. |

## Eszköztippek

![Az Eszköztippek szakasz beállításai](./kepek/tartalom-widgetek-artablazat-eszkoztippek.webp)

*Az Eszköztippek szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

Az eszköztippek azok a felugró szövegek, amelyeket a funkciók tételeinél adtál meg. Megjelenésüket itt állítod be.

| Beállítás | Mit csinál |
| --- | --- |
| **Elhelyezés** | Hol jelenjen meg a tipp: felül, jobbra, balra vagy alul. |
| **Eseményindító** | Mikor jelenjen meg: amikor az egérmutató a funkció fölé ér, vagy kattintásra. |
| **Animáció** | Hat megjelenési animáció közül választhatsz. |
| **Nyíl használata** | A tipp nyilat kap, amely a funkcióra mutat. Bekapcsolás után a nyíl típusa és mérete is állítható. |
| **Animation Delay** | Mennyi idő teljen el az eseményindító és a tipp megjelenése között. |
| **Appearance Duration** | A megjelenés hossza. Minél nagyobb, annál lassabban jelenik meg a tipp. |
| **Disappearance Duration** | Az eltűnés hossza, ugyanígy működik. |
| **Távolság** | A funkció és a tipp közötti távolság. |

## Összecsukás

![Az Összecsukás beállításai szakasz](./kepek/tartalom-widgetek-artablazat-osszecsukas.webp)

*Az Összecsukás beállításai szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

Hosszú funkciólistát összecsukhatsz, hogy az oszlop rövidebb legyen. Az **Összecsukás bekapcsolva** kapcsoló megjeleníti a további beállításokat és az **Összecsukó gomb** szakaszt is.

- **Látható elemek száma**: hány funkció látszik összecsukott állapotban.
- **Időtartam**: a kibontás és az összecsukás sebessége. Minél nagyobb, annál lassabb.
- **Easing**: az animáció típusa, kilenc közül választhatsz.

A **Kibontás** és az **Összecsukás** fül külön tárolja a két állapot beállításait.

![Az Összecsukó gomb szakasz](./kepek/tartalom-widgetek-artablazat-osszecsuko-gomb.webp)

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

Az **Összecsukó gomb** szakaszban megadhatod a gomb **Igazítás**át, az **Ikon pozíciója** beállítást, az ikont és a gomb szövegét. Ezeket a **Kibontás** és az **Összecsukás** állapothoz külön lehet állítani.

Ha végeztél a tartalommal, a **Stílus** fülön alakítsd ki a megjelenést, végül kattints a **Közzététel** vagy a **Frissítés** gombra.

## Az elemek sorrendjének módosítása

Az ártáblázat elemei: cím, alcím, funkciók és műveletgomb (és külön sorként az ikon, ha a fejlécen kívülre tetted). A sorrendjüket átrendezheted:

1. Jelöld ki az Ártáblázat widgetet.
2. Nyisd meg a **Stílus** fület, és a **Táblázat** szakaszt.
3. Görgess a szakasz aljára, a **Sorrend** blokkhoz. Itt minden elem mellett egy szám mező van.
4. Írj be sorszámot az elemekhez. Az elemek ennek megfelelően, 1-től 4 vagy 5-ig rendeződnek.

## Színátmenetes háttér a fejlécnek

A fejléc háttere alapból nem tud színátmenetet, ezt egy CSS-szabállyal érheted el. A szabály a fejléc blokkra vonatkozik (`.pricing-table__heading`).

**Minden Elementor-változatban:** a WordPress **Megjelenés → Testreszabás → További CSS** részébe másold be az egyik szabályt.

Lineáris színátmenet:

```css
.pricing-table__heading {
  background-image: linear-gradient(180deg, #000 0%, #f2295b 100%);
}
```

Sugaras színátmenet:

```css
.pricing-table__heading {
  background-image: radial-gradient(at center center, #000 0%, #f2295b 100%);
}
```

**Elementor Pro esetén** a CSS-t magában a widgetben is megadhatod: a widget **Haladó** fülén az **Egyedi CSS** szakaszba írd, és a szabály elé tedd a `selector` helyettesítőt:

```css
selector .pricing-table__heading {
  background-image: linear-gradient(180deg, #000 0%, #f2295b 100%);
}
```

Sugaras színátmenethez ugyanígy a `radial-gradient(...)` értéket használd. A színeket (`#000`, `#f2295b`) cseréld a saját színeidre. Mentsd az oldalt a **Frissítés** gombbal, és nézd meg a fejlécet az oldalon.