# Hirdetési banner widget: stílusok, rámutatási hatások és gomb

> A Hirdetési banner widget nyolc stílusa, a kép, a cím, az alcím, a rámutatási stílusok, a gomb és a teljes bannerre ható animáció.

A hirdetési banner egy kép, rajta címsorral, egy rövid kiegészítő sorral és gombbal, plusz egy rámutatási hatással, amely jelzi a látogatónak, hogy kattintható. A **Hirdetési banner** widget ezt egyetlen elemben építi fel: kiválasztod az elrendezést, felteszed a képet és a szöveget, bekapcsolod a gombot, és megadod, hogyan reagáljon a banner az egérre.

## Előkészületek

- A widget a Pro kiadás része. Pro kikapcsolva a widget nem jelenik meg a szerkesztőben, és az az oldal, amely már használta, semmit nem mutat a banner helyén.
- Kapcsold be a **The Plus Addons → Widgets** oldalon: keress rá a widget nevére (**Advertisement Banner**), és kapcsold be a kapcsolóját.
- Olyan képet válassz, amelyik fekvő tájolású, mert a cím, az alcím és a gomb a kép tetején áll.

## A banner és a tartalma

1. Húzd a **Hirdetési banner** widgetet az oldalra.
2. A **Hirdetési banner** szakaszban a **Stílusok** alatt válassz elrendezést. Nyolc stílus van, képes csempék; alapból az első van kijelölve. Az **Import Presets** gomb a csempék fölött kész, szerkeszthető dizájnt tölt be.
3. A **Banner képe** mezőbe tedd a képet, és a **Képfelbontás** mezővel válassz méretet (alapérték **Teljes**).
4. A **Cím** mezőbe a főcímet, az **Alcím** mezőbe a kiegészítő sort írd.
5. A **Rámutatási stílusok** mezőben válassz háttérhatást: **Elmosási effektus** (alap), **Egyszerű**, **Függőleges** vagy **Parallax**.

![A Hirdetési banner Tartalom panelje](./kepek/dobozok-gombok-6-banner-panel.webp)

*A Hirdetési banner Tartalom panelje* (https://minta-bolt.hu/wp-admin/post.php?post=132&action=elementor)

A képen a nyolc stílus csempéi, a **Banner képe**, a **Képfelbontás**, a **Cím**, az **Alcím** és a **Rámutatási stílusok** mező látszik.

A **Rámutatási stílusok** mező nem látszik, ha a 8. stílus van kiválasztva: annak saját rámutatási animációja van.

## A gomb

A gomb alapból ki van kapcsolva, amíg be nem kapcsolod, a beállításai rejtve maradnak.

1. Nyisd meg a **Gomb** szakaszt, és kapcsold be a **Gomb** kapcsolót.
2. Válassz a **Gomb stílusa** listából (**Stílus 1** és **22. stílus** között; a gyári a 7. stílus), majd add meg a **Gomb szövege** és a **Gomb hivatkozása** mezőt.
3. A 4., 11. és 14. stílusnál a **Rámutatáskor megjelenő szöveg** mező is megjelenik: ez egy második felirat, amelyet a gomb rámutatási animációja használ.
4. Ha a stílusnak van ikonja, válaszd ki az **Ikonbetűkészlet** mezőben a készletet, majd az ikont, és állítsd be az **Ikon pozíciója**, **Ikon térköze** és **Ikon mérete** értékét. Néhány stílusnál nem látszik minden ikonbeállítás.

![A Gomb szakasz a 4. stílussal](./kepek/dobozok-gombok-6-banner-gomb.webp)

*A Gomb szakasz a 4. stílussal* (https://minta-bolt.hu/wp-admin/post.php?post=132&action=elementor)

A képen a **Gomb stílusa**, a **Gomb szövege**, a **Rámutatáskor megjelenő szöveg**, a **Gomb hivatkozása** és az ikonmezők látszanak.

## Mit látsz az oldalon

![A banner nyugalmi állapotban](./kepek/dobozok-gombok-6-banner.webp)

*A banner nyugalmi állapotban* (https://minta-bolt.hu/tp-d6-banner/)

A képen a banner képe fölött az alcím, a főcím és a gomb látszik.

- **Elmosási effektus**: a háttérkép rámutatáskor elmosódik, a szöveg éles marad.
- **Függőleges**: a háttérkép rámutatáskor nagyít.
- **Egyszerű**: a kép változatlan marad.
- **Parallax**: a banner 3D-ben megbillen, ahogy az egér mozog rajta.

![Ugyanaz a banner rámutatáskor, elmosott háttérrel](./kepek/dobozok-gombok-6-banner-hover.webp)

*Ugyanaz a banner rámutatáskor, elmosott háttérrel* (https://minta-bolt.hu/tp-d6-banner/)

A képen a háttérkép (a fehér kör) elmosódott éleket kap, a szöveg és a gomb éles.

A 8. stílus másképp működik: nyugalmi állapotban csak a cím és az alcím látszik alul, rámutatáskor a szöveg feljebb csúszik, és a gombot tartalmazó sáv becsúszik.

## Stílus fül

A **Stílus** fülön minden vizuális beállítás megvan: **Cím stílusa**, **Alcím stílusa**, **Gomb stílusa** (csak bekapcsolt gombnál), **Animációs beállítások**, **Háttér beállítása** (lekerekítés és háttér, **Normál** és rámutatásos állapotra) és **On Scroll View Animation**.

A teljes banner animálásához nyisd meg az **Animációs beállítások** szakaszt, és válassz egyet a tartalom rámutatási effektusai közül: **Grow** (nagyítás), **Push**, **Bounce In**, **Float**, **Wobble Horizontal**, **Wobble Vertical**, **Float Shadow**, **Grow Shadow** vagy **Shadow Radial**.

Ez az effektus az egész bannerre hat, nem csak a képre: a **Grow** például a képet, a címet, az alcímet és a gombot együtt nagyítja.

## Működés

- A **Rámutatási stílusok** csak a háttérképet mozgatja, a tartalom rámutatási effektusa az egész bannert.
- Az 1. stílusban az alcím a cím fölött jelenik meg, bár a panelen a **Cím** mező van előbb.
- A gomb alapból ki van kapcsolva.

## Korlátok

- A **Hirdetési banner** Pro nélkül nem működik: ha a Pro ki van kapcsolva, a banner eltűnik az oldalról.
- Tiszta oldalon végzett próbán az alapértelmezett gombstílus (7. stílus) ikonja üres négyzetként jelent meg, mert nem töltődött be Font Awesome stíluslap. Az ikon törlése vagy az **Ikonbetűkészlet** váltása nem szüntette meg a négyzetet.

## Hibaelhárítás

| Jelenség | Teendő |
| --- | --- |
| A gomb nyíl helyett üres négyzetet mutat. | Válassz másik **Gomb stílusa** értéket. A próbán az 1. stílus (aláhúzott szöveg) és a 4. stílus (kitöltött tabletta) üres ikondoboz nélkül jelent meg. |
| Nem találom a **Rámutatási stílusok** mezőt. | A 8. stílus van kiválasztva, amely elrejti. Válassz 1. és 7. stílus között, és a mező visszatér. |
| A cím és az alcím felcserélődött. | Az 1. stílus így rendezi őket: az alcím a cím fölé kerül. Cseréld meg a két mező szövegét, vagy válassz másik stílust. |
| A banner hiányzik az éles oldalról. | Ellenőrizd, hogy a Pro aktív, és az **Advertisement Banner** be van kapcsolva a **The Plus Addons → Widgets** oldalon. |