Hey Elementors,
SVG’s zijn perfect voor logo’s, iconen en lijnillustraties: ze blijven scherp op elk scherm en zijn heel klein. Elementor kan een SVG als afbeelding tonen, maar als je het “teken”-effect wilt – een lijn die zichzelf tekent terwijl je scrolt – of je SVG bij hover van kleur wilt laten veranderen, heb je een addon nodig.
Dit zijn de drie widgets waar ik als eerste naar zou kijken.
... oplossing voor Inline SVG tekenen SVG Widget
The Plus heeft de meest complete “Draw SVG”-widget in deze lijst. Je laat de SVG zichzelf tekenen bij het laden van de pagina, als hij in beeld scrolt of bij hover – en bij hover opnieuw tekenen. Heb je geen eigen SVG, dan zit er een bibliotheek met kant-en-klare iconen en illustraties bij.
Daarnaast regel je lijnkleur, vulling, snelheid en veel andere details. Mijn keuze als de animatie zelf het hoogtepunt van de sectie is.
... oplossing voor Inline SVG tekenen SVG Widget
De Inline SVG-widget in JetElements van Crocoblock doet één ding heel goed: hij zet je SVG direct in de paginacode in plaats van hem als afbeelding te laden. Daardoor kun je de kleuren aanpassen met de stijlinstellingen van Elementor – handig voor logo’s, iconen of kleine diagrammen in je huisstijlkleuren.
Een uitgebreide tekenanimatie zit er niet in, maar als je gewoon nette, aanpasbare SVG’s wilt, is dit een lichte oplossing.
... oplossing voor Inline SVG tekenen SVG Widget
Element Pack combineert beide werelden: je sluit je SVG inline in en animeert hem. Je krijgt vul- en lijnkleuren, CSS-filters, hover-animaties (ook omgekeerd) en een lijnanimatie die tijdens het scrollen loopt.
Gebruik je Element Pack al voor andere widgets, dan heb je geen aparte addon nodig voor SVG-effecten.
Kort gezegd: voor opvallende tekenanimaties kies ik The Plus, voor simpele aanpasbare SVG’s is Crocoblock genoeg, en Element Pack is een goede middenweg.
Een tip uit de praktijk: ruim je SVG op voordat je hem uploadt (bijvoorbeeld met een gratis SVG-optimizer). Minder paden betekenen soepelere animaties en sneller laden.
Element Pack ⁵Demo1 Demo2 Demo3 Demo4 Demo5
Livemesh Addons ²Demo1 Demo2
HappyAddons ²Demo1 Demo2
PowerPack ²Demo1 Demo2
Ultimate Addons
Essential Addons
HT Mega ³Demo1 Demo2 Demo3
ElementsKit
Piotnet Addons
The Plus ²Demo1 Demo2
Crocoblock
Unlimited Elements ²Demo1 Demo2
Essential Addons
Element Pack
HT Mega
ElementsKit
WooLentor ²Demo1 Demo2
Essential Addons
HT Mega ³Lightbox Modal Notification
Dynamic.ooo ²Demo1 Demo2
HappyAddons ²Demo1 Demo2
Piotnet Addons
ElementsKit
Unlimited Elements
Essential Addons
The Plus ²Piechart Progress_Bar
HappyAddons
HT Mega
Element Pack ²Progress_Bar Progress_Pie
Livemesh Addons
Piotnet Addons