Прелоадер для вашего сайта на Elementor

Иногда Ваши страницы размещают достаточно много контента, в связи с этим их вес увеличивается, и загрузка страницы происходит очень долго. Как вариант  — разместить «прелоадер» перед загрузкой страницы. Ниже я опишу способ, который отлично работает с конструктором Elementor, и при этом не требует установки отдельных плагинов, а одно из главных преимуществ такого способа – его можно установить на отдельные страницы.

Шаг 1

Итак, для начала нам необходимо найти анимацию загрузки страницы, как вариант можно использовать этот сайт, который предлагает простые и бесплатные svg и gif загрузчики.

Я выбрал в качестве примера такую:

Загрузите анимацию которую выбрали в медиафайлы wordpress.

Шаг 2

После этого откройте необходимую вам страницу в редакторе Elementor и создайте там пустую секцию в самом верху страницы, далее найдите в панели элементов — «HTML-элемент» и добавьте его в эту секцию:

Шаг 3

Затем добавьте следующий код в этот «HTML элемент»

<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/wp-content/uploads/images/loader.svg') 50% 50% no-repeat #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader{
display: none;
}
</style>

В сторке 16 измените путь к вашему загрузчику который вы выбрали и загрузили ранее в медиафайлы wordpress. Так же вы можете изменить #fff на цвет фона по вашему желанию для полноэкранного раздела предварительного загрузчика.

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

Поделиться этой страницей
Поделиться в facebook
Поделиться в twitter
Поделиться в vk
Поделиться в whatsapp
[]