Vill du add to CSS-animationer i WordPress?
Du kan använda animationer för att fånga en besökares uppmärksamhet och lyfta fram det viktigaste innehållet på en page. Detta kan också uppmuntra kunderna att klicka på dina call-to-action-knappar och links.
I denna tutorial visar vi dig hur du enkelt kan add to CSS-animationer i WordPress.
Varför lägga till CSS-animationer i WordPress?
Du kan använda CSS-animationer för att rikta besökarens uppmärksamhet mot olika delar av en page. Om du till exempel har en butik på nätet kan animationer lyfta fram en produkts viktigaste funktioner eller största försäljningsargument. Detta kan förbättra upplevelsen för användaren och öka försäljningen.
Animationer gör också att dina CTA:er sticker ut, vilket kan hjälpa you att nå ett specifikt mål, till exempel att få fler att prenumerera på ditt email-nyhetsbrev.
You can add CSS animations to your WordPress theme or child theme’s stylesheet. Detta tar dock mycket tid och ansträngning, och om du gör ett misstag kan det förstöra din websites design och till och med funktion.
Med det sagt, låt oss se hur du enkelt kan add to CSS animationer till din WordPress webbplats. Om du föredrar att hoppa direkt till en viss metod, kan du använda länkarna under:
Metod 1: Hur man enkelt animerar alla WordPress Block (snabbt och enkelt)
Det enklaste sättet att add to en enkel CSS-animation är att använda Blocks Animation.
Detta gratis animation plugin allow you to add an entrance animation to any block without having to write a single line of CSS. Det har också en skrivanimation och en ticker-stil effekt som du kan add to text och siffror.
Först måste du installera och aktivera det gratis pluginet. Om du behöver hjälp kan du vänligen läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.
Efter aktivering öppnar du en page eller post i WordPress block editor. Sedan klickar du bara på det block som du vill animera och väljer tabben ”Block” i menyn till höger.
Du kommer att se att den här menyn har en new ”Animations” section.
Klicka bara för att förstora ”Animations” section, och du kommer att se tre olika alternativ: Animationer, Räkneanimationer och Skrivanimationer.
”Animationer” är korta effekter som spelas upp en gång när page hämtar. För att add to den här typen av entréanimation till din WordPress blogg, clickar du bara på dropdown bredvid ”Animation”.
Detta öppnar en meny där du kan välja den animation du vill använda.
WordPress Editor visar en preview av animationen, så att du kan prova olika alternativ för att se vad som ser bäst ut.
Som standard spelas entréanimationen upp så snart sidan hämtas, men du kan add to en fördröjning om du vill. Om du använder flera animationer på samma page kan du till och med använda fördröjningar för att förskjuta dem så att de ej blir överväldigande.
Öppna bara dropdown ’Fördröjning’ och välj en tid från listan.
Du kan också göra animationen snabbare eller långsammare med hjälp av ”Speed” dropdown.
När du testar olika Settings kan du när som helst göra en Preview av animationen genom att clicka på ”Replay Animation”.
Tillägget har också ”Count Animations” och ”Typing Animations”.
Typing Animations allow you to animate text, medan Count Animations add to en ticker-liknande effekt till siffror. Dessa animationer fungerar med alla block i Gutenberg som har stöd för text eller siffror, så du kan använda dem för att animera knappar, captions till images, headings och mycket mer.
För att add to någon av dessa effekter börjar du med att markera den text eller de siffror som du vill animera. Klicka sedan på den nedåtriktade pilen i den lilla toolbaren.
You can now choose ”Count Animations” or ”Typing Animations” from the dropdown menu.
Om dessa alternativ är gråtonade måste du se till att du har markerat rätt content. Du kan t.ex. inte selecta ”Count Animation” om du bara har markerat text.
När du har lagt till animationen kan du använda dropdown-menyerna i den lilla popupen för att ändra hastigheten och lägga till en valfri fördröjning.
I Följer image använder vi till exempel en fördröjning på en sekund.
När du är redo att göra CSS-animationen live klickar du antingen på knappen ”Publicera” eller ”Updated” för att tillämpa animationer på din site. Om du nu besöker din WordPress website kommer du att se animationen live.
Metod 2: Hur man lägger till CSS-animationer till Customize Pages (rekommenderas)
Om du vill add to enkla animationer till de built-in WordPress blocks är Blocks Animation ett bra val. Men om du verkligen vill fånga besökarens uppmärksamhet, hålla kvar folk på din website och få fler konverteringar, rekommenderar vi att du använder SeedProd.
SeedProd är det bästa page builder-pluginet som gör att du kan skapa beautiful landing pages, försäljningssidor, en home page och mer med hjälp av en enkel drag-and-drop editor.
Det kommer också med ett ”Animated Headline” block som du kan använda för att skapa roterande och markerade animerade headlines.
Trots namnet kan du använda blocket Animated Headline för att animera vilken text som helst, inklusive en call-to-action, subheading eller någon annan text som du vill betona.
SeedProd kommer också med över 40 entréanimationer som du kan add to alla block, inklusive images, text, knappar, videoklipp och mer.
Du kan till och med animera hela sections och columns med bara några clicks. På så sätt kan du skapa engagerande animerade pages på bara några minuter.
Om du använder animationer för att få fler konverteringar och försäljning, så integrerar SeedProd med WooCommerce. Det stöder också många av de bästa tjänsterna för e-postmarknadsföring som du kanske redan använder för att främja din website.
Så här ställer du in SeedProd Page Builder
Det första du behöver göra är att installera och aktivera SeedProd. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Vid aktivering måste du enter din license key.
You can find this information in your account on the SeedProd website. När du har lagt till license key klickar du bara på ”Verify Key”.
Skapa en custom page-design
För att komma igång, gå till SeedProd ” Landing Pages och klicka på ’Add New Landing Page’.
På nästa vy ombeds du att välja en template.
SeedProd levereras med över 350 beautiful templates som är organiserade i olika kategorier, till exempel 404-sidmallar och custom WooCommerce ”thank you” pages.
I den här guiden visar vi dig hur du skapar en försäljningssida med animerad text och entréanimationer, men stegen kommer att vara liknande oavsett vilken typ av page du skapar.
Klicka bara på en tabs för att se de olika templates som finns inom den kategorin.
När du hittar en template som du vill använda, hoverar du bara musen över den och klickar sedan på ikonen med bocken.
Vi använder mallen ”Zen Sales Page” i alla våra images, men du kan använda vilken template som helst.
Därefter måste du ge sidan en rubrik.
SeedProd skapar automatiskt en URL baserat på sidans rubrik, men du kan ändra detta till vad du vill. Att lägga till relevanta keywords i en URL kan till exempel ofta förbättra din WordPress sökmotorsoptimering och hjälpa sidan att visas i relevanta sökresultat.
Om du vill veta mer kan du vänligen läsa vår guide om hur du söker efter keywords för din WordPress blogg.
När du är nöjd med rubriken och URL:en klickar du på ”Save and Start Editing the Page”.
Detta kommer att hämta SeedProd drag and drop page editor.
Till höger ser du en live preview av page-designen, 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 tillåter dig att lägga till sociala delningsknappar, videoklipp, kontaktformulär och mer.
För mer information, vänligen se vår guide om hur du skapar en custom page i WordPress.
Så här addar du animerad text till WordPress
För att add to lite animerad text till sidan, hitta blocket Animated Headline och dra det till din page design.
Det finns två sätt att animera din headline. First, the ”Highlighted” style adds a shape animation to your text, such as a circle or a underlined zigzag.
Du kan använda den här animationen för att dra uppmärksamheten till ett visst ord eller en viss fras i headlinen. Detta kan göra din headline lättare att läsa och förstå genom att markera det viktigaste innehållet. Det är också ett bra sätt att dra uppmärksamhet till en call-to-action.
Stilen Highlighted har också några genomstrukna former.
You can use strikethroughs to create interesting and eye-catching effects, or it can simply add to some fun to your design.
För att skapa en Highlighted-animation öppnar du bara dropdown-menyn ”Styling” och väljer ”Highlighted”.
Öppna sedan dropdown ’Shape’ och välj en form. När du klickar på en form kommer SeedProd att visa en preview av den animationen så att du kan prova olika former för att se vilken du gillar mest.
SeedProd har också en ”Rotating” animationsstil, som add to en övergångseffekt till texten.
Ofta är animerad text det första som besökarna klär på när en page hämtar, så det är ett bra sätt att lyfta fram den viktigaste delen av texten.
För att skapa en övergångsanimation öppnar du dropdown-menyn ”Styling” och klickar på ”Rotating”.
Du kan sedan öppna dropdown ’Animation’ och välja vilken typ av övergång du vill använda, till exempel fade, zoom eller roll. Återigen kommer SeedProd att spela animationen i page editor, så att du kan prova olika effekter för att se vilken du föredrar.
Oavsett om du skapar en ”Highlighted”- eller ”Rotating”-animation kan du add to text före och efter den animerade texten.
Skriv bara in i fälten ”Before Headline” och ”After Headline”. I fältet ”Text” add to det ord eller den fras som du vill animera.
Om du vill animera hela headlinen lämnar du helt enkelt fälten ”Before Headline” och ”After Headline” tomma.
Som standard kommer SeedProd att spela animationen på en slinga, vilket vissa besökare kan tycka är irriterande.
För att bara spela animationen en gång, click för att deactivate ’Infinite Loop’ switch.
Som standard spelas animationen upp i 1200 millisekunder efter en fördröjning på 8000 millisekunder.
Om du vill använda olika värden skriver du in dem i fälten ”Duration” och ”Delay”. Du kan t.ex. göra animationen snabbare genom att använda en kortare varaktighet.
Du kanske också vill styla texten. Du kan till exempel ändra storleken på fonten och justeringen.
När du är nöjd med hur den animerade headlinen ser ut, fortsätt och klicka på knappen ”Save” för att lagra dina ändringar.
Add Entrance Animations i WordPress
Entréanimationer spelas upp när sidan först hämmas, så de är ett bra sätt att fånga besökarens uppmärksamhet.
Du kan också använda dem för att lyfta fram det content som besökarna bör klämma på först. Om du till exempel har en marknadsplats online kan du animera produktens hero image eller bannern som gör reklam för din Black Friday-rea.
I SeedProd Editor klickar du helt enkelt på det content du vill animera och väljer sedan tabben ”Advanced” i menyn till vänster.
You can then go ahead and click to expand the ’Animation Effects’ section.
Därefter väljer du helt enkelt en animation från dropdown ’Entrance Animation’.
Du kan nu add to entréanimationer till alla block, sections eller Column genom att följa samma process som beskrivs ovan.
Publicera dina CSS-animationer i WordPress
När du är nöjd med hur sidan är konfigurerad klickar du på dropdown-menyn på knappen ”Save” och väljer ”Publicera”.
You can now visit this page to see the CSS animations live.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar CSS-animationer i WordPress. Du kanske också vill se vår guide om hur man skapar en custom landing page i WordPress eller våra expertval för de bästa pluginsen för dynamiskt innehåll i WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
I have a block that is called lottie animation and it also has animations.
What is the differences between lottie animation and CSS animation? Is it the same thing or is one advanced?
WPBeginner Support says
That is a specific file type and not CSS similar to a gif.
Administratör
Dennis Muthomi says
I wasn’t familiar with Lottie that much before but now I understand it’s a separate file format that can also be used for animations in WordPress.
Wissam Giroud says
Can we use animation on a free plan website in wordpress? I am unable to use plugin as it prompts me to upgrade to business plan
WPBeginner Support says
Our tutorials are for WordPress.org sites not WordPress.com sites, for a better understanding of the two, you would want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
You would need the plan level that allows plugins to install plugins on WordPress.com
Administratör
vishnu says
How to add animation text on home page feature image
WPBeginner Support says
You would want to reach out to the plugin’s support and they should be able to assist
Administratör
amy says
does this only work for blog posts? i dont see the animate it icon for website pages.
WPBeginner Support says
It should work on pages as well. If it is not appearing you would want to reach out to the plugin’s support and they should be able to assist
Administratör
twinkle chandan says
how to add these in image block or any other block
WPBeginner Support says
You would want to reach out to the plugin’s support for their plans to support the block editor
Administratör
dimiter kirov says
Does it have Gutenberg integration?
WPBeginner Support says
It looks like the plugin is currently updated to work with Gutenberg
Administratör
Aditi says
Hello support team Recently I’m working on wordpress theme my theme already have animation box at staring of page loading I just want to change its color. what should I do…? suggest me any css trick
WPBeginner Support says
You could use inspect element to see what needs changed: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Or reach out to your theme’s support and they should be able to let you know
Administratör
Muneeb says
Thank You
WPBeginner Support says
You’re welcome
Administratör
Leo August says
Good article. I was looking for something just like this. One question, I’d like to use the animation used in the pricing table example at the top of the article, but I don’t see anything in Animate It that matches it. Which animation and settings does that example use?
WPBeginner Support says
Hi Leo,
We used fadeIn effect.
Administratör
Catherine says
Unfortunately, WP.org says Animate It has not been tested as to its compatability with my version of WP. I just installed WP.org a fee days ago. Disappointing. Will it be approved in future?
WPBeginner Support says
Hi Catherine,
You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.
Administratör
Lesa says
I’m looking for a specific type of animation.
One of the services I offer is design and layout brochures.
To display a portfolio of brochures, I would like to have just the flat front on the page that tells about the service, and when the visitor clicks the link to see more, they are taken to a page where a tri-fold brochure slowly opens up to reveal the interior.
Do you know whether there are any animation plugins that do this?
Thanks for any guidance you may be able to offer.
Geraldine Ward says
Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.
Geraldine Ward says
I am thinking of doing an animation for a wordpress website in Adobe Animate CC but I can’t seem to find any positive information about whether I will be able to use it in wordpress – can you shed any light on this?
Thank you
Geraldine
WPBeginner Support says
You can export animation as a movie and upload it to YouTube and then share the video. However if it is a shorter animation like few seconds, then you can convert into an animated GIF and add it to your WordPress site.
Administratör
Hemang Rindani says
WordPress is a great CMS that caters to many businesses with the rich functionalities it offers. The flexibility and ease of use makes it a popular CMS across the enterprises. The inbuilt framework, themes, modules and plugins make it easier for a developer to implement any complex scenario through an effortless dashboard.
It is important to have an engaging website that enhances the user experience. Make sure to identify proper tools like social media login and sharing, images and animations that trigger user interaction. Animate It! is very useful WordPress tool designed and developed to provide an efficient and user friendly solution to apply beautiful CSS3 animations on WordPress Posts and Widgets. It allows a developer to add animations effortlessly without compromising on website security. The dashboard for Animate It! is self explanatory and a CMS developer does not require to have any programming or animation knowledge to use it.
Mark Klinefelter says
Nice articles but too much animation can drastically slow down page load time. I have been through this and elimated a lot of ”cute” animation stuff. Pingdom scores will go up after that.