Как сделать preloader на сайте wordpress?

preloader на wordpressВ данной статье я расскажу Вам как сделать качественный прелоадер на сайте WordPress!
Что такое preloader? Прелоадер это анимация загрузки сайта, вместо белого листа или хаотично появляющихся прогрузившихся инструментов Посетитель Вашего сайта будет видеть красивую анимацию.

В данной статье мы с Вами рассмотрим, как сделать preloader любой сложности на сайт wordpress с помощью двух инструментов!

Инструмент #1: Устанавливаем плагин preloader на wordpress:

Первым инструментом будет установка плагина для Wordpres, в принципе preloader можно сделать только им, но не торопитесь, мы с Вами сделаем уникальный и красивый прелоадер который по дизайну и смыслу будет гармонировать с Вашим сайтом.
Для начала, мы идем и устанавливаем плагин WP Smart Preloader:
preloader
В принципе сразу после установки этого плагина мы можем отправиться в его настройки и выбрать там уже готовый прелоадер:

Но я предлагаю воспользоваться вторым инструментом, для того чтобы сделать максимально подходящий и оригинальный прелоадер!

Инструмент #2: Бесплатный сервис для создания прелоадеров!

Переходим на сайт Icon8.com/cssload/ (Нажмите чтобы перейти)   и выбираем подходящую анимацию, у которой мы можем изменить, размер анимации, скорость и цвет каждого из элементов!

После настройки нажимаем кнопку Get code и переходим к финальному шагу.

Финальная настройка прелоадера на WordPress:

После нажатия кнопки Get code Вы получаете 2 кода Вашего прелоадера, скопируйте их:

И вставьте в настройках Вашего прелоадера, Выбрав пункт «Custom Animation»:

В верхнее поле вставляете код HTML 5, а в нижнее поле вставьте код CSS, и сохраняете изменения.
Все Ваш прелоадер на сайте WordPress готов! Но может возникнуть одна проблема!
Внимание! Чтобы прелоадер был прямо по центру экрана:
после строки
.cssload-loader {
position: relative; left: calc(50% — 60px);
добавьте:
top: calc(50% — 60px);

Надеюсь, статья была полезна для Вас, делитесь в социальных сетях и подписывайтесь на новые статьи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *