Oogstrelende afbeeldingen en video’s zijn een geweldige manier om online bezoekers te imponeren. Maar vrijwel elke website gebruikt ze om de gebruikerservaring (UX) te verbeteren. Daarom is het toevoegen van deze standaard visuals aan je pagina’s niet langer genoeg om jouw site te onderscheiden van de rest.
Gelukkig kun je Lottie-animaties aan je site toevoegen om je een concurrentievoordeel te geven. LottieFiles biedt een gratis bibliotheek van animaties die je gemakkelijk aan je website kunt toevoegen. Vervolgens kun je ze gebruiken om de betrokkenheid van gebruikers te vergroten en het ontwerp van je site te verbeteren.
In deze post bekijken we enkele belangrijke voordelen van het gebruik van Lottie-animaties op je site. Vervolgens laten we je drie eenvoudige manieren zien om deze visuele elementen toe te voegen. Laten we beginnen!
De Voordelen Van Het Toevoegen Van Lottie-animaties Aan Je Site
Hoewel video’s en afbeeldingen je website boeiender kunnen maken, worden dit soort visuele materialen overal op het internet gezien. Animaties daarentegen kunnen je een uniek voordeel geven.
Bovendien wordt verwacht dat de voorspelde wereldmarkt voor de animatie-industrie de komende negen jaar met 60% zal stijgen. Dat betekent dat als je er nu mee begint, je voor kunt lopen op een groeiende trend.
In feite gebruikte 61% van de marketeers vorig jaar interactieve inhoud als een digitale betrokkenheidstactiek. Andere strategieën omvatten GIFs, die ook gebruikt kunnen worden om animaties te tonen.
Lottie-animaties zijn een uitstekende keuze, vooral vanwege hun kleine bestandsgroottes:
In feite zijn deze bestanden 600% kleiner dan GIFs – Je kunt ze aan je site toevoegen zonder iets te verzwaren. Dit kan je helpen een positieve gebruikerservaring te behouden.
Nog beter, Lottie animaties kunnen volledig worden aangepast om te passen bij je merkidentiteit. Bovendien is het een betaalbare oplossing aangezien LottieFiles de meest uitgebreide, gratis animatiebibliotheek biedt. Je krijgt toegang tot duizenden UI-elementen, personages en illustraties.
Hoe Voeg Je Lottie-animaties Toe Aan Je Site (3 Manieren)
Nu je de voordelen van het gebruik van Lottie-animaties kent, laten we eens kijken naar drie manieren om ze aan je site toe te voegen.
Methode 1: Voeg Je Animatie Toe Met oEmbed
Het toevoegen van je Lottie-animaties via oEmbed is de eenvoudigste methode in deze handleiding. Het enige nadeel is dat je de animatie-instellingen niet kunt bewerken of instellen om te reageren op gebruikersinteracties.
Om te beginnen met deze methode, blader door de LottieFiles animatiebibliotheek om de perfecte animatie voor je site te vinden. Zodra je een ontwerp hebt gevonden dat je leuk vindt, klik op de animatie en kopieer eenvoudig de oEmbed URL (je moet ingelogd zijn op een gratis account om dit te doen):
Ga dan naar WordPress en open de pagina of het bericht waar je je animatie wilt toevoegen. Voeg vervolgens eenvoudig een nieuw Embed Gutenberg-blok toe:
Plak nu de oEmbed URL die je hebt gekopieerd van de Lottie website:
Klik op de Embed knop om de actie te bevestigen.
Op dit moment zou je de animatie op je pagina moeten zien verschijnen:
Zoals we eerder hebben vermeld, zul je de animatie niet kunnen aanpassen nadat je deze aan je WordPress-pagina of -bericht hebt toegevoegd. Daarom is het cruciaal dat je alle wijzigingen die je wilt aanbrengen van tevoren doet terwijl je nog op de Lottie-website bent.
Methode 2: Voeg Je Animatie Toe Met De Lottie Block Voor Gutenberg Plugin
Hoewel de oEmbed-methode het eenvoudigst is, is het gebruik van de Lottie-block voor Gutenberg-plugin ook heel gemakkelijk. Bovendien kun je direct een voorbeeld zien van alle wijzigingen die je aan je ontwerpen maakt.
Allereerst, ga naar Plugins > Add New om de Lottie block voor Gutenberg-plugin in WordPress te installeren en te activeren:
Je kunt dan inloggen op je LottieFiles-account of gratis een account aanmaken.
Voeg vervolgens een nieuw blok toe in de Gutenberg-editor. Zoek naar het Lottie blok en voeg het toe aan je pagina:
Hier vind je drie manieren om een Lottie-animatie in WordPress in te voegen:
- Klik op Discover animation om de LottieFiles-bibliotheek te bekijken (je hebt hiervoor een account nodig).
- Selecteer Media Library om een animatie te vinden die je eerder hebt geüpload.
- Druk op Insert from url om een JSON-link te plakken.
Als je de laatste methode kiest, kun je de JSON-link op de Lottie website vinden:
Zodra je de animatie aan je pagina hebt toegevoegd, kun je het ontwerp in Gutenberg bekijken:
Nu, in de Block instellingen, kun je jouw animatie aanpassen. Je kunt bijvoorbeeld een doorzichtige achtergrond geven, de afmetingen wijzigen of de animatie met verschillende acties activeren. Je kunt ook de plugin gebruiken om een Lottie-animatie toe te voegen als een WordPress-achtergrond.
Methode 3: Voeg Je Animatie Toe Met HTML En JavaScript
Je Lottie-animatie toevoegen met HTML en JavaScript is nog steeds vrij eenvoudig, maar het is de meest complexe methode. Bovendien kun je updates niet in realtime zien.
In plaats daarvan moet je schakelen tussen Gutenberg en je website om je wijzigingen te bekijken. Toch wil je misschien deze methode gebruiken als je bekend bent met HTML en op zoek bent naar uitgebreidere aanpassingsopties.
Om te beginnen met deze aanpak, klik op de animatie in de LottieFiles-bibliotheek en kopieer de link van het Lottie JSON-bestand:
Scroll vervolgens naar beneden totdat je “Use animation in…” ziet en selecteer <html>:
Dit brengt je naar de LottieFiles Web Player:
Hier kun je een achtergrondkleur kiezen, de grootte en snelheid van de animatie bepalen en meer.
Nu, deselecteer het Controls vinkje en je zult zien dat er wat HTML code is gegenereerd onderaan het scherm:
Kopieer de regel code die begint met “<lottie-player>” en eindigt met “</lottie-player>”. Voeg vervolgens in WordPress een nieuw Custom HTML blok toe:
Plak de HTML die je hebt gekopieerd van LottieFiles en klik op Opslaan als concept in de rechterbovenhoek:
Je animatie werkt nog niet. Eerst moet je het Lottie Player JavaScript-bestand in WordPress laden.
Om dit te doen, ga terug naar de LottieFiles Web Player en kopieer de scripttag die begint met “<script>” en eindigt met “</script>”:
Ga nu naar WordPress en installeer de Simple Custom CSS and JS plugin:
Als het actief is, ga dan naar het dashboard van de plugin en kies HTML-code toevoegen:
Je kunt je code een titel geven zoals “Voegt Lottie Speler Toe”. Plak vervolgens de script-tag in de editor en klik op Publiceren:
Nu, ga terug naar de pagina waar je jouw HTML-code hebt ingevoegd. Je zou jouw Lottie-animatie moeten zien wanneer je overschakelt naar het voorbeeld:
Als de animatie te groot of te klein is, kun je de standaardparameters in de HTML-code wijzigen waar staat style= “width: X; height: X;”.
Voeg Lottie Animaties Vandaag Toe Aan Je Site
Aangezien afbeeldingen en video’s op bijna elke website voorkomen, is het toevoegen ervan aan je pagina’s waarschijnlijk niet voldoende om je ontwerpen te laten opvallen. Je kunt echter Lottie-animaties aan je site toevoegen om bezoekers te imponeren, je merkidentiteit te weerspiegelen en de betrokkenheid te verbeteren.
Om samen te vatten, hier zijn drie manieren om Lottie animaties aan je site toe te voegen:
- Voeg Lottie-animaties toe met oEmbed.
- Voeg Lottie-animaties toe met behulp van de Lottie-blok voor Gutenberg plugin.
- Voeg Lottie-animaties toe met HTML en JavaScript.
Een andere manier om jouw website te onderscheiden van de rest is door het ontwerpen van aangepaste pagina’s die uniek zijn voor jouw merk. Bij DreamHost kunnen we een site voor je bouwen die uniek is, mobielvriendelijk, en geoptimaliseerd voor zoekmachines. Bekijk onze webdesignplannen vandaag nog!
Krijg Een Prachtige Website Waar Je Trots Op Bent
Onze ontwerpers zullen een prachtige website vanaf nul creëren die perfect bij jouw merk past.
Leer Meer