Elementor-animationer ser snygga ut på desktop, men förvandlas till en seg mardröm på mobilen. Inträdes-effekter, glidande block och parallax irriterar inte bara användare som scrollar med fingret, utan lägger också till hundratals millisekunder på sidladdningstiden. Och Google PageSpeed Insights förlåter inte det.

Det mest frustrerande: Elementors inställningar har ingen global växel för att stänga av animationer på mobilen. Men det betyder inte att problemet inte går att lösa. På 10 minuter och med två filer tar du bort alla animationer för telefoner och surfplattor, samtidigt som du behåller dem på desktop.

Lösningen som beskrivs här inaktiverar stilmallen elementor-animations som Elementor laddar på varje sida. Sedan ersätter vi den med anpassad CSS som använder en media query: animationer fungerar bara på skärmar bredare än 1000px.

💡 Snabb översikt:

• Avaktivera den inbyggda animationsfilen via wp_dequeue_style i functions.php
• Skapa din egen CSS med en min-width 1000px media query och flytta de ursprungliga animationsstilarna dit
• Köa den nya filen via wp_enqueue_style med hög prioritet
• För komplexa scenarier: en alternativ metod som använder PHP-session för att upptäcka skärmstorlek

Steg 1: Inaktivera den inbyggda animationsfilen

Det första du behöver göra är att avköa standardfilen elementor-animations.css. Elementor registrerar och köar den här filen vid varje förfrågan, oavsett om animationer används på sidan eller inte.

Lägg till koden i ditt barntemas functions.php eller via tillägget Code Snippets. Redigera inte barntemats functions.php direkt: dina ändringar försvinner vid nästa uppdatering.

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 );

Vad som händer här: wp_dequeue_style tar bort filen från utdatan-kön, wp_deregister_style tar bort dess registrering helt. Den höga prioriteten 9999 behövs för att fånga upp animationer efter alla andra skript, eftersom Elementor laddar dem sent. Två hooks (wp_enqueue_scripts och wp_head) ger en försäkring mot scenarier där tillägget hakar i olika laddningssteg.

Verifiera: öppna sidans källkod (Ctrl+U) och sök efter elementor-animations. Länken till den här filen ska vara borta.

Steg 2: Skapa anpassad CSS med en media query

Nu är animationer inaktiverade för alla enheter. För att få tillbaka dem på desktop skapar vi vår egen stilmall som omsluter de ursprungliga reglerna i @media (min-width: 1000px).

Skapa en mapp och fil i ditt barntema:

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

Öppna den ursprungliga animations.min.css (finns på wp-content/plugins/elementor/assets/lib/animations/animations.min.css), kopiera allt dess innehåll och klistra in i den nya filen, omslut det 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
}

Tröskeln på 1000px är en kompromiss: de flesta surfplattor i stående orientering (768-1024px) får också inaktiverade animationer. Om du behöver animationer på surfplattor, sänk gränsen till 768px.

Resultatet ska se ut så här:

Steg 3: Köa den nya stilmallen

Allt som återstår är att tala om för WordPress var vår anpassade CSS finns. Lägg till följande i samma functions.php efter den tidigare 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' );

Funktionen get_stylesheet_directory_uri() returnerar barntemats URL (eller barntemats om inget barntema finns). Detta är säkrare än att hårdkoda sökvägen manuellt.

Öppna nu din webbplats på en telefon eller i utvecklarverktygen (F12 → Växla enhetsverktygsfältet). Animationer ska försvinna på skärmar smalare än 1000px, medan de fungerar som tidigare på desktop.

Alternativ metod: upptäcka skärmstorlek via PHP-session

Vi rekommenderar inte den här metoden för permanent användning, men den är användbar som koncept för andra uppgifter där logik beror på skärmbredd.

Idén: en PHP-session sparar fönsterdimensioner från cookies, och functions.php avgör om animationer ska inaktiveras baserat på denna data. Nackdelarna är uppenbara: sessionen lägger till serverbelastning, cachelagring bryts (en sida med session_start() cachelagras inte korrekt), och användarens första besök sker alltid utan skärmstorleksdata.

Om du förstår dessa begränsningar och är villig att acceptera dem, här är 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
}

För produktion är metoden från steg 1-3 mer tillförlitlig: den är inte beroende av sessioner och fungerar bra med all cachelagring.

Video: dolda Elementor-animationsinställningar

Den korta videon nedan visar ett alternativt sätt att inaktivera mobilanimationer via CSS-klasser och riktade media queries. Det här tillvägagångssättet är användbart om du inte vill ta bort alla animationer helt, utan selektivt undertrycka de tyngsta.

⁉️🤔 Vanliga frågor

Varför kan jag inte bara dölja animerade element via CSS display: none på mobilen?

För att display: none tar bort elementet visuellt, men webbläsaren laddar och tolkar fortfarande animationsfilen. Sidan laggar precis lika mycket, du ser det bara inte. En fullständig avköning via PHP löser problemet på servernivå: 50-80 KB animationsstilar skickas aldrig över nätverket alls. På mobildata är det märkbart.

Fungerar den här metoden med andra sidbyggare som Divi, WPBakery eller Gutenberg?

Principen är densamma, men stil-handtaget är annorlunda. Divi använder divi-style, WPBakery köar js_composer_front, och Gutenberg köar ingen separat animationsfil alls (allt går via wp-block-library). Hitta handtaget via sidans källkod genom att leta efter <link rel='stylesheet' med tilläggets namn i id. Upprepa sedan steg 1-3 med det handtaget.

Varför är media queryn exakt 1000px och inte standarden 768px?

Standardbrytpunkten 768px täcker telefoner och små surfplattor. Men 9-10 tums surfplattor i stående läge (~800px) lider fortfarande av animationer, eftersom deras processorkraft och Wi-Fi-bandbredd inte räcker till för smidig rendering. Tröskeln på 1000px täcker alla surfplattor och lämnar animationer endast för fullvärdiga desktops. Om du föredrar kan du sänka den till 768px: ersätt bara 1000 i CSS:en med ditt värde.

Är detta ens nödvändigt 2026 när alla smartphones har flaggskeppsprocessorer?

Klyftan mellan flaggskepp och budgetenheter är fortfarande enorm. Enligt Statcounter-data för 2026 kommer en tredjedel av mobiltrafiken från enheter med mindre än 2 GB RAM. Plus mobila nätverk: i regioner utanför större städer är hastigheterna ofta under 5 Mbps. Varje kilobyte sparade animationer minskar tiden till första interaktion med 100-300 ms, och det korrelerar direkt med konvertering.

Kan jag göra samma sak via ett tillägg istället för kod i functions.php?

Ja, men vi rekommenderar det inte. Varje extra tillägg lägger till sin egen overhead, och för en uppgift på 15 rader är det overkill. Om du är rädd för kod, installera det kostnadsfria tillägget Code Snippets, klistra in koden där (det har en kryssruta för att aktivera/inaktivera, och det är svårare att göra misstag än i functions.php). Ett tillägg specifikt för att avaktivera animationer är överdrivet.

Att inaktivera animationer eller inte: slutlig rekommendation

Kort sagt: inaktivera dem på mobilen. Vinsterna i laddningshastighet och scroll-smjukhet överväger den estetiska förlusten. En användare som besöker från sin telefon vill ha information här och nu, inte vänta på att ett animerat hero-block ska ladda klart.

Den grundläggande trestegsmetoden ovan löser uppgiften fullt ut och fungerar bra med cachelagring. Sätt upp det en gång, testa på ett par sidor via PageSpeed Insights, och glöm bort det. Och om du behöver selektiv animering för specifika element, kombinera tillvägagångssättet från videon med media queries som riktar sig mot specifika CSS-klasser.

Gillade du den här guiden? Kolla in våra andra Elementor-handledningar: fontoptimering, lazy loading-widgets och att sätta upp brödsmulor för anpassade inläggstyper.