Как сделать кнопку на сайте Тильда и проверить её работу

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

Сначала решите, что должно произойти после клика

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

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

Одна кнопка должна обещать одно действие. Если текст говорит «Узнать цену», а после клика открывается общий чат без цены и пояснения, технически ссылка работает, но путь читателя сломан.

Если сама страница ещё не собрана, сначала закончите основной путь по инструкции как сделать сайт на Тильде. Здесь разбирается только кнопка и её проверка, а не публикация всего проекта.

Как добавить обычную кнопку со ссылкой

Для стандартного блока откройте библиотеку блоков, выберите вариант с кнопкой и заполните текст действия. Затем откройте Content у блока и вставьте адрес в поле Button link. Именно такой порядок описывает официальная справка Тильды о ссылках: можно указать полный адрес или относительный путь внутри сайта, после чего страницу нужно опубликовать и проверить.

1. Откройте страницу в редакторе и добавьте подходящий блок с кнопкой либо выберите уже существующую кнопку.
2. Напишите короткий текст, который называет результат клика: «Посмотреть тарифы», «Оставить заявку» или «Открыть каталог».
3. В поле ссылки вставьте полный адрес для внешнего сайта или путь вида /catalog для страницы того же проекта.
4. Скопируйте прежнее значение ссылки в заметку, если меняете действующую кнопку. Это быстрый безопасный откат.
5. Сохраните изменения, опубликуйте страницу и откройте именно публичный адрес, а не адрес редактора.
6. Нажмите кнопку и сравните конечный экран с тем, что обещает её текст.

Не копируйте ссылку из адресной строки редактора. Она доступна владельцу проекта и не является публичным адресом страницы. Тильда отдельно предупреждает об этом и советует брать опубликованный URL: URLs and Links to Other Pages.

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

По теме: Как сделать трассировку до сайта: Windows, macOS и Linux

Как сделать кнопку для прокрутки к разделу

Укажите в ссылке кнопки якорь нужного раздела. В Тильде можно сослаться на идентификатор блока вида #rec129000 или добавить невидимый блок T173 и придумать своё имя якоря. Оба варианта описаны в официальной инструкции по якорям.

1. Откройте настройки целевого блока и скопируйте его идентификатор либо добавьте перед разделом блок T173 со своим коротким именем.
2. Вставьте получившееся значение с решёткой в ссылку кнопки, например #price.
3. Опубликуйте страницу и нажмите кнопку из верхней части страницы.
4. Проверьте, что заголовок целевого раздела не спрятался под закреплённым меню. Если спрятался, перенесите якорь немного выше.

Для плавной прокрутки справка Тильды предлагает блок T178 и предупреждает, что на странице должен быть только один такой блок, иначе возможны ошибки: Anchors and Internal Links. Не добавляйте несколько копий T178 в разные разделы.

Как открыть форму во всплывающем окне

Задайте кнопке ссылку с решёткой, например #request, а в поле ссылки окна укажите точно такое же значение. В официальном руководстве Тильды для клика используются всплывающие блоки BF501, BF502 или BF503; результат можно проверить в Preview или после публикации: Pop-ups.

1. Добавьте форму из категории Form и настройте необходимые поля без лишнего сбора данных.
2. В поле ссылки всплывающего окна задайте уникальное значение, например #request.
3. То же значение без изменений вставьте в ссылку кнопки.
4. Подключите приём данных и опубликуйте страницу.
5. Отправьте тестовую заявку с отдельным тестовым контактом и найдите её в назначенном месте.

Тильда хранит отправки в разделе Leads и позволяет подключать внешние приёмники. Официальная схема состоит из подключения сервиса, выбора его в Content формы и публикации страницы: Data Capture Forms. Клик и успешное открытие окна ещё не доказывают, что заявка дошла, поэтому проверяйте весь путь. Больше о контроле отправки есть в инструкции как сделать сайт с формой.

По теме: Как сделать сайт на iPad в 2026: пошагово без компьютера

Проверочный чек-лист перед запуском

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

• На опубликованной странице кнопка видна без наложения текста и не выходит за край экрана.
• Текст кнопки совпадает с экраном или действием после клика.
• Внутренняя ссылка остаётся на вашем домене, а внешняя открывает ожидаемый защищённый адрес.
• Якорь приводит к нужному заголовку, а закреплённое меню его не закрывает.
• Окно закрывается понятным способом, а форма показывает подтверждение после отправки.
• Тестовая заявка появилась в Leads или подключённом сервисе и содержит ожидаемые поля.
• Проверка повторена на узком экране и в приватном окне браузера.

Правило приёмки простое: один тест считается пройденным только тогда, когда совпали действие, конечный экран и данные в системе назначения. Один красивый переход не подтверждает весь сценарий.

Что проверить, если кнопка не работает

Идите от симптома к причине, не меняя сразу дизайн и ссылку одновременно. Так вы сохраните понятный откат и быстрее найдёте сбой.

1. Клик ничего не делает: сравните ссылку кнопки и значение якоря или окна посимвольно, включая решётку.
2. Открывается страница редактора: замените внутренний адрес Тильды на опубликованный URL или относительный путь.
3. Переход даёт ошибку: откройте целевой адрес отдельно, затем проверьте опечатку и публикацию целевой страницы.
4. Якорь ведёт не туда: убедитесь, что имя уникально и целевой блок не был скопирован вместе со старой настройкой.
5. Окно появляется, но заявка пропадает: проверьте подключение приёмника, выбор сервиса в форме и наличие теста в Leads.
6. На телефоне кнопку нельзя нажать: проверьте перекрывающие элементы, отступы и мобильную версию блока.

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

По теме: Как сделать цены на сайте: блок, прайс и проверка

Когда обычная кнопка Тильды не подходит

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

Не маскируйте сложный процесс под мгновенный результат. Если после клика заявка отправляется на ручную обработку, напишите «Оставить заявку», а не «Забронировать». Если форма не гарантирует место, подтверждение должно прямо об этом сказать.

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

Как сделать кнопку, которая ведёт на другой блок страницы?

Укажите в ссылке кнопки ID блока с решёткой или имя собственного якоря T173, затем опубликуйте страницу и проверьте переход.

Почему кнопка открывает недоступную страницу Тильды?

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

Можно ли открыть форму по нажатию кнопки?

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

Нужно ли проверять кнопку после каждой правки?

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