Tilda T123: как вставить свой HTML и не сломать вёрстку

Tilda T123 - это блок из категории «Другое», который вставляет в страницу произвольный HTML, CSS и JavaScript без обёртки в готовый дизайн Tilda. Беру его каждый раз, когда штатных блоков конструктора не хватает: нужен калькулятор, виджет с курсом валют, кастомная форма с нестандартной логикой или просто кусок верстки, который через визуальный редактор не собрать. Отличие от привычных блоков в том, что T123 ничего не знает о своём содержимом - что вставили, то и отрендерится, включая ошибки разметки.

Что за блок T123 и где его искать в Tilda

В библиотеке блоков он лежит на вкладке «Другое» и называется «HTML-код». Внутри текстовое поле, куда код вставляется целиком: разметка, стили в тегах style, скрипты в тегах script. Блок не переформатирует и не режет содержимое, поэтому за корректность отвечает тот, кто код туда положил.

Через T123 обычно добавляют виджеты сторонних сервисов, готовые куски верстки с других проектов, кастомные калькуляторы и формы с логикой, которую в конструкторе не собрать, а также интеграции с оплатой или CRM, требующие своего JS на конкретной странице.

Отличие от Zero Block: там верстка собирается визуально из элементов Tilda и наследует адаптивные настройки платформы под десктоп, планшет и телефон. T123 верстку не адаптирует автоматически - что написали, то и покажется на всех экранах, если сами не добавите media-запросы.

Как добавить HTML-код через блок T123

Добавляю блок на нужное место страницы через «Добавить блок» → вкладка «Другое» → T123. Открываю настройки блока и вставляю код в поле для HTML. Сохраняю и проверяю в режиме предпросмотра отдельно на desktop-версии и на мобильном превью редактора, а не только на своём широком мониторе.

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

Почему верстка ломается: T123 не изолирует стили

Главная причина поломок в том, что блок вставляет код прямо в DOM страницы, без iframe и без изоляции. Стили из тега style внутри T123 действуют на всю страницу целиком, а не только на сам блок. Если написать правило вида button { padding: 20px; }, оно перекрасит все кнопки на странице, включая те, что стоят в блоках, собранных визуально через штатный редактор Tilda.

На практике решаю это так: каждому виджету даю уникальный класс-обёртку, например .currency-widget, и все стили пишу только через этот класс - .currency-widget .btn, а не просто .btn. Тот же принцип касается id. Если на странице несколько блоков T123 или один и тот же блок продублирован для разных языковых версий, одинаковые id в разных копиях приводят к тому, что document.getElementById находит только первый элемент на странице, а остальные копии виджета просто молчат.

Скрипты в T123: дубли библиотек и конфликты id

Вместо id завязываю логику на класс и ищу нужный элемент относительно самого исполняемого скрипта - тогда один и тот же код можно вставлять в несколько блоков на странице без переименования переменных вручную:

<div class="currency-widget">
  <button class="currency-widget__btn">Показать курс</button>
  <span class="currency-widget__result"></span>
</div>
<script>
(function () {
  var wrap = document.currentScript.closest('div');
  var btn = wrap.querySelector('.currency-widget__btn');
  var result = wrap.querySelector('.currency-widget__result');
  btn.addEventListener('click', function () {
    result.textContent = 'Курс обновлён';
  });
})();
</script>

Функция document.currentScript возвращает тот самый script-тег, который сейчас выполняется, а closest поднимается от него вверх по DOM до ближайшей обёртки. Так скрипт всегда работает со своим экземпляром виджета, даже если на странице стоит три одинаковых блока T123 подряд.

Если библиотека должна грузиться один раз на всю страницу, проверяю флаг перед подключением: if (window.jQuery) return; или похожую проверку под конкретную библиотеку. Без такой проверки при трёх копиях блока с одинаковым скриптом библиотека загрузится трижды, и обработчики событий начнут срабатывать по два-три раза на один клик - классическая жалоба «форма отправляется два раза».

Адаптация под мобильные в кастомном HTML-блоке

Штатные блоки Tilda дают отдельные настройки под десктоп, планшет и телефон прямо в редакторе. T123 таких настроек не имеет, поэтому адаптив приходится писать руками через media-запросы в том же теге style.

Частая ошибка - ширина в vw без учёта полосы прокрутки: элемент с width: 100vw на мобильном может вылезать за край экрана и добавлять горизонтальный скролл. Обхожу это через width: 100%; box-sizing: border-box; у корневой обёртки вместо vw. Второй момент - проверять верстку не только в режиме адаптива в редакторе Tilda, а на реальном телефоне: эмуляция в браузере не всегда показывает баги с touch-событиями и вьюпортом.

Где ещё можно вставлять код в Tilda и чем это отличается от T123

Кроме блока T123 в Tilda есть ещё два места для кастомного кода, и у каждого своя область действия:

Смешивать эти уровни не стоит: если скрипт нужен на каждой странице сайта, ему место в настройках сайта, а не в T123, продублированном на десяти страницах вручную - при любом обновлении логики придётся править все десять копий отдельно.

Когда собирать код руками, а когда заказывать доработку

Простую верстку, статичный виджет или готовый сторонний скрипт разумно вставить самому через T123 за один вечер. Заказываю или делаю на заказ обычно то, что требует расчётов на бэкенде, хранения данных или интеграции с внешним API: конвертер валют с живым курсом, калькулятор доставки, синхронизацию с оплатой. В качестве примера у меня в библиотеке готовых решений есть конвертер валют для Tilda: он берёт актуальный курс по API нацбанка и пересчитывает цены в каталоге, а не хардкодит цифры в JS-файле.

Если задача укладывается в простую правку уже существующего блока, кастомный скрипт для Tilda обхожусь от 3000 ₽. Когда речь про полноценную интеграцию - CRM, эквайринг, СДЭК - это уже комплексная работа от 40 000 ₽, потому что помимо верстки в T123 там появляется серверная часть и обработка вебхуков. Сайт на Tilda целиком, если блок T123 нужен как часть более крупной задачи, от 30 000 ₽.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

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

Чем блок T123 отличается от Zero Block?

Zero Block собирается визуально из элементов Tilda и получает адаптивные настройки под десктоп, планшет и телефон из коробки. T123 - это чистое поле для HTML, CSS и JS без визуального редактора и без автоматического адаптива: всё, включая media-запросы, пишете сами.

Можно ли вставить в T123 форму с отправкой в CRM или на почту?

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

Почему после сохранения часть HTML-кода в T123 пропадает или ломается?

Чаще всего причина не в Tilda, а в самом коде: незакрытый тег, «умные» кавычки, оставшиеся после копирования из Word или Google Docs, либо несовпадающее количество открывающих и закрывающих скобок в JS. Перед вставкой прогоняю код через любой валидатор HTML или просто открываю его в редакторе с подсветкой синтаксиса - там незакрытые теги видно сразу.

Как проверить, что скрипт в T123 не мешает другим блокам на странице?

Открываю страницу в браузере, смотрю вкладку консоли на ошибки и вкладку с сетевыми запросами - не грузится ли одна и та же библиотека несколько раз. Затем кликаю по кнопкам и полям в других блоках страницы, не только в своём виджете: если где-то перестала работать чужая кнопка или сломалась чужая верстка, значит стили или id из T123 конфликтуют с остальной страницей.