Elementor  Crocoblock  The Plus  Premium Addons  ElementsKit  Ultimate Addons  Element Pack  Essential Addons  Unlimited Elements  PowerPack  HT Mega 

Inline SVG Draw SVG

Elementor Addons voor "Inline SVG tekenen SVG" - Widget Vergeleken

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.

Premium Addons ²Demo1   Demo2

... 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.

Demo

... 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.

Demo

... 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.

Demo

Addon Samenvoeging

... van alle demopagina's voor "Inline SVG tekenen SVG" Widget

Premium Addons ²Demo1   Demo2

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.

Agenda

Categorie:

Inbegrepen in

Verken verder Widgets & Extensions

Categorieën