Animált szolgáltatásdobozok widget: beállítások áttekintése és a Dekoratív doboz

Az Animált szolgáltatásdobozok egyetlen widget, amely nyolc különböző animált elrendezést rajzol: képes harmonikát, csúszó dobozokat, cikkdobozt, információs bannert, háttérváltót rámutatáskor, dekoratív dobozt, kinyíló szolgáltatásdobozt és portfóliólistát. Egyszer választasz elrendezést, kitöltöd az azonos mezőket, és a widget a hozzá tartozó szerkezetet és animációt adja.

Előkészületek

• A widget a Pro kiadás része. Pro nélkül egyáltalán nem jelenik meg, az ingyenes bővítményben nincs hasonló widget.
• Az Elementor (ingyenes) legyen telepítve és aktív.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá az Animated Service Boxes szóra, és kapcsold be. A szerkesztőben a neve Animált szolgáltatásdobozok.
• Töltsd fel előre a Médiatárba a megjelenítendő képeket. Minden elemnek saját Kiemelt kép mezője van, ha üres, az Elementor szürke helyőrzője jelenik meg.
• Más kapcsolót vagy oldalszintű beállítást nem kell bekapcsolni.

Az elrendezés kiválasztása

Húzd az oldalra a widgetet. A Tartalom → Animált szolgáltatásdobozok első vezérlője a Fő stílus, ez határozza meg, mit látsz a panel többi részén. Nyolc választható:

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

A képen a Fő stílus legördülője, alatta a Stílus két képe és a három elemből álló lista látszik.

Fő stílus	Mit kapsz	Részletes leírás
Képes harmonika	Rámutatáskor kinyíló csíkok, függőlegesen vagy vízszintesen.	Elrendezések
Csúszó dobozok	Rámutatáskor kiszélesedő doboz, mellette becsúszik a szöveg.	Elrendezések
Cikkdoboz	Kártyasor képpel, címmel, leírással és gombbal.	Elrendezések
Információs banner	Rámutatáskor megfordul, és a hátoldalán mutatja a leírást.	Elrendezések
Rámutatáskor megjelenő szakasz	Címek listája, a rámutatott elem képe a teljes szakasz háttere.	Háttérváltó, szolgáltatáslista, portfólió
Dekoratív doboz	Képháttér, rajta cím és alcím.	lent
Szolgáltatáselem	Rámutatásra kinyíló szolgáltatáslista.	Háttérváltó, szolgáltatáslista, portfólió
Portfólió	Címek oszlopa egy közös kép mellett, amely a címek között haladva cserélődik.	Háttérváltó, szolgáltatáslista, portfólió

A Dekoratív doboz

Ennek az elrendezésnek nincs külön fejezete, itt a leírása. Állítsd a Fő stílus értékét Dekoratív doboz-ra, és minden elemnél töltsd ki a Cím, Alcím és Kiemelt kép mezőt. Az eredmény egy dobozsor, amelynek a képe a háttere, a szöveg pedig rajta áll. Egy 1200 képpontos oldalon, alapbeállításokkal három 285 × 340 képpontos doboz jött létre, mindegyik a címét és az alcímét mutatta.

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

A képen a három doboz képe áttetsző fedvény alatt látszik, és a cím, az alcím, valamint a leírás világos betűkkel olvasható rajta.

A Dekoratív doboz nem kínál Stílus választót, ahogy a Csúszó dobozok és a Rámutatáskor megjelenő szakasz sem. Csak a Képes harmonika, a Cikkdoboz, az Információs banner, a Szolgáltatáselem és a Portfólió mutat Stílus választót, ami Stílus 1 és Stílus 2 feliratú két kép.

A legtöbb elrendezésre érvényes beállítások

Beállítás	Hol	Mit csinál	Alapérték
Képfelbontás	Tartalom → Animált szolgáltatásdobozok	Melyik regisztrált képmérettel töltődik be az elemek Kiemelt képe.	Teljes
Gomb	ugyanott	Bekapcsolja az elemenkénti gombot. A Portfólió elrendezésnél rejtve van, mert ott nincs gomb.	Elrejtés
Gomb stílusa	ugyanott	Stílus 1, Stílus 2 vagy Stílus 3. Csak bekapcsolt Gomb mellett látszik.	Stílus 1
Kép/ikon	ugyanott	Lehetővé teszi, hogy minden elem ikont, képet vagy Lottie-t mutasson. A Képes harmonikánál és a Csúszó doboznál nincs.	Elrejtés

Az elemek listája

Az Animált szolgáltatásdobozok lista tartalmazza a tartalmat. Három elemmel indul, az Elem hozzáadása gombbal veszel fel újat. Bármelyik elrendezésnél ugyanazok a mezők vannak.

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

A képen az elem mezői láthatók. Az Ikon kiválasztása alatti szürke szöveg arra figyelmeztet, hogy az ikon/kép/Lottie csak akkor használható, ha a fő stílus menüben az információs bannert, a rámutatáskor megjelenő szakaszt vagy a szolgáltatáselemet választod, és bekapcsolod a Kép/ikon kapcsolót.

Mező	Mit csinál	Alapérték
Cím	Az elem címsora. A Portfólió elrendezésben ez egyben a hivatkozás is.	The Plus
Ikon kiválasztása	Nincs, Ikon, Kép vagy Lottie. A hozzá tartozó mezők a választással változnak, és a Kép/ikon kapcsolónak is be kell lennie.	Nincs
Alcím	Második sor a cím alatt.	üres
Leírás	Formázható szöveg. Több elrendezés csak rámutatáskor mutatja.	üres
Kiemelt kép	Az elem képe. Az elrendezéstől függően csík, kártyakép vagy háttér.	Elementor helyőrző
Gomb szövege, Gomb hivatkozása	A gomb felirata és címe. Csak bekapcsolt Gomb mellett jelennek meg, kivéve a Portfólió elrendezést, ahol a Gomb hivatkozása a cím linkje.	Read More / #
Lista tartalma	Egyetlen mező, amelyben a sorokat a függőleges vonal (pipe) karakterrel választod el. Minden elrendezésben látszik, de csak a Szolgáltatáselem rajzolja ki. A használatát lásd a Szolgáltatáselem fejezetben.	négy mintasor

Elrendezés szakasz

Az Elrendezés szakasz a szöveg elhelyezését állítja az elemekben:

• Transzformációs CSS: szabad szövegű CSS transzformáció, külön Normál és Rámutatás lappal. A mező mintája: rotate(10deg) scale(1.1).
• Szöveg igazítása: Bal, Közép vagy Jobb, eszközönként.
• Eltolás: a szövegblokk függőleges helye: Felül, Közép, Alul, néhány elrendezésnél Sorkizárt is.
• Magasság: az elemek legkisebb magassága, eszközönként.

Hogy ebből melyik látszik, az az elrendezéstől függ, ezért ne várd mind a négyet minden esetben.

Oszlopok kezelése

Az Oszlopok kezelése szakasz elrendezésenként más:

• Cikkdoboz, Információs banner, Rámutatáskor megjelenő szakasz, Dekoratív doboz és Szolgáltatáselem: Oszlop asztali nézetben, Oszlop táblagépen és Oszlop mobilon. Az értékek 1-től 6 oszlopig választhatók, ennyi elem van egy sorban. Az alapértékek: asztalin 4, táblagépen 3, mobilon 2.
• Csúszó dobozok: csak Oszlop táblagépen (alapból 2) és Oszlop mobilon (alapból 1). Asztali beállítás nincs.
• Képes harmonika és Portfólió: nincs Oszlopok kezelése szakasz.

Mindkét változat az Oszlopok közötti térköz beállítással zárul, ez négyoldalas térköz px, % vagy em egységben, eszközönként.

Cím kattintáskor megjelenő szövege

Ez a szakasz csak Portfólió fő stílusnál látszik, egyetlen mezőt tartalmaz, a Cím kattintáskor megjelenő szövege értékét, alapból Ide kattintás. Ott, ahol nincs rámutatás (1024 képpont vagy keskenyebb kijelző), a cím első érintése ezt a szöveget mutatja hivatkozásként az elem Gomb hivatkozása címére. A panelen a megjegyzés is ezt mondja: „Work Only < 1024 screen”.

A Stílus fül

A Stílus fül szakaszai az elrendezéstől és a Tartalom fül kapcsolóitól függnek. A widget a következőket regisztrálja:

• Cím, Alcím és Leírás: a három szöveg tipográfiája és színe.
• Ikon és Lottie: csak bekapcsolt Kép/ikon mellett érdekes.
• Lista: a Szolgáltatáselem listája.
• Gomb: csak bekapcsolt Gomb mellett.
• Kiemelt kép, Tartalom háttere, Háttér a tartalom mögött és Külső tartalom: maguk a dobozok.
• On Scroll View Animation: a webhelyszintű kiterjesztés, amely a widgetet a látótérbe érkezéskor animálja.

Lottie-animáció az elemeken

A Lottie kis méretű, mozgó animáció, amelyet ikon helyett használhatsz a dobozokon. Ehhez az animáció JSON-címe kell.

A cím beszerzése:

1. Jelentkezz be a LottieFiles oldalán (ingyenes regisztráció), és a kiemelt, ingyenes animációk közül válassz egyet.
2. Kattints az animációra, majd a felugró ablakban a munkaterületre mentés gombra, hogy új ablakban megnyíljon.
3. A jobb oldali panelen kapcsold be az asset-link kapcsolót.
4. Másold ki az URL-t az Asset link mezőből.

A doboz beállítása:

1. Add az oldalhoz az Animált szolgáltatásdobozok widgetet.
2. A Fő stílus listából válassz Információs bannert, Rámutatáskor megjelenő szakaszt vagy Szolgáltatáselemet (például utóbbit).
3. Kapcsold be a Kép/ikon kapcsolót.
4. Az elemlistában három elem van alapból; nyisd meg az egyiket, és írd be a Címet.
5. Az Ikon kiválasztása listából válaszd a Lottie értéket.
6. A Lottie URL mezőbe illeszd be a kimásolt JSON-címet, a többi mezőt töltsd ki igényed szerint.

A többi elemhez ugyanígy adhatsz Lottie-t. A megjelenést a Stílus fülön szabályozhatod. A Képes harmonika és a Csúszó dobozok elrendezésnél a Kép/ikon kapcsoló nincs, ott Lottie sem használható.

Korlátok

• Nem minden elrendezésnek van Stílus választója: a Csúszó dobozok, a Rámutatáskor megjelenő szakasz és a Dekoratív doboz egyetlen kivitelű.
• A Képes harmonika és a Portfólió elemeinek sorbeli száma az elrendezésből adódik, ezért nincs Oszlopok kezelése szakaszuk.
• A Cikkdoboz nem jeleníti meg az Alcímet: a mező minden elemben ott van, de ez az elrendezés csak a címet, a leírást és a gombot rajzolja ki.
• A Rámutatáskor megjelenő szakasz a legközelebbi Elementor-tároló hátterét változtatja, nem a widgetét. A kép arra a tárolóra kerül, ezért az oda beállított háttér a widget megjelenése alatt felülíródik, és minden más widget a váltakozó kép fölött áll.
• A Szolgáltatáselem doboza nem nő meg: Stílus 1-ben a kártya mérete rámutatás előtt és után ugyanaz (285 × 167 képpont), a lista alatta jelenik meg, a fölötte lévő tartalom fölé. Hagyj helyet a sor alatt.
• Az Aktív dia szélessége (0-15) valójában nem állítható 0-ra: a címke ellenére a mező legkisebb értéke 1. 1-nél minden dia egyforma széles, és a rámutatás nem nyit ki egyet sem.

Hibaelhárítás

• A widget nincs az Elementor paneljén: Pro widget, és ki lehet kapcsolva. Nézd meg a The Plus Addons → Widgets oldalon, keress rá az Animated Service Boxes-ra, kapcsold be, és töltsd újra a szerkesztőt.
• Kitöltöttem az Alcím mezőt, de semmi sem látszik: több elrendezés elrejti. A Cikkdoboz soha nem mutatja, az Információs banner, a Rámutatáskor megjelenő szakasz és a Csúszó dobozok csak rámutatáskor.
• A Stílus legördülő, amiről olvastam, hiányzik: nyolc elrendezésből csak ötnek van. A Csúszó dobozok, a Rámutatáskor megjelenő szakasz és a Dekoratív doboz egyetlen kivitelű, nem hiányzik semmi.
• Az animáció a szerkesztőben működik, az oldalon nem: az elrendezések a közzétett oldalon JavaScripttel működnek. Ürítsd az oldal gyorsítótárát, és az éles címet nézd, ne a szerkesztő előnézetét.