Как добавить автоматический прелоадер в Elementor для WordPress

Прелоадер — это элемент интерфейса, который отображается на экране во время загрузки сайта. Особенно полезен на сложных страницах, созданных с помощью Elementor, когда загрузка контента может занимать несколько секунд. В этой статье расскажем, как добавить автоматический прелоадер в Elementor без использования тяжелых плагинов, используя минимальный код и немного CSS, чтобы улучшить пользовательский опыт.

Что такое прелоадер и зачем он нужен в Elementor

Прелоадер — это анимация или статичный элемент, который показывается до полной загрузки страницы. В Elementor, где страницы часто содержат много виджетов, изображений и динамического контента, время загрузки может увеличиваться, и пользователь видит пустую страницу или мерцание контента.

Использование прелоадера решает сразу несколько задач:

• Улучшает восприятие скорости сайта;
• Предотвращает мерцание стилей и элементов при загрузке;
• Делает сайт более профессиональным и приятным для посетителей.

При этом важно, чтобы прелоадер был легким и не замедлял сайт дополнительно.

Как создать простой прелоадер для сайта на WordPress с Elementor

Давайте создадим минималистичный прелоадер с помощью HTML, CSS и JavaScript, который автоматически скроется, когда страница полностью загрузится.

Шаг 1. Добавляем HTML для прелоадера

Вставим в тело сайта специальный блок прелоадера. Для этого можно воспользоваться хуком wp_footer или добавить код через Elementor в глобальный шаблон футера.

function wpelementor_add_preloader_html() {
    echo '<div id="wpelementor-preloader"><div class="spinner"></div></div>';
}
add_action('wp_footer', 'wpelementor_add_preloader_html');

Этот код добавит в футер сайта блок с id wpelementor-preloader, который будет содержать анимацию спиннера.

Шаг 2. Добавляем стили для прелоадера

Добавим CSS для позиционирования прелоадера поверх всего сайта и для анимации спиннера. Оптимально добавить стили в кастомный CSS темы или через Elementor Custom CSS.

#wpelementor-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

#wpelementor-preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: #0073aa; /* цвет спиннера WP */
    border-radius: 50%;
    animation: wpelementor-spin 1s linear infinite;
}

@keyframes wpelementor-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Спиннер будет крутиться в центре экрана на белом фоне. Цвет и размер можно настроить под дизайн сайта.

Шаг 3. Добавляем JavaScript для скрытия прелоадера

Теперь нужно автоматически скрывать прелоадер, когда страница полностью загрузится. Для этого добавим небольшой скрипт, который добавит класс hidden к контейнеру прелоадера.

function wpelementor_add_preloader_script() {
    ?>
    <script>
        window.addEventListener('load', function() {
            const preloader = document.getElementById('wpelementor-preloader');
            if (preloader) {
                preloader.classList.add('hidden');
                setTimeout(() => {
                    preloader.style.display = 'none';
                }, 300); // ждать окончание анимации скрытия
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'wpelementor_add_preloader_script');

Этот скрипт ждет события загрузки страницы, затем плавно скрывает прелоадер и убирает его из потока элементов.

Дополнительные советы по улучшению прелоадера в Elementor

Использование кастомной анимации или логотипа

Вместо спиннера можно добавить анимацию SVG или использовать логотип сайта с эффектом появления. Для этого замените содержимое блока .spinner на нужный HTML или вставьте SVG напрямую.

Оптимизация загрузки

Чтобы прелоадер не увеличивал время загрузки, подключайте CSS и JS максимально оптимально. В нашем примере код встроен через хуки и не требует дополнительных файлов, что снижает количество запросов.

Проверка совместимости с кэшированием и CDN

Если на сайте используются плагины кэширования или CDN, убедитесь, что скрипт и стили прелоадера не блокируются и корректно обновляются при изменениях.

Пример интеграции с плагином Clearfy Pro для оптимизации

Если вы используете Clearfy Pro, можно дополнительно включить опции оптимизации загрузки скриптов и стилей, чтобы прелоадер не конфликтовал с асинхронной загрузкой. Clearfy Pro позволяет управлять очередностью загрузки и отключать ненужные скрипты, что улучшит работу прелоадера.

Выводы и рекомендации

Добавление автоматического прелоадера в Elementor — простое и эффективное решение для повышения удобства пользователей. Минимальный набор кода позволяет создать легкий прелоадер без нагрузки на сайт. Важно тестировать его на разных устройствах и учитывать специфику сайта. При необходимости можно расширить функционал, добавив анимацию, разные стили или интеграцию с другими плагинами.

Используйте приведенный код как основу и адаптируйте под свои задачи и дизайн. Такой подход повысит качество сайта и оставит приятное впечатление у посетителей.