Skip to content

Alt om WordPress, webutvikling — og mer til

🤗 5 Beste animasjonsplugins for WordPress 2026 (gratis og betalt)

🤗 5 Beste animasjonsplugins for WordPress 2026 (gratis og betalt)

Et nettsted uten animasjon ser utdatert ut. En bruker kommer inn, blar gjennom en statisk vegg av tekst, og forlater siden etter 8 sekunder: det er ingenting for øyet å feste seg ved, ingenting for hjernen å prosessere. Likevel er én enkelt, velplassert hover-effekt på en knapp eller en jevn blokk som dukker opp ved scrolling nok til å gi siden liv.

Problemet er at animasjon på WordPress er lett å ødelegge. Et tungt JS-skript ødelegger Core Web Vitals, kommer i konflikt med temaet, eller hakker på mobil. Og det finnes dusinvis av utvidelser i katalogen, hvorav halvparten ikke har vært oppdatert siden 2021.

Vi valgte ut 5 verktøy som faktisk fungerer i 2026: fra lette CSS3-løsninger til et fullverdig sidebyggerverktøy med konverteringsfokusert animasjon. Hver av dem ble testet for kompatibilitet med gjeldende WordPress-versjon og brutt ned etter fordeler, ulemper og pris.

💡 Rask oversikt:

  • Definer oppgaven din: hover-effekter for bilder, animasjon av blokker som dukker opp ved scrolling, eller bakgrunnseffekter for Elementor, hvert scenario har sin egen utvidelse.
  • Trenger du en gratis allrounder, velg Animate It! (50+ CSS3-effekter, klikk- og hover-utløsere).
  • Bygger du landingssider fra bunnen av med konvertering i tankene, dekker Thrive Architect animasjon, layout og A/B-testing.
  • Jobber du i Elementor og ønsker animerte bakgrunner, er Marvy den eneste som er bygget spesifikt for dette, Lite-versjonen er gratis.
  • For raske hover-effekter på bilder uten kodeproblemer, Image Hover Effects (40+ forhåndsinnstillinger, kortkoder, Lightbox).
  • Ønsker du å animere sideoverganger, tilbyr Page Animations and Transitions 9 effekter uten å senke farten på nettstedet.

Sammenligningstabell

Utvidelse

Animasjonstype

Gratisversjon

Bygger

Elementer

Animate It!

CSS3-effekter (inngang, utgang, oppmerksomhet)

Ja, full

Nei

Alt innhold, widgeter

Image Hover Effects

Hover-effekter på bilder

Ja, full

Kortkoder

Bilder, gallerier, slider

Thrive Architect

Hover + bakgrunn + videobakgrunn

Nei, fra $99/kvartal

Dra-og-slipp

Knapper, bokser, CTA, kolonner

Page Animations and Transitions

Sideoverganger (inn/ut)

Ja, full

Nei

Hele siden

Marvy

Bakgrunnsanimasjon (Elementor)

Ja (Lite, 4 effekter)

Elementor-innstillinger

Elementor-seksjoner

1. Animate It!

Animate It CSS3-animasjonsinnstillinger i WordPress-redigeringsprogrammet

En gratis utvidelse som legger til CSS3-animasjon på alt innhold: tekst, bilder, widgeter. Den tilbyr 50+ effekter delt inn i tre grupper: inngang, utgang og oppmerksomhetsfangere. Animasjon utløses ved klikk, hover eller scrolling, konfigurerbart for hvert element individuelt.

I praksis fungerer det slik: velg en blokk i redigeringsverktøyet, velg en effekt fra rullegardinlisten, og angi utløseren. Ikke en eneste linje med kode. Utvidelsen fungerer med Gutenberg og den klassiske redigereren, ødelegger ikke for mobile enheter, og animasjoner tilpasser seg skjermbredden.

Fordeler:

  • 50+ ferdige CSS3-effekter uten jQuery-avhengigheter
  • Klikk-, hover- og scroll-utløsere
  • Fungerer i Gutenberg, Klassisk redigerer og widgeter
  • Helt gratis, ingen premium-begrensninger

Ulemper:

  • Noen overgangsanimasjoner fungerer ikke i enkelte temaer
  • Ingen visuell bygger, kun valg fra en liste
  • Har ikke vært oppdatert siden november 2025

Pris: gratis.

🔗 Animate It! på WordPress.org

2. Image Hover Effects

Galleri med sveveeffekt: bildet endrer farge når markøren føres over

En utvidelse bygget for én ting: vakre hover-effekter på bilder. 40+ forhåndsinnstillinger, fra fargeendring til 3D-rotasjon og glidende bildetekster. På under ett minutt kan du pakke et hvilket som helst bilde inn i en effekt via kortkode og få et animert bilde som reagerer på markøren.

Under panseret, ren CSS3, ingen JavaScript. Dette betyr at hover-animasjon ikke vil påvirke sidens lastetid. Utvidelsen kan også sette sammen bilder til en slider og åpne dem i Lightbox, praktisk for porteføljer og fotogallerier.

Fordeler:

  • 40+ hover-effekter, alle i ren CSS3
  • Innebygd Lightbox og slider-modus
  • Kortkoder for innsetting hvor som helst
  • Helt gratis

Ulemper:

  • På smale skjermer (iPad i landskapsmodus) blir effekter på høyre side kuttet
  • Kun for bilder, kan ikke berøre tekst og knapper
  • Innstillingsgrensesnittet kunne vært mer moderne

Pris: gratis.

🔗 Image Hover Effects på WordPress.org

3. Thrive Architect

Landingsside bygget i Thrive Architect: knapper, kolonner og animerte blokker

Dette er ikke bare en animasjonsutvidelse, det er et fullverdig sidebyggerverktøy med fokus på konvertering. Thrive Architect gir en visuell dra-og-slipp-redigerer der hover-effekter, inngangsanimasjon og bakgrunnsanimasjon kan festes til ethvert element: knapp, tekstblokk, ikon, CTA-boks, kolonne, kundeuttalelse.

Et eget pluss, animerte bakgrunner. Du kan sette en YouTube-video som seksjonsbakgrunn eller starte CSS-animasjon over hele bredden av en blokk. 300+ sidemaler ut av boksen gjør at lansering av landingssider går på et par timer. Og den innebygde A/B-testeren lar deg sjekke hvilken animasjonsvariant som konverterer best.

Fordeler:

  • Visuell bygger: animasjon konfigureres med klikk, ikke kode
  • 300+ side- og seksjonsmaler
  • Innebygd A/B-testing via Thrive Optimize
  • Animerte bakgrunner, inkludert YouTube-video som bakgrunn

Ulemper:

  • Pris: kun abonnement, ingen engangslisens
  • Overkill hvis du bare trenger animasjon uten en sidebygger
  • Bratt læringskurve for nybegynnere

Pris: fra $99 per kvartal (Thrive Suite, komplett sett med 9 utvidelser).

🔗 Thrive Architect på leverandørens nettsted

4. Sideanimasjoner og overganger

Innstillingspanel for Page Animations And Transitions med valg av overgangseffekt

En spesialisert plugin for ett scenario: animerte overganger mellom sider. Når en bruker klikker på en lenke, forsvinner ikke den gjeldende siden bare, den går ut med én av 9 effekter, fade, slide, 3D-rotasjon, zoom. Neste side kommer til syne med samme eller en annen effekt.

I praksis gir dette nettstedet en kostbar, app-lignende følelse. Og viktigst av alt, pluginen belaster ikke nettstedet. Koden er lett, animasjonene er diskré, uten flimmer eller rykk. Hastigheten på inn- og ut-animasjon kan konfigureres separat for hver side. Det finnes et felt for din egen HTML-kode hvis standardeffektene ikke er nok.

Fordeler:

  • 9 overgangseffekter, konfigureres separat for inn og ut
  • Lett kode: påvirker ikke lastehastigheten
  • Støtte for tilpasset HTML for egendefinerte overganger
  • Helt gratis

Ulemper:

  • Kun overgangsanimasjoner, ingen hover- eller scrolleffekter
  • 9 effekter er kanskje ikke nok for komplekse designoppgaver
  • Ingen visuell forhåndsvisning, innstillingene gjøres i blinde

Pris: gratis.

🔗 Page Animations And Transitions på WordPress.org

5. Marvy

Ringleeffekt på Elementor-seksjonsbakgrunn via Marvy-utvidelsen

Den eneste pluginen i utvalget som er bygget utelukkende for Elementor. Marvy legger til bakgrunnsanimasjon i Elementor-seksjoner: krusninger, bølger, partikler, parallakseforskyvning. Lite-versjonen tilbyr 4 effekter, Pro har et utvidet sett med finjustering.

Pluginen bruker ett enkelt jQuery-bibliotek, slik at flere animasjoner på én side ikke kommer i konflikt og ikke multipliserer forespørsler. Alle effekter er responsive: de ser like rene ut på mobil som på desktop. Pro-versjonen koster $51 på CodeCanyon og inkluderer 6 måneders support.

Fordeler:

  • Dyp Elementor-integrasjon: effekter i det opprinnelige grensesnittet
  • Ett enkelt jQuery-bibliotek for alle animasjoner
  • Responsivitet ut av esken
  • Gratis Lite-versjon dekker grunnleggende behov

Ulemper:

  • Kun for Elementor, fungerer ikke med Gutenberg og andre byggeverktøy
  • 4 effekter i Lite-versjon, blir fort oppbrukt
  • Pro-versjon kun via CodeCanyon, ikke direkte kjøp

Pris: Lite, gratis; Pro, $51 engangsbeløp (CodeCanyon).

🔗 Marvy Lite på WordPress.org🔗 Marvy Pro på CodeCanyon


Hvis du er visuelt anlagt og foretrekker å se pluginene i aksjon før installasjon, her er en kort videooversikt:

⁉️🤔 Ofte stilte spørsmål

Må jeg kunne CSS for å bruke animasjonsplugins?

Nei. Alle pluginene i utvalget fungerer via visuelle innstillinger eller shortcodes. Animate It!, Image Hover Effects og Page Animations lar deg velge en effekt fra en liste. Thrive Architect, dra-og-slipp uten kode. Marvy er integrert i Elementor-grensesnittet. CSS er bare nyttig hvis du vil skrive egendefinert animasjon oppå standardanimasjonene, men det er en opsjon, ikke et krav.

Gjør animasjon at siden laster saktere?

Avhenger av plugin og animasjonstype. CSS3-animasjoner (Animate It!, Image Hover Effects, Page Animations) har nesten ingen innvirkning på hastigheten, de rendres av nettleseren uten JavaScript. jQuery-animasjoner (Marvy) er litt tyngre, men Marvy bruker ett delt bibliotek, og laster ikke et separat for hver effekt. Verste scenario, Thrive Architect med YouTube-bakgrunn: videofilen lastes separat og kan legge til 1-2 sekunder på seksjonslasting. Konklusjon: for hastighet, velg CSS3-plugins, for visuell kraft, Thrive, men overvåk måltallene via PageSpeed Insights.

Hvilken plugin bør jeg velge for en fotografportefølje?

Image Hover Effects, den beste kandidaten. 40+ hover-forhåndsinnstillinger, innebygd Lightbox og slider gir akkurat det en portefølje trenger: bilder våkner til liv ved hover og åpnes i full størrelse ved klikk. Hvis du også trenger å animere arbeiders synlighet ved skrolling, legg til Animate It! som en ekstra plugin, de kommer ikke i konflikt.

Kan jeg bruke flere animasjonsplugins samtidig?

Du kan, men vær forsiktig. CSS3-plugins kommer praktisk talt ikke i konflikt med hverandre. Kombinasjonen Animate It! + Image Hover Effects fungerer stabilt på titusenvis av installasjoner. Men vi anbefaler ikke å kombinere to sidebyggere (for eksempel Thrive Architect og Elementor): de overlapper i funksjonalitet, og den enes stiler kan overstyre den andres. Marvy krever Elementor, det vil rett og slett ikke starte med Thrive Architect.

Finnes det en Thrive Architect-erstatning for dem som bare trenger en animert blokk, ikke en sidebygger?

Det finnes ingen separat lettvektsplugin for «kun hover-effekter på knapper og bokser» i WordPress.org-katalogen akkurat nå, dette er en nisje som dekkes enten av allroundere som Animate It! (effekter på alt innhold, men uten visuell editor) eller tunge byggere. En alternativ vei, kombinasjonen Animate It! (gratis) + Spectra eller Kadence Blocks (gratis Gutenberg-blokker med grunnleggende animasjon). Dette vil gi hover-effekter og skrollanimasjon uten abonnement.

Hva du bør installere i 2026: konklusjonen

Hvis budsjettet er begrenset, vil Animate It! og Image Hover Effects sammen dekke de fleste behov. Den første animerer hva som helst, den andre lager vakre bilder ved hover. Begge er gratis og kommer ikke i konflikt.

Bygger du landingssider og teller konverteringer, er Thrive Architect uslåelig. Ja, betalt. Men prisen er rettferdiggjort: du får ikke bare animasjon, men en komplett maskin for A/B-testing og 300+ maler som sparer uker med layoutarbeid.

Jobber du i Elementor, er Marvy den eneste kandidaten. Skaff deg Lite for å begynne, 4 bakgrunnseffekter er nok for et typisk nettsted. Pro for $51 gir mening når du trenger partikler, bølger og presis kurvejustering.

Og hovedregelen: ikke installer en plugin «for sikkerhets skyld». Hver ekstra plugin er en potensiell konflikt og ekstra forespørsler. Velg for en spesifikk oppgave, test på staging, og sjekk måltall i PageSpeed Insights før og etter installasjon.