Websites & Trechters: Animaties bij verschijnen en aanwijzen

Met animaties bij het verschijnen en bij het aanwijzen met de muis maak je de content in je Trechters (Funnels) en websites interactiever. Voor knoppen kun je de effecten bij het aanwijzen ook aanpassen. Je bekijkt en wijzigt deze direct via het tabblad Animaties (Animations).

Belangrijkste functies en voordelen

Animaties voor afbeeldingen en knoppen

• Trek de aandacht: voeg animaties toe aan ondersteunde afbeeldingen en knoppen, bij het verschijnen of wanneer een bezoeker er met de muis overheen beweegt.
• Start tijdens het scrollen: animaties bij het verschijnen beginnen zodra het element in beeld komt.
• Bekijk direct een voorbeeld: bekijk de animaties in de bouwer terwijl je je content bewerkt.
• Pas effecten voor knoppen aan: selecteer een knop en ga naar Animaties → Animatie bij aanwijzen (Hover Animation) om de ingebouwde effecten te bekijken en aan te passen.

Verschillende animatie-effecten

Kies een effect dat past bij je content en je doelgroep:

• Vervagen bij verschijnen (Entrance Fade): laat elementen geleidelijk zichtbaar worden.
• Inschuiven bij verschijnen (Entrance Slide): laat elementen vanuit verschillende richtingen in beeld schuiven.
• Stuiteren bij verschijnen (Entrance Bounce): laat elementen met een stuiterend effect verschijnen.
• Draaien bij verschijnen (Entrance Rotate): laat elementen draaiend in beeld komen.
• Zoomen bij verschijnen (Entrance Zoom): laat elementen met een zoomeffect verschijnen.
• Animaties bij aanwijzen: voeg interactieve effecten toe aan knoppen. Bekijk een voorbeeld op het werkvlak voordat je een effect kiest. Pas daarna de beschikbare instellingen aan, zoals de duur, vertraging en het verloop van de beweging.
• Herhalende animaties (Loop Animations): laat een animatie doorlopend herhalen om elementen in beweging te houden.

Instellen in de bouwer

Je voegt animaties toe en past ze aan via de interface van de bouwer. Animaties bij het aanwijzen van knoppen worden automatisch uitgeschakeld op apparaten met een aanraakscherm en op schermen smaller dan 1024 pixels. Zo voorkom je dat een effect onbedoeld actief blijft.

Zo voeg je een animatie toe

1. Open de trechter- of website-editor in de bouwer.
2. Selecteer de afbeelding of knop die je wilt animeren, of voeg er een toe.
3. Open het tabblad Animaties in de zijbalk.
4. Kies een animatie voor het verschijnen, aanwijzen of herhalen, zoals vervagen, schuiven, stuiteren, draaien of zoomen.
5. Bekijk het effect direct op de pagina in de bouwer.
6. Sla je wijzigingen op en publiceer de pagina.

Een animatie bij het aanwijzen van een knop aanpassen

Via het tabblad Animaties bekijk en wijzig je effecten die actief worden als een bezoeker met de muis over een knop beweegt. Je hebt hiervoor geen aangepaste CSS nodig.

1. Selecteer in de trechter- of websitebouwer de Knop (Button) die je wilt aanpassen.
2. Open Animaties in de zijbalk.
3. Bekijk de beschikbare effecten onder Animatie bij aanwijzen.
4. Beweeg je muis over een effect om een voorbeeld op de geselecteerde knop te bekijken.
5. Selecteer het effect dat je wilt gebruiken.
6. Open Animatie aanpassen (Adjust Animation) om de beschikbare instellingen te wijzigen.

Bij alle ondersteunde effecten kun je de Duur (Duration), Vertraging (Delay) en het Bewegingsverloop (Easing) instellen. Welke extra instellingen je ziet, hangt af van het gekozen effect. Dit kunnen Schaal (Scale), Hoek (Angle), Afstand (Distance), Vulkleur (Fill Color), Randkleur (Border Color), Randdikte (Border Thickness), Vervaging (Blur) of Spreiding (Spread) zijn.

Voorbeelden van animatie-instellingen

Veelgestelde vragen

V: Werken animaties bij het aanwijzen van knoppen ook op mobiele apparaten?

Antwoord: Nee. Deze animaties worden automatisch uitgeschakeld op apparaten met een aanraakscherm en op schermen smaller dan 1024 pixels. Zo voorkom je dat een effect actief blijft nadat een bezoeker een knop heeft aangeraakt.

V: Kan ik een effect bekijken voordat ik het toepas?

Antwoord: Ja. Beweeg je muis over een beschikbaar effect in het paneel Animatie bij aanwijzen. Je ziet dan een voorbeeld op de geselecteerde knop voordat je het effect kiest.

V: Kan ik de timing van een animatie bij het aanwijzen aanpassen?

Antwoord: Ja. Je kunt de duur, vertraging en het bewegingsverloop instellen. Welke extra instellingen beschikbaar zijn, hangt af van het gekozen effect.

V: Waarom zie ik bij elk effect andere instellingen?

Antwoord: Je ziet alleen de instellingen die bij het gekozen effect horen. Afhankelijk van het effect kun je bijvoorbeeld de schaal, hoek, afstand, vulkleur, randkleur, randdikte, vervaging of spreiding aanpassen.

V: Wat gebeurt er als een knop zowel een animatie bij het verschijnen als bij het aanwijzen heeft?

Antwoord: De animatie bij het aanwijzen wordt pas actief nadat de animatie bij het verschijnen is afgelopen.

V: Heb ik aangepaste CSS nodig voor animaties bij het aanwijzen van knoppen?

Antwoord: Nee. Je kunt de ondersteunde effecten direct via het tabblad Animaties selecteren, bekijken en aanpassen, zonder aangepaste CSS.