Så enkelt lägger du till CSS-animationer i WordPress

Har du sett de här vackra CSS-animationerna på populära webbplatser? Animerade effekter som glidande innehåll, blekna i funktionslådor, studsande bilder, etc. I den här artikeln visar vi hur du enkelt kan lägga till CSS-animationer i WordPress utan att skriva någon kod.

När och varför ska du använda CSS-animationer?

CSS-animationer gör att du kan ta användarens uppmärksamhet på olika delar av sidan.

Du kan använda dem för att animera produktfunktioner eller ett anrop till åtgärdsknapp.

Många webbplatser använder CSS-animationer som användare rullar ner en sida. Detta lägger till ett berättande element på sidan med objekt som fortskrider när användarna bläddrar ner.

CSS-animationer är också snabbare än flash eller video. De laddas snabbt och stöds av de flesta moderna webbläsare.

Du kan lägga till CSS-animationer manuellt till ditt WordPress-tema eller barnteman stilark. De flesta nybörjare vill emellertid inte redigera deras temafiler eller spendera tid på att lära sig CSS.

Med det sagt, låt oss se hur du enkelt kan lägga till CSS-animationer till din WordPress-webbplats.

Ställa in CSS animera! plugin

Vi använder ett plugin för denna handledning. Det låter dig skapa CSS-animeringar med en WYSIWYG-editor.

Det första du behöver göra är att installera och aktivera animeringen! plugin. Pluggen fungerar ur lådan och det finns inga inställningar för dig att konfigurera.

Skapa helt enkelt ett nytt inlägg, och du kommer att märka en ny knapp i din WordPress visuell redigerare som heter "Animate it!".

Genom att klicka på knappen kommer en popup där du kan utforma din CSS-animering komma fram. Pluggen stöder många CSS-animeringar för att välja mellan.

Först måste du välja en animationsstil. Därefter måste du välja animationsfördröjning och varaktighetstid. Slutligen måste du välja när du vill att animationen ska visas.

Pluggen erbjuder tre val. Du kan köra animationen på klicka, sväva eller rulla offset.

När du väl är nöjd med inställningarna kan du klicka på animera den för att se en förhandsgranskning av animationen.

Klicka sedan på infogningsknappen för att lägga till animationen i ditt WordPress-inlägg eller -sida. Du kommer att märka att plugin kommer att lägga till en kortnummer med lite dummyinnehåll inuti det i postredigeraren.

Du måste ta bort dummyinnehållet inom kortnumret och ersätta det med ditt eget innehåll, bilder eller något annat du vill animera.

Nu när du är nere, klicka för att spara eller publicera inlägget och klicka sedan på förhandsgranskningsknappen. Du kommer att se ditt innehåll vackert animerat.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till CSS-animeringar i WordPress. Du kanske också vill se vår jämförelse av de 5 bästa dra och släppa WordPress-sida byggare.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.