Кастомные прелоадеры из zero block в Tilda: секреты креативного ожидания
Введение
Вы хотите создать незабываемый пользовательский опыт на своем сайте Tilda, добавив кастомные прелоадеры из zero block? Нет проблем! В этой статье мы подробно рассмотрим, как создать кастомные прелоадеры из zero block в Tilda и придать вашему веб-пространству уникальное оформление, которое точно привлечет внимание посетителей.
Что такое прелоадеры и для чего они нужны на Tilda сайте
Что такое кастомные прелоадеры? Это анимированные элементы, которые появляются перед тем, как страница полностью загрузится. Использование zero block в Tilda позволяет вам создавать собственные прелоадеры с легкостью. Это открывает перед вами неограниченные возможности для креативного оформления вашего сайта.
Ожидание загрузки страницы может быть скучным, но не с прелоадерами! С кастомными прелоадерами из zero block в Tilda вы можете добавить интересные анимации, видео или даже мини-игры, чтобы сделать ожидание более увлекательным для ваших посетителей. Таким образом, вы сможете удержать их внимание и создать незабываемое первое впечатление.
Как создать кастомные прелоадеры из zero block в Tilda
Создание и использование прелоадеров в tilda не является какой-то сложной задачей. Просто следуйте инструкциям:
- Перейдите на сайт с GIF анимациями
- Выберите анимацию и настройте её под свои нужды
- Скачайте готовый GIF файл себе на устройство
- В вашем тильда сайте добавьте zero block
- Зайдите в редактор zero block
- Удалите из ничего лишние элементы
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100»
- Нажмите на кнопку «+» и выберите «Add Image»
- Загрузите в зеро блок скачанную GIF анимацию
- Разместите анимацию в любом удобном месте
- Наполните блок любым контентом и стилизуйте его
- Сохраните изменения и выйдите из zero block
- После всех блоков добавьте html блок Т123
- Нажмите на кнопку «Контент» и скопируйте в него следующий код:
<style>
#rec662958916 { /* ID зеро блока с прелоадером*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
</style>
<script>
window.addEventListener("load", function () {
var loader = document.querySelector("#rec662958916"); // ID зеро блока с прелоадером
loader.style.display = "none";
});
</script>- Скопируйте ID зеро блока с прелоадером и вставьте в код, в указанные места
- Сохраните изменения и опубликуйте страницу
Теперь, если ваш сайт по какой-то причине будет долго грузиться, в процессе пользователь увидит содержимое зеро блока с прелоадером на весь экран.
Заключение
Вы узали, как создать кастомные прелоадеры из zero block в Tilda и сделать ожидание загрузки страницы увлекательным для ваших посетителей. Не бойтесь экспериментировать с дизайном и анимацией, чтобы создать прелоадер, который точно привлечет внимание и сделает ваш сайт незабываемым.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda
