Animált szolgáltatásdobozok: háttérváltás rámutatáskor, kinyíló szolgáltatáslista és portfólió

Ez a fejezet az Animált szolgáltatásdobozok widget három másik elrendezését írja le. Az általános beállításokat, az elemlistát és az oszlopokat az áttekintő fejezet tartalmazza.

Mindegyik elrendezéshez ugyanaz kell:

• A Pro kiadás: Pro nélkül a widget meg sem jelenik, az ingyenes bővítményben nincs hasonló.
• 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, ha üres, az Elementor szürke helyőrzője jelenik meg.
• Más kapcsolót vagy oldalszintű beállítást nem kell bekapcsolni.

Háttérkép váltása rámutatáskor

Egy sor egyszerű cím, mögötte egy nagy kép, amely változik, ahogy a látogató egyik címről a másikra mozog. Egyszerű hatás, de élővé teszi a szolgáltatások vagy projektek szakaszát. A Rámutatáskor megjelenő szakasz elrendezés minden elemnél egy címet és egy képet kér, és a rámutatott cím képét a teljes blokk mögé teszi.

Előkészület: külön tároló

Tedd a widgetet saját tárolóba. Ez az elrendezés a háttérképet arra a tárolóra írja, amelyben a widget áll, ezért minden más, abba a tárolóba tett elem a változó kép fölé kerül.

Beállítás

1. Szerkeszd az oldalt Elementorral, és vegyél fel egy tárolót, amelyben nincs más. A kép erre a tárolóra kerül, ezért tartsd csak a widgetnek.
2. Húzd bele az Animált szolgáltatásdobozok widgetet, és állítsd a Fő stílus értékét Rámutatáskor megjelenő szakasz-ra.
3. Kapcsold be a Kép előtöltése kapcsolót, ha azt szeretnéd, hogy a böngésző előre letöltse az összes képet, így az első váltás sem lassú. Alapból ki van kapcsolva.
4. Kapcsold be a Kép/ikon kapcsolót, ha minden elem mellett ikont, képet vagy Lottie-t is mutatnál.
5. Nyisd meg a listát. A három elem mindegyikében add meg a Címet (ez mindig látszik) és a Kiemelt képet, amelyik a szakasz mögé kerül, ha arra a címre mutatnak.
6. Az Alcím és a Leírás azt tartalmazza, amelyik csak a rámutatott elemnél jelenik meg.
7. Kívánság szerint kapcsold be a Gomb kapcsolót, és töltsd ki az elemenkénti Gomb szövege és Gomb hivatkozása mezőt.
8. Az Oszlopok kezelése alatt az Oszlop asztali nézetben, Oszlop táblagépen és Oszlop mobilon értékkel állítsd be, hány cím legyen egy sorban.

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

A képen a második cím van kiemelve, az Arculat alcíme és leírása megjelent alatta, és a zöld háttérkép az övé.

Az Elrendezés szakaszban a szakasz Magasságát és a címek Szöveg igazítása értékét állíthatod.

Beállítás	Hol	Mit csinál	Alapérték
Kép előtöltése	Tartalom → Animált szolgáltatásdobozok	Az összes elem képét előre betölti, az első rámutatáskor nem kell várni.	Elrejtés
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
Gomb / Gomb stílusa	ugyanott	Elemenkénti gomb, három kivitelben.	Elrejtés / Stílus 1
Oszlop asztali nézetben / Oszlop táblagépen / Oszlop mobilon	Oszlopok kezelése	Címek száma egy sorban.	4 / 3 / 2

Működés

• A kép tényleg változik. A widget mögötti tároló az első elem képével indult, a második cím fölé víve a másodikéra, a harmadik fölé víve a harmadikéra váltott.
• Betöltéskor az első elem képe látszik. Külön beállítás nincs hozzá, rendezd át az elemeket, ha más képpel akarsz indulni.
• A rámutatott elem kiegészítő szövege megjelenik. Az Alcím és a Leírás a rámutatott címnél átlátszatlanná vált, a többi elemnél csak a cím maradt.
• A váltás átúsztatás a tárolón. A widget fél másodperces átmenetet és az egész felületre kiterjedő színes fedvényt is ad a tárolónak, hogy a szöveg bármilyen képen olvasható maradjon.

Korlátok

• A Rámutatáskor megjelenő szakasz a tároló hátterét változtatja, nem a widgetét. A kép a legközelebbi Elementor-tárolóra vagy szakaszra kerül, ezért az ott beállított háttér a widget megjelenése alatt felülíródik, és az ugyanabban a tárolóban lévő többi widget a változó kép fölé kerül.
• Ennek az elrendezésnek nincs Stílus vezérlője. Egyetlen kivitel van, nincs Stílus 1 / Stílus 2 választó.
• A Kép előtöltése nem változtat semmi láthatón. Bekapcsolva a képek korábban kerültek az oldalra, az elrendezés, a fedvény és a váltás ugyanúgy nézett ki. Lassú kapcsolaton az első rámutatás késése ellen használd, nem megjelenés miatt.
• A rámutatás egérre való. Érintőképernyőn nincs mire rámutatni, ezért számolj azzal, hogy a telefonos látogatók többsége az első elem képét látja.

Hibaelhárítás

• Eltűnt a tárolón beállított háttér: ez az elrendezés sajátja. A widget a saját képét írja arra a tárolóra, amelyben áll, és felülírja az előző hátteret. Adj a widgetnek saját tárolót.
• Egy másik widget furcsán néz ki ugyanabban a tárolóban: ugyanez az ok, a változó kép fölött áll. Tedd át saját tárolóba.
• Egyáltalán nem látszik kép: nézd meg, hogy minden elemnek van-e Kiemelt kép. Anélkül az Elementor szürke helyőrzője jelenik meg, és a hatás hibásnak látszik.
• Az első váltás akadozik: kapcsold be a Kép előtöltése beállítást, hogy a böngésző az első rámutatás előtt letöltse az összes képet, és tartsd ésszerű méretűre a képfájlokat.

Kinyíló szolgáltatásdoboz

A kinyíló szolgáltatásdoboz rövidre fogja a szolgáltatások rácsát: minden kártyán egy cím és egy összefoglaló sor látszik, a teljes felsorolás pedig csak akkor, ha a látogató a kártyára mutat. Ezt az elrendezést a widget Szolgáltatáselem néven kínálja, a lista egyetlen mezőből áll, és a sorokat függőleges vonal (pipe, |) karakterrel választod el.

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 Szolgáltatáselem-re.
3. Válassz Stílus értéket. A Stílus 1 (alapérték) a listát rámutatásig elrejti, a Stílus 2 mindig mutatja.
4. Kapcsold be a Kép/ikon kapcsolót, ha minden kártya fölött ikon, kép vagy Lottie legyen.
5. Nyisd meg a három elemmel induló listát. Mindegyikben töltsd ki a Címet, az Alcímet és a Leírást: ezek a kártya látható részét adják.
6. Ugyanabban az elemben a Lista tartalma mezőbe írd a listát, a sorokat függőleges vonallal elválasztva. A mező minden elrendezésnél látszik, de csak a Szolgáltatáselem rajzolja ki, a panel is ezt írja alatta.
7. Kívánság szerint kapcsold be a Gomb kapcsolót, és állítsd be elemenként a Gomb szövege és 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. Hagyj helyet a sor alatt: a lista lefelé nyílik, bármi fölé, ami alatta van.

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

A képen a középső kártya listája (Ötletelés, Tervezés, Kivitelezés, Átadás) nyílt ki a kártya alatt, a másik kettő zárt.

Az Oszlopok közötti térköz a kártyák közötti távolságot adja.

Beállítás	Hol	Mit csinál	Alapérték
Stílus	Tartalom → Animált szolgáltatásdobozok	Stílus 1: a lista rámutatásra jelenik meg. Stílus 2: mindig látszik.	Stílus 1
Lista tartalma	az elemben	A lista sorai, függőleges vonallal elválasztva. Csak ez az elrendezés rajzolja ki.	négy mintasor
Kép/ikon	Tartalom → Animált szolgáltatásdobozok	Főkapcsoló az elemek Ikon kiválasztása mezőjéhez.	Elrejtés
Gomb / Gomb stílusa	ugyanott	Elemenkénti gomb három kivitelben.	Elrejtés / Stílus 1
Oszlop asztali nézetben / Oszlop táblagépen / Oszlop mobilon	Oszlopok kezelése	Kártyák száma egy sorban.	4 / 3 / 2

Működés

• A Stílus 1 a listát rámutatásig elrejti. Betöltéskor minden listapanel rejtett és teljesen átlátszó volt. Egy kártya fölé víve csak annak a listája látszott, a másik kettőé rejtett maradt.
• Minden elválasztójel egy sort ad. A Stratégia | Drótváz | Dizájnrendszer | Átadás négy külön listasorként jelent meg.
• A kártya nem változtat méretet. Rámutatás előtt és után egyaránt 285 × 167 képpont volt. A lista a kártya alatt jelenik meg, nem nyitja szét, ezért a lenti sor sem mozdul.
• A Stílus 2 mindent egyszerre mutat. Nincs rejtett állapot: minden kártyán a lista az oldal betöltésétől látszik.

Korlátok

• A Szolgáltatáselem doboza nem nő. Stílus 1-ben a kártya mérete ugyanaz, a lista alatta jelenik meg, bármi fölé kerülhet, ami lejjebb áll. Hagyj helyet a sor alatt, különben a lista eltakarja a következő sort.
• A Lista tartalma minden elrendezésnél látszik, de csak itt jelenik meg. Ha más fő stílusnál töltöd ki, az oldalon semmi sem látszik belőle.
• A listasoroknak nincs saját hivatkozásuk. A sorok szövegek, csak a kártya gombja vagy a címe lehet link.

Hibaelhárítás

• Nem jelenik meg a lista: nézd meg, hogy a Fő stílus Szolgáltatáselem-e. A Lista tartalma mező minden elrendezésnél látszik, de csak ez rajzolja ki.
• Az egész lista egyetlen hosszú sor: az elválasztó a függőleges vonal (pipe) karakter. A vesszőt és a sortörést a widget nem választja szét.
• A lista eltakarja az alatta lévő tartalmat: a kártya nem nő, ezért a lista a lejjebb lévő fölött nyílik. Adj alsó belső margót a tárolónak, vagy használd a Stílus 2-t, amely a listát a helyén mutatja.
• A listát rámutatás nélkül is látni szeretném: állítsd a Stílus értékét Stílus 2-re.

Portfólió szakasz

Egy portfólió nem muszáj, hogy bélyegképek rácsa legyen. Szebben olvasható a projektnevek oszlopa egy nagy kép mellett, amely változik, ahogy a látogató végighalad a listán. A Portfólió elrendezés pont ezt adja, és külön beállítása van érintőképernyőre, ahol nincs rámutatás.

Előkészület

• Minden elemnek legyen saját Kiemelt képe.
• Minden elemnek legyen Gomb hivatkozása. Ebben az elrendezésben maga a cím a link, és az 1024 képpontos vagy keskenyebb kijelzőn a Cím kattintáskor megjelenő szövege hivatkozás is ugyanerre a címre mutat.

Beállítás

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 Portfólió-ra.
3. Válassz Stílus értéket, két képből. A Stílus 1 (alapérték) a címeket az egyik oszlopba, a képet a másikba teszi. A Stílus 2 a képet a teljes blokk hátterévé teszi, a címekkel fölötte.
4. Nyisd meg a három elemmel induló listát. Mindegyikben állítsd be a Címet (ez a kattintható projektnév) és a Kiemelt képet (ez látszik, amíg arra a címre mutatnak).
5. A projekt címét a Gomb hivatkozása mezőbe írd. Ebben az elrendezésben nincs külön gomb, a Gomb kapcsoló rejtett, és ez a mező adja a cím linkjét.
6. Nyisd meg a Cím kattintáskor megjelenő szövege szakaszt, és add meg a szöveget kis kijelzőkre. Az alapérték Ide kattintás, de pl. a „Projekt megtekintése” jobban olvasható.
7. Az Elrendezés szakaszban a szakasz Magasságát, a címek Szöveg igazítása értékét és függőleges Eltolását állíthatod.

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

A képen a címek oszlopa bal oldalon áll, a rámutatott Fotózás címe fekete, a többi halvány, és a jobb oldali kép a harmadik elemé.

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

A panelen a Stílus két képe, a lista és az Elrendezés, valamint a Cím kattintáskor megjelenő szövege szakasz látszik. Oszlopok kezelése itt nincs.

Új projekthez használd az Elem hozzáadása gombot.

Beállítás	Hol	Mit csinál	Alapérték
Stílus	Tartalom → Animált szolgáltatásdobozok	Stílus 1: címek és kép egymás mellett. Stílus 2: a kép a címek mögött.	Stílus 1
Képfelbontás	ugyanott	A Kiemelt kép betöltési mérete.	Teljes
Gomb hivatkozása	az elemben	Hová visz a cím kattintásra, és hová a kis kijelzős hivatkozás.	#
Cím kattintáskor megjelenő szövege	Cím kattintáskor megjelenő szövege szakasz	A hivatkozás felirata, amelyet az 1024 képpontos vagy keskenyebb kijelzőn az első érintés felfed.	Ide kattintás

Működés

• A cím fölé víve a kép cserélődik. Három elemnél az egyetlen közös kép az első projekté volt, és a harmadik cím fölé víve a harmadikéra váltott. A rámutatott cím az aktív. A képblokk 570 × 600 képpont volt a lista mellett.
• Az első elem képe töltődik be. Rendezd át az elemeket, ha más képpel akarsz indulni.
• Kis kijelzőn az első érintés nem követi a linket. 390 képponton a widget csak a három címet mutatta. Az aktív cím egyszeri érintése után megjelent egy hivatkozás a Cím kattintáskor megjelenő szövege mezőben megadott felirattal, az elem Gomb hivatkozása címére mutatva. A projekt megnyitásához erre a hivatkozásra kell érinteni. A widget 1024 képponton és az alatt kapcsol erre a viselkedésre.

Korlátok

• A Képes harmonikának és a Portfóliónak nincs Oszlopok kezelése szakasza. A soronkénti elemszám az elrendezésből adódik, ezért eszközönként nincs mit beállítani.
• Ebben az elrendezésben nincs gomb. A Gomb kapcsoló rejtett, a Gomb szövege nem használatos, a Gomb hivatkozása pedig a címet szolgálja.
• A kis kijelzős hivatkozás nem látszik előre. A telefonos látogatók csak a címeket látják, amíg egyre nem érintenek, ezért a kétérintéses út azt kívánja, hogy a Cím kattintáskor megjelenő szövege önmagában is érthető legyen.
• Minden elem ugyanazt a képhelyet használja. Egyszerre egy kép látszik, ezért az elrendezés nem alkalmas több kép egyidejű megmutatására.

Hibaelhárítás

• A kép nem változik: nézd meg, hogy minden elemnek van-e saját Kiemelt képe. Ha több elemnek ugyanaz a képe, nincs mit látni, ahogy mozogsz közöttük.
• A telefonon a címre kattintva semmi sem történik: történik, csak más: az első érintés felfedi a Cím kattintáskor megjelenő szövege hivatkozást a cím alatt. A projekt megnyitásához erre érints.
• A kis kijelzős hivatkozás „Ide kattintás”: ez az alapérték. A Cím kattintáskor megjelenő szövege szakaszban módosíthatod.
• Nem találom az Oszlopok kezelése szakaszt: a Portfólió elrendezésnek nincs. A szakasz magasságát és a címek igazítását az Elrendezés szakaszban állítsd.