Как добавить HTML-код в Тильде

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

Три места для HTML-кода в Тильде

Куда вставить HTML, зависит от того, что код должен сделать. Если нужен видимый фрагмент в теле страницы, берите блок T123. Если элемент должен стоять внутри конкретного макета рядом с другими блоками Zero, используйте HTML-элемент Zero Block. Метатеги добавляйте в head. Если подключаете счётчик или другой сторонний скрипт, сначала проверьте в инструкции сервиса, где должен стоять его код.

Задача	Куда вставлять	Зона действия	Как проверить
Видимый фрагмент на одной странице	Блок T123 в теле страницы	Одна страница, место в потоке блоков	Опубликовать, открыть страницу, увидеть элемент
Элемент внутри готового макета	HTML-элемент в Zero Block	Одна страница, позиция внутри макета	Опубликовать, открыть страницу, увидеть элемент на месте
Метатег на всех страницах	Настройки сайта → Еще → HTML-код внутрь head	Весь сайт	Опубликовать, открыть исходный код страницы, найти тег
Метатег на одной странице	Настройки страницы → Вставка кода → HTML-код внутрь head	Одна страница	Опубликовать, открыть исходный код страницы, найти тег

Учебный пример

Три задачи и выбор места под каждую:

Вход	Что нужно	Выбор
Задача 1	Кастомная кнопка с бейджем в середине лендинга одной страницы	Блок T123 в теле страницы
Задача 2	Фрагмент со script от сервиса на всех страницах сайта, содержимое кода неизвестно	Место вставки по инструкции сервиса — после проверки назначения кода и данных, которые он собирает
Задача 3	Метатег на все страницы, на одной странице другой вариант	Head каждой страницы отдельно: обычный метатег на остальных, другой на странице-исключении

Для задачи 1 код идёт в T123, потому что элемент видимый и нужен на одной странице. Для задачи 2 сначала прочитайте инструкцию сервиса о месте вставки и выясните, какие данные скрипт собирает и куда отправляет; требование поставить код на всех страницах само по себе место вставки не определяет. Для задачи 3 общий метатег в head сайта не ставьте: пропишите обычный вариант в head каждой страницы, а на странице-исключении — другой.

Проверка выбора: откройте опубликованную страницу. Видимый элемент из задачи 1 виден в потоке блоков. На обычной странице из задачи 3 в исходном коде стоит обычный метатег, на странице-исключении — другой, ровно по одному варианту. Скрипт из задачи 2 проверяйте способом, который указан в инструкции сервиса.

Блок T123: HTML-код в теле страницы

Блок T123 добавляется через Библиотеку блоков → Другое. Через него добавляется любой код, включая теги script и style (^[1]). В блоке поддерживается HTML, JavaScript внутри тега script и CSS внутри тега style (^[2]).

Порядок вставки:

Откройте страницу в редакторе.
Библиотека блоков → Другое → блок T123.
На панели блока нажмите «Контент» и вставьте код.
«Сохранить и закрыть».
Опубликуйте страницу.

В редакторе кода есть горячие клавиши: Ctrl+F для Windows или ⌘+F для MacOS открывает поиск по коду, Ctrl+Space (на MacOS ещё ⌘+Shift+Space) — подсказки для JavaScript (^[1]).

Для кастомных стилей используйте уникальные классы или ID. Теги, универсальные классы и селектор «*» в качестве селекторов могут задеть интерфейс Тильды (^[1]).

HTML-элемент в Zero Block: когда нужен

HTML-код можно вставить отдельным элементом в Zero Block. Принципы работы блока T123 и элемента HTML в Zero не имеют существенных отличий (^[1]). Выбор идёт по месту в макете: если элемент должен стоять внутри Zero рядом с другими элементами и двигаться вместе с макетом, берите HTML-элемент Zero. Если фрагмент живёт в обычном потоке блоков страницы, хватит T123.

Код в head сайта и отдельной страницы

Код перед закрывающим тегом head ставится двумя путями (^[1]):

Весь сайт: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».
Отдельная страница: «Настройки страницы» → «Вставка кода» → «HTML-код для вставки внутрь head».

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

Публикация и проверка результата

В режиме редактирования и предпросмотра код выводится просто текстом. Чтобы код заработал, страницу нужно опубликовать (^[1]). Код выполняется на опубликованной странице (^[2]).

Если после публикации изменений не видно, обновите страницу, возможно несколько раз: браузер часто сохраняет старую версию (^[3]). Если вы внесли правки в опубликованную страницу, её нужно опубликовать снова, чтобы изменения увидели другие (^[3]).

Проверка по шагам:

Нажмите «Опубликовать» и откройте публичную ссылку из окна публикации.
Обновите страницу.
Для видимого элемента из T123 или Zero Block проверьте, что он на месте.
Для кода в head откройте исходный код страницы в браузере и найдите свой тег.
Если код не сработал, отключите блок с кодом и проверьте страницу снова.

Ограничения: PHP и сторонний код

Свой код PHP вставить на страницу не получится. Его можно разместить на своём сервере и отправлять на него данные с помощью приемщика Webhook (^[1]).

Служба поддержки не консультирует по коду, который вы добавили самостоятельно, и не поддерживает вопросы работы вашего кода (^[1], ^[2]). Сторонние решения могут перестать работать из-за проблем у сторонних сервисов или нововведений Тильды. При ошибках отключите блоки с кодом и обратитесь к автору кода (^[1]).

Если код стороннего сервиса перестал работать, проверьте его у автора сервиса. Свой код держите в отдельном блоке, чтобы отключать его без правки остальной страницы.

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

Куда вставить HTML, чтобы он был виден на странице? В блок T123 в теле страницы или HTML-элементом в Zero Block.

Чем T123 отличается от HTML-элемента в Zero Block? Принципы работы не имеют существенных отличий, выбор идёт по месту в макете.

Почему код не работает в редакторе и предпросмотре? В редакторе и предпросмотре код выводится текстом, работает он только на опубликованной странице.

Можно ли вставить PHP? Нет, PHP на страницу не вставляется; данные отправляются на свой сервер через Webhook.

Как проверить, что код заработал? Опубликуйте страницу, обновите её и проверьте элемент на странице или тег в исходном коде.

Если после вставки кода нужна кнопка на странице, разбор есть в статье как добавить кнопку в Тильде. Вопросы для сайта с нейросетью собраны в FAQ для сайта с нейросетью.