Zero Block в Тильде: когда он окупается и когда стандартные блоки работают лучше

Что такое Zero Block в Тильде

У Тильды два способа собирать страницы. Первый — библиотека стандартных блоков: обложки, тексты, карточки услуг, формы, отзывы. Вы выбираете блок, меняете тексты и картинки, настраиваете отступы. Блок сам подстраивается под телефон.

Второй — Zero Block. По справке Тильды, это профессиональный редактор, в котором можно создавать блоки с собственным дизайном. Каждый текст, картинка, кнопка, фигура размещаются вручную, с точностью до пикселя. В Zero Block есть анимация — базовая, пошаговая и триггерная — и импорт макетов из Figma.

На странице оба вида блоков свободно чередуются. Можно сделать первый экран в Zero Block, а дальше поставить стандартные блоки — посетитель разницы не заметит, если стиль выдержан.

Сколько стоит свобода: адаптив под пять ширин вручную

Главное, что нужно знать о Zero Block: мобильную версию за вас никто не сделает. В справке Тильды сказано прямо — адаптация в Zero Block настраивается вручную для каждого экрана. По умолчанию их пять:

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

Есть функция Autoscale — автоматическое масштабирование блока под ширину окна браузера. Она описана в ответе Тильды об автомасштабировании и экономит работу на промежуточных ширинах. Но мобильную раскладку обычно всё равно делают отдельно: уменьшенный в три раза десктопный экран на телефоне читать невозможно.

Отсюда три следствия для бюджета:

1. Сборка дороже. Экран в Zero Block с аккуратным адаптивом — несколько часов работы против получаса на стандартный блок.
2. Правки дороже. Поменять заголовок на более длинный — значит проверить и поправить его на пяти ширинах. В стандартном блоке текст просто перенесётся.
3. Ошибки чаще. Чем больше ручной работы, тем выше шанс, что на какой-то ширине кнопка уедет за край. Мы регулярно видим сайты, где на iPhone всё в порядке, а на узком Android текст налезает на фото.

Отдельно учтите, что у каждого нового сотрудника или подрядчика уйдёт время, чтобы разобраться в чужом Zero Block. Сколько это стоит в деньгах, разбирали в статье сколько стоит сайт на Тильде.

Когда Zero Block окупается

Когда стандартные блоки работают лучше

Мы видим одну закономерность на сайтах, которые приносят на разбор: чем больше Zero Block, тем реже владелец обновляет сайт. Цены устаревают, акции висят прошлогодние, потому что каждая правка — это звонок дизайнеру. Сайт, который не обновляют, со временем перестаёт продавать.

Если вы сейчас решаете, что делать в Zero Block, а что нет, начните с первого экрана: именно он оправдывает ручную работу чаще всего.

Zero Block и скорость сайта

Свободная вёрстка сама по себе не делает страницу тяжёлой. Тяжёлой её делает то, что в ней обычно рисуют:

• Анимации. Пошаговая анимация и параллакс нагружают телефон, особенно недорогой.
• Крупные картинки. В Zero Block легко вставить фото на весь экран, и вставляют его в исходном размере.
• Много слоёв. Блок из 60 элементов, половина из которых спрятана на мобильных ширинах, всё равно загружается.
• Видеофон. Красиво на компьютере, медленно на мобильном интернете.

Правило из практики: анимация должна объяснять, а не украшать. Если её убрать и смысл не пострадает, уберите. Отдельно проверьте, как анимированный первый экран выглядит в первую секунду загрузки: если заголовок «выезжает» с задержкой, часть посетителей с медленным интернетом успевает увидеть пустой экран и уйти. Проверка скорости и что реально ускорить на Тильде — в статье медленный сайт на Тильде.

Как решить, какие блоки делать в Zero Block

1. Выпишите все блоки страницы по порядку: первый экран, услуги, цены, как работаем, работы, отзывы, вопросы, форма.
2. Отметьте, какие будут часто меняться. Цены, акции, услуги — в стандартные блоки.
3. Отметьте, где нужна нестандартная подача. Первый экран, схема продукта, сравнение до и после — кандидаты в Zero Block.
4. Проверьте, нет ли готового блока. В библиотеке Тильды сотни блоков, часто нужный уже есть.
5. Посчитайте, кто будет править. Если вы сами и без навыков дизайна — Zero Block минимально.
6. Заложите проверку на всех ширинах. Для каждого блока в Zero Block — отдельная проверка на пяти ширинах и на реальных телефонах.

Условный пример: две версии одного сайта

Пример условный, не кейс студии. Студия кухонь на заказ в Самаре, сайт на 8 страниц.

Вариант А — всё в Zero Block. 8 страниц, около 50 экранов. Сборка заняла бы примерно 3 недели работы дизайнера. Через полгода нужно поменять цены на 4 страницах и добавить новую модель кухни. Правки — 2 дня работы с проверкой адаптива.

Вариант Б — гибрид. Первый экран главной, блок «как мы проектируем» и галерея работ — в Zero Block, остальное — стандартными блоками. Сборка около 8 рабочих дней. Те же правки через полгода — 2 часа, и часть владелец вносит сам.

Визуально для посетителя сайты почти одинаковые: впечатление создают первый экран и фотографии работ. Разница в стоимости владения — в разы.

Есть и третий вариант, о котором часто забывают: начать полностью на стандартных блоках, запустить рекламу, посмотреть по Метрике и Вебвизору, где люди задерживаются и где уходят, и только потом перерисовать в Zero Block те экраны, которые реально влияют на решение. Так вы платите за ручную работу там, где она доказала пользу, а не там, где она показалась нужной на этапе макета. Для малого бизнеса с ограниченным бюджетом это самый экономный путь: сайт начинает приносить заявки раньше, а деньги на дизайн тратятся по данным.

Как проверить Zero Block после сборки

1. Откройте сайт на реальном телефоне, а не в превью редактора.
2. Проверьте узкий экран: на небольших Android-смартфонах ширина около 360 пикселей.
3. Поверните телефон горизонтально.
4. Откройте на планшете или сузьте окно браузера на компьютере, медленно проходя все ширины.
5. Проверьте, что кнопки нажимаются пальцем и не перекрыты другими элементами.
6. Проверьте, что анимации не мешают читать и не тормозят прокрутку.

Типичные ошибки мобильной версии и как их исправлять — в статье мобильная версия сайта на Тильде съезжает.

Как вносить правки в Zero Block самому

Если Zero Block на сайте уже есть, это не значит, что каждую правку нужно отдавать дизайнеру. Простые изменения владелец может делать сам — если знает три правила.

1. Правьте текст, а не раскладку. Заменить цену «от 15 000 ₽» на «от 17 000 ₽» безопасно. Поменять заголовок из трёх слов на заголовок из десяти — уже нет: на узких экранах он перестанет помещаться.
2. После правки проверьте все ширины. В редакторе Zero Block переключайтесь между экранами и смотрите, не налез ли изменённый элемент на соседний. Правка на компьютерной версии может сломать мобильную.
3. Перед крупной правкой сделайте копию страницы. Если что-то пойдёт не так, всегда можно вернуться к рабочей версии.

И не забывайте опубликовать страницу после правок — без этого посетители видят старую версию.

Если правок много и они регулярные — цены меняются раз в месяц, акции каждую неделю, — это аргумент вынести такие блоки из Zero Block в стандартные. Разовая переделка обойдётся дешевле, чем годы правок с проверкой пяти ширин. Мы сами так делаем, когда к нам приходит сайт, где прайс нарисован в Zero Block: переносим его в стандартный блок, и владелец дальше меняет цены без дизайнера.

Что спросить у дизайнера про Zero Block

• Сколько экранов будет в Zero Block, сколько стандартных?
• На каких ширинах вы проверяете адаптив?
• Используете ли Autoscale и где?
• Сколько стоит правка экрана в Zero Block после сдачи?
• Смогу ли я сам поменять текст в Zero Block, и покажете ли, как?

Подробнее о выборе исполнителя — в статьях как заказать сайт на Тильде и как выбрать Тильда-дизайнера.

Если хотите понять, нужен ли вашему сайту Zero Block и где, оставьте контакты. Посмотрим задачу и предложим схему без лишней ручной работы.