Как сделать прелоадер на тильде
За последние 3 месяца мы с командой создали более 400 страниц на Тильде и около 30 писем.
Прочувствовали все прелести и глупости конструктора. Еще мы записали короткий видеообзор, если вы больше любите смотреть, а не читать
Интуитивно понятный и максимально простой. Даже если вы никогда не работали в конструкторах сайтов – вы с лёгкостью во всем разберетесь.
Работа с текстом и изображениями
Текст редактируется очень просто. Для этого надо по нему кликнуть и написать то, что необходимо. С такой же простотой вы сможете работать с изображениями.
Есть несколько вариантов его загрузки:
- Классика, загрузите картинку с жесткого диска.
- Просто перетащите его в место для загрузки или в саму кнопку.
- CTRL+V работает! Копируйте с компьютера, браузера или откуда возможно. Удобно, если нужно вставить скриншот.
- Вставить ссылку на изображение (если оно находится в интернете)
Например, вкладки внутри вкладок не работают.
Кастомный CSS только для Zero Block
Нельзя управлять стилями стандартных блоков.
И сейчас о том, какие сайты получаются на Тильде. Это кайф. По крайней мере по сравнению со всеми остальными конструкторами. Тут любой человек (не дизайнер) может создать нечто красивое и приятное для глаз. Ведь для того чтобы сделать некрасиво, придется реально потрудиться. И на то есть несколько причин.
С помощью него можно создавать новые блоки и элементы сайта. Это для тех, кому мало стандартных блоков. Zero Block похож на Sketch, только всё сразу работает после публикации. Нарисовали - сразу опубликовали.
Воспользуйтесь Zeplin, чтобы перенести PSD-макет в Тильду с точностью до пикселя. Есть настройка контейнера – Grid или Window, которая позволяет правильно расставлять элементы внутри Zero Block.
Типографика и шрифты
Для каждого шрифта есть 5 настроек жирности, это позволяет очень круто оформлять и грамотно расставлять акценты:
1. Light 2. Normal 3. Medium 4. Semi bold 5. Bold
Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Анимация обложек и заголовков
Можно анимировать заголовок, подзаголовок и описание.
Видео и гифки на фон
Оптимальный размер фона 1680х900px
Гифки работают на месте картинок.
- на YouTube или ID ролика
- на видео-файл в формате .MP4
- на видео-файл в формате .WEBM
Многие любят :-) Если стандартного слайдера недостаточно, всегда можно написать свой.
Иконки и Фотосток
Иконки и картинки можно добавить из интерфейса Тильды.
Адаптив под размер экрана (viewport height)
Если задать размер не в пикселях (px), а в viewport height (vh), то обложка адаптируется под размер области просмотра, то есть под окно браузера.
Это просто ад. По сравнению со всеми настройками стандартных блоков и возможностью создавать в Zero Block, попапы – это просто ужас. Их почти нельзя настроить. Крестик не перенесёшь. Расположение полей не поменяешь. Короче, с этим придётся смириться. Попапы стрёмные.
Медленная загрузка шрифтов
- Забить
- Использовать стандартные шрифты
- Использовать прелоадер
Если много пунктов в меню залезают друг на друга
Хотелось бы, конечно, чтобы они сами там красивенько выстраивались, но приходится либо шрифт слишком сильно уменьшать, либо количество пунктов сокращать.
Баг с обложками при наличии шапки
Если есть меню или что-то еще в шапке сайта, а высота обложки задана в viewport, то обложка не влезает в экран ровно на размер шапки.
В обычной верстке мы можем высчитывать размер: height: calc(100vh - 70px); Тильда пока так не умеет.
Не работает поиск Unsplash
Во встроенной библиотеке не работает подбор картинок через поиск, можно выбрать только из выпадающего списка. Так себе баг, конечно, для ленивых))
Адаптация под мобильные и планшеты
Половина людей шарятся по интернету с мобильного, поэтому невероятно важно, чтобы сайт нормально отображался на всех устройствах, будь то iPhone 4 или Galaxy S8.
Большинство стандартных блоков в Тильде адаптированы под мобильные устройства (за исключением таблиц - они выглядят неважно).
Отступы между блоками в десктопной версии сайта настраиваются очень просто. Так же просто можно задать настройки отступов для тех же самых блоков на мобильной версии сайта. Это необходимо, чтобы сайт выглядел ровно на всех устройствах.
Косяк с Zero Block
Это необходимо, если вы хотите, чтобы Яндекс и Google правильно индексировали вашу страницу и показывали её в поисковой выдаче.
Теги H1, H2, H3 и Div
Настраиваются для заголовков в стандартных блоках и к любому тексту в Zero Block.
Настройка title, description, keyword и сниппета
Настройте то, как ваш сайт будет показываться в поисковиках.
Настройка Open Graph
Настройте то, как будет выглядеть ссылка, если попадет в социальные сети.
Настройка alt для изображений
Работает не во всех блоках, не ко всем изображениям. Но разработчики Тильды работают над такими улучшениями.
Тильда — панель вебмастера
- Подключить Google Search Console
- Подключить Яндекс Вебмастер
- Контролировать важные метатеги для страниц
- Настроить редиректы страниц (with code 301)
- Получить рекомендации по улучшению индексации
Отличный инструмент для того, чтобы сделать хорошее письмо – коммерческое предложение для отправки своим клиентами.
Вы можете добавить любой код для того, чтобы добавить свой слайдер или прелоадер. Прелоадер пригодится вам, чтобы не видеть страшные шрифты, пока страница загружается.
Превращение в презентацию
Надоел Power Point? Не вопрос. Любую страницу можно превратить в презентацию всего в несколько кликов.
Он сделает правильные переносы предлогов на новую строку, заменит дефисы (-) на длинные тире (–)/(—) и сделает еще что-то.
Для того чтобы залить сайт на свой хостинг, его можно экспортировать. Правда, для этого необходимо оплатить тариф Business. Если же вы перестанете оплачивать подписку, то перестанут работать формы отправки данных.
Тильда это явно удобная штуковина, на которой получаются сайты с красивым дизайном. Пользоваться ею крайне удобно.
Знаю-знаю, было уже много подобных тем, но есть одна проблема, я нигде не могу, как создать прелоадер, который будет изначально появляться на фоне, и пропадет лишь тогда, когда сам полностью загрузится.
Есть допустим страница с текстом посредине. Как сделать, чтобы эта страница показывалась поверх той, которая загружается, до тех пор, пока главная страница не загрузиться. Мне не нужна визуализация зависимости прелоадера от подгрузки, которая регулируется просто задержкой.
Как сделать именно настоящую проверку прелоадера на загрузку всей страницы?
Примерно следующим образом.
В самом начале скрываем допустим основной контент, который находится во враппере, ну к примеру задав прозрачность 0
Вообще разметка примерно следующего типа:
Делаем скрипт loader.js, примерный код дернул со старого своего проекта (поэтому полностью на код ориентироваться не стоит), прелоадер (gif) будет крутится в центре экрана, пока не загрузится основной контент:
Суть в использовании $(window).load( ); setTimeout тут не помню уже зачем, вроде для какой то красивой задержки, но эта задержка не имеет ничего общего с основной загрузкой. Там плавный переход получается такой: прелоадер крутится, пока весь контент не будет загружен (и картинки и тд), потом идет плавное затухание прелоадера на прозрачность 0 и одновременное появление основного контента (прозрачность 1).
Читайте также: