Eenvoudig CSS-animaties toevoegen in WordPress met Animate It

Heb je die catchy CSS-animaties op andere sites gezien? Geanimeerde effecten zoals content die verschuift, fade-in feature boxes, stuiterende effecten en dergelijke. In dit artikel laten we je zien hoe je eenvoudig CSS-animaties op je WordPress website kunt toevoegen zonder een enkele code te hoeven schrijven.

Waarom gebruikmaken van CSS-animaties?

Met CSS-animaties kun je de aandacht van de gebruiker trekken op belangrijke momenten van zijn of haar customer journey. Je kunt animaties bijvoorbeeld inzetten om producten, USP’s of een call-to-action knop uit te lichten. Veel websites zetten CSS-animaties in wanneer een bezoeker op een pagina naar beneden scrolt. Dit voegt een visueel element toe aan de pagina, die de bezoeker echt begeleidt. Specifieke items springen in het oog wanneer iemand scrolt. Je maakt het de bezoeker ook makkelijke om de hoofdzaken te kunnen onderscheiden van de resterende content.

CSS-animaties zijn ook sneller dan bijvoorbeeld video’s of gif-abeeldingen. Ze laden snel en worden ondersteund door de meeste browsers.

Je kunt handmatig CSS-animaties toevoegen aan je WordPress-thema of de stylesheet van je child theme. De meeste beginnende WordPress-gebruikers willen hun themabestanden echter niet bewerken of tijd besteden aan het leren van CSS.

Laten we eens kijken hoe je eenvoudig CSS-animaties aan je WordPress-site kunt toevoegen, zonder enig codeerwerk.

Installeer de Animate It plugin

In deze tutorial zullen we gebruikmaken van de plugin Animate It. Wij hebben Animate It getest en zijn er zeer over te spreken. Het is een plugin waarmee we allemaal elementen op onze site website gemakkelijk kunnen animeren. Zoals je menu, afbeeldingen en tekst. Allemaal direct vanuit je WordPress backend. Het eerste wat je moet doen, is het installeren en activeren van Animate It. De plugin werkt direct na activatie. Je hoeft dan ook geen extra instellingen aan te passen.

Op de website van de makers van Animate It staan demo’s met wat je allemaal kunt animeren met de plugin. Zo kun je iconen animeren, teksten en afbeeldingen laten verschijnen als bezoekers door je website aan het scrollen zijn en je hebt meer dan 50 verschillende animaties om uit te kiezen! Naast de opvallende animaties die de aandacht trekken, heb je ook keuze uit de wat subtielere animaties. En het mooiste is, wederom: je hebt 0,0 kennis nodig van coderen! Ander voordeel: Animate it is geheel gratis, en het is ook nog eens een zeer klein programma; dus het vertraagd je website niet.

Enig (tijdelijk) nadeel is dat het nog niet compatible is met de Gutenberg editor. Maar volgens de makers zijn ze daar druk mee bezig. Wel is het te gebruiken met de klassieke editor van WordPress of de pagebuilder Elementor.

Aan de slag: een menu animeren

Na activatie kun je naar het menu item Weergave > Menu om je menu te animeren. We willen bijvoorbeeld mijn headermenu item ‘WordPress Diensten’ animeren. Dan klap ik deze uit, en dan zie je hier een veld waarin je een CSS class kunt invullen. Als je dit veld niet ziet, dan moet je hierboven je schermopties uitklappen; vink hier het item CSS-classes aan. Om mijn headermenu item ‘WordPress Diensten’ te animeren moeten we hier een CSS class toevoegen.

Eenvoud dankzij de CSS Class generator van Animate It

Dit klinkt misschien ingewikkeld, maar het is met deze plugin eigenlijk heel eenvoudig. Op de website van de makers van Animate It kun je je eigen animaties maken, en als je tevreden bent met het resultaat genereert de site zelf de CSS code voor je!

Op de bovenstaande afbeelding zie je de CSS Class generator van Animate It. Als je naar beneden scrolt, zie je allerlei verschillende velden staan.

Voorbeeld

• Je ziet de rode knop ‘Animate It’. Als je hier op klikt, zie je dat het voorbeeld hierboven de animatie uitvoert.
• Onder het kopje ‘style’ zie je ‘spin’ staan. Dit was dus de spin animatie.

Als je bij ‘style; het drop-downmenu uitklapt, zie je alle verschillende animaties staan. Je hebt, zoals je kunt zien, behoorlijk veel keuze. Als je een animatie selecteert, zie je ook gelijk hoe deze eruit komt te zien. Neem de je tijd om de animaties even rustig door te lopen. Een iets subtielere animatie is bijvoorbeeld de ‘push’ variant.

• In het veld eronder de ‘delay’ in seconden aangeven. Delay (vertraging) staat voor het aantal seconden voordat de animatie wordt uitgevoerd. Wil je dat de animatie zich bij een klik direct afspeelt, laat de delay dan op ‘none’ staan.
• In het veld ‘duration’ kun je aangeven hoeveel seconden de animatie moet duren.
• Dan kun je ook nog aangeven of je de animatie oneindig achter elkaar wilt laten afspelen. Wij hebben dit getest, en in vrijwel alle gevallen lijkt mij dit niet gewenst. Maar probeer vooral uit, wellicht dat het wel in jouw situatie passend is!
• Ten slotte kun je kiezen wanneer de animatie zich moet afspelen. Dit kan zijn wanneer iemand erlangs scrolt, dan vink je de eerste optie aan. Of je kiest ervoor dat je gekozen animatie zich voordoet als een bezoeker klikt op het element dat je wil animeren. Je kunt tevens nog aangeven of de animatie moet starten als een bezoeker er enkel met zijn muiscursor er overheen gaat. Let op: je kunt maar één optie kiezen van de drie.

👍 Als je alles naar wens hebt ingevuld klik je op de groene knop ‘Generate’. Dan verschijnt er een pop-up met de CSS code. Deze kun je kopiëren door op Ctrl+C te klikken.

De CSS-class code toevoegen aan je menu-element

Als je dan weer terugkeert naar Weergave > Menu, plak je deze code in het CSS Class veld. Wil je deze animatie toekennen aan alle menu-items, klap dan alle andere menu-items uit, en plak dezelfde code in alle CSS Class velden. Wellicht wel zo logisch om de bezoeker bij elke menu-klik dezelfde animatie te tonen.

Vergeet niet de menu-wijzigingen op te slaan.

Ga vervolgens naar de live voorkant van je website en kijk wat je van het eindresultaat vindt, door een aantal keren op je menu-opties te klikken.

Ben je niet helemaal tevreden met de nieuwe animatie, dan kun je deze weer aanpassen door bijvoorbeeld een beetje aan de duration en de delay te sleutelen; of voor een hele andere animatie te kiezen.

Animaties toevoegen in Elementor

Maak je gebruik van Elementor page builder, pas dan een specifieke pagina aan door te klikken op ‘bewerk met Elementor’.

Kies een specifieke afbeelding, button of ander element

Wanneer je door je pagina scrolt en met je muis over de afbeelding (of ander element, dat je wilt animeren) gaat, verschijnt er een icoontje. Als je hierop klikt kun je links in het menu aanpassingen doen aan deze afbeelding. Dan ga je naar het tabblad ‘geavanceerd’. Hier zie je het veld CSS-Class staan. Hier vul ik dan je aangemaakte CSS animatiecode in.

Ook hier, niet vergeten je wijzingen op te slaan. Linksboven klik je op de drie streepjes > ‘pagina bekijken’ en kun je je animatie in volle glorie zien en testen.

Pagina’s en berichten animeren zonder Elementor

De klassieke editor installeren op je WordPress site

Zoals eerder gezegd, is de Animate It plugin nog niet te gebruiken met Gutenberg. Wel kun je je pagina’s en berichten animeren met de oude, klassieke WordPress editor. De klassieke editor is zelfs nog zo populair, dat als je een nieuwe plugin gaat installeren in je WordPress dashboard, deze bovenaan staat uitgelicht.

Installeer en activeer deze.

Voorbeeldanimatie: een afbeelding van onze Cursus WordPress

Nu gaan we naar de pagina het bericht waar je een animatie wilt toevoegen aan een bepaald element. In ons voorbeeld hebben we een testpagina aangemaakt met daarin een simpele afbeelding van onze Cursus WordPress.

Klik op de ‘Animate It’ knop

Wanneer je op de kleine ‘Animate It’ button klikt, opent zich een pop-up venster, die dezelfde functionaliteiten bevat als de eerder benoemde CSS-class generator:

Even instellen

Hier vul je je gewenste animatiestijl, delay, duration en timing (zoals eerder beschreven). De knop Animate It laat een voorvertoning zien. Laat dit het gewenste effect zien, klik dan vervolgens op ‘Insert’. Op je pagina of bericht verschijnt dan de onderstaande code:

De laatste stap

De allerlaatste stap is het toevoegen van je afbeelding of button (of welk element je in gedachte hebt) tussen de coderegels, waar “Please add your content in this area.” staat. Vervang deze tekst met je afbeelding. Sla je pagina of bericht op en aanschouw het visuele effect op je website!

Dit is het einde van deze tutorial. Zo! hopelijk ben je nu klaar om je eigen animaties toe te voegen aan je WordPress-website!

Wil je meer leren over hoe je je eigen website kunt maken met WordPress? Of heb je dringend hulp nodig met een technisch probleem? Kijk dan naar onze diensten, waaronder de Hulp op Afstand service.

IWA-Groep, een betrouwbare partner voor de mooiste sites, mét die animaties!

Wij werken samen met IWA-groep die een all-in-pakket aanbiedt met eenmalige betaling. Zij kunnen de zorg van het bouwen van een WordPress-website van je afnemen zodat je meer tijd in je bedrijf kunt steken. Tip! Ook wat betreft bewegende elementen kunnen ze mooie creaties maken.
Ga naar IWA-groep

Beoordeel dit artikel