Выкручиваем Тильду на максимум. Неожиданные тонкости, которые помогут создать топовый сайт

Тильда предлагает более 500 вариантов стандартных блоков, объединенных по смыслу в категории: обложки, текст, галереи, преимущества, меню и т. д. Редактировать контент и стили в таких блоках очень легко — каждый из них имеет большое количество настроек, от самого содержания до типографики и анимаций.

Zero-блоки — это пустые блоки, которые наполняются элементами с нуля. Тильда позволяет добавлять туда всё необходимое: текст, кнопки, изображения, формы, видео и многое другое. Все элементы настраиваются крайне гибко, что позволяет создавать уникальные дизайны, не привязанные к шаблонам конструктора. Правда, это требует более глубоких знаний UX/UI и навыков работы с платформой.

Как из комбинации стандартных и Zero-блоков получается готовый сайт? Дизайнеры редко задумываются об этом, хотя, именно благодаря пониманию этих механик, можно создавать модификации, делающие сайты в разы более изящными.

Итак, что происходит с сайтом, когда он загружается? Как мы помним, в стандартных блоках элементы имеют гибкую вёрстку и относительное позиционирование — то есть, располагаются друг в друге и меняют свои размеры в зависимости от содержимого. Это заранее прописывается в настройках каждого блока, за счёт чего они прорисовываются очень быстро — по мере загрузки самой страницы. С этим всё просто.

С Zero-блоками ситуация немного другая. Все параметры, которые мы задаём для элементов, хранятся не в стилях, а в HTML-атрибутах. Когда сайт загружается, Тильда запускает скрипт, который достаёт из этих атрибутов параметры и только потом на их основе генерирует стили (CSS-код). На загрузку и выполнение этого скрипта уходит время, поэтому Zero-блоки грузятся дольше, чем стандартные — вплоть до 3 секунд.

После отрисовки всех блоков, Тильда загружает для них функционал — это делается с помощью скриптов, встроенных в конструктор. Так, например, при наличии на странице соответствующих элементов, Тильда может подгружать модули галерей, форм обратной связи, статистики и т. д. Для зеро-блоков у Тильды также есть отдельный модуль — в нём содержится всё необходимое для его работы.

И наконец, загружаются изображения и медиафайлы. Это происходит по принципу «lazy load», то есть грузятся только те файлы, которые попадают в поле зрения пользователей при заходе на сайт. Остальные изображения превращаются в сжатые превью и подгружаются по мере прокрутки страницы. Это ускоряет загрузку сайта и повышает его доступность с точки зрения SEO.

Еще один интересный момент заключается в том, что Тильда по-разному обрабатывает элементы в зависимости от типа устройства. Так, например, стандартные блоки могут менять свою структуру и расположение на мобильных устройствах, а в Zero-блоках в зависимости от операционной системы и браузера по-разному генерируется CSS-код.

Понимание этих механизмов позволяет перейти к следующему уровню сложности — созданию и использованию модификаций для Тильды.

Как показывает практика, пользователи быстро привыкают к Zero-блокам, и со временем, их использования становится недостаточно для создания конкурентоспособного сайта. Дизайнерам часто не хватает «изюминки», чтобы выделить сайт среди сотен других. Эту проблему помогают решить модификации — сторонний код, который расширяет возможности конструктора.

Благодаря таким модификациям можно:

Изучив практически весь функционал Тильды и поработав с её альтернативами, могу сказать, что она является одним из лучших конструкторов сайтов. Если максимально раскрыть её потенциал, Тильды хватит для реализации большинства проектов малого и среднего бизнеса.

Если проект сложный, и возможностей Тильды становится недостаточно, на помощь приходят более продвинутые инструменты.