Hur man enkelt lägger till CSS-animationer i WordPress

Under åren har vi experimenterat med olika sätt att göra WordPress-webbplatser mer interaktiva. Om du vill fånga dina besökares uppmärksamhet, kan animationer vara mycket effektiva.

Du kan använda animationer för att fånga en besökares uppmärksamhet och framhäva en sidans viktigaste innehåll. Detta kan också uppmuntra kunder att klicka på dina uppmaningar till handling-knappar och länkar.

Lyckligtvis är det också enkelt att ställa in animationer i WordPress, även om du inte vet hur man skriver kod.

I den här handledningen visar vi hur du enkelt kan lägga till CSS-animationer i WordPress.

Varför lägga till CSS-animationer i WordPress?

Du kan använda CSS-animationer för att dra besökarens uppmärksamhet till olika delar av en sida. Om du till exempel har en onlinebutik kan animationer lyfta fram en produkts viktigaste funktioner eller största försäljningsargument. Detta kan förbättra användarupplevelsen och öka försäljningen.

Animationer kommer också att få dina CTAs att sticka ut, vilket kan hjälpa dig att nå ett specifikt mål, som att få fler att prenumerera på ditt e-postnyhetsbrev.

Du kan lägga till CSS-animationer i din WordPress-temas eller barn-temas stylesheet. Detta tar dock mycket tid och ansträngning, och om du gör ett misstag kan det bryta din webbplats design och till och med funktion.

Med det sagt, låt oss se hur du enkelt kan lägga till CSS-animationer på din WordPress-webbplats. Om du föredrar att hoppa direkt till en specifik metod kan du använda länkarna nedan:

• Metod 1: Hur man enkelt animerar vilket WordPress-block som helst (snabbt och enkelt)
• Metod 2: Hur man lägger till CSS-animationer till anpassade sidor (Rekommenderas)

Metod 1: Hur man enkelt animerar ett WordPress-block (Snabbt och enkelt)

Det enklaste sättet att lägga till en enkel CSS-animation är att använda Blocks Animation.

Denna kostnadsfria animationsplugin låter dig lägga till en ingångsanimation till valfritt block utan att behöva skriva en enda rad CSS. Den har också en skrivanimations- och en ticker-liknande effekt som du kan lägga till text och siffror.

Först måste du installera och aktivera den kostnadsfria pluginen Blocks Animation. Om du behöver hjälp, se vår nybörjarguide om hur man installerar en WordPress-plugin.

Vid aktivering, öppna valfri sida eller inlägg i WordPress blockredigerare. Klicka sedan helt enkelt på blocket du vill animera och välj fliken 'Block' i menyn till höger.

Du kommer att se att den här menyn har en ny sektion ‘Animationer’.

Klicka helt enkelt för att expandera sektionen 'Animationer', så ser du tre olika alternativ: Animationer, Räknar-animationer och Skriv-animationer.

'Animationer' är korta effekter som spelas upp en gång när sidan laddas. För att lägga till den här typen av entréanimation till din WordPress-blogg, klicka bara på rullgardinsmenyn bredvid 'Animation'.

Detta öppnar en meny där du kan välja den animation du vill använda.

WordPress-redigeraren visar en förhandsgranskning av animationen, så du kan prova olika alternativ för att se vad som ser bäst ut.

Som standard spelas ingångsanimationen så snart sidan laddas, men du kan lägga till en fördröjning om du föredrar det. Om du använder flera animationer på samma sida kan du till och med använda fördröjningar för att sprida ut dem så att de inte blir överväldigande.

Öppna helt enkelt rullgardinsmenyn 'Fördröjning' och välj en tid från listan.

Du kan också göra animationen snabbare eller långsammare med rullgardinsmenyn 'Hastighet'.

När du provar olika inställningar kan du förhandsgranska animationen när som helst genom att klicka på 'Spela upp animation igen'.

Pluginet har också 'Räkneanimationer' och 'Skrivanimationer'.

Skrivanimationer låter dig animera text, medan räknaranimationer lägger till en räknarliknande effekt till siffror. Dessa animationer fungerar med alla Gutenberg-block som stöder text eller siffror, så du kan använda dem för att animera knappar, bildtexter, rubriker och mer.

För att lägga till någon av dessa effekter, börja med att markera texten eller siffrorna som du vill animera. Klicka sedan på nedåtpilen i verktygsfältet.

Du kan nu välja 'Räkneanimationer' eller 'Skrivanimationer' från rullgardinsmenyn.

Om dessa alternativ är nedtonade, se till att du har markerat rätt innehåll. Du kan till exempel inte välja 'Räkna animation' om du bara har markerat text.

Efter att ha lagt till animationen kan du använda rullgardinsmenyerna i popup-fönstret för att ändra hastigheten och lägga till en valfri fördröjning.

Till exempel, i följande bild använder vi en fördröjning på en sekund.

När du är redo att göra CSS-animationen live, klicka antingen på knappen 'Publicera' eller 'Uppdatera' för att applicera animationer på din webbplats. Nu, om du besöker din WordPress-webbplats, kommer du att se animationen live.

Metod 2: Hur man lägger till CSS-animationer till anpassade sidor (Rekommenderas)

Om du vill lägga till enkla animationer till de inbyggda WordPress-blocken är Blocks Animation ett bra val. Men om du verkligen vill fånga besökarens uppmärksamhet, behålla folk på din webbplats och få fler konverteringar, rekommenderar vi att du använder SeedProd.

SeedProd är det bästa sidbyggarpluginet som låter dig skapa vackra landningssidor, sälj sidor, en startsida och mer med hjälp av en enkel dra-och-släpp-redigerare.

Den levereras också med ett block för ‘Animerad rubrik’ som du kan använda för att skapa roterande och framhävda animerade rubriker.

Trots namnet kan du använda blocket Animerad rubrik för att animera all text, inklusive en uppmaning till handling, en undertext eller annan text som du vill betona.

SeedProd kommer också med över 40 ingångsanimationer som du kan lägga till valfritt block, inklusive bilder, text, knappar, videor och mer.

Du kan till och med animera hela sektioner och kolumner med bara några få klick. På så sätt kan du skapa engagerande animerade sidor inom några minuter.

Om du använder animationer för att få fler konverteringar och försäljningar, så integreras SeedProd med WooCommerce. Det stöder också många av de bästa e-postmarknadsföringstjänsterna som du kanske redan använder för att marknadsföra din webbplats.

Hur man ställer in SeedProd Page Builder

Det första du behöver göra är att installera och aktivera SeedProd. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du ange din licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha lagt till licensnyckeln klickar du helt enkelt på ‘Verifiera nyckel.’

Skapa en anpassad siddesign

För att komma igång, gå till SeedProd » Landningssidor och klicka på ‘Lägg till ny landningssida.’

På nästa skärm kommer du att bli ombedd att välja en mall.

SeedProd levereras med över 350 vackra mallar som är organiserade i olika kategorier, såsom 404-sidmallar och anpassade WooCommerce ‘tack’-sidor.

För den här guiden visar vi dig hur du skapar en försäljningssida med animerad text och ingångsanimationer, men stegen kommer att vara liknande oavsett vilken typ av sida du skapar.

Klicka bara på en flik för att se de olika mallarna inom den kategorin.

När du hittar en mall du vill använda, för bara muspekaren över den och klicka sedan på bockikonen.

Vi använder mallen 'Zen Sales Page' i alla våra bilder, men du kan använda vilken mall som helst.

Därefter behöver du ge sidan en titel.

SeedProd skapar automatiskt en URL baserad på sidtiteln, men du kan ändra detta till vad du vill. Att lägga till relevanta sökord i en URL kan till exempel ofta förbättra din WordPress SEO och hjälpa sidan att visas i relevanta sökresultat.

För att lära dig mer, se vår guide om hur man gör nyckelordsanalys för din WordPress-blogg.

När du är nöjd med titeln och URL:en, klicka på 'Spara och börja redigera sidan'.

Detta laddar SeedProd dra-och-släpp-sidredigerare.

Till höger ser du en liveförhandsgranskning av sidans design, med några inställningar till vänster.

SeedProd levereras med massor av block som du kan lägga till i din design, inklusive block som låter dig lägga till sociala delningsknappar, videor, kontaktformulär och mer.

För mer information, se vår guide om hur man skapar en anpassad sida i WordPress.

Hur man lägger till animerad text i WordPress

För att lägga till lite animerad text på sidan, hitta blocket Animerad rubrik och dra det till din sidlayout.

Det finns två sätt att animera din rubrik. Först lägger stilen 'Markerad' till en formanimation till din text, som en cirkel eller en understruken sicksack.

Du kan använda den här animationen för att uppmärksamma ett visst ord eller en fras i rubriken. Detta kan göra din rubrik lättare att läsa och förstå genom att markera det viktigaste innehållet. Det är också ett utmärkt sätt att uppmärksamma en uppmaning till handling.

Stilen Markerade har också några genomstrykningsformer.

Du kan använda genomstrykningar för att skapa intressanta och iögonfallande effekter, eller så kan det helt enkelt lägga till lite skoj i din design.

För att skapa en markerad animation, öppna bara rullgardinsmenyn 'Stil' och välj 'Markerad'.

Öppna sedan rullgardinsmenyn 'Form' och välj en form. När du klickar på en form visar SeedProd en förhandsgranskning av den animationen så att du kan prova olika former för att se vilken du gillar mest.

SeedProd har också en 'Roterande' animationsstil, som lägger till en övergångseffekt till texten.

Ofta är animerad text det första besökare tittar på när en sida laddas, så det är ett utmärkt sätt att lyfta fram den viktigaste texten.

För att skapa en övergångsanimation, öppna helt enkelt rullgardinsmenyn 'Stil' och klicka på 'Roterande'.

Du kan sedan öppna rullgardinsmenyn ‘Animation’ och välja den typ av övergång du vill använda, som t.ex. tona ut, zooma eller rulla. Återigen, SeedProd kommer att spela upp animationen inuti sidredigeraren, så du kan prova olika effekter för att se vilka du föredrar.

Oavsett om du skapar en 'Markerad' eller 'Roterande' animation, kan du lägga till text före och efter den animerade texten.

Skriv helt enkelt i fälten 'Före rubrik' och 'Efter rubrik'. I fältet 'Text' lägger du till det ord eller den fras som du vill animera.

Om du vill animera hela rubriken, lämna fälten 'Före rubrik' och 'Efter rubrik' tomma.

Som standard spelar SeedProd animationen i en loop, vilket vissa besökare kan tycka är irriterande.

För att bara spela animationen en gång, klicka för att inaktivera omkopplaren 'Oändlig loop'.

Som standard spelas animationen upp i 1200 millisekunder efter en fördröjning på 8000 millisekunder.

För att använda olika värden, skriv i fälten ‘Varaktighet’ och ‘Fördröjning’. Du kan till exempel göra animationen snabbare genom att använda en kortare varaktighet.

Du kanske också vill styla texten. Du kan till exempel ändra teckenstorlek och justering.

När du är nöjd med hur den animerade rubriken ser ut, klicka på knappen 'Spara' för att lagra dina ändringar.

Lägg till ingångsanimationer i WordPress

Ingångsanimationer spelas upp när sidan först laddas, så de är ett utmärkt sätt att fånga besökarens uppmärksamhet.

Du kan också använda dem för att lyfta fram innehåll som besökare bör titta på först. Till exempel, om du har en online-marknadsplats, kan du animera produktens hjältebild eller bannern som annonserar din Black Friday-rea.

Inne i SeedProd-redigeraren klickar du helt enkelt på innehållet du vill animera och väljer sedan fliken 'Avancerat' i menyn till vänster.

Du kan sedan fortsätta och klicka för att expandera sektionen 'Animationseffekter'.

Välj sedan en animation från rullgardinsmenyn 'Ingångsanimation'.

Du kan nu lägga till ingångsanimationer till valfri block, sektion eller kolumn genom att helt enkelt följa samma process som beskrivs ovan.

Publicera dina CSS-animationer i WordPress

När du är nöjd med hur sidan är inställd, klicka på rullgardinsmenyn på knappen 'Spara' och välj 'Publicera'.

Du kan nu besöka den här sidan för att se CSS-animationerna live.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till CSS-animationer i WordPress. Du kanske också vill se vår guide om hur man lägger till en animerad bakgrund i WordPress eller de viktiga WordPress-designelemten som varje webbplats behöver.

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