Elementor-animasjoner ser vakre ut på datamaskin, men blir et tregt mareritt på mobil. Inngangseffekter, skyveblokker og parallakse irriterer ikke bare brukere når de blar med fingeren, men legger også til hundrevis av millisekunder i sideinnlastingstid. Og Google PageSpeed Insights tilgir ikke det.

Det mest frustrerende: Elementor-innstillingene har ingen global bryter for å deaktivere animasjoner på mobil. Men det betyr ikke at problemet ikke kan løses. På ti minutter og med to filer fjerner du alle animasjoner for telefoner og nettbrett, samtidig som du beholder dem på datamaskin.

Løsningen som beskrives her deaktiverer stilarket elementor-animations som Elementor laster inn på hver side. Deretter erstatter vi det med tilpasset CSS ved hjelp av en media query: animasjoner fungerer bare på skjermer bredere enn 1000 piksler.

💡 Rask oversikt:

• Deaktiver den innebygde animasjonsfilen via wp_dequeue_style i functions.php
• Lag din egen CSS med en min-width 1000px media query og flytt de opprinnelige animasjonsstilene dit
• Last inn den nye filen via wp_enqueue_style med høy prioritet
• For komplekse scenarioer: en alternativ metode som bruker PHP session for å oppdage skjermstørrelse

Steg 1: Deaktiver den innebygde animasjonsfilen

Det første du må gjøre er å fjerne standardfilen elementor-animations.css fra køen. Elementor registrerer og legger denne filen i kø ved hver forespørsel, uavhengig av om animasjoner brukes på siden eller ikke.

Legg til koden i barnetemaets functions.php eller via Code Snippets-utvidelsen. Ikke rediger hovedtemaets functions.php direkte: endringene dine går tapt ved neste oppdatering.

1
// Disable Elementor animation styles for mobile devices
2
function custom_dequeue_elementor_animations() {
3
    wp_dequeue_style( 'elementor-animations' );
4
    wp_deregister_style( 'elementor-animations' );
5
}
6
add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
7
add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );

Det som skjer her: wp_dequeue_style fjerner filen fra utdatakøen, wp_deregister_style fjerner registreringen helt. Den høye prioriteten 9999 er nødvendig for å fange opp animasjoner etter alle andre skript, siden Elementor laster dem sent. To kroker (wp_enqueue_scripts og wp_head) gir sikkerhet mot scenarioer der utvidelsen kobler seg på ulike lastestadier.

Bekreft: åpne sidekildekoden (Ctrl+U) og søk etter elementor-animations. Lenken til denne filen skal være borte.

Steg 2: Lag tilpasset CSS med en media query

Nå er animasjoner deaktivert for alle enheter. For å få dem tilbake på datamaskin lager vi vårt eget stilark som pakker de opprinnelige reglene inn i @media (min-width: 1000px).

Opprett en mappe og fil i barnetemaet ditt:

1
/wp-content/themes/YOUR_THEME/_sdstudio_dequeue/elementor/css_animate_dequeue.css

Åpne den opprinnelige animations.min.css (ligger i wp-content/plugins/elementor/assets/lib/animations/animations.min.css), kopier alt innholdet og lim det inn i den nye filen, pakket inn i en media query:

1
@media screen and (min-width: 1000px) {
2
    /* Insert ALL contents of the original animations.min.css here */
3
    @keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}/* ... and so on */
4
}

Terskelen på 1000 piksler er et kompromiss: de fleste nettbrett i stående retning (768-1024 piksler) får også deaktivert animasjoner. Hvis du trenger animasjoner på nettbrett, senk grensen til 768 piksler.

Resultatet skal se slik ut:

Steg 3: Last inn det nye stilarket

Det eneste som gjenstår er å fortelle WordPress hvor vår tilpassede CSS befinner seg. Legg til følgende i samme functions.php etter den forrige koden:

1
// Include custom CSS animations with media query
2
$theme_url = get_stylesheet_directory_uri();
3
$dequeue_css_url = $theme_url . '/_sdstudio_dequeue/elementor/css_animate_dequeue.css';
4
wp_enqueue_style( 'css_animate_dequeue', $dequeue_css_url, array(), '1.0', 'all' );

Funksjonen get_stylesheet_directory_uri() returnerer URL-en til barnetemaet (eller hovedtemaet hvis det ikke finnes noe barnetema). Dette er tryggere enn å hardkode banen manuelt.

Åpne nå nettstedet ditt på en telefon eller i utviklerverktøy (F12 → Bytt enhetsverktøylinje). Animasjoner skal forsvinne på skjermer smalere enn 1000 piksler, mens de fungerer som før på datamaskin.

Alternativ tilnærming: oppdage skjermstørrelse via PHP session

Vi anbefaler ikke denne metoden for permanent bruk, men den er nyttig som et konsept for andre oppgaver der logikk avhenger av skjermbredde.

Ideen: en PHP session lagrer vindusdimensjoner fra informasjonskapsler, og functions.php avgjør om animasjoner skal deaktiveres basert på disse dataene. Ulempene er åpenbare: session legger til serverbelastning, mellomlagring brytes (en side med session_start() mellomlagres ikke riktig), og brukerens første besøk skjer alltid uten data om skjermstørrelse.

Hvis du forstår disse begrensningene og er villig til å akseptere dem, her er koden:

1
session_start();
2
if ( isset( $_SESSION['screen_width'] ) && isset( $_SESSION['screen_height'] ) ) {
3
    if ( $_SESSION['screen_width'] <= 768 ) {
4
        function custom_dequeue_elementor_animations() {
5
            wp_dequeue_style( 'elementor-animations' );
6
            wp_deregister_style( 'elementor-animations' );
7
        }
8
        add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
9
        add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );
10
    }
11
}

For produksjon er metoden fra steg 1-3 mer pålitelig: den avhenger ikke av sessions og fungerer godt med all mellomlagring.

Video: skjulte Elementor-animasjonsinnstillinger

Den korte videoen nedenfor viser en alternativ tilnærming til å deaktivere mobilanimasjoner gjennom CSS-klasser og målrettede media queries. Denne tilnærmingen er nyttig hvis du ikke vil fjerne alle animasjoner helt, men selektivt undertrykke de tyngste.

⁉️🤔 Ofte stilte spørsmål

Hvorfor kan jeg ikke bare skjule animerte elementer via CSS display: none på mobil?

Fordi display: none fjerner elementet visuelt, men nettleseren laster og tolker fortsatt animasjonsfilen. Siden henger like mye, du ser det bare ikke. En full dequeue via PHP løser problemet på servernivå: 50-80 KB med animasjonsstiler går aldri over nettverket i det hele tatt. På mobildata er det merkbart.

Vil denne metoden fungere med andre sidebyggere som Divi, WPBakery eller Gutenberg?

Prinsippet er det samme, men stilhåndtaket er annerledes. Divi bruker divi-style, WPBakery legger js_composer_front i kø, og Gutenberg legger ikke en separat animasjonsfil i kø i det hele tatt (alt går gjennom wp-block-library). Finn håndtaket via sidekildekoden ved å se etter <link rel='stylesheet' med utvidelsesnavnet i id. Gjenta deretter steg 1-3 med det håndtaket.

Hvorfor er media query nøyaktig 1000 piksler og ikke standard 768 piksler?

Standardbrytepunktet på 768 piksler dekker telefoner og små nettbrett. Men 9-10 tommers nettbrett i stående modus (~800 piksler) sliter fortsatt med animasjoner, ettersom prosessorkraften og Wi-Fi-båndbredden deres ikke er tilstrekkelig for jevn gjengivelse. Terskelen på 1000 piksler dekker alle nettbrett og etterlater animasjoner bare for fullverdige datamaskiner. Hvis du foretrekker det, kan du senke den til 768 piksler: bare erstatt 1000 i CSS-en med din verdi.

Er dette i det hele tatt nødvendig i 2026 når alle smarttelefoner har flaggskipprosessorer?

Gapet mellom flaggskip og budsjettenheter er fortsatt enormt. Ifølge Statcounter-data for 2026 kommer en tredjedel av mobiltrafikken fra enheter med mindre enn 2 GB RAM. Pluss mobilnettverk: i regioner utenfor storbyer er hastighetene ofte under 5 Mbps. Hver spart kilobyte med animasjoner reduserer tiden til første interaksjon med 100-300 ms, og det korrelerer direkte med konvertering.

Kan jeg gjøre det samme via en utvidelse i stedet for kode i functions.php?

Ja, men vi anbefaler det ikke. Hver ekstra utvidelse legger til sin egen overhead, og for en oppgave på 15 linjer er det overkill. Hvis du er redd for kode, installer den gratis Code Snippets-utvidelsen, lim inn koden der (den har en avkrysningsboks for å aktivere/deaktivere, og det er vanskeligere å gjøre feil enn i functions.php). En utvidelse spesifikt for å deaktivere animasjoner er overdrevent.

Å deaktivere animasjoner eller ikke: endelig anbefaling

Kort sagt: deaktiver dem på mobil. Gevinsten i lastehastighet og rullejevnhet oppveier det estetiske tapet. En bruker som besøker fra telefonen sin vil ha informasjon her og nå, ikke vente på at en animert helteblokk skal bli ferdig lastet.

Den grunnleggende trestegsmetoden ovenfor løser oppgaven fullt ut og spiller godt sammen med mellomlagring. Sett det opp én gang, test på et par sider via PageSpeed Insights, og glem det. Og hvis du trenger selektiv animasjon for spesifikke elementer, kombiner tilnærmingen fra videoen med media queries som retter seg mot spesifikke CSS-klasser.

Likte du denne guiden? Sjekk ut våre andre Elementor-veiledninger: fontoptimalisering, lazy loading av widgeter og oppsett av brødsmuler for egendefinerte innholdstyper.