Diavetítés (Slider)

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.

https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor

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

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.

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.