Tilda Publishing

Кастомные прелоадеры из zero block в Tilda: секреты креативного ожидания

Введение

Вы хотите создать незабываемый пользовательский опыт на своем сайте Tilda, добавив кастомные прелоадеры из zero block? Нет проблем! В этой статье мы подробно рассмотрим, как создать кастомные прелоадеры из zero block в Tilda и придать вашему веб-пространству уникальное оформление, которое точно привлечет внимание посетителей.

Что такое прелоадеры и для чего они нужны на Tilda сайте

Что такое кастомные прелоадеры? Это анимированные элементы, которые появляются перед тем, как страница полностью загрузится. Использование zero block в Tilda позволяет вам создавать собственные прелоадеры с легкостью. Это открывает перед вами неограниченные возможности для креативного оформления вашего сайта.

Ожидание загрузки страницы может быть скучным, но не с прелоадерами! С кастомными прелоадерами из zero block в Tilda вы можете добавить интересные анимации, видео или даже мини-игры, чтобы сделать ожидание более увлекательным для ваших посетителей. Таким образом, вы сможете удержать их внимание и создать незабываемое первое впечатление.

Как создать кастомные прелоадеры из zero block в Tilda

Создание и использование прелоадеров в tilda не является какой-то сложной задачей. Просто следуйте инструкциям:

  1. Перейдите на сайт с GIF анимациями
  2. Выберите анимацию и настройте её под свои нужды
  3. Скачайте готовый GIF файл себе на устройство
  4. В вашем тильда сайте добавьте zero block
  5. Зайдите в редактор zero block
  6. Удалите из ничего лишние элементы
  7. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100»
  8. Нажмите на кнопку «+» и выберите «Add Image»
  9. Загрузите в зеро блок скачанную GIF анимацию
  10. Разместите анимацию в любом удобном месте
  11. Наполните блок любым контентом и стилизуйте его
  12. Сохраните изменения и выйдите из zero block
  13. После всех блоков добавьте html блок Т123
  14. Нажмите на кнопку «Контент» и скопируйте в него следующий код:
<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>
  1. Скопируйте ID зеро блока с прелоадером и вставьте в код, в указанные места
  2. Сохраните изменения и опубликуйте страницу

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

Заключение

Вы узали, как создать кастомные прелоадеры из zero block в Tilda и сделать ожидание загрузки страницы увлекательным для ваших посетителей. Не бойтесь экспериментировать с дизайном и анимацией, чтобы создать прелоадер, который точно привлечет внимание и сделает ваш сайт незабываемым.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda

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