Hoe eenvoudig CSS-animaties toevoegen in WordPress

Heb je die mooie CSS-animaties op populaire sites gezien? Geanimeerde effecten zoals glijdende inhoud, fade-in feature-boxes, stuiterende afbeeldingen, etc. In dit artikel laten we u zien hoe u gemakkelijk CSS-animaties in WordPress kunt toevoegen zonder een code te hoeven schrijven.

Wanneer en waarom moet je CSS-animaties gebruiken??

Met CSS-animaties kunt u de aandacht van gebruikers trekken op verschillende delen van de pagina.

U kunt ze gebruiken om productfuncties te animeren of een call-to-action-knop.

Veel websites gebruiken CSS-animaties terwijl gebruikers naar beneden scrollen op een pagina. Hiermee voegt u een storytelling-element toe aan de pagina met items die vordert terwijl gebruikers naar beneden scrollen.

CSS-animaties zijn ook sneller dan Flash of video's. Ze laden snel en worden ondersteund door de meeste moderne webbrowsers.

U kunt CSS-animaties handmatig toevoegen aan uw WordPress-thema of de stylesheet van het kindthema. De meeste beginners willen echter hun themabestanden niet bewerken of tijd besteden aan het leren van CSS.

Laten we echter zien hoe je eenvoudig CSS-animaties kunt toevoegen aan je WordPress-site.

CSS Animate instellen! Inpluggen

We zullen een plugin gebruiken voor deze tutorial. Hiermee kunt u CSS-animaties maken met een WYSIWYG-editor.

Het eerste wat u hoeft te doen is het Animate it installeren en activeren! inpluggen. De plug-in werkt standaard en er zijn geen instellingen die u kunt configureren.

Maak gewoon een nieuw bericht en je ziet een nieuwe knop in je WordPress visuele editor met het label 'Animate it!'.

Als u op de knop klikt, verschijnt er een pop-up waarin u uw CSS-animatie kunt ontwerpen. De plug-in ondersteunt vele CSS-animaties waaruit u kunt kiezen.

Eerst moet je een animatiestijl selecteren. Daarna moet je de vertraging en de duur van de animatie kiezen. Ten slotte moet u selecteren wanneer u de animatie wilt laten verschijnen.

De plug-in biedt drie keuzes. U kunt de animatie uitvoeren op klikken, zweven of bladeren verschuiven.

Als u tevreden bent met de instellingen, kunt u op de knop Animeren klikken om een ​​voorbeeld van de animatie te bekijken.

Klik vervolgens op de knop Invoegen om de animatie toe te voegen aan uw WordPress-bericht of -pagina. U zult merken dat de plug-in een shortcode zal toevoegen met een aantal dummy-inhoud erin in de post-editor.

U moet de dummy-inhoud in de shortcode verwijderen en deze vervangen door uw eigen inhoud, afbeeldingen of iets anders dat u wilt animeren.

Nu je down bent, klik om het bericht op te slaan of te publiceren en klik vervolgens op de voorbeeldknop. Je ziet je inhoud prachtig geanimeerd.

We hopen dat dit artikel je heeft geholpen bij het eenvoudig toevoegen van CSS-animaties in WordPress. Misschien wilt u ook onze vergelijking van de 5 beste WordPress-paginabuilders met drag & drop zien.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.