Как вставить вайб-блок в Tilda
Шесть шагов от кнопки «скопировать» до работающего блока на опубликованной странице — и список граблей, на которые наступают почти все.
- Скопируйте код блокаНа странице любого блока нажмите «Скопировать код» — в буфер попадёт вся разметка вместе со стилями и скриптом. Ничего дополнительно скачивать и подключать не нужно.
- Откройте страницу в TildaЗайдите в нужный проект, откройте страницу и нажмите «Редактировать». Встаньте туда, где должен появиться блок.
- Добавьте блок T123Нажмите плюс, откройте «Библиотека блоков» → раздел «Другое» → блок T123 «HTML-код». Это единственный блок Tilda, который принимает произвольный HTML.
- Вставьте код в поле «Контент»Нажмите «Контент», очистите поле и вставьте скопированный код целиком. Сохраните и закройте панель.
- Подключите форму, если она естьВ блоках с заявками найдите строку
name="formservices[]"и подставьте вместоHASH_EMAILхеш приёмника из Tilda → Site Settings → Forms. Без этого форма отправится, но заявка никуда не уйдёт. - Опубликуйте и проверьтеНажмите «Опубликовать». Проверять нужно именно опубликованную страницу: в режиме превью часть скриптов Tilda не работает, и блок может выглядеть иначе.
Грабли, о которых стоит знать заранее
Блок T123 есть только на платных тарифах
Вставка произвольного HTML — платная возможность Tilda. На бесплатном тарифе блока «HTML-код» в библиотеке не будет. Это ограничение платформы, обойти его со стороны кода нельзя.
Проверяйте на опубликованной странице, а не в превью
В редакторе и превью часть скриптов Tilda не инициализируется. Особенно это заметно на формах: в превью отправка может молча не срабатывать, а на опубликованной странице всё работает. Правило простое — публикуйте и смотрите вживую.
Лимит одного блока — 50 килобайт
Больше в T123 не поместится. Все блоки каталога в лимит укладываются с запасом, самый тяжёлый занимает меньше трети. Если вы допишете свой код и упрётесь в потолок, сначала убирайте комментарии и повторяющиеся стили.
Один H1 на страницу
Часть блоков первого экрана содержит внутри <h1> — на странице блока это отмечено в характеристиках. Если на странице уже есть заголовок Tilda с тегом H1, поменяйте один из них на H2, иначе получите два H1 и просадку по семантике.
Телефон и почта в Tilda синеют
Tilda автоматически оборачивает номера телефонов и адреса почты в свою ссылку и красит её в свой цвет. В блоках каталога это уже перебито правилами на всех состояниях ссылки — если добавляете свой номер, скопируйте тот же приём.
Не вставляйте один блок дважды подряд
Технически ничего не сломается: скрипты в блоках привязываются к своему элементу и не запускаются повторно. Но одинаковые идентификаторы на странице — плохая практика, и якорные ссылки начнут вести на первый попавшийся элемент.
Как править блок под себя
В начале стилей каждого блока стоит набор переменных: акцентный цвет, цвет текста, фон, границы. Поменяв три-четыре значения, вы перекрашиваете блок целиком — искать цвета по всему коду не нужно.
Цифры и содержимое вынесены в начало скрипта отдельными массивами и объектами: прайс, вопросы квиза, отзывы, тарифы. На странице каждого блока есть таблица «Что менять под себя» — она показывает, где именно лежит нужное.
Вместо фотографий в блоках стоят SVG-заглушки. Это не временная затычка, а рабочий вариант: заглушка рисуется кодом, весит килобайт и не мылится на ретине. Когда появятся свои фото, замените SVG на тег картинки — контейнеры держат пропорции, вёрстка не поедет.
Частые вопросы
-
В библиотеке блоков, раздел «Другое», блок T123. Проще всего в поиске по библиотеке набрать «HTML» — он будет первым.
-
Почти всегда причина одна: в поле formservices[] стоит плейсхолдер вместо реального хеша приёмника. Хеши берутся в Tilda → Site Settings → Forms после подключения Email, Telegram или CRM.
-
Да, Tilda позволяет назначить блок в Site Header или Site Footer — тогда он покажется на всех страницах. Для блоков каталога это имеет смысл только у сквозных элементов, обычные секции ставятся на конкретную страницу.
-
Нет. Раскладка перестраивается через clamp и медиазапросы, горизонтального скролла нет, поля ввода имеют шрифт 16 пикселей, чтобы iOS не зумил страницу при фокусе.
-
Нет. Блоки можно использовать в коммерческих проектах, менять и перепродавать в составе своих работ без упоминания авторства.