{"id":69439,"date":"2023-01-04T07:00:18","date_gmt":"2023-01-04T15:00:18","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69439"},"modified":"2025-05-26T09:22:10","modified_gmt":"2025-05-26T16:22:10","slug":"hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/","title":{"rendered":"Hoe Lottie-animaties aan Je Site Toe te Voegen"},"content":{"rendered":"\n<p>Oogstrelende afbeeldingen en video&#8217;s zijn een geweldige manier om online bezoekers te imponeren. Maar vrijwel elke website gebruikt ze om de <a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-user-experience\/\" target=\"_blank\" rel=\"noopener\">gebruikerservaring (UX)<\/a> te verbeteren. Daarom is het toevoegen van deze standaard visuals aan je pagina&#8217;s niet langer genoeg om jouw site te onderscheiden van de rest.<\/p>\n\n\n<p>Gelukkig kun je Lottie-animaties aan je site toevoegen om je een concurrentievoordeel te geven. <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">LottieFiles<\/a> 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 <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-a-website\/\" target=\"_blank\" rel=\"noopener\">het ontwerp van je site<\/a> te verbeteren.<\/p>\n\n\n<p>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!<\/p>\n\n\n<h2 id=\"h-the-benefits-of-adding-lottie-animations-to-your-site\" class=\"wp-block-heading\"><b>De Voordelen Van Het Toevoegen Van Lottie-animaties Aan Je Site<\/b><\/h2>\n\n\n<p>Hoewel video&#8217;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.<\/p>\n\n\n<p>Bovendien wordt verwacht dat de voorspelde <a href=\"https:\/\/www.statista.com\/topics\/9725\/animation-industry\/#dossierKeyfigures\" target=\"_blank\" rel=\"noopener\">wereldmarkt voor de animatie-industrie<\/a> 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.<\/p>\n\n\n<p>In feite gebruikte 61% van de marketeers vorig jaar interactieve inhoud als een digitale betrokkenheidstactiek. Andere strategie\u00ebn omvatten GIFs, die ook gebruikt kunnen worden om animaties te tonen.<\/p>\n\n\n<p><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">Lottie-animaties<\/a> zijn een uitstekende keuze, vooral vanwege hun kleine bestandsgroottes:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"954\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage.png\" alt=\"LottieFiles website homepage\" class=\"wp-image-38495 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-300x143.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1024x489.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-768x367.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1536x733.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-600x286.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1200x573.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-730x348.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1460x697.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-784x374.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1568x748.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-877x419.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1754x837.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/954;\" \/><\/figure><\/div>\n\n<p>In feite zijn deze bestanden <i>600%<\/i> kleiner dan GIFs &#8211; Je kunt ze aan je site toevoegen zonder iets te verzwaren. Dit kan je helpen een positieve gebruikerservaring te behouden.<\/p>\n\n\n<p>Nog beter, Lottie animaties kunnen volledig worden aangepast om te passen bij <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-create-brand-style-guide-website\/\" target=\"_blank\" rel=\"noopener\">je merkidentiteit<\/a>. Bovendien is het een betaalbare oplossing aangezien LottieFiles de meest uitgebreide, gratis animatiebibliotheek biedt. Je krijgt toegang tot duizenden UI-elementen, personages en illustraties.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h-how-to-add-lottie-animations-to-your-site-3-ways\" class=\"wp-block-heading\"><b>Hoe Voeg Je Lottie-animaties Toe Aan Je Site (3 Manieren)<\/b><\/h2>\n\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-1-add-your-animation-with-oembed\"><b>Methode 1: Voeg Je Animatie Toe Met oEmbed<\/b><\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>Om te beginnen met deze methode, blader door de <a href=\"https:\/\/lottiefiles.com\/featured\" target=\"_blank\" rel=\"noopener\">LottieFiles animatiebibliotheek<\/a> 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):<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1002\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url.jpg\" alt=\"Vind de oEmbed URL in LottieFiles\" class=\"wp-image-38493 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1024x513.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-768x385.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1536x770.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-600x301.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1200x602.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-730x366.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1460x732.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-784x393.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1568x786.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-877x440.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1754x879.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1002;\" \/><\/figure><\/div>\n\n<p>Ga dan naar WordPress en open de pagina of het bericht waar je je animatie wilt toevoegen. Voeg vervolgens eenvoudig een nieuw <i>Embed<\/i> Gutenberg-blok toe:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"828\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress.png\" alt=\"Invoegblok in WordPress\" class=\"wp-image-38485 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-300x124.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1024x424.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-768x318.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1536x636.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-600x249.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1200x497.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-730x302.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1460x605.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-784x325.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1568x649.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-877x363.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1754x727.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/828;\" \/><\/figure><\/div>\n\n<p>Plak nu de oEmbed URL die je hebt gekopieerd van de Lottie website:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"616\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png\" alt=\"Plak de oEmbed Lottie URL in het Embed WordPress-blok\" class=\"wp-image-38496 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-300x92.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1024x316.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-768x237.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1536x473.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-600x185.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1200x370.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-730x225.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1460x450.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-784x242.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1568x483.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-877x270.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1754x541.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/616;\" \/><\/figure><\/div>\n\n<p>Klik op de <i>Embed<\/i> knop om de actie te bevestigen.<\/p>\n\n\n<p>Op dit moment zou je de animatie op je pagina moeten zien verschijnen:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"838\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress.jpg\" alt=\"Voeg je Lottie-animatie toe in WordPress\" class=\"wp-image-38486 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1024x429.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-768x322.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1536x644.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-600x252.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1200x503.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-730x306.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1460x612.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-784x329.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1568x657.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-877x368.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1754x735.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/838;\" \/><\/figure><\/div>\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-2-add-your-animation-using-the-lottie-block-for-gutenberg-plugin\"><b>Methode 2: Voeg Je Animatie Toe Met De <\/b><a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><b>Lottie Block Voor Gutenberg<\/b><\/a><b> Plugin<\/b><\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>Allereerst, ga naar <i>Plugins <\/i>&gt; <i>Add New <\/i>om de <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">Lottie block voor Gutenberg<\/a>-plugin in WordPress te installeren en te activeren:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1857\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png\" alt=\"Lottie block voor Gutenberg plugin\" class=\"wp-image-38490 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png.webp 1857w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-300x97.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1024x332.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-768x249.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1536x498.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-600x195.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1200x389.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-730x237.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1460x473.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-784x254.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1568x508.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-877x284.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1754x569.png.webp 1754w\" data-sizes=\"(max-width: 1857px) 100vw, 1857px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1857px; --smush-placeholder-aspect-ratio: 1857\/602;\" \/><\/figure><\/div>\n\n<p>Je kunt dan inloggen op je LottieFiles-account of gratis een account aanmaken.<\/p>\n\n\n<p>Voeg vervolgens een nieuw blok toe in de Gutenberg-editor. Zoek naar het <i>Lottie<\/i> blok en voeg het toe aan je pagina:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"776\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block.png\" alt=\"Zoek naar het Lottie-blok in WordPress\" class=\"wp-image-38500 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-300x116.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1024x398.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-768x298.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1536x596.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-600x233.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1200x466.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-730x283.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1460x567.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-784x304.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1568x609.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-877x340.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1754x681.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/776;\" \/><\/figure><\/div>\n\n<p>Hier vind je drie manieren om een Lottie-animatie in WordPress in te voegen:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Klik op <i>Discover animation <\/i>om de LottieFiles-bibliotheek te bekijken (je hebt hiervoor een account nodig).<\/li>\n\n\n\n<li>Selecteer <i>Media Library <\/i>om een animatie te vinden die je eerder hebt ge\u00fcpload.<\/li>\n\n\n\n<li>Druk op <i>Insert from url<\/i> om een JSON-link te plakken.<\/li>\n\n\n<\/ul>\n\n\n<p>Als je de laatste methode kiest, kun je de JSON-link op de Lottie website vinden:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n<p>Zodra je de animatie aan je pagina hebt toegevoegd, kun je het ontwerp in Gutenberg bekijken:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"836\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg.png\" alt=\"Voorvertoning van de paarse uil animatie in Gutenberg\" class=\"wp-image-38498 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-300x125.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1024x428.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-768x321.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1536x642.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-600x251.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1200x502.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-730x305.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1460x611.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-784x328.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1568x656.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-877x367.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1754x734.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/836;\" \/><\/figure><\/div>\n\n<p>Nu, in de <i>Block<\/i> 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 <a href=\"https:\/\/www.youtube.com\/watch?v=i2LP34t__Yc\" target=\"_blank\" rel=\"noopener\">een Lottie-animatie toe te voegen als een WordPress-achtergrond<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-3-add-your-animation-with-html-and-javascript\"><b>Methode 3: Voeg Je Animatie Toe Met HTML En JavaScript<\/b><\/h3>\n\n\n<p>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.<\/p>\n\n\n<p>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 <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">bekend bent met HTML<\/a> en op zoek bent naar uitgebreidere aanpassingsopties.<\/p>\n\n\n<p>Om te beginnen met deze aanpak, klik op de animatie in de LottieFiles-bibliotheek en kopieer de link van het Lottie JSON-bestand:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n<p>Scroll vervolgens naar beneden totdat je &#8220;Use animation in&#8230;&#8221; ziet en selecteer <i>&lt;html&gt;<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"852\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html.jpg\" alt=\"Lottie-animatie insluiten met behulp van HTML\" class=\"wp-image-38487 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-300x128.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1024x436.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-768x327.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1536x655.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-600x256.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1200x511.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-730x311.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1460x622.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-784x334.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1568x668.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-877x374.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1754x748.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/852;\" \/><\/figure><\/div>\n\n<p>Dit brengt je naar de LottieFiles Web Player:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1016\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview.png\" alt=\"De LottieFiles Web Player voorvertoning\" class=\"wp-image-38494 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-300x152.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1024x520.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-768x390.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1536x781.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1200x610.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-730x371.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1460x742.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-784x398.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1568x797.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-877x446.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1754x891.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1016;\" \/><\/figure><\/div>\n\n<p>Hier kun je een achtergrondkleur kiezen, de grootte en snelheid van de animatie bepalen en meer.<\/p>\n\n\n<p>Nu, deselecteer het <i>Controls <\/i>vinkje en je zult zien dat er wat HTML code is gegenereerd onderaan het scherm:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1082\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation.png\" alt=\"HTML-code voor je LottieFiles-animatie\" class=\"wp-image-38488 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-300x162.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1024x554.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-768x416.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1536x831.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-600x325.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1200x650.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-730x395.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1460x790.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-784x424.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1568x849.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-877x475.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1754x949.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1082;\" \/><\/figure><\/div>\n\n<p>Kopieer de regel code die begint met \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;lottie-player&gt;<\/span>\u201d en eindigt met \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/lottie-player&gt;<\/span>\u201d. Voeg vervolgens in WordPress een nieuw <i>Custom HTML<\/i> blok toe:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"858\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor.png\" alt=\"Een nieuw Custom HTML-blok toevoegen in de WordPress-editor\" class=\"wp-image-38482 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-300x129.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1024x440.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-768x330.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1536x659.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-600x258.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1200x515.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-730x313.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1460x627.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-784x337.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1568x673.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-877x376.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1754x753.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/858;\" \/><\/figure><\/div>\n\n<p>Plak de HTML die je hebt gekopieerd van LottieFiles en klik op <i>Opslaan als concept<\/i> in de rechterbovenhoek:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"483\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png\" alt=\"Plak de Lottie HTML-code in het Aangepaste HTML WordPress-blok\" class=\"wp-image-38497 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-300x72.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1024x247.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-768x186.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1536x371.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-600x145.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1200x290.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-730x176.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1460x353.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-784x189.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1568x379.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-877x212.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1754x424.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/483;\" \/><\/figure><\/div>\n\n<p>Je animatie werkt nog niet. Eerst moet je het Lottie Player JavaScript-bestand in WordPress laden.<\/p>\n\n\n<p>Om dit te doen, ga terug naar de LottieFiles Web Player en kopieer de scripttag die begint met \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;script&gt;<\/span>\u201d en eindigt met \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/script&gt;<\/span>\u201d:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"925\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file.png\" alt=\"Lottie Player JavaScript-bestand\" class=\"wp-image-38492 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-300x139.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1024x474.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-768x355.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1536x711.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-600x278.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1200x555.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-730x338.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1460x676.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-784x363.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1568x726.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-877x406.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1754x812.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/925;\" \/><\/figure><\/div>\n\n<p>Ga nu naar WordPress en installeer de <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener\">Simple Custom CSS and JS plugin<\/a>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"585\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin.png\" alt=\"Installeer de Simple Custom CSS en JS plugin\" class=\"wp-image-38499 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-300x88.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1024x300.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-768x225.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1536x450.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-600x176.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1200x351.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-730x214.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1460x427.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-784x229.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1568x459.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-877x257.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1754x513.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/585;\" \/><\/figure><\/div>\n\n<p>Als het actief is, ga dan naar het dashboard van de plugin en kies <i>HTML-code toevoegen<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"573\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png\" alt=\"Voeg HTML-code toe met de Simple Custom CSS and JS plugin\" class=\"wp-image-38483 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-300x86.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1024x294.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-768x220.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1536x440.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-600x172.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1200x344.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-730x209.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1460x418.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-784x225.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1568x449.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-877x251.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1754x503.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/573;\" \/><\/figure><\/div>\n\n<p>Je kunt je code een titel geven zoals &#8220;Voegt Lottie Speler Toe&#8221;. Plak vervolgens de script-tag in de editor en klik op <i>Publiceren<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"662\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png\" alt=\"Voeg de Lottie-speler toe aan WordPress met aangepaste HTML\" class=\"wp-image-38484 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-300x99.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1024x339.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-768x254.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1536x509.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-600x199.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1200x397.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-730x242.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1460x484.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-784x260.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1568x519.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-877x290.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1754x581.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/662;\" \/><\/figure><\/div>\n\n<p>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:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"846\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress.png\" alt=\"Lottie-animatie toegevoegd aan WordPress via HTML en JavaScript\" class=\"wp-image-38489 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-300x127.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1024x433.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-768x325.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1536x650.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-600x254.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1200x508.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-730x309.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1460x618.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-784x332.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1568x664.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-877x371.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1754x742.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/846;\" \/><\/figure><\/div>\n\n<p>Als de animatie te groot of te klein is, kun je de standaardparameters in de HTML-code wijzigen waar staat <i><span style=\"font-family: 'courier new', courier, monospace;\">style= \u201cwidth: X; height: X;\u201d<\/span>.<\/i><\/p>\n\n\n<h2 id=\"h-add-lottie-animations-to-your-site-today\" class=\"wp-block-heading\"><b>Voeg Lottie Animaties Vandaag Toe Aan Je Site<\/b><\/h2>\n\n\n<p>Aangezien afbeeldingen en video&#8217;s op bijna elke website voorkomen, is het toevoegen ervan aan je pagina&#8217;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.<\/p>\n\n\n<p>Om samen te vatten, hier zijn drie manieren om <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">Lottie animaties<\/a> aan je site toe te voegen:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Voeg Lottie-animaties toe met oEmbed.<\/li>\n\n\n\n<li>Voeg Lottie-animaties toe met behulp van de <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">Lottie-blok voor Gutenberg<\/a> plugin.<\/li>\n\n\n\n<li>Voeg Lottie-animaties toe met HTML en JavaScript.<\/li>\n\n\n<\/ol>\n\n\n<p>Een andere manier om jouw website te onderscheiden van de rest is door het ontwerpen van aangepaste pagina&#8217;s die uniek zijn voor jouw merk. Bij DreamHost kunnen we een site voor je bouwen die uniek is, <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" target=\"_blank\" rel=\"noopener\">mobielvriendelijk<\/a>, en geoptimaliseerd voor zoekmachines. Bekijk <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">onze webdesignplannen<\/a> vandaag nog!<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Krijg Een Prachtige Website Waar Je Trots Op Bent\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Onze ontwerpers zullen een prachtige website vanaf nul cre\u00ebren die perfect bij jouw merk past.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leer Meer                    <\/a>\n\n  <\/div>\n<\/div>\n\n<p><script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script><\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Oogverblindende afbeeldingen en video&#8217;s zijn een geweldige manier om online bezoekers te imponeren. Echter, bijna elke website gebruikt ze om de gebruikerservaring (UX) te verbeteren. Daarom is het toevoegen van deze standaard visuals aan je pagina&#8217;s niet langer voldoende om je site te onderscheiden van de rest. Gelukkig kun je Lottie-animaties toevoegen aan je site om [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":38502,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Video's en afbeeldingen kunnen je pagina's boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!","toc_headlines":"[[\"h-the-benefits-of-adding-lottie-animations-to-your-site\",\"De Voordelen Van Het Toevoegen Van Lottie-animaties Aan Je Site\"],[\"h-how-to-add-lottie-animations-to-your-site-3-ways\",\"Hoe Voeg Je Lottie-animaties Toe Aan Je Site (3 Manieren)\"],[\"h-add-lottie-animations-to-your-site-today\",\"Voeg Lottie Animaties Vandaag Toe Aan Je Site\"]]","hide_toc":false,"footnotes":""},"categories":[14950,14942,14946],"tags":[],"class_list":["post-69439","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-central-nl","category-website-design-nl","category-wordpress-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Hoe Lottie-animaties aan Je Site Toe te Voegen - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Video&#039;s en afbeeldingen kunnen je pagina&#039;s boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hoe Lottie-animaties aan Je Site Toe te Voegen\" \/>\n<meta property=\"og:description\" content=\"Video&#039;s en afbeeldingen kunnen je pagina&#039;s boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-04T15:00:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:22:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hoe Lottie-animaties aan Je Site Toe te Voegen - DreamHost Blog","description":"Video's en afbeeldingen kunnen je pagina's boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/","og_locale":"en_US","og_type":"article","og_title":"Hoe Lottie-animaties aan Je Site Toe te Voegen","og_description":"Video's en afbeeldingen kunnen je pagina's boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-01-04T15:00:18+00:00","article_modified_time":"2025-05-26T16:22:10+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Hoe Lottie-animaties aan Je Site Toe te Voegen","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-05-26T16:22:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/"},"wordCount":1249,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","articleSection":["Ontwikkelaars Centraal","Websiteontwerp","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/","name":"Hoe Lottie-animaties aan Je Site Toe te Voegen - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-05-26T16:22:10+00:00","description":"Video's en afbeeldingen kunnen je pagina's boeiend maken, maar animaties zijn unieker. Hier is hoe je Lottie-animaties aan je site kunt toevoegen om bezoekers te imponeren!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","width":900,"height":598,"caption":"How to Add Lottie Animations to Your Site"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/hoe-lottie-animaties-aan-je-site-toe-te-voegen-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Hoe Lottie-animaties aan Je Site Toe te Voegen"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"nl","translations":{"nl":69439,"en":38481,"de":57473,"pt":57470,"es":38507,"pl":51785,"uk":57457,"ru":57494,"it":67915,"fr":69417},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69439"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69439\/revisions"}],"predecessor-version":[{"id":69442,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69439\/revisions\/69442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/38502"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}