Elementor animatsioonid näevad lauaarvutis ilusad välja, kuid muutuvad mobiilis aeglaseks õudusunenäoks. Sisseilmumise efektid, libisevad plokid ja parallaks mitte ainult ei ärrita kasutajat sõrmega kerides, vaid lisavad lehe laadimisajale ka sadu millisekundeid. Ja Google PageSpeed Insights seda ei andesta.

Kõige tüütum osa: Elementori seadetes pole globaalset lülitit animatsioonide mobiilis keelamiseks. Kuid see ei tähenda, et probleemi ei saa lahendada. Kümne minuti ja kahe failiga eemaldate kõik animatsioonid telefonidelt ja tahvlitelt, jättes need lauaarvutile alles.

Siin kirjeldatud lahendus keelab elementor-animations stiililehe, mida Elementor igal lehel laeb. Seejärel asendame selle kohandatud CSS-iga, kasutades meediapäringut: animatsioonid töötavad ainult ekraanidel, mis on laiemad kui 1000px.

💡 Kiire ülevaade:

• Deaktiveeri sisseehitatud animatsioonifail wp_dequeue_style abil failis functions.php
• Loo oma CSS min-width 1000px meediapäringuga ja liiguta sinna originaalsed animatsioonistiilid
• Lisa uus fail wp_enqueue_style abil kõrge prioriteediga
• Keerukamate stsenaariumide jaoks: alternatiivne meetod PHP sessiooni kasutamisega ekraani suuruse tuvastamiseks

1. Samm: keela sisseehitatud animatsioonifail

Esimene asi, mida pead tegema, on standardse elementor-animations.css eemaldamine järjekorrast. Elementor registreerib ja lisab selle faili igale päringule, olenemata sellest, kas lehel animatsioone kasutatakse või mitte.

Lisa kood oma alamteema functions.php faili või Code Snippets pistikprogrammi kaudu. Ära muuda otse ülemteema functions.php faili: sinu muudatused lähevad järgmisel uuendusel kaotsi.

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

Mis siin toimub: wp_dequeue_style eemaldab faili väljundjärjekorrast, wp_deregister_style eemaldab selle registreeringu täielikult. Kõrge prioriteet 9999 on vajalik, et animatsioonid kinni püüda pärast kõiki teisi skripte, kuna Elementor laeb need hilja. Kaks konksu (wp_enqueue_scripts ja wp_head) pakuvad kindlust stsenaariumide vastu, kus pistikprogramm haakub erinevatesse laadimisetappidesse.

Kontrolli: ava lehe lähtekood (Ctrl+U) ja otsi elementor-animations. Link sellele failile peaks kadunud olema.

2. Samm: loo kohandatud CSS meediapäringuga

Nüüd on animatsioonid kõigil seadmetel keelatud. Et need lauaarvutis tagasi tuua, loome oma stiililehe, mis mähib originaalreeglid @media (min-width: 1000px) sisse.

Loo oma alamteemasse kaust ja fail:

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

Ava originaalne animations.min.css (asub aadressil wp-content/plugins/elementor/assets/lib/animations/animations.min.css), kopeeri kogu selle sisu ja kleebi uude faili, mähkides selle meediapäringusse:

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 lävi on kompromiss: enamik tahvleid portree orientatsioonis (768-1024px) saavad samuti animatsioonid keelatud. Kui vajad animatsioone tahvlitel, alanda piiri 768px peale.

Tulemus peaks välja nägema umbes selline:

3. Samm: lisa uus stiilileht järjekorda

Jääb üle vaid öelda WordPressile, kus meie kohandatud CSS asub. Lisa sama functions.php faili eelmise koodi järele järgmine:

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

Funktsioon get_stylesheet_directory_uri() tagastab alamteema URL-i (või ülemteema, kui alamteemat pole). See on ohutum kui tee käsitsi sisse kodeerida.

Nüüd ava oma sait telefonis või arendajatööriistades (F12 → Toggle device toolbar). Animatsioonid peaksid kaduma ekraanidel, mis on kitsamad kui 1000px, samas kui lauaarvutis töötavad need nagu varem.

Alternatiivne lähenemine: ekraani suuruse tuvastamine PHP sessiooni kaudu

Me ei soovita seda meetodit püsivaks kasutamiseks, kuid see on kasulik kontseptsioonina muude ülesannete jaoks, kus loogika sõltub ekraani laiusest.

Idee: PHP sessioon salvestab akna mõõtmed küpsistest ja functions.php otsustab nende andmete põhjal, kas animatsioonid keelata. Miinused on ilmsed: sessioon lisab serverikoormust, vahemälu puruneb (session_start()-iga leht ei salvestu vahemällu korralikult) ja kasutaja esimene külastus toimub alati ilma ekraani suuruse andmeteta.

Kui mõistad neid piiranguid ja oled nõus nendega leppima, siis siin on kood:

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
}

Tootmiskeskkonna jaoks on 1.-3. sammu meetod usaldusväärsem: see ei sõltu sessioonidest ja töötab hästi igasuguse vahemäluga.

Video: peidetud Elementori animatsiooniseaded

Allolev lühike video näitab alternatiivset lähenemist mobiilianimatsioonide keelamiseks CSS klasside ja sihitud meediapäringute kaudu. See lähenemine on kasulik, kui sa ei soovi kõiki animatsioone täielikult eemaldada, vaid soovid valikuliselt maha suruda kõige raskemad.

⁉️🤔 Korduma kippuvad küsimused

Miks ma ei või lihtsalt animeeritud elemente mobiilis CSS-i display: none abil peita?

Sest display: none eemaldab elemendi visuaalselt, kuid brauser laeb ja parsib animatsioonifaili ikkagi. Leht hangub täpselt samamoodi, sa lihtsalt ei näe seda. Täielik dequeue PHP kaudu lahendab probleemi serveri tasemel: 50-80 KB animatsioonistiile ei lähe üldse üle võrgu. Mobiilse andmeside puhul on see tuntav.

Kas see meetod töötab ka teiste leheehitajatega nagu Divi, WPBakery või Gutenberg?

Põhimõte on sama, kuid stiili käepide on erinev. Divi kasutab divi-style, WPBakery lisab js_composer_front ja Gutenberg ei lisa üldse eraldi animatsioonifaili (kõik käib läbi wp-block-library). Leia käepide lehe lähtekoodist, otsides <link rel='stylesheet', mille id sisaldab pistikprogrammi nime. Seejärel korda samme 1-3 selle käepidemega.

Miks on meediapäring täpselt 1000px ja mitte standardne 768px?

Standardne murdepunkt 768px katab telefonid ja väikesed tahvlid. Kuid 9-10 tollised tahvlid portree režiimis (~800px) kannatavad endiselt animatsioonide all, kuna nende protsessori võimsus ja Wi-Fi ribalaius ei ole sujuvaks renderdamiseks piisavad. 1000px lävi katab kõik tahvlid, jättes animatsioonid ainult täisväärtuslikele lauaarvutitele. Kui eelistad, võid selle alandada 768px peale: lihtsalt asenda CSS-is 1000 oma väärtusega.

Kas see on 2026. aastal üldse vajalik, kui kõigil nutitelefonidel on lipulaeva protsessorid?

Lõhe lipulaevade ja soodsate seadmete vahel on endiselt tohutu. Statcounteri 2026. aasta andmete kohaselt tuleb kolmandik mobiilsest liiklusest seadmetest, millel on vähem kui 2 GB muutmälu. Lisaks mobiilivõrgud: suurematest linnadest väljaspool asuvates piirkondades on kiirused sageli alla 5 Mbps. Iga säästetud animatsioonide kilobait vähendab aega esimese interaktsioonini 100-300 ms võrra ja see on otseselt seotud konversiooniga.

Kas ma saan sama asja teha pistikprogrammi kaudu, mitte koodiga functions.php-s?

Jah, aga me ei soovita seda. Iga lisapistikprogramm lisab oma üldkulu ja 15-realise ülesande jaoks on see liialdus. Kui kardad koodi, paigalda tasuta Code Snippets pistikprogramm, kleebi kood sinna (sellel on märkeruut lubamiseks/keelamiseks ja seal on raskem vigu teha kui functions.php-s). Spetsiaalselt animatsioonide deaktiveerimiseks mõeldud pistikprogramm on üleliigne.

Animatsioonid keelata või mitte: lõplik soovitus

Lühidalt: keela need mobiilis. Laadimiskiiruse ja kerimise sujuvuse võit kaalub üles esteetilise kao. Telefonist külastav kasutaja soovib infot siin ja praegu, mitte oodata, kuni animeeritud hero-plokk laadimise lõpetab.

Ülaltoodud kolmeastmeline põhimeetod lahendab ülesande täielikult ja mängib hästi kokku vahemäluga. Seadista see üks kord, testi paari lehe peal PageSpeed Insightsiga ja unusta ära. Ja kui vajad valikulist animatsiooni konkreetsetele elementidele, kombineeri video lähenemist konkreetseid CSS klasse sihtivate meediapäringutega.

Meeldis see juhend? Vaata meie teisi Elementori õpetusi: fondi optimeerimine, laisa laadimisega vidinad ja leivapuru seadistamine kohandatud postitüüpidele.