Websites & Trechters: Animatie-aanpassingen

In dit artikel leggen we uit hoe je Animation Customizations binnen Funnels & Websites gebruikt om je paginadesigns te verbeteren. Je leert hoe je bepaalt hoe elementen animeren door timing, easing en effect-specifieke instellingen rechtstreeks vanuit de Page Builder aan te passen. Je kunt ook configureerbare hoveranimaties toevoegen aan Button-elementen zonder aangepaste CSS. Of je nu een landingspagina, funnel of volledige website maakt, met deze tools creëer je vloeiende, interactieve ervaringen rechtstreeks in Voluit Suite.

INHOUDSOPGAVE

What is Animation Customizations in Funnels & Websites?
Animation Delay Behavior Enhancement
Key Benefits of Animation Customizations
How to Set Up Animation Customizations
Frequently Asked Questions

Wat zijn Animation Customizations in Funnels & Websites?

Animation Customizations is een ingebouwde functie in de Page Builder waarmee je bepaalt hoe afzonderlijke elementen animeren in je funnels en websites. Je krijgt speciale animatiebedieningen voor het aanpassen van timing, beweging, easing en andere ondersteunde eigenschappen, met een realtime voorbeeld. Zo maak je makkelijker professionele bewegingen en interacties zonder de editor te verlaten of aangepaste code toe te voegen.

Beschikbare animatiebedieningen kunnen het volgende omvatten:

Scale: Past de grootte van ondersteunde animatie-effecten aan, met waarden van 0.5× tot 2×.
Duration: Bepaalt hoelang de animatie duurt, van 0.1 tot 3 seconden.
Delay: Voegt maximaal 5 seconden toe voordat de animatie begint.
Easing: Kies uit Linear, Ease-In, Ease-Out en Ease-In-Out om te bepalen hoe de animatie versnelt en vertraagt.

Voor Button-elementen kun je ook configureerbare hoveranimaties toepassen vanuit het tabblad Animations. Je kunt hovereffecten rechtstreeks op het canvas bekijken en aanpassen met timingbedieningen en effect-specifieke instellingen, zoals schaal, hoek, afstand, kleur, rand of schaduw.

Met deze bedieningen krijg je meer flexibiliteit om interactieve Buttons en professionele pagina-animaties te maken, terwijl de ervaring bewerkbaar blijft in de Voluit Suite Page Builder.

Verbeterd gedrag van animatievertragingen

Animatievertragingen werken nauwkeuriger in funnels en websites. Elementen blijven verborgen tijdens de geconfigureerde vertragingsperiode en worden zichtbaar wanneer de animatie begint.

Voorheen konden bepaalde elementen kort zichtbaar worden voordat de vertraging was voltooid. Dit gedrag is gecorrigeerd voor vloeiendere en visueel consistentere animaties, vooral bij het gebruik van gespreide animatiereeksen.

Entree-animaties wachten ook totdat het element in beeld is voordat ze worden afgespeeld en worden niet langer opnieuw gestart tijdens veelvoorkomende bewerkingen in de builder, zoals slepen en neerzetten, wisselen tussen apparaatweergaven of het bewerken van het element.

Er is geen extra configuratie nodig. Bestaande animatie-instellingen volgen automatisch het verbeterde gedrag.

Belangrijkste voordelen van Animation Customizations

Met Animation Customizations creëer je doelgerichte bewegingen en interactieve Button-statussen rechtstreeks in de Page Builder. Met deze bedieningen verfijn je pagina-interacties makkelijker zonder aangepaste CSS.

Granular control: Pas timing, easing en effect-specifieke eigenschappen aan om het gedrag van animaties nauwkeurig af te stemmen.
Configurable Button hover effects: Voeg interactieve hoverstatussen rechtstreeks vanuit de zijbalk toe zonder aangepaste CSS te schrijven of te onderhouden.
Real-time preview: Bekijk animatie-effecten op het geselecteerde element voordat je ze toepast en bekijk aanpassingen rechtstreeks op het canvas.
Effect-specific settings: Je ziet alleen de bedieningen die van toepassing zijn op het geselecteerde hovereffect, zoals schaal, afstand, vulkleur, randdikte of schaduwinstellingen.
Professional polish: Gebruik beweging en hoverinteracties om de aandacht te sturen en call-to-actions interactiever te maken.

Samen helpen deze mogelijkheden je om vloeiende animaties met grote impact te maken, terwijl de configuratie binnen de Voluit Suite Page Builder blijft.

Animation Customizations instellen

Gebruik de Page Builder om entree-animaties toe te passen op ondersteunde elementen en hoveranimaties te configureren voor Button-elementen.

Het gedeelte Funnels openen

Ga vanuit de Sub-Account View naar Sites → Funnels. Hiermee open je de lijst met funnelprojecten die beschikbaar zijn in het account.

Een funnel kiezen of maken

Gebruik de balk Search for Funnels om een bestaande funnel te openen of klik op + New Funnel om er een te maken. Hiermee open je het scherm Funnel Steps, waar je elke funnelstap kunt beheren en bewerken.

De te animeren pagina selecteren

Selecteer in de lijst met funnelstappen de pagina waarvoor je animaties wilt configureren. Hiermee laad je het voorbeeld van de geselecteerde pagina en de beschikbare bewerkingsopties.

De pagina-editor openen

Klik onder het voorbeeld van de geselecteerde pagina op de knop Edit en kies vervolgens Edit in a New Tab. Hiermee open je de pagina in de Page Builder.

Het te animeren element selecteren

Selecteer het element dat je wilt animeren, zoals een Button, tekstblok of afbeelding. De elementinstellingen verschijnen in de rechterzijbalk.

Animatie-instellingen openen

Open met het element geselecteerd het tabblad Animations in de rechterzijbalk. Hier beheer je de beschikbare instellingen voor entree- en hoveranimaties van het geselecteerde element.

Een entree-animatie selecteren

Klik op Entrance Animation om aan te passen hoe het geselecteerde element verschijnt wanneer het de pagina binnenkomt. Hiermee open je de beschikbare stijlen voor entree-animaties.

Een animatiestijl kiezen

Bekijk de beschikbare animatieopties onder Fade, Slide, Bounce en andere beschikbare groepen. Selecteer een animatie om te bekijken hoe het element de pagina binnenkomt.

Op Adjust Animation klikken

Klik na het selecteren van een animatiestijl op Adjust Animation. Hiermee open je de beschikbare instellingen om de animatie nauwkeurig af te stemmen.

Animatiegedrag nauwkeurig afstemmen

Gebruik de beschikbare bedieningen om eigenschappen zoals Scale, Duration, Delay en Easing aan te passen. De beschikbare bedieningen zijn afhankelijk van de geselecteerde animatie.

Easing-gedrag aanpassen

Open de vervolgkeuzelijst Easing om te bepalen hoe de animatie versnelt en vertraagt. Kies uit Linear, Ease In, Ease Out of Ease In Out.

Een Button-hoveranimatie configureren

Hoveranimaties geven Buttons een visuele reactie wanneer een bezoeker de muisaanwijzer erboven plaatst. Gebruik de ingebouwde hovereffecten om interactieve call-to-action-statussen rechtstreeks vanuit de Page Builder te maken zonder aangepaste CSS toe te voegen.

Selecteer in de Page Builder de Button die je wilt animeren.
Open het tabblad Animations in de rechterzijbalk.
Klik op Hover Animation.
Bekijk de beschikbare hovereffecten. Beweeg de muisaanwijzer over een effectkaart om een voorbeeld van de animatie op de geselecteerde Button te bekijken voordat je deze toepast.
Selecteer het hovereffect dat je wilt toepassen.
Klik op Adjust Animation om de instellingen voor het geselecteerde effect te openen.
Configureer Duration, Delay, Easing en eventuele aanvullende instellingen die beschikbaar zijn voor het geselecteerde effect.
Bekijk de Button op het canvas en publiceer de pagina wanneer de interactie correct werkt.

Opmerking: Als de Button ook een entree-animatie heeft, wordt de hoveranimatie actief nadat de entree-animatie is voltooid.

Opmerking: Hoveranimaties worden automatisch uitgeschakeld op touchapparaten en schermen kleiner dan 1024px om te voorkomen dat bezoekers vast komen te zitten in een hoverstatus.

Opmerking: Wanneer dezelfde Button voorkomt in herhaalde pagina-ervaringen, zoals sticky bars of navigatieklonen, gebruiken de herhaalde instanties dezelfde hoveranimatie als de oorspronkelijke Button.

Instellingen voor hoveranimaties aanpassen

Elk hovereffect bevat timingbedieningen, terwijl aanvullende instellingen verschijnen op basis van het geselecteerde effect. Hierdoor blijft het aanpassingspaneel gericht op instellingen die invloed hebben op de animatie die je gebruikt.

Alle ondersteunde Button-hovereffecten omvatten:

Duration: Bepaalt hoelang de hoveranimatie nodig heeft om te voltooien. Beschikbare waarden variëren van 0.1 tot 3 seconden.
Delay: Bepaalt hoelang Voluit Suite wacht voordat het hovereffect wordt gestart. Beschikbare waarden variëren van 0 tot 5 seconden.
Easing: Bepaalt hoe de animatie versnelt en vertraagt. Beschikbare opties zijn Linear, Ease In, Ease Out en Ease In Out.

Aanvullende bedieningen zijn afhankelijk van het geselecteerde hovereffect:

Effect Group	Examples	Additional Controls
Schaal	Grow, Shrink, Pulse, Bounce In	Scale (0.5×–2×)
Rotatie	Rotate, Skew Forward	Angle (−180° tot 180°)
Beweging	Float, Wobble Horizontal, Buzz	Distance (0–50)
Achtergrond	Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top	Fill Color
Rand / Omtrek	Ripple Out, Outline In, Underline From Center	Border Color, Border Thickness (1–10px)
Schaduw / Gloed	Shadow, Glow, Box Shadow Outset	Shadow Color, Blur (0–50px), Spread (0–50px)

Veelgestelde vragen

V: Heb ik ervaring met animaties nodig om deze functie te gebruiken?

A: Nee. Animatiebedieningen zijn rechtstreeks beschikbaar in de Page Builder, met voorbeelden en duidelijk gelabelde instellingen voor het configureren van ondersteunde effecten.

V: Welke typen animaties kan ik toepassen?

Je kunt beschikbare entree-animaties toepassen op ondersteunde pagina-elementen. Button-elementen ondersteunen ook configureerbare hoveranimaties met bedieningen voor timing en effect-specifieke eigenschappen.

V: Kan ik animaties bekijken voordat ik publiceer?

Ja. Animatie-instellingen worden als voorbeeld weergegeven in de Page Builder. Voor Button-hoveranimaties kun je ook met de muisaanwijzer over een effectkaart bewegen om dat effect op de geselecteerde Button te bekijken voordat je het toepast.

V: Wat doet easing in een animatie?

Easing bepaalt hoe de animatie versnelt en vertraagt tijdens het afspelen. Je kunt kiezen uit Linear, Ease In, Ease Out of Ease In Out.

V: Kan een Button zowel een entree- als een hoveranimatie gebruiken?

Ja. Een Button kan een entree-animatie en een hoveranimatie gebruiken. Wanneer beide zijn geconfigureerd, wordt de hoveranimatie actief nadat de entree-animatie is voltooid.

V: Werken Button-hoveranimaties op touchapparaten en kleinere schermen?

Hoveranimaties worden automatisch uitgeschakeld op touchapparaten en schermen kleiner dan 1024px, zodat bezoekers niet vast komen te zitten in een hoverstatus.