Анімації Elementor гарно виглядають на десктопі й перетворюються на гальмівний жах на мобільному. Ефекти появи, блоки, що виїжджають, і паралакс не лише дратують під час скролу пальцем, а й додають сотні мілісекунд до завантаження сторінки. А Google PageSpeed Insights їх не пробачає.

Найприкріше: у налаштуваннях Elementor немає глобального перемикача «вимкнути анімації на мобільних». Але це не означає, що проблему не можна розв’язати. За 10 хвилин і два файли ви приберете всю анімацію для телефонів і планшетів, зберігши її на десктопі.

Описане рішення вимикає файл стилів elementor-animations, який Elementor підключає на кожну сторінку. Далі ми підміняємо його кастомним CSS із медіа-запитом: анімації працюють лише на екранах, ширших за 1000px.

💡 Швидкий огляд:

• Деактивуємо вбудований файл анімацій через wp_dequeue_style у functions.php
• Створюємо свій CSS із медіа-запитом min-width 1000px і переносимо туди оригінальні стилі анімацій
• Підключаємо новий файл через wp_enqueue_style із високим пріоритетом
• Для складних сценаріїв: альтернативний метод із визначенням розміру екрана через сесію PHP

Крок 1: Вимикаємо вбудований файл анімацій

Перше, що потрібно зробити,, прибрати з черги стандартний elementor-animations.css. Elementor реєструє та ставить у чергу цей файл на кожен запит, незалежно від того, чи використовуються анімації на сторінці.

Додайте код у functions.php дочірньої теми або через плагін Code Snippets. Не редагуйте functions.php батьківської теми напряму: під час наступного оновлення зміни загубляться.

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

Що тут відбувається: wp_dequeue_style знімає файл із черги на виведення, wp_deregister_style видаляє його реєстрацію повністю. Високий пріоритет 9999 потрібен, щоб перехопити анімації після всіх інших скриптів, Elementor підключає їх пізно. Два хуки (wp_enqueue_scripts і wp_head) страхують від сценаріїв, де плагін чіпляється до різних етапів завантаження.

Перевірте: відкрийте вихідний код сторінки (Ctrl+U) і пошукайте elementor-animations. Посилання на цей файл має зникнути.

Крок 2: Створюємо кастомний CSS із медіа-запитом

Тепер анімації вимкнено для всіх пристроїв. Щоб повернути їх на десктоп, створимо свій файл стилів, який обгорне оригінальні правила в @media (min-width: 1000px).

Створіть папку та файл у дочірній темі:

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

Відкрийте оригінальний animations.min.css (лежить у wp-content/plugins/elementor/assets/lib/animations/animations.min.css), скопіюйте весь його вміст і вставте в новий файл, обгорнувши в медіа-запит:

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
}

Поріг 1000px, компроміс: більшість планшетів у портретній орієнтації (768-1024px) також отримають вимкнені анімації. Якщо анімації на планшетах вам потрібні, опустіть межу до 768px.

Результат має виглядати так:

Крок 3: Підключаємо новий файл стилів

Залишилося сказати WordPress, де лежить наш кастомний CSS. Додайте в той самий functions.php після попереднього коду:

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

Функція get_stylesheet_directory_uri() повертає URL дочірньої теми (або батьківської, якщо дочірньої немає). Це безпечніше, ніж жорстко прописувати шлях вручну.

Тепер відкрийте сайт на телефоні або в інструментах розробника (F12 → Toggle device toolbar). Анімації мають зникнути на екранах, вужчих за 1000px, а на десктопі, працювати як раніше.

Альтернативний підхід: визначення екрана через сесію PHP

Цей метод ми не рекомендуємо для постійного використання, але він корисний як концепція для інших задач, де логіка залежить від ширини екрана.

Ідея: PHP-сесія зберігає розміри вікна з куків, і functions.php ухвалює рішення про вимкнення анімацій на основі цих даних. Мінуси очевидні: сесія додає навантаження на сервер, кешування ламається (сторінка з session_start() не кешується нормально), а перший візит користувача завжди відбувається без даних про розмір екрана.

Якщо ви розумієте ці обмеження та готові їх прийняти, код нижче:

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
}

Для продакшену метод із кроків 1-3 надійніший, не залежить від сесій і товаришує з будь-яким кешуванням.

Відео: приховане налаштування анімацій Elementor

У короткому відео нижче показано альтернативний погляд на вимкнення мобільних анімацій, через CSS-класи та точкові медіа-запити. Підхід знадобиться, якщо ви хочете не повністю прибрати всі анімації, а вибірково придушити найважчі.

⁉️🤔 Часті питання

Чому не можна просто сховати анімовані елементи через CSS display: none на мобільних?

Тому що display: none прибирає елемент візуально, але браузер однаково завантажує та парсить файл анімацій. Сторінка гальмує так само, просто ви цього не бачите. Повний dequeue через PHP розв’язує проблему на рівні сервера: 50-80 КБ стилів анімації не йдуть у мережу взагалі. На мобільному трафіку це відчутно.

Чи спрацює метод з іншими page builder'ами, Divi, WPBakery, Gutenberg?

Принцип той самий, але handle стилів інший. Divi використовує divi-style, WPBakery підключає js_composer_front, а Gutenberg узагалі не підключає окремий файл анімацій, усе через wp-block-library. Знайдіть handle через вихідний код сторінки, шукайте <link rel='stylesheet' із назвою плагіна в id. Далі повторіть кроки 1-3 із цим handle.

Чому медіа-запит саме 1000px, а не стандартні 768px?

Стандартна точка перелому 768px покриває телефони та невеликі планшети. Але 9-10-дюймові планшети в портретному режимі (~800px) усе ще страждають від анімацій, потужності їхніх процесорів і пропускної здатності Wi-Fi недостатньо для плавного рендеру. Поріг 1000px перекриває всі планшети, залишаючи анімації лише повноцінним десктопам. За бажання можна опустити до 768px: просто замініть 1000 у CSS на своє значення.

Чи потрібно це взагалі у 2026 році, коли у всіх смартфонів флагманські процесори?

Розрив між флагманами та бюджетними пристроями все ще колосальний. За даними Statcounter за 2026, третина мобільного трафіку йде з пристроїв із менш ніж 2 ГБ RAM. Плюс мобільні мережі: у регіонах за межами великих міст швидкість часто нижча за 5 Мбіт/с. Кожен зекономлений кілобайт анімацій скорочує час до першої взаємодії на 100-300 мс, а це пряма кореляція з конверсією.

Чи можна зробити те саме через плагін замість коду в functions.php?

Так, але не рекомендуємо. Кожен зайвий плагін додає своє навантаження, і для задачі в 15 рядків коду це зайве. Якщо коду боїтеся зовсім, підключіть безплатний Code Snippets, вставте код туди (він вмикається/вимикається галочкою, і помилитися складніше, ніж у functions.php). Плагін саме для деактивації анімацій, надлишковий.

Вимикати анімації чи ні: підсумкова рекомендація

Якщо коротко: на мобільних вимикайте. Виграш у швидкості завантаження та плавності скролу переважує естетичну втрату. Користувач, який зайшов із телефона, хоче інформацію тут і зараз, а не чекати, поки доїде анімований hero-блок.

Базовий метод із трьох кроків вище розв’язує задачу повністю й товаришує з кешуванням. Налаштуйте раз, перевірте на парі сторінок через PageSpeed Insights і забудьте. А якщо потрібна вибіркова анімація для окремих елементів, комбінуйте підхід із відео з медіа-запитами на конкретні CSS-класи.

Сподобався посібник? Подивіться інші наші туторіали з Elementor: оптимізація шрифтів, ліниве завантаження віджетів і налаштування хлібних крихт для кастомних типів записів.