{"draftJsState":{"blocks":[{"data":{"image":{"id":"69c7c482b247637e152b47fb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7t73o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"}],"text":"Прелоадер — это не просто крутящийся кружок, а мощный инструмент брендинга. Пока страница загружается, он удерживает внимание пользователя и создает правильное первое впечатление. Рассказываем, как сделать уникальный прелоадер на Тильде своими руками.","type":"unstyled","key":"b58od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое прелоадер и зачем он нужен","type":"header-two","key":"ev82p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прелоадер (preloader) — это анимация, которая отображается на экране, пока страница полностью не загрузится.","type":"unstyled","key":"7niq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Почему это важно:","type":"unstyled","key":"586u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удерживает внимание в первые секунды","type":"unordered-list-item","key":"16pve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Показывает, что сайт работает, а не завис","type":"unordered-list-item","key":"dtl1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Укрепляет бренд через фирменную анимацию","type":"unordered-list-item","key":"127im"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создает эмоциональную связь с посетителем","type":"unordered-list-item","key":"74djv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Особенно актуален для сайтов с тяжелой графикой, видео и Zero-блоками.","type":"unstyled","key":"akrkh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 1: Простой прелоадер из Zero Block","type":"header-two","key":"cbp48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это оптимальный метод по соотношению сложности и возможностей.","type":"unstyled","key":"a1fd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Создаем Zero Block","type":"header-two","key":"9uco2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":75,"style":"BOLD"}],"text":"Добавьте Zero Block в самом верху страницы. В настройках установите высоту 100% — блок закроет весь экран.","type":"unstyled","key":"5caf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разместите внутри элементы прелоадера:","type":"unstyled","key":"cit4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логотип","type":"unordered-list-item","key":"fflvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимированный текст","type":"unordered-list-item","key":"c91fo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SVG-элементы","type":"unordered-list-item","key":"7iq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спиннер","type":"unordered-list-item","key":"6cp2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2. Находим rec ID блока","type":"header-two","key":"dsq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":24,"style":"BOLD"},{"length":8,"offset":53,"style":"BOLD"}],"text":"Нажмите на Zero Block → Настройки блока → скопируйте ID блока (например, rec12345678).","type":"unstyled","key":"d8vth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Подключаем jQuery","type":"header-two","key":"8f8uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":18,"style":"BOLD"},{"length":36,"offset":33,"style":"BOLD"}],"text":"Настройки сайта → Ещё → включите Подключить jQuery на страницах сайта.","type":"unstyled","key":"c7vr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4. Добавляем блок T123 с кодом","type":"header-two","key":"ifjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После Zero Block добавьте блок T123 и вставьте код, заменив rec12345678 на ваш ID:","type":"unstyled","key":"depjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"66q63"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n","type":"blockquote","key":"7f1ca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Как это работает:","type":"unstyled","key":"e6eqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блок фиксируется на весь экран","type":"unordered-list-item","key":"67af7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прокрутка блокируется","type":"unordered-list-item","key":"77ton"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После загрузки страницы прелоадер плавно исчезает за 2 секунды","type":"unordered-list-item","key":"4g2u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 5. Настройка параметров","type":"header-three","key":"6lqtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменяйте fadeOut(2000) — цифра в миллисекундах определяет скорость исчезновения. Рекомендуем 1000–2000 мс.","type":"unstyled","key":"cgian"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 2: Прелоадер с эффектом печатной машинки","type":"header-two","key":"7gcpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для креативных проектов — динамичный текст, который печатается на глазах.","type":"unstyled","key":"drp2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML (в блок T123):","type":"unstyled","key":"491d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"blockquote","key":"8aall"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n $\"Логотип\"$ \n

","type":"blockquote","key":"eetb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS (Настройки сайта → CSS):","type":"unstyled","key":"c9bno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"c1jr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#preloader {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n background-color: black;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n#preloader-logo {\n width: 70px;\n height: auto;\n}\n\n#preloader-quote {\n margin-top: 40px;\n text-align: center;\n font-size: 12pt;\n color: #d6d6d6;\n font-family: 'TildaSans';\n}","type":"blockquote","key":"533h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"JavaScript (добавьте в тот же T123):","type":"unstyled","key":"f97ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7dk84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"blockquote","key":"3ob0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 3: Интерактивный прелоадер","type":"header-two","key":"fu774"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый современный вариант — пользователь должен выполнить действие (например, перетащить элемент), чтобы открыть сайт.","type":"unstyled","key":"opcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Особенности:","type":"unstyled","key":"8mm3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создается в Zero Block с двумя шейпами","type":"unordered-list-item","key":"8kdbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первому шейпу — класс ti-key (перетаскиваемый)","type":"unordered-list-item","key":"6flav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второму шейпу — класс ti-target (цель)","type":"unordered-list-item","key":"7inct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Требуется специальный скрипт через T123","type":"unordered-list-item","key":"94bat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":3,"style":"BOLD"}],"text":"⚠️ Важно: не работает с включенным Autoscale в блоках.","type":"unstyled","key":"atvji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готовые решения: генераторы кода","type":"header-two","key":"e0tgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если не хотите разбираться в коде:","type":"unstyled","key":"3i724"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":7}],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Nolim (https://nolim.cc) - платформа с модификациями для Тильда и встроенным AI инструментом для создания своей кастомной модификации.","type":"unordered-list-item","key":"1vfl9"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":12,"offset":7}],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Ворон (voron-dev.ru) — библиотека модификаций, генератор кода под ваш recid","type":"unordered-list-item","key":"1ejme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"TiCode — готовые прелоадеры с настройками","type":"unordered-list-item","key":"5m9if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Templatica — подробные инструкции и примеры","type":"unordered-list-item","key":"93jm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5 важных рекомендаций","type":"header-two","key":"4o6il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Не перегружайте прелоадер — сложная анимация замедляет загрузку","type":"ordered-list-item","key":"b2o9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Оптимальное время показа — 1–2 секунды, не дольше","type":"ordered-list-item","key":"1feb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Проверяйте на мобильных — адаптивность критически важна","type":"ordered-list-item","key":"cfu4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Тестируйте после публикации — убедитесь, что прелоадер появляется и исчезает корректно","type":"ordered-list-item","key":"as1os"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Избегайте распространенной ошибки — прелоадер не должен скрывать контент при перезагрузке","type":"ordered-list-item","key":"30ih3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"2d0aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомизация прелоадера на Тильде доступна каждому. Начните с простого Zero Block и базового скрипта, а затем экспериментируйте с анимациями и интерактивом.","type":"unstyled","key":"a3avj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Главные принципы:","type":"unstyled","key":"ap370"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Скорость — не заставляйте ждать дольше нужного","type":"unordered-list-item","key":"ej8ca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Эстетика — дизайн в едином стиле с сайтом","type":"unordered-list-item","key":"a4lui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Функциональность — прелоадер не должен создавать проблем","type":"unordered-list-item","key":"f1s8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте готовые генераторы кода, тестируйте на разных устройствах — и ваш сайт будет встречать посетителей ярко и профессионально.","type":"unstyled","key":"dp38a"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":35,"offset":15}],"inlineStyleRanges":[],"text":"Более подробно читайте в статье на сайте по ссылке >>>.","type":"unstyled","key":"1op52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":81,"offset":0,"style":"ITALIC"}],"text":"Подписывайтесь мой канал, чтобы не пропустить новые инструкции по работе с Tilda! \uD83D\uDD25","type":"unstyled","key":"5338o"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":25,"offset":42},{"key":4,"length":27,"offset":72}],"inlineStyleRanges":[],"text":"Также подписывайтесь в мое сообщество ВК: https://vk.ru/site_uslugi или https://vk.ru/pro_site_blog или пишите, если Вам нужен сайт.","type":"unstyled","key":"b2hg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7j8tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mJaprePowHbyrE3tJ1BR"}],"entityMap":{"0":{"data":{"url":"https://nolim.cc/?r=30546"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://voron-dev.ru/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://infostudio.alexvyshtakalyuk.ru/blog/preloader-na-tilda-kastomizatsia"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://vk.ru/site_uslugi"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://vk.ru/pro_site_blog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}