# Gombok, címsorok és bannerek

> A Gomb, a Letöltési gomb, a Címsor, az Animált szöveg és a Banner widget tartalmi és egyéb beállításai.

Ez a fejezet öt egyszerű, de sokat használt widgetet mutat be. Mindegyiket az Elementor elemek paneljén, a **JetElements** csoportban találod, és a **Tartalom**, **Stílus** és **Haladó** fülön állíthatod be (lásd a [Widgetek testreszabása](https://hub.hellowp.io/hu/plugins/jet-elements/testreszabas/) fejezetet). A **Stílus** fülön minden elemnek külön megadhatod a megjelenését.

## Gomb

A **Gomb** widgettel bármilyen tartalom mellé tehetsz feliratos, hivatkozó gombot. Rámutatáskor animáció játszódik le rajta, a hivatkozáshoz pedig attribútumokat is megadhatsz.

1. Nyisd meg az oldalt az Elementorral, és húzd a **Gomb** widgetet a kívánt szakaszba.
2. A **Tartalom** fül **Tartalom** részében add meg a gomb ikonját, a feliratát és a hivatkozását. Az ikont és a feliratot külön állíthatod a **Normál** és a **Rámutatás** állapothoz.
3. A **Beállítások** részben válaszd ki a rámutatási hatást, és döntsd el, legyen-e ikon.
4. A **Stílus** fülön a gomb minden elemét külön formázhatod.
5. Kattints a **Frissítés** (vagy **Közzététel**) gombra, és nézd meg az eredményt.

![A Gomb widget Tartalom része](./kepek/tartalom-widgetek-gomb-tartalom.webp)

*A Gomb widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A képen az állapotválasztó (**Normál** és **Rámutatás**), a **Gomb ikonja**, a **Gomb feliratának szövege** és a **Gomb hivatkozása** mező látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Gomb ikonja** | A gomb ikonja (állapotonként) | üres |
| **Gomb feliratának szövege** | A gombon látszó szöveg (állapotonként) | üres |
| **Gomb hivatkozása** | Az oldal, ahová a gomb vezet | üres |
| **Rámutatási hatás** | A rámutatáskor lejátszódó animáció, amelyben a gomb oldalai váltják egymást | **Áttűnés** |
| **Ikon használata?** | Megjelenjen-e az ikon | **Igen** |
| **Ikon pozíciója** | Az ikon helye a felirathoz képest | **Bal** |

![A Gomb widget Beállítások része](./kepek/tartalom-widgetek-gomb-beallitasok.webp)

*A Gomb widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

Az ikon pozícióját csak akkor tudod megadni, ha az **Ikon használata?** be van kapcsolva.

## Letöltési gomb

A **Letöltési gomb** a WordPress médiatárában lévő fájlt (árlistát, prospektust, adatlapot, bármilyen típust) ajánlja fel letöltésre az oldalon.

Hogy a widget megjelenjen az elemek panelén, kapcsold be a **Crocoblock → JetPlugins Settings → JetElements → Widgets & Extensions** oldalon a **Download Button** kapcsolót. Minél több widgetet kapcsolsz be, annál jobban terhelheti az oldalt, ezért csak a szükségeseket hagyd bekapcsolva.

1. Húzd a **Letöltési gomb** widgetet az oldal kívánt helyére.
2. A **Tartalom** fülön add meg a letöltendő fájl azonosítóját, a gomb szövegét és a többi beállítást.
3. A **Stílus** fülön alakítsd ki a gomb megjelenését.
4. Kattints a **Közzététel** (vagy **Frissítés**) gombra.

![A Letöltési gomb widget Tartalom füle](./kepek/tartalom-widgetek-letoltesi-gomb-tartalom.webp)

*A Letöltési gomb widget Tartalom füle* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Letöltés ID** | A médiatár elemének azonosítója. Dinamikus címkével más fájlforrást is választhatsz. |
| **Letöltési hivatkozás szövege** | A gombon látszó szöveg. |
| **Letöltési hivatkozás alszövege** | Kiegészítő szöveg a gombon. A `%size%` helyőrző a fájl méretét jeleníti meg, ezt a mező magától beírja. |
| **Add Download Name** | Bekapcsolva a gombon a fájl neve is látszik. |
| **Nofollow hozzáadása** | Bekapcsolva a hivatkozás `nofollow` jelölést kap. |
| **Letöltési hivatkozás ikonja** | A gomb ikonja az ikonkönyvtárból, vagy feltöltött SVG-fájlból. |

A **Letöltés ID** alatt a felület arra is figyelmeztet, hogy a meglévő hivatkozás-azonosítókat érdemes alaphelyzetbe állítani, hogy csak az érvényes azonosítók maradjanak eltárolva.

## Címsor

A **Címsor** widget kétrészes címet ad, sokféle betűtípus-beállítással, hagyományos és színátmenetes szövegszínnel, sőt képpel kitöltött szöveggel is.

1. Húzd a **Címsor** widgetet egy új szakaszba.
2. A **Cím tartalma** részben add meg az **Első rész** és a **Második rész** szövegét. Dinamikus címkével sablonban dinamikus tartalmat is megjeleníthetsz.
3. A **Díszítő elemek** részben adj meg az előtt és az után megjelenő díszítést.
4. A **Beállítások** részben válaszd ki a HTML-címkét, az irányt és az igazítást.
5. A **Stílus** fülön alakítsd ki a megjelenést, majd mentsd az oldalt, és nézd meg a weboldalon.

![A Címsor widget Cím tartalma része](./kepek/tartalom-widgetek-cimsor-cim-tartalma.webp)

*A Címsor widget Cím tartalma része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

### Díszítő elemek

Az **Előtte megjelenő dekoráció típusa** és az **Utána megjelenő dekoráció típusa** mezőben választhatsz: **Nincs**, **Ikon** vagy kép. A választás után megjelenik a megfelelő ikon- vagy képválasztó.

![A Címsor widget Díszítő elemek része](./kepek/tartalom-widgetek-cimsor-diszito-elemek.webp)

*A Címsor widget Díszítő elemek része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

### Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **HTML-címke** | A cím címkéje. A H1-H6 fontossági sorrendet jelent (a H1 a legfontosabb), a keresők ez alapján értékelik a címet. A `div`, `span` és `p` címkét akkor használd, ha a szöveget csak formázni akarod, nem címnek szánod. | **H2** |
| **Irány** | **Vízszintes**: a két rész egy sorban van. **Függőleges**: a második rész az első alatt áll. | **Vízszintes** |
| **Igazítás** | A szöveg igazítása. | középre |
| **Részek közötti távolság** | Kikapcsolva a két rész távolság nélkül követi egymást. | **Igen** |
| **Link** | Kattinthatóvá teszi a címet. | üres |

![A Címsor widget Beállítások része](./kepek/tartalom-widgetek-cimsor-beallitasok.webp)

*A Címsor widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

## Animált szöveg

Az **Animált szöveg** widget olyan címet készít, amelynek egy része folyamatosan cserélődik. Három része van: **Szöveg előtt**, **Animált szöveg** és **Szöveg után**. Az első és az utolsó nem változik, az animált részben pedig az elemek egymás után váltják egymást. Annyi animált elemet adhatsz meg, amennyit szeretnél (**Elem hozzáadása**).

A **Tartalom** részben a **Link** és a **HTML-címke** (alapérték: `div`) is megadható. Minden animált elemnél a **Szöveg** mellett a **Szövegirány** is választható (alapérték: **LTR**).

![Az Animált szöveg widget Tartalom része](./kepek/tartalom-widgetek-animalt-szoveg-tartalom.webp)

*Az Animált szöveg widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A **Beállítások** részben:

| Beállítás | Mit csinál |
| --- | --- |
| **Animációs hatás** | Az animáció típusa, tizenkét hatás közül (az alapérték **Vicc**; a lista között gépelés-hatás is van). |
| **Animáció késleltetése** | A két animált elem közti idő ezredmásodpercben (alapérték: 3000). |
| **Felosztási típus** | Hogyan bontja részekre a szöveget az animáció (alapérték: **Szimbólumok**). |
| **Igazítás** | Az animált szöveg elhelyezése. |

![Egy animált elem beállításai](./kepek/tartalom-widgetek-animalt-szoveg-tartalom-tetel.webp)

*Egy animált elem beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A lenyitott elemnél a **Szöveg** és a **Szövegirány** mező látszik.

![Az Animált szöveg widget Beállítások része](./kepek/tartalom-widgetek-animalt-szoveg-beallitasok.webp)

*Az Animált szöveg widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A **Stílus** fülön a cím minden része külön formázható.

## Banner

A **Banner** widget háttérképre ír címet és leírást, és az egész mező hivatkozhat egy oldalra. Rámutatáskor animáció játszódik le rajta.

1. A widgetek közül húzd a **Banner** elemet a kívánt helyre.
2. A **Tartalom** részben töltsd ki a mezőket.
3. A **Beállítások** részben válaszd ki az **Animációs hatás** értékét.
4. A **Stílus** fülön alakítsd ki a megjelenést.

![A Banner widget Tartalom része](./kepek/tartalom-widgetek-banner-tartalom.webp)

*A Banner widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Kép** | A háttérkép a médiatárból. |
| **Képméret** | A kép mérete. |
| **Cím** | A képen megjelenő cím. |
| **Cím HTML-címkéje** | A cím címkéje, H2-től H6-ig (alapértelmezés: **H5**). |
| **Leírás** | A képen megjelenő magyarázat vagy figyelmeztetés. |
| **Link** | Az oldal, ahová a banner vezet, az új ablakban nyitás kapcsolójával. |

![A Banner widget Beállítások része](./kepek/tartalom-widgetek-banner-beallitasok.webp)

*A Banner widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

Az **Animációs hatás** a rámutatáskor lejátszódó animáció, többféle közül választhatsz.