Wix Helpcentrum
    Home
  1. Een website maken
  2. Editor X gebruiken
  3. Effecten en animaties toevoegen
    4. Editor X: Lottie-animatiebestanden toevoegen en aanpassen

Editor X: Lottie-animatiebestanden toevoegen en aanpassen

Leestijd 4 minuten
Editor X schakelt over naar Wix Studio, ons nieuwe platform voor bedrijven en freelancers.Lees meer over Wix Studio
Lottie Files is een geweldige bron voor animaties van hoge kwaliteit die je kunt toevoegen aan je Editor X-website. Nadat je de animatie via de URL hebt geïmporteerd, kun je het formaat naar behoefte wijzigen en beslissen of het al dan niet herhaald wordt afgespeeld. 
In dit artikel lees je hoe je:
Voordat je begint:
Om een animatie te importeren, moet je een LottieFiles-account hebben. 

Animaties importeren uit LottieFiles

Je kunt zoveel Lottie-animaties importeren als je nodig hebt om je ontwerp op te fleuren. Zodra je een Lottie-embed-element toevoegt aan Editor X, plak je de URL van de animatie in het Instellingen-paneel om te zien hoe het eruitziet op je pagina. 
Werken met breekpunten:
Je kunt de grootte van je Lottie-animatie per breekpunt aanpassen, zodat deze er op elk scherm ideaal uitziet. 

Om een Lottie-animatie te importeren:

  1. Klik bovenaan Editor X op Elementen toevoegen.
  2. Klik op Embed en Social.
  3. Klik op Lottie-animatie.
  4. Sleep het element onder Lottie-animatie naar de gewenste locatie op je pagina.
  5. (In een apart tabblad) Kopieer de URL van de animatie uit LottieFiles:
    1. Log in op je LottieFiles-account.
    2. Klik op Save to workspace to generate.
    3. Klik onder Asset link op het Kopiëren-pictogram.
  6. Plak de URL van de animatie in Editor X:
    1. Klik op het Lottie-animatie-element in je Editor.
    2. Klik op het Instellingen-pictogram.
    3. Plak de URL onder Wat is de URL van de animatie?
    4. Druk op Enter op je toetsenbord.
De Lottie-URL wijzigen vanuit het Instellingen-paneel van het element, nadat je het hebt toegevoegd aan je Editor X-website
En nu?
Bekijk hoe je animatie wordt afgespeeld door bovenaan het Instellingen-paneel op Voorbeeld van animatie te klikken.

Een Lottie-animatie wijzigen

Als je je Lottie-animatie wilt wijzigen, kun je dat eenvoudig doen door de nieuwe URL in het Instellingen-paneel van het element te plakken. 

Om de animatie te wijzigen:

  1. Klik op de Lottie-animatie in Editor X.
  2. Klik op het Instellingen-pictogram.
  3. Plak onder Wat is de URL van de animatie? de URL van de nieuwe animatie.
De URL van de Lottie-animatie wijzigen vanuit het instellingenpaneel van het element in Editor X

Animaties instellen om herhaaldelijks af te spelen

Je kunt kiezen hoe je Lottie-animatie wordt afgespeeld: eenmalig of doorlopend. 

Om in te stellen hoe je animatie wordt afgespeeld:

  1. Klik op de Lottie-animatie in Editor X.
  2. Klik op het Instellingen-pictogram.
  3. Klik op de schakelaar naast Herhaalt zich om deze in of uit te schakelen.
Op een schakelaar klikken om een Lottie-animatie in een herhalende lus af te spelen.

Alt-tekst toevoegen aan je Lottie-animatie

Voeg in het Instellingen-paneel alt-tekst toe om je Lottie-animatie kort te beschrijven. Dit kan de SEO-ranking verbeteren terwijl je gebruikers met schermlezers helpt om te begrijpen wat je animatie laat zien. 

Om alt-tekst aan je animatie toe te voegen:

  1. Klik op de Lottie-animatie in Editor X.
  2. Klik op het Instellingen-pictogram.
  3. Typ of plak de tekstbeschrijving onder Voeg alt-tekst toe aan je animatie.
  4. Druk op Enter op je toetsenbord.
Het schrijven van alt-tekst voor een Lottie-animatie in het Instellingen-paneel van het element in Editor X.
Wat je moet weten:
Lottie-animaties worden automatisch geconverteerd naar JSON-bestanden wanneer je ze naar een Wix-website importeert. Om technische redenen kunnen niet alle bestandsvelden worden opgenomen. Lottie-animaties kunnen er daarom iets anders uitzien op een live Wix-website (bijvoorbeeld: het geeft een verminderd bereik / verminderde hoeveelheid beweging weer). 

Vond je dit artikel nuttig?

|
In dit artikel
  • Animaties importeren uit LottieFiles
  • Een Lottie-animatie wijzigen
  • Animaties instellen om herhaaldelijks af te spelen
  • Alt-tekst toevoegen aan je Lottie-animatie