# Diavetítés (Slider)

> Képes diavetítés készítése a Diavetítés widgettel: diák, gombok, navigáció, lejátszás, bélyegképek és dinamikus adatok.

A **Diavetítés** widget akkor hasznos, ha le akarod kötni a látogatók figyelmét: minden dián lehet kép, cím, alcím, leírás és gomb. Többféle navigáció, animáció és sok stílusbeállítás tartozik hozzá.

## Követelmények

- Elementor (az ingyenes változat is elég).
- A JetElements bővítmény aktív.

## A widget hozzáadása

1. Az **Oldalak** menüben keresd meg azt az oldalt, ahová a diavetítést szánod (újat az **Új oldal** gombbal vehetsz fel).
2. Szerkeszd az Elementorral, keresd meg a **Diavetítés** widgetet, és húzd egy új szakaszba.
3. Kattints a widgetre, hogy kinyíljon a **Tételek** szakasz.

## Tételek

Ha a JetEngine is aktív, a szakasz tetején ott a **JetEngine lekérdezés használata** kapcsoló: a Query Builderben létrehozott lekérdezés találatai lesznek a diák. Alapból három dia van; az **Elem hozzáadása** gombbal újakat vehetsz fel, a feleslegeseket törölheted.

![A Tételek szakasz a három alapértelmezett diával](./kepek/medialis-widgetek-diavetites-1.webp)

*A Tételek szakasz a három alapértelmezett diával* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

Egy dia kinyitva az alábbi mezőket mutatja:

![Egy dia mezői: kép, tartalomtípus, ikon, cím, alcím, leírás](./kepek/medialis-widgetek-diavetites-tetel.webp)

*Egy dia mezői: kép, tartalomtípus, ikon, cím, alcím, leírás* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Mező | Mit csinál |
| --- | --- |
| Kép | A dia háttérképe. |
| Tartalomtípus | **Alapértelmezett**: az elrendezést és a stílust te állítod. A másik lehetőség kész sablon használata. |
| Ikon | A cím fölött megjelenő ikon; az ikonkönyvtárból választhatod, vagy saját SVG-t tölthetsz fel. |
| Cím, Cím HTML-címkéje | A dia címe és a HTML-címkéje (mérete, fontossága). |
| Alcím, Alcím HTML-címkéje | Az alcím és a HTML-címkéje. |
| Leírás | A dia leírása. |
| Use Custom Alignments | Alapból ki van kapcsolva. Bekapcsolva a dia elemeinek egyenként állíthatod az igazítását. |
| Link on whole slide | Alapból ki van kapcsolva. Bekapcsolva az egész dia kattintható, és a **Slide Link** mezőben megadott címre visz. |
| Elsődleges gomb URL-je | Az első gomb hivatkozása. A **Link megnyitása új ablakban** az új lapon nyitást, a **Nofollow hozzáadása** a `nofollow` attribútumot kapcsolja be (mindkettő alapból ki van kapcsolva). |
| Elsődleges gomb szövege | Az első gomb felirata. |
| Másodlagos gomb URL-je, Másodlagos gomb szövege | Egy dián két gomb is lehet; a másodiknál is kérhető az új ablakban nyitás és a `nofollow`. |
| Slide CSS ID | CSS-azonosító az adott diához. |

## Beállítások

A **Tartalom → Beállítások** szakasz sok beállítást tartalmaz.

![A Diavetítés Beállítások szakaszának eleje](./kepek/medialis-widgetek-diavetites-2.webp)

*A Diavetítés Beállítások szakaszának eleje* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Slider CSS ID | Az egész diavetítés CSS-azonosítója. | üres |
| Diavetítés szélessége(%) | Minden diára érvényes szélesség, a diavetítés blokkjának százalékában. | 100 |
| Diavetítés magassága(px) | Minden diára érvényes magasság; mértékegysége a képpont (`px`) vagy a böngészőablak magasságának százaléka (`vh`). | 600 px |
| Dynamic Slide Height for Templates | Bekapcsolva a dia magassága a sablonos diák tartalmához igazodik. | ki |
| Diavetítés konténerének szélessége(%) | A konténer szélessége, amelyben a képre kerülő szöveg áll; a diavetítés szélességének százalékában vagy képpontban adható meg. | 100 |
| Képfelbontás | A háttérkép felbontása. | Large |
| Képméretezési mód | **Kitöltés** (cover): a kép a dia magasságához igazodik. **Beillesztés** (contain): a kép a dia szélességéhez igazodik, megtartva az arányát. | Kitöltés |
| Lazy Load Images | A diavetítés görgetéskor töltődik be, nem az oldal megnyitásakor. | be |
| Tartalom mozgási effektusa | A tartalom megjelenési iránya: fel, le, balra vagy jobbra. | Fel |
| Navigáció használata? | A látogató nyilakkal léptethet. | be |
| Fade arrows on hover | A nyilak csak egérrel fölé érve látszanak. | ki |
| Nyílikon | A nyíl alakja: ikonkönyvtárból vagy feltöltött SVG-ből. | |
| Lapozás használata? | Pontsor jelenik meg a diák alatt. | ki |
| Use Fraction pagination? | Törtjelzés („1 / 7”) a diavetítés alatt: az aktuális dia és az összes dia száma. Bekapcsolva beállítható az előtag, az utótag és az elválasztó. | ki |
| Automatikus lejátszás használata? | A diák maguktól váltanak; az **Automatikus lejátszás késleltetése(ms)** mezőben adhatod meg a ritmust. | be |
| Automatikus lejátszás rámutatáskor | Mi történjen, ha az egérmutató a diavetítés fölé ér: **None** (semmi), **Pause** (szünet) vagy **Stop** (leáll). | |
| Teljes képernyős gomb megjelenítése? | A diavetítés jobb felső sarkában teljes képernyős gomb jelenik meg; az ikonja választható (**Teljes képernyős ikon**). | be |
| Touch Swipe Effect | A diák ujjal vagy egérrel húzva is váltanak. | be |
| Jelzi, hogy a diák véletlenszerű sorrendben jelennek-e meg | A diák véletlen sorrendben jelennek meg. | ki |
| Jelzi, hogy a diák ismétlődnek-e | A diák megállás nélkül ismétlődnek. | be |
| Áttűnés használata? | A diák váltáskor áttűnéssel cserélődnek. | ki |
| Diák közötti távolság | A diák közti rés váltáskor. | |
| Dia időtartama (ms) | Milyen gyorsan váltanak a diák. | |
| Bélyegképek megjelenítése? | A diák alatt kis bélyegképek látszanak; a **Bélyegkép szélessége (px)** és **Bélyegkép magassága (px)** mezőkkel méretezheted őket. | be |
| Képfelbontás (bélyegképek) | A bélyegképek felbontása. | |

## Dinamikus beállítások

Ha a JetPlugins Dynamic Data Addon telepítve és aktív, a **Dinamikus beállítások** szakasz is megjelenik: itt a diák tartalmát dinamikusan töltheted fel. Először az **Enable dynamic data** kapcsolót kell bekapcsolni (alapból ki van kapcsolva); utána az alábbiak állíthatók:

| Beállítás | Mit csinál |
| --- | --- |
| Source | Az adatok forrása: **Post Meta**, **Option** vagy **Taxonomy**. **Option** esetén előbb az opció nevét kell megadni. |
| Repeater field name | Az ismétlőmező (Repeater) neve, amelynek elemeiből a diák tartalma készül. |
| Image | A háttérképhez használt „Média” mező neve. |
| Is image control | Bekapcsolva a kép kattintható hivatkozásként működik. |
| Icon | Az „Iconpicker” mező neve. |
| Title, Subtitle, Description | A cím, az alcím és a leírás mezőinek neve. |
| Primary Button URL, Primary Button Text | Az elsődleges gomb hivatkozásának és feliratának mezője. |
| Secondary Button URL, Secondary Button Text | A másodlagos gomb hivatkozásának és feliratának mezője. |
| Link on whole slide | Az egész diára vonatkozó hivatkozás mezője. |

## Stílus és az eredmény

A **Stílus** fülön a diavetítés megjelenését formázhatod. Ha minden kész, kattints a **Közzététel** gombra, majd nyisd meg az oldalt a nyilvános felületen: a diavetítés megjelenik az oldalon.