Animacje Elementor ładnie wyglądają na desktopie i zamieniają się w spowalniający koszmar na urządzeniach mobilnych. Efekty pojawiania się, wysuwane bloki i paralaksa nie tylko irytują podczas przewijania palcem, ale też dodają setki milisekund do czasu ładowania strony. A Google PageSpeed Insights im tego nie wybacza.

Najbardziej irytujące: w ustawieniach Elementora nie ma globalnego przełącznika „wyłącz animacje na urządzeniach mobilnych". Nie oznacza to jednak, że problemu nie da się rozwiązać. W 10 minut i za pomocą dwóch plików usunie Pan/Pani wszystkie animacje dla telefonów i tabletów, zachowując je na desktopie.

Opisane rozwiązanie wyłącza plik stylów elementor-animations, który Elementor podłącza na każdej stronie. Następnie zastępujemy go własnym CSS-em z media query: animacje działają tylko na ekranach szerszych niż 1000px.

💡 Szybki przegląd:

• Dezaktywujemy wbudowany plik animacji przez wp_dequeue_style w functions.php
• Tworzymy własny CSS z media query min-width 1000px i przenosimy tam oryginalne style animacji
• Podłączamy nowy plik przez wp_enqueue_style z wysokim priorytetem
• Dla złożonych scenariuszy: alternatywna metoda z określaniem rozmiaru ekranu przez sesję PHP

Krok 1: Wyłączamy wbudowany plik animacji

Pierwszą rzeczą, którą należy zrobić, jest usunięcie z kolejki standardowego elementor-animations.css. Elementor rejestruje i kolejkuje ten plik przy każdym żądaniu, niezależnie od tego, czy animacje są używane na stronie.

Proszę dodać kod do functions.php motywu potomnego lub przez wtyczkę Code Snippets. Nie należy edytować functions.php motywu nadrzędnego bezpośrednio: podczas następnej aktualizacji zmiany zostaną utracone.

1
// Отключаем стили анимаций Elementor для мобильных устройств
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 );

Co tu się dzieje: wp_dequeue_style zdejmuje plik z kolejki wyjściowej, wp_deregister_style całkowicie usuwa jego rejestrację. Wysoki priorytet 9999 jest potrzebny, aby przechwycić animacje po wszystkich innych skryptach, Elementor podłącza je późno. Dwa hooki (wp_enqueue_scripts i wp_head) zabezpieczają przed scenariuszami, w których wtyczka podpina się do różnych etapów ładowania.

Proszę sprawdzić: otworzyć kod źródłowy strony (Ctrl+U) i wyszukać elementor-animations. Odnośnik do tego pliku powinien zniknąć.

Krok 2: Tworzymy własny CSS z media query

Teraz animacje są wyłączone dla wszystkich urządzeń. Aby przywrócić je na desktopie, stworzymy własny plik stylów, który opakuje oryginalne reguły w @media (min-width: 1000px).

Proszę utworzyć folder i plik w motywie potomnym:

1
/wp-content/themes/ВАША_ТЕМА/_sdstudio_dequeue/elementor/css_animate_dequeue.css

Proszę otworzyć oryginalny animations.min.css (znajduje się w wp-content/plugins/elementor/assets/lib/animations/animations.min.css), skopiować całą jego zawartość i wkleić do nowego pliku, opakowując w media query:

1
@media screen and (min-width: 1000px) {
2
    /* Сюда вставляете ВСЁ содержимое оригинального animations.min.css */
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)}}/* ... и так далее */
4
}

Próg 1000px to kompromis: większość tabletów w orientacji pionowej (768-1024px) również otrzyma wyłączone animacje. Jeśli potrzebuje Pan/Pani animacji na tabletach, proszę obniżyć granicę do 768px.

Rezultat powinien wyglądać tak:

Krok 3: Podłączamy nowy plik stylów

Pozostaje powiedzieć WordPressowi, gdzie leży nasz własny CSS. Proszę dodać w tym samym functions.php po poprzednim kodzie:

1
// Подключаем кастомный CSS анимаций с медиа-запросом
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' );

Funkcja get_stylesheet_directory_uri() zwraca URL motywu potomnego (lub nadrzędnego, jeśli potomnego nie ma). Jest to bezpieczniejsze niż ręczne wpisywanie ścieżki na sztywno.

Teraz proszę otworzyć stronę na telefonie lub w narzędziach deweloperskich (F12 → Toggle device toolbar). Animacje powinny zniknąć na ekranach węższych niż 1000px, a na desktopie działać jak wcześniej.

Alternatywne podejście: określanie ekranu przez sesję PHP

Tej metody nie rekomendujemy do stałego użytku, ale jest przydatna jako koncepcja do innych zadań, gdzie logika zależy od szerokości ekranu.

Idea: sesja PHP przechowuje rozmiary okna z ciasteczek, a functions.php podejmuje decyzję o wyłączeniu animacji na podstawie tych danych. Minusy są oczywiste: sesja dodaje obciążenie serwera, cache się psuje (strona z session_start() nie jest normalnie cache'owana), a pierwsza wizyta użytkownika zawsze odbywa się bez danych o rozmiarze ekranu.

Jeśli rozumie Pan/Pani te ograniczenia i jest gotów/gotowa je zaakceptować, kod poniżej:

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
}

Do produkcji metoda z kroków 1-3 jest bardziej niezawodna, nie zależy od sesji i współpracuje z każdym cache'owaniem.

Wideo: ukryte ustawienie animacji Elementora

Na krótkim wideo poniżej pokazano alternatywne spojrzenie na wyłączanie animacji mobilnych, przez klasy CSS i punktowe media query. Podejście przyda się, jeśli chce Pan/Pani nie całkowicie usunąć wszystkie animacje, a selektywnie stłumić te najcięższe.

⁉️🤔 Częste pytania

Dlaczego nie można po prostu ukryć animowanych elementów przez CSS display: none na urządzeniach mobilnych?

Ponieważ display: none usuwa element wizualnie, ale przeglądarka i tak ładuje i parsuje plik animacji. Strona spowalnia tak samo, tylko Pan/Pani tego nie widzi. Pełny dequeue przez PHP rozwiązuje problem na poziomie serwera: 50-80 KB stylów animacji w ogóle nie trafia do sieci. Na ruchu mobilnym jest to odczuwalne.

Czy metoda zadziała z innymi page builderami, Divi, WPBakery, Gutenberg?

Zasada jest taka sama, ale handle stylów jest inny. Divi używa divi-style, WPBakery podłącza js_composer_front, a Gutenberg w ogóle nie podłącza osobnego pliku animacji, wszystko przez wp-block-library. Proszę znaleźć handle przez kod źródłowy strony, szukać <link rel='stylesheet' z nazwą wtyczki w id. Następnie powtórzyć kroki 1-3 z tym handle.

Dlaczego media query akurat 1000px, a nie standardowe 768px?

Standardowy breakpoint 768px pokrywa telefony i małe tablety. Ale 9-10-calowe tablety w trybie pionowym (~800px) wciąż cierpią z powodu animacji, moc ich procesorów i przepustowość Wi-Fi są niewystarczające do płynnego renderowania. Próg 1000px pokrywa wszystkie tablety, pozostawiając animacje tylko pełnoprawnym desktopom. W razie potrzeby można obniżyć do 768px: wystarczy zamienić 1000 w CSS na własną wartość.

Czy jest to w ogóle potrzebne w 2026 roku, kiedy wszystkie smartfony mają flagowe procesory?

Przepaść między flagowcami a urządzeniami budżetowymi wciąż jest kolosalna. Według danych Statcounter za 2026, jedna trzecia ruchu mobilnego pochodzi z urządzeń z mniej niż 2 GB RAM. Do tego sieci mobilne: w regionach poza dużymi miastami prędkość często jest niższa niż 5 Mb/s. Każdy zaoszczędzony kilobajt animacji skraca czas do pierwszej interakcji o 100-300 ms, a to bezpośrednio koreluje z konwersją.

Czy można zrobić to samo przez wtyczkę zamiast kodu w functions.php?

Tak, ale nie rekomendujemy. Każda dodatkowa wtyczka dodaje swoje obciążenie, a do zadania na 15 linijek kodu jest to zbędne. Jeśli całkowicie obawia się Pan/Pani kodu, proszę zainstalować darmowy Code Snippets, wstawić tam kod (włącza się/wyłącza ptaszkiem i trudniej o pomyłkę niż w functions.php). Wtyczka stricte do dezaktywacji animacji jest nadmiarowa.

Wyłączać animacje czy nie: końcowa rekomendacja

Krótko mówiąc: na urządzeniach mobilnych proszę wyłączać. Zysk w szybkości ładowania i płynności przewijania przeważa nad stratą estetyczną. Użytkownik, który wszedł z telefonu, chce informacji tu i teraz, a nie czekać, aż dojedzie animowany blok hero.

Podstawowa metoda z trzech kroków powyżej rozwiązuje zadanie całkowicie i współpracuje z cache'owaniem. Proszę skonfigurować raz, sprawdzić na kilku stronach przez PageSpeed Insights i zapomnieć. A jeśli potrzebna jest selektywna animacja dla poszczególnych elementów, proszę połączyć podejście z wideo z media query na konkretne klasy CSS.

Spodobał się poradnik? Proszę zobaczyć nasze inne tutoriale z Elementor: optymalizacja fontów, leniwe ładowanie widgetów i konfiguracja breadcrumbs dla niestandardowych typów wpisów.