Waarom Lottie animaties?
Het is algemene kennis dat animaties goede blikvangers zijn. De digitale billboards langs de snelweg en de LED-posters op het station zijn goede voorbeelden van effectieve aandachttrekkers. Op het internet geldt hetzelfde. Animaties zorgen ervoor dat je website aantrekkelijker wordt.
Wat zijn Lottie animaties?
Lottie animaties zijn kleine, korte video's die je heel gemakkelijk op je website kan plaatsen. Omdat ze zo klein zijn kosten ze bijna geen laadtijd. En zijn ze schaalbaar zonder dat de kwaliteit achteruit gaat.
Hoe voeg je een Lottie animatie toe aan je website of webshop?
Video-uitleg:
Tekst-uitleg:
Log in op mijn.graaggoedonline.nl en klik bij je website of webshop op "Bewerken".
Ga naar de pagina waar je de Lottie animatie widget wilt plaatsen.
Klik in de linkerbalk op "widgets".
Zoek naar "Lottie Animation" en sleep de widget naar de gewenste plek.
Klik hier om een Lottie animatie uit te zoeken.
PRO TIP: klik bovenin de Lottie pagina op "Recent" of "Popular" om actuele animaties uit te zoeken.
Druk op de animatie en kies rechtsonder bij "Use this animation in" voor de optie "<html>"
Kopieer de gehele Lottie JSON URL. (Voorbeeld van een Lottie JSON URL: https://assets3.lottiefiles.com/packages/lf20_uexbYU.json)
Mocht je de instellingen willen veranderen kan dit op deze pagina (Play Mode, Direction, Achtergrondkleur, etc) MAAR dan zal je de gehele HTML code moeten kopiëren en deze in een HTML widget zetten in het systeem in plaats van de Lottie widget. Sla in dit geval stap 11 tot en met 13 over.
Ga nu terug naar de website bewerkingspagina.
Verwijder de oude link in de Lottie widget en plak de gekopieerde JSON URL in "Lottie Animation URL".
Kies tussen "Loop animation" of "Animate on click".
PRO TIP: als je een link toe wilt voegen doe je dit door op "Link" te klikken.
Klik bovenaan in het widget venster op het tabblad "Ontwerp" om het ontwerp aan te passen.
Wil je jouw wijzigingen zichtbaar maken op je live website of webshop vergeet dan niet om op "Opnieuw publiceren" te drukken rechts bovenaan de pagina.
Wanneer je bovenstaande stappen hebt gevolgd, heb je een Lottie animatie aan je website/webshop toegevoegd. Mocht je nog vragen hebben, neem dan contact op door rechtsonder een chat te starten en wij helpen je graag.