Кастомные блоки в Tilda через Zero Block: до куда стоит идти

Zero Block снимает ограничения библиотеки Tilda, но платой идёт вес и адаптив: каждый блок верстается под все разрешения руками. Вкладываться в него имеет смысл на первом экране, где человек проводит первые 5-10 секунд, а не на всех страницах подряд.

Tilda продаёт себя как «конструктор для тех, кто не умеет программировать», и в стандартных блоках она действительно крутая. Но как только хочется чего-то нестандартного (свой дизайн карточки, специфическая анимация, нестандартная сетка), вы упираетесь в библиотеку готовых блоков. И тут на сцену выходит Zero Block: «нарисуйте всё сами».

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

Что такое Zero Block

В стандартной Tilda вы выбираете блок из библиотеки (около 700 готовых) и наполняете его контентом: заголовок, текст, картинка, кнопка. Структура и отступы фиксированы.

Zero Block это пустая страница, на которой вы сами расставляете элементы: текстовые поля, изображения, фигуры, формы. Управляете позицией, размерами, шрифтами, эффектами через визуальный редактор. Можно добавить свой CSS и JavaScript.

Грубо: стандартный блок это шаблон, Zero Block это белый лист с инструментами.

Когда Zero Block нужен

Несколько типичных ситуаций.

Уникальный hero-блок

Стандартные hero-блоки в Tilda приличные, но через них проходит большая часть лендингов на платформе. Если хотите визуально выделиться, Zero Block для hero оправдан. На главном экране лендинга человек проводит первые 5-10 секунд, и здесь имеет смысл вложить дополнительное время в дизайн.

Кастомная сетка (например, 3 колонки с разной высотой и наложениями)

Стандартные блоки Tilda дают сетки 2/3/4 колонки с одинаковой высотой. Если нужно три колонки разной высоты, со смещением, с фоновыми фигурами, проще нарисовать в Zero Block.

Анимация, не предусмотренная стандартом

Tilda поддерживает базовые эффекты появления при скролле в стандартных блоках. Если нужна сложная анимация (параллакс, морфинг, кастомные кейфреймы) только Zero Block.

Брендовая карточка услуги или товара

Стандартная карточка слишком общая, выглядит как у всех. Своя карточка с характерным дизайном (например, скруглённая фигура с фотоокном и кнопкой внизу) делается только в Zero Block.

Эксперимент в стиле

Если ваш бренд яркий и нестандартный, готовые блоки задают слишком серую визуальную базу. Zero Block позволяет собрать что-то «своё».

Когда Zero Block НЕ нужен

Несколько ситуаций, в которых я отговариваю клиентов идти в Zero Block.

Простой блок с текстом и изображением

Если вам нужен блок «слева текст, справа картинка», стандартный блок Tilda это уже умеет, и сделает это правильно адаптивно. Делать то же самое в Zero Block это переплачивать дизайнеру и привносить риск.

Каталог товаров или услуг

Список с регулярной структурой (название, цена, описание, кнопка) лучше всего собрать на стандартном блоке «Карточки» или через Tilda Каталог. Они заодно работают с динамическим контентом.

Когда контент будут менять часто

Стандартные блоки имеют простые поля для ввода: «Заголовок», «Подзаголовок», «Текст». Менеджер, не имеющий опыта дизайна, легко править. Zero Block требует базовых навыков работы с редактором, и часто после неаккуратной правки клиента блок «съезжает».

Когда нет времени на тестирование

Zero Block требует тестирования на 5-7 устройствах перед публикацией. Стандартный блок вы публикуете и забываете, он адаптируется сам. Если бюджет минимальный и тестирование ляжет на «потом» лучше не лезть в Zero Block.

Что нужно делать всегда

Если решили использовать Zero Block, обязательный минимум.

1. Адаптация на 5 контрольных размеров

В Zero Block есть переключатель экранов: Desktop (1200), Laptop (980), Tablet (640), Mobile (480), Mobile S (320). На каждом размере проверяем:

• Все элементы помещаются в экран.
• Текст читается (минимум 14px на мобильном).
• Кнопки кликабельны (минимум 40px высоты).
• Картинки не съезжают в стороны.
• Не появляется горизонтальный скролл.

На каждом экране иногда приходится переставлять элементы вручную. Это нормально, не пытайтесь добиться того, чтобы один и тот же макет «магически» работал везде.

2. SEO-разметка

В Zero Block по умолчанию все тексты это <div>. Поисковик их видит как обычный текст без структуры. Чтобы заголовок был заголовком, надо явно указать тег:

• Главный заголовок страницы H1.
• Заголовок секции H2 или H3.
• Подзаголовки H4.

В элементе текста в Zero Block есть свойство «HTML-тег», там и устанавливаем.

Без этой разметки SEO Zero Block-блока в ноль.

3. Alt-тексты для изображений

Каждая картинка должна иметь alt-атрибут. В Zero Block это редактируется в свойствах изображения.

Без alt SEO у картинок нулевое, и доступность сайта для людей с нарушением зрения тоже нулевая.

4. Производительность

Zero Block позволяет вставлять много изображений и эффектов. Проверяем после публикации:

• PageSpeed Insights мобильный показатель.
• LCP не больше 2.5 секунд.
• CLS не больше 0.1.

Если показатели плохие, скорее всего проблема в:

• Слишком тяжёлых изображениях (нужно сжимать до 100-200 КБ).
• Нескольких больших картинок в hero-блоке (нужно лениво грузить).
• Кастомных шрифтах, не оптимизированных.

Tilda сама оптимизирует, но в Zero Block ответственность за вес и порядок загрузки на дизайнере.

5. Резервная копия в виде шаблона

Zero Block можно сохранить как «свой шаблон» и вставлять на других страницах. Я делаю это для каждого крупного блока: если в будущем что-то полетит, можно быстро восстановить версию.

Когда Zero Block ломается

Несколько типичных проблем.

«У меня всё съехало после правки»

Часто из-за того, что правили один контрольный размер, не заметили, как изменился другой. Решение: после любой правки прогоняем все 5 контрольных размеров.

«На мобильном текст залезает на картинку»

Не выставлены constraints или родительский контейнер. В Zero Block у каждого элемента есть привязка к родителю (Container) и относительные размеры. Если их нет, элементы «не знают», как себя вести при изменении размера экрана.

Решение: использовать правильную систему container’ов, проставить relative/absolute позиционирование, проверить «pin» к краям.

«Блок весит 4 МБ»

Несколько больших картинок в фоне или в галерее. Решение: сжать через Squoosh.app или TinyPNG, заменить в Zero Block. Tilda не пересжимает уже загруженное.

«Блок не индексируется в поиске»

Тексты не помечены тегами H1/H2. Решение: переставить теги.

«Что-то ломается при просмотре в IE/старом Safari»

Zero Block использует современный CSS (flex, grid, transform). На старых браузерах не работает. Решение: смириться (доля старых браузеров < 0.5 процента) или сделать fallback в стандартном блоке для этих случаев.

Сколько стоит Zero Block-дизайн

Реалистичные цифры в 2026 году:

• Один блок (например, hero) 5-15 тысяч рублей у дизайнера.
• Полная страница из Zero-блоков 30-100 тысяч.
• Лендинг 5-7 экранов 50-150 тысяч.

В Tilda Pro есть библиотека сторонних шаблонов (Tilda Recipes, Zero Templates) от 1500 до 8000 рублей, где уже всё нарисовано. Это компромисс: уникальности меньше, но зато адаптация и SEO уже настроены.

Альтернативы Zero Block

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

Использовать сторонние шаблоны Zero

Покупаете готовый Zero-блок за 1-3 тысячи, наполняете своим контентом. Уникальности меньше, но дешевле и быстрее.

Стандартный блок + кастомный CSS

Многие стандартные блоки можно «доработать» через настройки T-блока: своя цветовая схема, кастомные отступы, свои шрифты. Получается не «другой дизайн», но «бренд-вариант» стандарта.

Stories или Trigger

Tilda поддерживает Stories (вертикальные истории как в инстаграм) и Trigger (всплывающие окна по событию). Они нестандартные, но не требуют Zero Block.

Переезд с Tilda на WordPress или Astro

Если кастомизация в Tilda становится узким местом, иногда дешевле переехать на CMS, где правки доступны напрямую. Подробно про переезд я писал в соседней статье.

Tilda для серьёзного бизнеса: где её потолок

Несколько случаев, когда Tilda реально перестаёт хватать.

Большой каталог 1000+ товаров. Tilda Каталог справляется, но фильтрация и поиск ограничены.

Сложная интеграция с CRM. Tilda умеет базовые webhook’и, но сложная двусторонняя интеграция требует костылей.

Многоязычие. Tilda поддерживает, но через дублирование страниц. Для 5+ языков становится нетривиально.

Кастомизированные акции и промо. Например, «при покупке 3-х товаров четвёртый бесплатно». Tilda этого не умеет из коробки, нужны костыли через JS.

Большой блог с 500+ статьями. Tilda Стендафлоу справляется, но управление контентом неудобно по сравнению с WordPress.

В этих случаях Zero Block или нет, всё равно упрётесь в потолок платформы. Лучше развернуть полноценный сайт.

Чек-лист для любого Zero Block

Перед публикацией:

1. Проверил все 5 контрольных размеров.
2. На каждом нет горизонтального скролла.
3. Текст помечен правильными HTML-тегами (H1, H2, H3).
4. Картинки имеют alt.
5. Изображения сжаты до разумного размера (меньше 200 КБ каждое).
6. PageSpeed Insights мобильный больше 70.
7. CLS меньше 0.1.
8. Кнопки CTA кликабельны (минимум 40px высоты).
9. Сохранил Zero Block как шаблон для резерва.
10. Проверил блок в реальном браузере на телефоне (не только в Tilda Preview).

После публикации:

1. Проверил в Search Console, что страница индексируется.
2. Через 1-2 недели посмотрел Core Web Vitals в реальной аудитории (Field Data в PageSpeed).

Если всё ровно блок живёт. Если что-то отстаёт чините.

Куда дальше

Связанные материалы: Tilda и SEO: чего реально не хватает, Перенос сайта с Tilda на WordPress, WordPress, Tilda, Битрикс или MODX: какую CMS выбрать.

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

Частые вопросы

Что такое Zero Block в Tilda

Конструктор внутри конструктора: пустой холст, на котором элементы расставляются свободно, а не по готовой сетке. Даёт свой дизайн там, где стандартных блоков не хватает.

Когда Zero Block не нужен

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

Почему Zero Block тормозит

Из-за тяжёлых картинок и анимаций. Изображения на первом экране надо сжимать до 100-200 КБ, иначе LCP уходит за 2,5 секунды и лендинг проваливает метрики.

Где потолок Tilda

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