Animált szolgáltatásdobozok: képes harmonika, csúszó dobozok, cikkdoboz és információs banner

Ez a fejezet az Animált szolgáltatásdobozok widget négy elrendezését írja le. Az általános beállítások, az elemlista és az oszlopok az áttekintő fejezetben vannak.

Mindegyik elrendezéshez ugyanaz kell:

• A Pro kiadás a widgethez (Pro nélkül a widget meg sem jelenik).
• Bekapcsolt widget a The Plus Addons → Widgets oldalon (Animated Service Boxes).
• A képek a Médiatárban. Minden elemnek saját Kiemelt kép mezője van.

Képes harmonika

A képes harmonika több képet mutat keskeny csíkokban, és a fölé vitt egérnél kinyitja azt, amelyik fölött az egér áll, hogy a képe és a szövege több helyet kapjon. Függőleges és vízszintes irányban is elkészíthető.

1. Szerkeszd az oldalt Elementorral, és húzd rá az Animált szolgáltatásdobozok widgetet.
2. A Tartalom → Animált szolgáltatásdobozok alatt állítsd a Fő stílus értékét Képes harmonika-ra. Megjelenik a Stílus választó két képpel (Stílus 1, Stílus 2), alapból a Stílus 1.
3. A Tájolás legyen Függőleges (az alapérték, egymás mellett álló csíkok) vagy Vízszintes (egymás alá rakott csíkok).
4. Az Aktív dia mondja meg, melyik dia legyen nyitva az oldal betöltésekor. Az első érték az All Equal, utána 1-től 20-ig számok. Az alapérték az 1. Az All Equal esetén egyik dia sem nyitott.
5. Az Aktív dia szélessége (0-15) állítja, mennyire szélesedik ki a nyitott dia. Az alapérték 7,5: a nyitott dia 7,5-szer olyan széles, mint egy zárt. Egy 1120 képpontos sorban ez 884 képpont a 118 mellett. A legkisebb érték 1, lépésköz 0,5.
6. Nyisd meg a listát (három elemmel indul), és minden elemhez add meg a Kiemelt képet, valamint kívánság szerint a Címet, az Alcímet és a Leírást.
7. Ha gombot is szeretnél, kapcsold be a Gomb kapcsolót, válassz Gomb stílusa értéket, és töltsd ki az elemenként a Gomb szövege és Gomb hivatkozása mezőt. A kapcsoló nélkül ez a két mező nem csinál semmit.

https://minta-bolt.hu/tp-asb-accordion/

A képen a harmadik dia van kinyitva, a másik kettő keskeny csík. A kinyílt dia alján a cím, az alcím és a leírás olvasható.

Az Elrendezés szakasz a harmonika Magasságát, a Szöveg igazítása értékét és a szöveg Eltolását adja a diákon belül.

Beállítás	Mit csinál	Alapérték
Aktív dia	Melyik dia nyitott betöltéskor. All Equal: egyik sem.	1
Aktív dia szélessége (0-15)	Hányszor szélesebb a nyitott dia a zártnál. Legalább 1, legfeljebb 15, 0,5-ös lépésekben.	7,5
Tájolás	Függőleges: oldalra nyílik. Vízszintes: lefelé nyílik.	Függőleges

Működés

• A rámutatás átviszi a nyitott állapotot. Alapértékekkel az 1. dia indul nyitva 884 képponttal, a 2. és 3. 118 képpont. A 3. dia fölé víve 118 / 118 / 884 lett, magasságok változatlanul.
• Vízszintes tájolásnál ugyanez a másik tengelyen történik: a három dia 474, 63 és 63 képpont magas volt, a harmadikra víve 63 / 63 / 474.
• Az 1-es szélesség kikapcsolja a harmonikát. Az Aktív dia szélessége (0-15) 1-en mind a három dia 373 képpont, és a rámutatás egyetlen szélességet sem változtat. Csak akkor használd, ha sima, egyenlő rácsot szeretnél.
• Az All Equal zárt indulást jelent: egyik dia sem nyitott, mind 373 képpont.

Korlátok

• Az Aktív dia szélessége (0-15) nem állítható valóban 0-ra: a címke 0-t ír, a mező legkisebb értéke 1. 1-nél minden dia egyforma széles, és a rámutatás nem nyit meg egyet sem.
• A Képes harmonika nem rendelkezik Oszlopok kezelése szakasszal. A soronkénti elemszám az elrendezésből adódik.
• A Kép/ikon kapcsoló itt nem érhető el. A Képes harmonika és a Csúszó dobozok az a két elrendezés, ahol egy elem nem vihet ikont vagy Lottie-t, csak a Kiemelt képet használja.

Hibaelhárítás

• Rámutatásra egyik dia sem nyílik ki: nézd meg az Aktív dia szélessége (0-15) értékét. 1-nél minden dia ugyanolyan széles. Emeld meg, az alapérték 7,5.
• A diák zártan indulnak, pedig egyet nyitottat akartam: az Aktív dia All Equal-on áll. Válassz számot, az 1 az elsőt nyitja.
• Nem találom az Oszlopok kezelése szakaszt: ennek az elrendezésnek nincs. Nincs mit beállítani eszközönként.
• A szöveg rossz helyen van a dián: az Elrendezés szakasz Szöveg igazítása és Eltolás beállítása mozgatja vízszintesen és függőlegesen a dián belül.

Csúszó dobozok

Egy csúszó doboz addig sima kép, amíg valaki rá nem mutat. Ekkor kiszélesedik, a kép félrehúzódik, és mellette becsúszik a szöveg. Egyedi CSS nélkül működik.

1. Szerkeszd az oldalt Elementorral, és húzd rá az Animált szolgáltatásdobozok widgetet.
2. A Fő stílus legyen Csúszó dobozok.
3. Állítsd be az Aktív dia értékét: ez a doboz lesz nyitva betöltéskor. A lehetőségek All Equal, majd 1-től 20-ig a számok, az alapérték 1.
4. Nyisd meg a három elemmel induló listát. Mindegyikhez add meg a Kiemelt képet, a Címet, az Alcímet és a Leírást: ez a három csúszik be.
5. Kívánság szerint kapcsold be a Gomb kapcsolót, válassz Gomb stílusa értéket, és töltsd ki a Gomb szövege és Gomb hivatkozása mezőt. Kapcsoló nélkül a két mező hatástalan.
6. Az Oszlopok kezelése alatt állítsd be az Oszlop táblagépen és Oszlop mobilon értékét, és az Oszlopok közötti térköz értékét, ha a dobozok túl szorosak.

https://minta-bolt.hu/tp-asb-sliding/

A képen a középső doboz van nyitva: a képe oldalra húzódott, mellette látszik a cím, az alcím, a leírás és a gomb.

Az Elrendezés szakaszban a szöveg Eltolását és a doboz Magasságát állíthatod.

Beállítás	Mit csinál	Alapérték
Aktív dia	Melyik doboz nyitott betöltéskor. All Equal: egyik sem.	1
Képfelbontás	A Kiemelt kép betöltési mérete.	Teljes
Gomb / Gomb stílusa	Elemenkénti gomb, három kivitelben.	Elrejtés / Stílus 1
Oszlop táblagépen	Doboz egy sorban táblagépen, 1 és 3 között.	2
Oszlop mobilon	Doboz egy sorban mobilon, 1 és 3 között.	1

Működés

• A nyitott doboz elveszi a helyet a többitől. Betöltéskor a három doboz 525, 263 és 263 képpont széles volt, az 1. nyitva. A 2. fölé víve 253, 505 és 253 lett: a 2. kinyílt, a másik kettő lemondott a szélességből.
• A nyitott doboz képe kissé nagyobbra nő: az aktív kép scale(1.1) méretben áll, és scale(1)-re tér vissza, ha az egér elhagyja.
• A szöveg becsúszik, nem halványul be. A rámutatott doboz címe, alcíme és leírása a kép mellett nyíló panelen jelenik meg, a többi doboz a sajátját rejtve tartja.

Korlátok

• A Csúszó dobozok nem kínál Stílus választót, egyetlen kivitel van. A Képes harmonika, a Cikkdoboz és társaik kivételek.
• Oszlop asztali nézetben beállítás nincs: az asztali sor a dobozokból adódik.
• Az Aktív dia szélessége (0-15) itt nem létezik, az a Képes harmonika mezője. A csúszó doboz kinyílásának mértéke nem állítható.
• Ikon és Lottie nincs: a Kép/ikon kapcsoló rejtett, minden doboz csak a Kiemelt képet használhatja.

Hibaelhárítás

• Rámutatásra semmi sem csúszik: a hatás a közzétett oldalon fut, a szerkesztő előnézetében nem. Mentsd, nyisd meg az éles címet, és előtte ürítsd az oldal gyorsítótárát.
• Nem találom a Stílus legördülőt: a Csúszó dobozok elrendezésnek nincs. Csak a Képes harmonika, a Cikkdoboz, az Információs banner, a Szolgáltatáselem és a Portfólió kínál Stílus választót.
• A Gomb szövege nem érvényesül: kapcsold be a Gomb kapcsolót. Kikapcsolva a Gomb szövege és a Gomb hivatkozása is hatástalan.
• A dobozok szorosak táblagépen: csökkentsd az Oszlop táblagépen értékét 1-re, vagy adj térközt az Oszlopok közötti térköz beállítással.

Cikkdoboz

A cikkdoboz kártya: kép, cím, rövid szöveg és kívánság szerint gomb. Egy sor belőle gyors útmutató néhány oldalhoz. A widget a teljes sort egyetlen elemlistából építi, így minden kártya egyforma alakú, és az egy sorba férő kártyák számát eszközönként egyszer állítod be.

1. Szerkeszd az oldalt Elementorral, és húzd rá az Animált szolgáltatásdobozok widgetet.
2. A Fő stílus legyen Cikkdoboz. Megjelenik a Stílus választó két képpel, alapból a Stílus 1.
3. Ha kell a gomb, kapcsold be a Gomb kapcsolót, és válassz Gomb stílusa értéket (Stílus 1, Stílus 2 vagy Stílus 3).
4. Nyisd meg a listát (három elemmel indul), és minden elemhez add meg a Kiemelt képet, a Címet és a Leírást. Az Alcímet hagyd üresen: ez az elrendezés nem rajzolja ki.
5. Töltsd ki elemenként a Gomb szövege és a Gomb hivatkozása mezőt. Csak bekapcsolt Gomb mellett működnek.
6. Az Oszlopok kezelése alatt állítsd be az Oszlop asztali nézetben, Oszlop táblagépen és Oszlop mobilon értékét. A választható szám a soronkénti kártyák száma, tehát az „4 oszlop” négy kártyát jelent egymás mellett. Az alapértékek: 4, 3 és 2.
7. A kártyák közé az Oszlopok közötti térközt adj meg (px, % vagy em, eszközönként). Alapból üres.

https://minta-bolt.hu/tp-asb-cikk/

A képen három kártya áll egy sorban. A kártyákon a kép és a cím látszik, a középső fölé vitt egérnél pedig megjelenik a Leírás és a Tovább feliratú gomb.

Az alapértékekkel, három elemmel és egy 1200 képpontos oldalon 285 × 255 képpontos kártyák jöttek létre, négy fér egy 1120 képpontos sorba.

Beállítás	Hol	Mit csinál	Alapérték
Stílus	Tartalom → Animált szolgáltatásdobozok	Két kártyakivitel, képekkel: Stílus 1 és Stílus 2.	Stílus 1
Képfelbontás	ugyanott	A Kiemelt kép betöltési mérete.	Teljes
Gomb	ugyanott	Mutatja az elemenkénti gombot. Nélküle a Gomb szövege és a Gomb hivatkozása nem csinál semmit.	Elrejtés
Kép/ikon	ugyanott	Ikont, képet vagy Lottie-t enged a kártyára az elem saját Ikon kiválasztása értéke mellett.	Elrejtés
Oszlop asztali nézetben	Oszlopok kezelése	Kártya egy sorban asztalin, 1 és 6 között.	4
Oszlop táblagépen / Oszlop mobilon	ugyanott	Ugyanez eszközönként.	3 / 2

Működés

• Minden kártya kirajzolja a képet, a címet és a leírást. Az alapértékekkel és három elemmel három egyforma kártyát kaptunk.
• A gomb oda visz, ahová megadtad: bekapcsolt Gomb mellett minden kártyában megjelent egy Read More feliratú gomb az elem Gomb hivatkozása címével.
• Az Alcím kimarad. Mindhárom elemben kitöltöttük, és az oldal kódjában sehol sem jelent meg alcímelem. A szöveget tedd a Leírás mezőbe.

Korlátok

• A Cikkdoboz nem mutatja az Alcímet. A mező minden elemben ott van, kitölthető, de az elrendezés csak a Címet, a Leírást és a gombot rajzolja ki.
• A kártya mérete az oszlopszámot követi, szélességi mező nincs. Szélesebb kártyához csökkentsd az Oszlop asztali nézetben értékét. Kártyánkénti szélesség nincs.

Hibaelhárítás

• Az Alcím sosem jelenik meg: ez az elrendezés sajátja. Tedd a szöveget a Leírás mezőbe, vagy válassz olyan elrendezést, amely mutatja, például a Dekoratív dobozt.
• Hiányzik a gomb: kapcsold be a Gomb kapcsolót a Tartalom → Animált szolgáltatásdobozok alatt. A Gomb szövege kitöltése magában nem elég.
• Túl sok kártya zsúfolódik egy sorba: csökkentsd az Oszlop asztali nézetben értékét. A választható szám a soronkénti kártyák száma: 3 oszlop három kártyát jelent.
• A kártyák összeérnek: állíts be Oszlopok közötti térköz értéket az Oszlopok kezelése alatt, mert alapból üres.

Információs banner

Az információs banner rövid címet mutat, amíg valaki rá nem mutat, aztán megfordul, és a hátoldalán megjeleníti a részleteket. Egy ajánlat, egy adat vagy egy ígéret fér el benne kis helyen.

1. Szerkeszd az oldalt Elementorral, és húzd rá az Animált szolgáltatásdobozok widgetet.
2. A Fő stílus legyen Információs banner, majd válassz Stílus értéket: két kép, Stílus 1 és Stílus 2, az alapérték Stílus 1.
3. Stílus 1 esetén megjelenik a Rámutatás iránya: Felül, Alul, Bal vagy Jobb. Ez az az él, ahonnan a hátoldal bejön. Az alapérték Bal. Stílus 2-nél a vezérlő eltűnik.
4. Kapcsold be a Kép/ikon kapcsolót, ha a banner elején ikon, kép vagy Lottie legyen.
5. Nyisd meg a listát (három elemmel indul). Állítsd be a Címet, és ha bekapcsoltad a kapcsolót, az Ikon kiválasztása értékét: Nincs, Ikon, Kép vagy Lottie.
6. Az Alcím az előlap második sora. A Leírás a hátoldalra kerül, ide írd a rámutatásra megjelenő szöveget.
7. Állítsd be a Kiemelt képet. Ha gombot szeretnél, kapcsold be a Gomb kapcsolót, és töltsd ki a Gomb szövege és a Gomb hivatkozása mezőt.
8. Az Oszlopok kezelése alatt add meg az Oszlop asztali nézetben, Oszlop táblagépen és Oszlop mobilon értékét: a választott szám az egy sorba kerülő bannerek száma.

https://minta-bolt.hu/tp-asb-info/

A képen az első banner van megfordítva és mutatja a leírását, a másik kettőn a cím és az alcím látszik.

Az Elrendezés szakaszban a banner Magasságát és a benne lévő tartalom Szöveg igazítása értékét állíthatod.

Beállítás	Hol	Mit csinál	Alapérték
Stílus	Tartalom → Animált szolgáltatásdobozok	Két bannerkivitel, képekkel.	Stílus 1
Rámutatás iránya	ugyanott	Melyik élről érkezik a hátoldal. Csak Stílus 1-nél látszik.	Bal
Kép/ikon	ugyanott	Elemenként az Ikon kiválasztása főkapcsolója.	Elrejtés
Képfelbontás	ugyanott	A Kiemelt kép betöltési mérete.	Teljes
Oszlop asztali nézetben / Oszlop táblagépen / Oszlop mobilon	Oszlopok kezelése	Bannerek száma soronként.	4 / 3 / 2

Működés

• Az előlap a Címet és az Alcímet hordozza, a hátoldal a Leírást. A widget bannerenként két egymásra rakott blokkot rajzol: az elöl lévő ikont, címet és alcímet, és a hátul lévő leírást.
• A leírás rámutatásig rejtett. Betöltéskor mindhárom leírás átlátszatlansága 0 volt. Az első banner fölé víve az övé 1 lett, a másik kettő 0 maradt.
• Csak a rámutatott banner fordul meg. A többi az előlapját mutatja, így a sor nem fordul meg egyszerre.

Korlátok

• A Rámutatás iránya csak a Stílus 1-hez tartozik. Stílus 2-re váltva a vezérlő eltűnik, az irányt nem lehet kiválasztani.
• Az ikonhoz két kapcsoló kell. Az elem Ikon kiválasztása mezőjében az Ikon választás addig nem csinál semmit, amíg a Kép/ikon nincs bekapcsolva az egész widgeten.
• A mindig látszó szöveget ne a Leírás mezőbe tedd. Az a banner hátoldalán van, és rámutatásig láthatatlan, ezért érintőképernyőn sem olvasható el első pillantásra.

Hibaelhárítás

• Rámutatásra nem történik semmi: nézd meg, hogy az elemeknek van-e Leírásuk. Üres mezővel nincs mit megmutatni a hátoldalon.
• Nem találom a Rámutatás iránya beállítást: Stílus 2 van kiválasztva. Válts vissza Stílus 1-re.
• Nem jelenik meg az ikonom: kapcsold be a Kép/ikon kapcsolót a Tartalom → Animált szolgáltatásdobozok alatt, majd állítsd be az Ikon kiválasztása értékét az elemben.
• A bannerek túl kicsik: csökkentsd az Oszlop asztali nézetben értékét, hogy kevesebb férjen egy sorba, és növeld a Magasság értékét az Elrendezés szakaszban.