Как сделать кнопку на сайте Тильда: ссылки, стили и код

Кнопка на Тильде, которая ведёт куда нужно и одинаково прилично выглядит на телефоне и на мониторе, собирается за 10-15 минут, если знать, в каком блоке редактора спрятаны нужные настройки. У меня в практике на такую работу обычно уходит именно столько, а разбор чужого макета, где кнопку сделали через десяток вложенных блоков, может занять час. Дальше по порядку: как сделать кнопку на сайте Тильда через готовый блок, как настроить ссылку на страницу, попап, файл или телефон, куда вставлять свой HTML и JS код и на каких трёх ошибках теряют клики чаще всего.

Как сделать кнопку на сайте Тильда: с чего начать

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

Порядок действий одинаковый в обоих случаях.

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

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

Ссылка на кнопке: страница, попап, якорь, телефон и файл

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

• Страница - выбор конкретной страницы из списка страниц сайта, ссылка обновится сама, если вы позже переименуете адрес страницы.
• Внешняя ссылка - полный адрес стороннего сайта, для него отдельно ставится галочка «открывать в новом окне».
• Якорь - переход к определённому блоку на этой же странице, для этого блоку-цели заранее задают имя якоря в его настройках.
• Попап - открытие блока Zero Block как всплывающего окна, без перехода на отдельный адрес, подходит для форм заявки или подробного описания услуги.
• Телефон и e‑mail - клик сразу открывает звонилку или почтовый клиент на телефоне.
• Файл - ссылка на документ, который вы загружаете прямо в поле, Тильда сама размещает файл в своём хранилище и подставляет прямой адрес.

Частая ошибка на этом шаге, о которой ниже расскажу подробнее, это ручной ввод полного адреса страницы своего же сайта вместо выбора пункта «Страница» из списка. Работает одинаково, пока не меняете домен, а как только меняете, все такие ссылки нужно чинить руками одну за другой.

Стили, состояния и адаптив: чтобы кнопка не разъезжалась

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

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

Ещё один нюанс: если кнопка стоит в блоке с несколькими колонками, на мобильной версии колонки обычно перестраиваются в одну, и кнопка вместе с ними растягивается на всю ширину экрана. Это нормальное поведение адаптивной вёрстки Тильды, а не баг, чинить тут нечего.

Вставка кода в Тильде: сайтовый код и код в блоке

Свой код в Тильде вставляется на двух уровнях, и это разные вещи. Первый уровень, это настройки сайта, раздел с дополнительным кодом для head и перед закрывающим body: то, что вставили там, работает на всех страницах сайта сразу. Сюда обычно кладут счётчики аналитики, коды подтверждения для рекламных кабинетов, общие стили или скрипты, которые нужны везде.

Второй уровень, это код внутри конкретного блока. Через «плюс, добавить элемент» в любом блоке можно вставить элемент типа HTML, откроется отдельное окно с полем для кода, и он сработает только на той странице, где стоит этот блок. Такой способ подходит для локальных доработок: скрипт для одной конкретной кнопки, виджет, который нужен только на странице акции, кастомная валидация формы.

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

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.querySelector('.my-anchor-btn');
  if (!btn) return;
  var href = btn.getAttribute('href');
  if (!href || href.charAt(0) !== '#') return;
  btn.addEventListener('click', function (e) {
    var target = document.querySelector(href);
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

Класс my-anchor-btn в примере условный, его нужно поставить кнопке через настройки блока (поле «класс для CSS») или подсмотреть реальный класс, который Тильда присвоила кнопке, через инструменты разработчика в браузере, кликнув правой кнопкой по кнопке и выбрав «Просмотреть код». Имя класса у Тильды зависит от конкретного блока, поэтому подставлять чужой пример без проверки не стоит.

Три ошибки, которые встречаю чаще всего

1. Ссылка вбита вручную, а не выбрана из списка. Кнопка на страницу того же сайта настроена как внешняя ссылка с полным адресом. Работает, пока домен не меняется и структура страниц не перестраивается, а как только это происходит, ссылку приходится искать и чинить отдельно на каждой странице.
2. Скрипт вставлен без проверки, что элемент уже загружен. Код в блоке срабатывает до того, как блок отрисовался на странице, обработчик клика не вешается, кнопка выглядит нормально, но ничего не делает по клику. Решается обёрткой в DOMContentLoaded и проверкой, что нужный элемент вообще найден на странице, как в примере выше.
3. Настройки поправили только на одной версии сайта. Кнопку подвинули или увеличили на десктопе, а на планшете и телефоне остались старые размеры и отступы. Каждую правку кнопки проверяю на всех трёх версиях перед публикацией, это быстрее, чем потом разбирать жалобы с телефонов клиентов.

Сколько стоит доработка кнопок и что входит в работу

Для простых правок, вроде переноса кнопки, настройки нужной ссылки, замены цвета и добавления небольшого скрипта, у меня это оформляется как кастомная доработка Тильды, от 3 000 ₽ за конкретную задачу. Комплексные вещи вроде интеграции кнопки с CRM или платёжной системой стоят дороже и оцениваются по объёму отдельно.

Что входит в такую работу:

• настройка ссылки нужного типа и проверка, что она ведёт куда надо;
• подгонка стилей кнопки под три версии сайта отдельно;
• небольшой JS или CSS код под конкретную задачу, без готового шаблонного решения;
• проверка результата на реальной странице после публикации.

Что не входит по умолчанию:

• разработка дизайна кнопки с нуля, если нет референса или готового макета;
• настройка домена и SSL сертификата сайта;
• обучение работе в редакторе Тильды.

На срок влияет в основном не сложность самой кнопки, а то, готово ли техническое задание. Если заранее прислать список нужных переходов (какая кнопка куда ведёт), доступ к редактору Тильды как соавтору и, если есть, ссылку на похожий пример оформления, задача решается быстрее. Без этого приходится сначала переписываться и уточнять, что именно нужно, а это тоже время.

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

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

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

Можно ли сделать кнопку в Тильде без блока, просто ссылкой в тексте?

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

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

В поле ссылки выбираете тип «Файл» и загружаете документ прямо туда. Тильда сама размещает файл в своём хранилище и подставляет прямой адрес, отдельно хостить документ где-то ещё не нужно.

Почему кнопка на телефоне выглядит не так, как на компьютере?

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

Можно ли вставить в Тильду свой код без блока с HTML?

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