Animaties gebruiken op je Website Builder-site

Wil je je website een visuele boost geven? Probeer dan animaties toe te voegen!

Met animaties kun je je Website Builder-site tot leven brengen met aantrekkelijke visuele effecten. Open de instellingen van een component, kies een animatie-effect en bekijk direct en voorbeeld. Elk component kan zijn eigen animatie hebben, die je kunt aanpassen aan je stijl - zo hbe je eindeloos veel manieren om een persoonlijke touch toe te voegen en je website echt te laten opvallen.


Waarom zou ik animaties gebruiken op mijn website?

Animaties kunnen op veel manieren en voor verschillende doelen worden gebruikt. Je kunt ze gebruiken om de aandacht te vestigen op specifieke onderdelen of om interactie met elementen (zoals knoppen of sociale media-links) te stimuleren. Je kunt ze ook creatief inzetten om de inhoud van je website levendiger en aantrekkelijker te maken. Hoe je ze ook gebruikt, animaties zijn een krachtige manier om je website persoonlijk en professioneel te maken.

Wil je enkele effecten in actie zien? Bekijk onderstaande GIF. Op deze site hebben we verschillende effecten toegevoegd aan teksten, knoppen en containers.

GIF van een website met animaties in the preview.

Animaties toevoegen aan je Website Builder-componenten

Je kunt animaties toevoegen aan de volgende Website Builder-componenten :

  • Tekst
  • Afbeeldingen
  • Kaders en Containers
  • Knoppen
  • Pictogrammen
  • Sociale media-pictogrammen
  • Logo's

Je vindt de animatie-instellingen door op Bewerken te klikken, dat boven- of onderaan een component verschijnt zodra je erop klikt. 

Hier is een voorbeeld waarin we animatie-effecten toevoegen aan een tekst:

  1. Selecteer de component en klik boven- of onderaan op Tekst bewerken.
  2. Klik in het zwevende menu op Animatie.
  3. Zet de schuifknop Animaties toevoegen op AAN.
  4. Onder Animatie-effect kies je een effect in het dropdownmenu. Je kunt kiezen uit: Vervagen, Schuiven of Stuiteren.
  5. Als je Vervagen of Schuiven kiest, kun je ook een Animatierichting selecteren. Dit is de richting waaruit de animatie in beeld komt. Mogelijke opties zijn: vanuit midden, van boven, van onder, van links of van rechts.
  6. Kies de snelheid van de animatie. De opties zijn: snel (300 ms), gemiddeld (600 ms) of langzaam (1000 ms).
  7. Kies of er een vertraging moet zijn en zo ja, hoe lang.
  8. Sla je wijzigingen op en bekijk de animatie in het Voorbeeld. Let op: de animatie speelt niet af in de editor.
  9. Herhaal deze stappen voor alle andere componenten waaraan je animaties wilt toevoegen.

Let op: Een animatie wordt maar één keer per pagina geladen. Dat betekent dat het niet opnieuw zichtbaar wordt als een websitebezoeker terug omhoog scrolt op de pagina.

Screenshot van het eigenschappenpaneel en het zwevende menu van een component. Het zwevende menu heeft het Animatie-menu geopend, met genummerde stippen die de instellingen aanduiden zoals hierboven beschreven.

Gerelateerde artikelen:

Was dit artikel nuttig?

Kun je het antwoord niet vinden?

Start een chat

De snelste manier om contact op te nemen — op werkdagen van 09:00 tot 18:00.

Bellen kan ook!

Beschikbaar op werkdagen van 09:00 tot 16:00.