# Gombok, felhívások, díjtábla és diagramok

> A gomb, a cselekvésre ösztönző blokk, a hover box, a díjtábla, a folyamatjelző sáv és a diagramok beállításai.

Ezeknek az elemeknek is van **Elem ID**, **Extra osztálynév** és **Design options** füle (szegély, háttér, **CSS animation**).

## Gomb

Gomb sokféle színnel és stílussal. A stílus lehet modern, klasszikus, lapos, körvonalas, 3D, egyéni vagy egyéni körvonalas.

![A gomb szerkesztőablaka](./kepek/szerkesztes-elem-gomb.webp)

*A gomb szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Szöveg** | A gombon megjelenő felirat. |
| **URL** | A gomb hivatkozása. |
| **Forma** | A gomb alakja (például **Lekerekített**). |
| **Igazítás** | A gomb helye az oszlopban. |
| **Méret** | **XS**, **S**, **M** vagy **L**. |
| **Stílus** | A gomb kinézete. |
| **Szín** | Kész szín. Csak akkor jelenik meg, ha a stílus nem **Egyéni**. |
| **Háttér**, **Szöveg**, **Szegély** | A gomb színei. Egyéni stílusnál színválasztóval adod meg őket. |
| **Rámutatáskor megjelenő háttér**, **Rámutatáskor megjelenő szöveg**, **Hover border** | A színek rámutatáskor. |
| **Full width** | A gomb az oszlop teljes szélességét kitölti. Nem érhető el, ha az igazítás **Inline**. |
| **Onclick action** | Beágyazott JavaScript-kód futtatása kattintáskor. |
| **Ikon** | Ikon a gombon az ikonkönyvtárból, az ikon igazításával (külön **Ikon** fül jelenik meg). |

## Call to action

Cselekvésre ösztönző blokk címsorral, szöveggel, gombbal és ikonnal.

![A cselekvésre ösztönző blokk szerkesztőablaka](./kepek/szerkesztes-elem-cta.webp)

*A cselekvésre ösztönző blokk szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Címsor**, **Alcím** | A címsor és az alcím szövege. A **Use custom font** kapcsolóval egyedi betűkészletet adhatsz mindegyiknek (külön fül jelenik meg). |
| **Szöveg igazítása** | A szöveg igazítása a blokkon belül. |
| **Tartalom** | A blokk szövege a vizuális szerkesztővel. |
| **Forma**, **Stílus** | A blokk alakja és kinézete. |
| **Szín** | Kész szín, ha a stílus nem **Egyéni**. Egyéni stílusnál a háttér és a szöveg színe színválasztóval adható meg. |
| **Title color** | A cím színe. |
| **Szélesség** | A blokk szélessége százalékban. |
| **Gomb hozzáadása** | Gombot ad a blokkhoz (a pozíció, igazítás, stílus és szín állítható). |
| **Add icon** | Ikont ad a blokkhoz (a pozíció, igazítás, háttér és szín állítható). |

## Hover box

Interaktív doboz képpel és szöveggel, amely rámutatáskor megváltozik.

![A hover box szerkesztőablaka](./kepek/szerkesztes-elem-hover-box.webp)

*A hover box szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

Az **Általános** fül beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Kép** | A doboz képe a médiatárból. |
| **Igazítás** | A doboz helye a szülő konténerben. |
| **Blokkok felcserélése** | Melyik oldal legyen az aktív oldal. |
| **Cím** | Az elsődleges cím szövege. |
| **Forma** | A doboz alakja. |
| **Use custom font** | Egyedi betűkészlet a címhez. |
| **Szélesség** | A doboz szélessége a szülő konténer százalékában. |
| **Title alignment** | A cím igazítása. |

A **Rámutatás** fülön a rámutatáskor megjelenő oldal beállításai vannak:

| Beállítás | Mit csinál |
|---|---|
| **Rámutatáskor megjelenő cím** | A rámutatáskor megjelenő címsor. A **Use custom font** és a **Rámutatáskor megjelenő cím igazítása** a betűkészletet és az igazítást adja meg. |
| **Hover content** | A rámutatáskor megjelenő bekezdés szövege. |
| **Háttérszín** | A rámutatáskor megjelenő oldal háttérszíne (egyedi színt színválasztóval adhatsz meg). |
| **Gomb hozzáadása** | Gomb a rámutatáskor megjelenő oldal alján. |

## Pricing table

Díjcsomagot bemutató táblázat.

![A díjtábla szerkesztőablaka](./kepek/szerkesztes-elem-dijtabla.webp)

*A díjtábla szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Címsor**, **Alcím** | A csomag neve és alcíme (egyedi betűkészlettel is). |
| **Ár**, **Pénznem**, **Időszak** | A csomag ára, a pénznem jele és az időszak (például havi). |
| **Leírás** | A csomag leírása, jellemzően felsorolással. |
| **Jelölők színe** | A lista jelölőinek egyedi színe. |
| **Gomb hozzáadása** | Gombot ad a táblához. A gomb fülén a **Szöveg**, **URL**, **Forma**, **Igazítás**, **Méret**, **Stílus** és a színek, a **Full width**, az **Onclick action** és az **Ikon** állítható, ugyanúgy, mint a gomb elemnél. |

## Progress bar

Folyamatjelző sáv saját értékekkel.

![A folyamatjelző sáv szerkesztőablaka](./kepek/szerkesztes-elem-folyamatjelzo.webp)

*A folyamatjelző sáv szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Értékek** | A sávok listája. Minden sornál megadod a **Címke** (a sáv címe), az **Érték** és a **Szín** (az adott sáv háttérszíne) mezőt. A **+** gombbal új sort adhatsz hozzá. |
| **Egységek** | Mértékegység, például %, px, pont. Az érték és az egység a sáv címéhez kerül. |
| **Háttérszín**, **Szöveg színe** | Az egész sáv színei. |
| **Add shadow** | Árnyék a sávoknak. |
| **Csíkok hozzáadása** | Csíkokat tesz a sávokra. Bekapcsolva a csíkok animálhatók is. |

## Pie chart

Kördiagram egyetlen értékkel. Beállításai: **Érték** (0 és 100 között), **Címke** (egész szám a címkéhez, üresen az érték jelenik meg), **Egységek** (mértékegység, az érték és az egység a cím mellé kerül) és **Szín** (a diagram színe).

## Round chart

Kör vagy fánk alakú diagram egyedi értékekkel.

![A kördiagram szerkesztőablaka](./kepek/szerkesztes-elem-kordiagram.webp)

*A kördiagram szerkesztőablaka* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

| Beállítás | Mit csinál |
|---|---|
| **Értékek** | A diagramterületek listája: cím, érték és szín. |
| **Dizájn** | A diagram fajtája: **Kördiagram** vagy fánk. |
| **Stílus** | A színstílus. Az **Egyéni** választásával az összes kész színlista színválasztóra változik. |
| **Animáció** | A diagram animációja (például **Cubic**). |
| **Térköz** | A diagramterületek közti hézag. |
| **Körvonal színe** | A hézag és a körvonal színe. Az **Egyéni** értéknél színválasztóval adhatod meg. |
| **Show values on hover** | Rámutatáskor megjeleníti az értékeket. |
| **Show legend** | Jelmagyarázat megjelenítése. Bekapcsolva a **Jelmagyarázat színe** és a **Jelmagyarázat pozíciója** is állítható. |

## Line chart

Vonal- vagy oszlopdiagram egyedi értékekkel. A beállítások hasonlók a körgrafikonéhoz (**Dizájn**, **Stílus**, **Animáció**, **Show legend**, **Show values on hover**), ezen kívül:

| Beállítás | Mit csinál |
|---|---|
| **X-tengely értékei** | Az X tengely értékei pontosvesszővel elválasztva. |
| **Értékek** | Az adatsorok listája: cím, az Y tengely értékei (pontosvesszővel elválasztva) és szín. |