SVG-animátor widget

Az SVG-animátor widget SVG-ikonokat és illusztrációkat kelt életre: az útvonalakat mintha kézzel rajzolnák, úgy jelennek meg. Logóhoz, ikonokhoz, díszítő rajzokhoz jó, kódolás nélkül. Az SVG vektoros, ezért bármekkora méretben éles marad, és gyorsan betöltődik.

Ha a widget nem látszik a szerkesztőben, kapcsold be a bővítmény Widgetek beállításainál.

Mire jó?

• Animált logó az oldal betöltésekor.
• Ikonok, amelyek görgetésre vagy rámutatásra rajzolódnak ki.
• Díszítő vonalrajzok nyitóképeken.
• Apró, a márkát jellemző mikroanimációk.

Tipp: kombinálhatod az Elementor beépített belépő animációival vagy mozgáshatásaival is.

Első lépések

1. Nyisd meg az oldalt az Elementorral.
2. A widgetlistában keresd meg az SVG-animátor widgetet, és húzd az oldalra.
3. Az Általános szakaszban válaszd ki az SVG-ikont: töltsd fel a saját fájlodat, vagy válassz az ikonkönyvtárak közül.

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

A legjobb eredményhez olyan ikont válassz, amely körvonalas (vonalas) útvonalakból áll, nem kitöltött alakzatokból. Tiszta, egyszerű körvonalú ikon animálódik a legjobban. A legtöbb ikonkönyvtárban találsz ilyet.

Kitöltési beállítások

A Kitöltési mód határozza meg, mikor jelenjen meg az ikon kitöltése a körvonal mellett:

Érték	Hatás
Nincs kitöltés	Csak a körvonal látszik.
Körvonal előtt	A kitöltés előbb jelenik meg, mint a körvonal.
Körvonal után	A kitöltés a körvonal megrajzolása után jelenik meg.
Mindig látható	A kitöltés végig látszik.

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

Animációs beállítások

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

• Késleltetett betöltés: az animáció csak akkor indul, amikor az SVG a nézetablakba kerül. A jobb teljesítményért érdemes bekapcsolni.
• Haladó animáció: bekapcsolva további animációs beállítások jelennek meg, például az indítás és az ismétlés módja.

Néhány ötlet:

• Betöltésre induló logó: kapcsold be a Haladó animációt, és állítsd az indítást betöltésre.
• Rámutatásra rajzolódó ikon gombban vagy funkciódobozban: haladó animációval állítsd az indítást rámutatásra.
• Görgetésre megjelenő ábra: kapcsold be a Késleltetett betöltést és a görgetéses indítást.

Stílus

A Stílus fül Stílusok szakaszában a megjelenést állíthatod:

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

• Méret: az SVG szélessége, reszponzív is lehet.
• Igazítás: balra, középre vagy jobbra, eszközönként.
• Körvonal vastagsága: az útvonal vastagsága. Finom ikonoknál 1 vagy 2 px, vastagabbaknál 3 vagy 4 px jó.
• Körvonal színe: az útvonal színe. Válassz a háttéren jól látható, a márkához illő színt.

Hibaelhárítás

Az SVG nem látszik, vagy nem animálódik.

• Ellenőrizd, hogy az SVG körvonalas útvonalakból áll, nem csak kitöltésekből.
• Nézd meg, hogy a fájl feltöltődött, és az Általános szakaszban ki van választva.
• Késleltetett betöltésnél görgess oda, ahol az SVG látszik, mert amíg nincs a nézetablakban, nem indul el.
• Ha a Haladó animáció ki van kapcsolva, egyes indítási és ismétlési lehetőségek rejtve maradnak.

A kitöltési mód nem úgy működik, ahogy várod.

• Ha Nincs kitöltés van kiválasztva, az ikon kitöltetlen marad. Válts Körvonal után vagy Mindig látható értékre.
• Ha az SVG-ben nincs kitölthető útvonal, a beállításnak nincs látható hatása.

A körvonal túl vékony vagy túl vastag.

• A Stílus fülön állítsd a Körvonal vastagságát, és válassz a háttértől jól elütő Körvonal színt.
• Ha az SVG-fájl saját, beégetett körvonal-beállításokat tartalmaz, azok felülírhatják a widget beállításait. Szerkeszd az SVG-t egy vektorgrafikus programban (például Illustratorban), és töröld ezeket a beállításokat.