# Haladó gombok widget: CTA és letöltési gomb

> A Haladó gombok widget két típusa: cselekvésre hívó gomb és egy kattintásos letöltési gomb, a stílusok és a letöltött fájl neve.

A **Haladó gombok** (angolul Advanced Buttons) widget kész, animált stílusú gombot tesz az oldalra. Két típusa van: a **CTA gomb** egy hivatkozás (például „Tovább a bolthoz”), a **Letöltési gomb** pedig egy kattintással letölt egy fájlt, oldalváltás nélkül.

Használat előtt kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Advanced Buttons** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a panelen a **Haladó gombok** nevet keresd. Az Elementor ingyenes változata is elég hozzá.

## A gomb beállítása

![A Haladó gombok widget panelje letöltési gomb típussal](./kepek/dobozok-gombok-2-letoltes-panel.webp)

*A Haladó gombok widget panelje letöltési gomb típussal* (https://minta-bolt.hu/wp-admin/post.php?post=86&action=elementor)

A képen a **Gomb típusa** már **Letöltési gomb** értékre van állítva, ezért megjelent a **Letöltendő fájl neve** mező is.

1. Húzd a **Haladó gombok** widgetet az oldalra.
2. A **Gomb típusa** listában válaszd a **CTA gomb** vagy a **Letöltési gomb** lehetőséget (alapérték: CTA gomb).
3. A **Stílus** listában válassz egy stílust. A két típushoz külön stílusok tartoznak: a CTA gombhoz **Stílus 1** … **Stílus 14**, a letöltési gombhoz **Stílus 1** … **Stílus 5**. A **Gomb típusa** váltásakor a stílusválasztás is visszaáll, mert más-más lista tartozik hozzá.
4. A **Gomb szövege** mezőbe írd a feliratot (alapérték: Read More).
5. A **Link** mezőbe írd a célcímet, letöltési gombnál a letöltendő fájl címét (feltöltheted a médiatárba, vagy URL-lel is megadhatod).
6. Frissítsd az oldalt.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Gomb típusa** | A widget CTA hivatkozás vagy letöltési gomb. | CTA gomb |
| **Stílus** | A gomb előre elkészített, animált kinézete. | Stílus 1 |
| **Gomb szövege** | A gombon látható felirat. | Read More |
| **Link** | A gomb célcíme, letöltésnél a fájl címe. | # |
| **Letöltendő fájl neve** | Csak letöltési gombnál: ezen a néven menti el a böngésző a fájlt. | download |

![A kész CTA gomb a nyilvános oldalon](./kepek/dobozok-gombok-2-cta-gomb.webp)

*A kész CTA gomb a nyilvános oldalon* (https://minta-bolt.hu/tp-cta-gomb/)

A kép a **CTA gomb** típus alapértelmezett stílusát mutatja a megadott felirattal.

## Letöltési gomb

![A kész letöltési gomb a nyilvános oldalon](./kepek/dobozok-gombok-2-letoltes-gomb.webp)

*A kész letöltési gomb a nyilvános oldalon* (https://minta-bolt.hu/tp-letoltes/)

A képen a **Letöltési gomb** típus **Stílus 1** kinézete látszik: a felirat mellett letöltés ikon áll.

A gomb a saját JavaScriptjével működik: kattintásra létrehoz egy rejtett hivatkozást a megadott fájllal és fájlnévvel, és „megnyomja”. Így a böngésző azonnal letölti a fájlt, és az oldal nem navigál el. A **Stílus 1** a kattintás pillanatában a „letöltve” állapotot jelző osztályt kapja, és 5 másodperc múlva leveszi.

Néhány stílus a letöltés közben szöveget is vált. A **Loading Text** (a letöltés alatt látható szöveg, alapérték: downloading...) és a **Success Text** (a kész állapot szövege, alapérték: done!) mező csak a **Stílus 5** kiválasztása után jelenik meg a panelen. Az alapértelmezett **Stílus 1** nem váltogat szöveget, ezért ott ezeket a mezőket hiába keresnéd. Ha szövegcserét szeretnél, válaszd a **Stílus 5** stílust.

Más stílusoknál további szövegmezők nyílnak:

| Stílus | Mező | Alapérték |
| --- | --- | --- |
| Letöltési gomb, **Stílus 3** | **Extra Text** | Theplus |
| CTA gomb, **Stílus 6**, **Stílus 9** és **Stílus 13** | **Extra Text 1** és **Extra Text 2** | Theplus |

### Korlátozások

- Letöltésnél a fájlt a widget JavaScriptje indítja el, ezért kikapcsolt JavaScriptnél a gomb nem tölt le semmit.

## Hibaelhárítás

| Jelenség | Ok és megoldás |
| --- | --- |
| A **Loading Text** és a **Success Text** mező nem látszik, vagy a szöveg nem változik. | Az alapértelmezett **Stílus 1** nem használja őket. Válaszd a **Stílus 5** stílust. |
| A CTA gomb nem animálódik rámutatáskor. | Ellenőrizd a közzétett oldalon, ne a szerkesztő előnézetében: egyes animációk csak valódi egérmozgásra indulnak. |
| Nem találod a **Letöltendő fájl neve** mezőt. | A mező csak akkor látszik, ha a **Gomb típusa** **Letöltési gomb**. |