Анимации 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: оптимизация шрифтов, ленивая загрузка виджетов и настройка хлебных крошек для кастомных типов записей.