Bewegende beelden kan zijn mogelijk door in WordPress SVG en Gif bestanden te uploaden, maar er zijn ook nog andere oplossingen die je vrij eenvoudig kan toepassen.
We lichten de belangrijkste eruit, zodat je zelf kan kiezen welke voor jou het beste is. In de tussentijd lossen we een aantal veelvoorkomende issues op die kunnen voorkomen bij het werken met de verschillende animatie technieken.
Inhoudsopgave
WordPress Gif animaties
Hoe krijg ik een WordPress Gif animatie op mijn site?
Gif bestanden worden standaard ondersteund binnen WordPress, dus dit is natuurlijk samen met filmpjes plaatsen de makkelijkste manier om bewegend beeld in je website te krijgen. Let daarbij wel altijd op de bestandsgrootte, maar dat geldt voor alle manieren waarbij je bestanden naar je website moet uploaden.
De meest bekende plekken om GIF animaties voor je website te vinden zijn Giphy en Tenor. Je kan hier zoeken op vele onderwerpen en het is de bron van veel van die grappige en schattige afbeeldingen die je regelmatig voorbij ziet komen op internet.
Hoe maak ik zelf een Gif animation voor mijn site
Er zijn meerdere professionele programma’s waarmee je animaties kan maken voor op je website. Om er een aantal te noemen: Synfig, Blender, GIMP en zelfs nieuwere PowerPoint versies.En ook tijdens onze 1-op-1 cursus Photoshop kan je dit leren.
Het nadeel daarvan is dat je ze vaak moet aanschaffen en dat de leercurve vrij hoog is. Daarom ben ik een grote fan van online tools. Die hoef je niet eens te installeren en zijn meestal gratis, zoals bijvoorbeeld:
Waarom beweegt een WordPress Gif soms niet?
Soms lijkt een Gif bestand niet te werken in WordPress. Dit komt doordat er dan niet is gekozen voor de volledige grootte afbeelding. WordPress maakt namelijk automatisch van elke afbeelding een aantal varianten, maar voor deze afbeeldingen met nieuwe maten gaat helaas de animatie verloren. Het is dus eenvoudig op te lossen door bij de standaard blokbewerker in de rechterbalk bij Grootte afbeelding te kiezen voor “Volledige grootte”:
Waarom beweegt mijn logo niet?
Hetzelfde probleem als hierboven kan optreden bij het plaatsen van een bewegende GIF als logo.
Wanneer er wordt gevraagd om het logo bij te snijden tijdens het plaatsen kan je dit dus het beste overslaan.
Een grotere kans van slagen krijg je dus wanneer de Gif afbeelding van je logo al de juiste afmetingen heeft. Dit is doorgaans niet breder dan 400px en niet hoger dan 100px voor een horizontaal logo en niet hoger dan 160px voor een vierkant logo.
Check natuurlijk wel of de animaties nog steeds aanwezig is na het aanpassen met een fotobewerkingspakket zoals bijvoorbeeld: Photoshop, Affinity of Gimp.
Wanneer het dan nog niet werkt, dan zit het probleem in het thema. Vraag dan even na bij de bouwer van het thema. Dit kan bij gratis thema’s ook door het thema op te zoeken en dan onder de beoordelingen op de knop te klikken om het Support forum te bezoeken. Omdat het gratis is zal je doorgaans wel een weekje moeten wachten op een antwoord.
WordPress animaties met SVG
Een nieuwere vorm van animaties die je kan gebruiken zijn SVG animaties. Een SVG bestand is een vector bestand wat betekent dat je grootte kan variëren en daarbij de kwaliteit goed blijft, ook al maak je de afbeelding heel groot. Dit heeft meestal de voorkeur voor logo’s, omdat ze dan onder alle omstandigheden super scherp blijven.
WordPress SVG uploaden hoe doe je dat?
Het probleem van SVG is dat WordPress het standaard niet ondersteunt, daarom kan je standaard ook geen SVG bestanden uploaden. Ook zal het je dus niet lukken om je mooie SVG logo te plaatsen.
De reden hiervoor is dat SVG bestanden uit XML-code bestaan en er mogelijk onveilige dingen in kunnen staan. Wanneer je de bron van het SVG bestand dus niet 100% vertrouwd raden we aan om de afbeelding niet te gebruiken.
Wanneer je de SVG afbeelding zelf hebt gemaakt, of via je designer hebt ontvangen mag je dus aannemen dat je die SVG wel veilig kan uploaden.
Gelukkig is er een oplossing, want we kunnen SVG eenvoudig toestaan met bijvoorbeeld een van deze plugins. Op dit moment zijn ze niet recent bijgewerkt, maar dit zijn plugins die vrijwel niet veranderen over tijd, anders kan je ook zelf nog checken voor een mogelijk recenter bijgewerkt alternatief.
Of deze plugin:
Kant en klare SVG animaties
Er zijn inmiddels al meerdere bibliotheken met kant & klare animaties die je als SVG kan uploaden. Soms kan je daar nog wat eigenschappen van instellen voordat je deze download. Neem maar eens een kijkje bij de volgende:
Disclaimer: wij zijn niet bekend met de herkomst van de SVG en/of Javascript bestanden die je op de gegeven adressen kan vinden, je gebruikt deze dus op eigen risico.
Hoe maak je een SVG kleiner voor WordPress?
Wanneer je SVG’s maakt moet je zo weinig mogelijk punten gebruiken, anders kan het bestand best groot worden. Wanneer je denkt dat je dit al voldoende hebt gedaan kan je eventueel nog je bestand door de SVG minify tool halen door de SVG daar te uploaden. Daarmee wordt het bestand vaak toch nog wat kleiner. Dit proces wordt ook wel SVG sanitizing genoemd.
Online SVG animatie programma’s
Om zelf animaties zelf te maken vergt wel wat tijd en vaak geld. Een veel gebruikt pakket is bijvoorbeeld Adobe after effects. Je zal dus vrijwel altijd een nieuw programma moeten leren gebruiken. Gelukkig kan je dit bij de meeste opties gratis proberen, zoals bijvoorbeeld bij deze complete pakketten:
Je kan ook eerst een losse SVG afbeelding maken en deze later animeren. Met Vector magic kan je bijvoorbeeld eenvoudig en gratis een afbeelding uploaden en omzetten naar SVG.
Zelf een SVG maken
Zelf maken kan behalve met betaalde tools als Adobe After effects, Illustrator, XD of gratis met Inkscape bijvoorbeeld ook met de volgende online oplossingen (meeste gratis):
Inkleuren van een SVG pictogram
Met het programma waarmee je een SVG maakt kan je ook natuurlijk ook de kleuren bepalen, maar soms is het fijn om een icoontje eenvoudig online te kleuren, zonder daar iets voor te installeren en geschikt voor zowel PC als Mac.
Animeren van je zelf gemaakte bestanden
Dan zijn er zowel offline als online meerdere mogelijkheden om je SVG bestanden te animeren, bijvoorbeeld:
WordPress SVG animatie met Lottie
Meerdere bedrijven bieden nu de mogelijkheid om animaties te maken en sommige bieden daarbij ook WordPress uitbreidingen waarmee je ze zonder programmeren op je website kan zetten. Een daarvan is Lottiefiles. Ga maar eens met je muis naar de ster hierboven, dan zal je de animatie zien 🙂
Ook kan je met de Bodymovin uitbreiding voor Adobe After effects direct naar dit formaat exporteren.
Je kan dan de gemaakte Lottie bestanden gebruiken op je website met de standaard blokbewerker Gutenberg door bijvoorbeeld de Ultimate addons voor Gutenberg plugin te gebruiken of anders kan je ook in de meeste gevallen de embed code via een HTML blok plaatsen.
Tijdens onze Elementor pro cursus behandelen we Lottie want die wordt standaard ondersteund. Maar ook voor de gratis versie van Elementor zijn er mogelijkheden, zoals bijvoorbeeld Animentor:
Check wanneer deze niet voldoet anders hier voor de meest recente plugins voor Lottie.
Animaties met CSS
Met CSS kan je ook animaties en transities maken, maar daarmee kan je alleen al aanwezige objecten (HTML) op een pagina beïnvloeden. Je kan bijvoorbeeld de kleur van een tekst laten veranderen, of een blokje laten bewegen. Dit is bijvoorbeeld een leuke CSS glas effect tool.
Er zijn ook nog meerdere online CSS tools om mee te spelen, maar je moet in de meeste gevallen deze talen toch wel machtig zijn. We hebben daar eventueel een leuke HTML & CSS training voor.
Animaties met Javascript
Ook met de taal Javascript zijn animaties mogelijk. Deze zijn vaak wel wat moeilijker te implementeren en kunnen je website onnodig complex maken. Bovendien kan door de aanpassingen die soms nodig zijn de veiligheid van de website in het geding komen.
De animaties kunnen wel meer complex gemaakt worden en interactie met andere delen van de website en de muisaanwijzer van de bezoeker zijn ook mogelijk. Neem maar een kijkje bij Greensock GSAP of Anime om een idee te krijgen, ze hebben een leuke Showcase. Meer technisch heb je dan verder ook nog Create JS.
Bewegende beelden met HTML5 canvas
Met HTML5 is het ook nog mogelijk om animaties te maken op je website, dit gaat vaak in combinatie met Javascrip.
Normaal moet je hiervoor natuurlijk de benodigde talen beheersen, maar er zijn professionele applicaties voor zoals Adobe Animate, Google webdesigner of Tumult hype die het vaak iets makkelijker maken. Ook online zijn hier ook veel (meestal gratis) oplossingen, maar ze blijven helaas wel vaak wat technisch:
HTML5 met interactie
Geavanceerde Interactie op je website is ook een mogelijkheid met HTML 5 Canvas. Je kan dan denken aan: quizzen, een tijdslijn, memory games of interactieve videos. De plugin die dit al jaren mogelijk maakt is H5P. Deze is ook voor beginners een leuke introductie tot de mogelijkheden van de toekomst.
Tot slot
We hebben alle mogelijkheden besproken om bewegende beelden in je WordPress website te krijgen. Je weet nu de valkuilen, gevaren en oplossingen wanneer je tegen problemen aan loopt.
Multimedia speelt een steeds grotere rol op websites, dus nu ben je helemaal op de hoogte van de mogelijkheden. Laat het ook weten wanneer je zelf nog leuke ontwikkelingen voor WordPress tegenkomt, we horen dit altijd graag!