Elementor-animaatiot näyttävät upeilta työpöydällä, mutta muuttuvat mobiilissa tahmeaksi painajaiseksi. Sisääntuloefektit, liukuvat lohkot ja parallaksi eivät ainoastaan ärsytä käyttäjää sormella selatessa, vaan lisäävät myös satoja millisekunteja sivun latausaikaan. Eikä Google PageSpeed Insights anna sitä anteeksi.

Turhauttavinta on tämä: Elementorin asetuksissa ei ole yleistä valintaa animaatioiden poistamiseksi mobiilissa. Mutta se ei tarkoita, etteikö ongelmaa voisi ratkaista. Kymmenessä minuutissa ja kahdella tiedostolla poistat kaikki animaatiot puhelimilta ja tableteilta, mutta säilytät ne työpöydällä.

Tässä kuvattu ratkaisu poistaa käytöstä elementor-animations-tyylitiedoston, jonka Elementor lataa jokaisella sivulla. Sen jälkeen korvaamme sen omalla CSS:llä media queryn avulla: animaatiot toimivat vain yli 1000px leveillä näytöillä.

💡 Nopea yleiskatsaus:

• Ota sisäänrakennettu animaatiotiedosto pois käytöstä wp_dequeue_style-funktiolla functions.php:ssä
• Luo oma CSS, jossa on min-width 1000px -media query, ja siirrä alkuperäiset animaatiotyylit sinne
• Ota uusi tiedosto käyttöön wp_enqueue_style-funktiolla korkealla prioriteetilla
• Monimutkaisiin tilanteisiin: vaihtoehtoinen tapa, jossa käytetään PHP-istuntoa näytön koon tunnistamiseen

Vaihe 1: Ota sisäänrakennettu animaatiotiedosto pois käytöstä

Ensimmäiseksi sinun täytyy poistaa jonosta vakio elementor-animations.css. Elementor rekisteröi ja laittaa tämän tiedoston jonoon jokaisella pyynnöllä riippumatta siitä, käytetäänkö animaatioita sivulla vai ei.

Lisää koodi lapsiteemasi functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Älä muokkaa suoraan pääteeman functions.php-tiedostoa: muutoksesi katoavat seuraavassa päivityksessä.

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

Mitä tässä tapahtuu: wp_dequeue_style poistaa tiedoston tulostusjonosta, wp_deregister_style poistaa sen rekisteröinnin kokonaan. Korkea prioriteetti 9999 tarvitaan, jotta animaatiot saadaan kiinni kaikkien muiden skriptien jälkeen, koska Elementor lataa ne myöhään. Kaksi koukkua (wp_enqueue_scripts ja wp_head) varmistavat tilanteet, joissa lisäosa kytkeytyy eri latausvaiheisiin.

Tarkista: avaa sivun lähdekoodi (Ctrl+U) ja etsi elementor-animations. Linkin tähän tiedostoon pitäisi olla poissa.

Vaihe 2: Luo oma CSS media querylla

Nyt animaatiot on poistettu käytöstä kaikilta laitteilta. Tuodaksemme ne takaisin työpöydälle luomme oman tyylitiedoston, joka käärii alkuperäiset säännöt @media (min-width: 1000px) -määreen sisään.

Luo kansio ja tiedosto lapsiteemaasi:

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

Avaa alkuperäinen animations.min.css (sijaitsee osoitteessa wp-content/plugins/elementor/assets/lib/animations/animations.min.css), kopioi kaikki sen sisältö ja liitä se uuteen tiedostoon media queryn sisään käärittynä:

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
}

1000px:n raja on kompromissi: useimmat tabletit pystyasennossa (768-1024px) menettävät myös animaatiot. Jos tarvitset animaatioita tableteilla, laske raja 768px:ään.

Lopputuloksen pitäisi näyttää tältä:

Vaihe 3: Ota uusi tyylitiedosto käyttöön

Enää täytyy kertoa WordPressille, missä oma CSS:mme sijaitsee. Lisää seuraava samaan functions.php-tiedostoon edellisen koodin jälkeen:

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

Funktio get_stylesheet_directory_uri() palauttaa lapsiteeman URL-osoitteen (tai pääteeman, jos lapsiteemaa ei ole). Tämä on turvallisempaa kuin polun kirjoittaminen käsin.

Avaa nyt sivustosi puhelimella tai kehittäjätyökaluissa (F12 → Toggle device toolbar). Animaatioiden pitäisi kadota alle 1000px:n näytöillä, mutta toimia kuten ennenkin työpöydällä.

Vaihtoehtoinen tapa: näytön koon tunnistaminen PHP-istunnon avulla

Emme suosittele tätä tapaa pysyvään käyttöön, mutta se on hyödyllinen konseptina muihin tehtäviin, joissa logiikka riippuu näytön leveydestä.

Idea: PHP-istunto tallentaa ikkunan mitat evästeistä, ja functions.php päättää näiden tietojen perusteella, poistetaanko animaatiot käytöstä. Haitat ovat ilmeiset: istunto lisää palvelimen kuormaa, välimuistitus hajoaa (sivu, jossa on session_start(), ei tallennu välimuistiin kunnolla), ja käyttäjän ensimmäinen vierailu tapahtuu aina ilman näytön kokotietoa.

Jos ymmärrät nämä rajoitukset ja olet valmis hyväksymään ne, tässä on koodi:

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
}

Tuotantokäyttöön vaiheiden 1-3 menetelmä on luotettavampi: se ei riipu istunnoista ja toimii hyvin minkä tahansa välimuistituksen kanssa.

Video: Elementorin piilotetut animaatioasetukset

Alla oleva lyhyt video näyttää vaihtoehtoisen tavan poistaa mobiilianimaatiot CSS-luokkien ja kohdennettujen media queryjen avulla. Tämä tapa on hyödyllinen, jos et halua poistaa kokonaan kaikkia animaatioita, vaan karsia valikoivasti raskaimmat.

⁉️🤔 Usein kysytyt kysymykset

Miksen voi vain piilottaa animoituja elementtejä CSS:n display: none -määreellä mobiilissa?

Koska display: none poistaa elementin visuaalisesti, mutta selain lataa ja jäsentää animaatiotiedoston silti. Sivu lagaa aivan samalla tavalla, et vain näe sitä. Täysi jonosta poisto PHP:llä ratkaisee ongelman palvelintasolla: 50-80 KB animaatiotyylejä ei kulje verkon yli lainkaan. Mobiilidatalla se on huomattava ero.

Toimiiko tämä menetelmä muiden sivunrakentajien, kuten Divin, WPBakeryn tai Gutenbergin kanssa?

Periaate on sama, mutta tyylikahva on eri. Divi käyttää divi-style-kahvaa, WPBakery laittaa jonoon js_composer_front-kahvan, eikä Gutenberg laita erillistä animaatiotiedostoa jonoon lainkaan (kaikki kulkee wp-block-library-kahvan kautta). Etsi kahva sivun lähdekoodista etsimällä <link rel='stylesheet', jonka id-attribuutissa on lisäosan nimi. Toista sitten vaiheet 1-3 tällä kahvalla.

Miksi media query on juuri 1000px eikä standardi 768px?

Standardi 768px:n taitekohta kattaa puhelimet ja pienet tabletit. Mutta 9-10 tuuman tabletit pystyasennossa (~800px) kärsivät yhä animaatioista, koska niiden prosessoriteho ja Wi-Fi-kaista eivät riitä sulavaan renderöintiin. 1000px:n raja kattaa kaikki tabletit ja jättää animaatiot vain täysikokoisille työpöydille. Voit halutessasi laskea sen 768px:ään: korvaa vain 1000 CSS:ssä omalla arvollasi.

Onko tämä edes tarpeellista vuonna 2026, kun kaikissa älypuhelimissa on lippulaivatason prosessorit?

Ero lippulaivojen ja budjettilaitteiden välillä on yhä valtava. Statcounterin vuoden 2026 datan mukaan kolmannes mobiililiikenteestä tulee laitteista, joissa on alle 2 Gt RAM-muistia. Lisäksi mobiiliverkot: suurten kaupunkien ulkopuolisilla alueilla nopeudet ovat usein alle 5 Mbps. Jokainen säästetty animaatioiden kilotavu lyhentää aikaa ensimmäiseen interaktioon 100-300 ms, ja se korreloi suoraan konversion kanssa.

Voinko tehdä saman lisäosan kautta functions.php-koodin sijaan?

Kyllä, mutta emme suosittele sitä. Jokainen ylimääräinen lisäosa tuo oman kuormansa, ja 15 rivin tehtävään se on ylimitoitettua. Jos koodi pelottaa, asenna ilmainen Code Snippets -lisäosa ja liitä koodi sinne (siinä on valintaruutu käyttöönottoa ja poistoa varten, ja virheitä on vaikeampi tehdä kuin functions.php:ssä). Erillinen lisäosa animaatioiden poistamiseen on liioittelua.

Poistaako animaatiot vai ei: lopullinen suositus

Lyhyesti: poista ne mobiilissa. Latausnopeuden ja vierityksen sulavuuden hyödyt ylittävät esteettisen menetyksen. Puhelimella saapuva käyttäjä haluaa tiedon tässä ja nyt, ei odottaa animoidun hero-lohkon latautumista loppuun.

Yllä oleva kolmivaiheinen perusmenetelmä ratkaisee tehtävän täysin ja toimii hyvin välimuistituksen kanssa. Aseta se kerran, testaa parilla sivulla PageSpeed Insightsin kautta ja unohda koko asia. Ja jos tarvitset valikoivaa animaatiota tietyille elementeille, yhdistä videon lähestymistapa tiettyihin CSS-luokkiin kohdistuviin media queryihin.

Piditkö tästä oppaasta? Tutustu muihin Elementor-oppaisiimme: fonttien optimointi, widgetien laiska lataus ja leivänmurupolun asettaminen mukautetuille sisältötyypeille.