Как работать со ссылками на Tilda

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

В этом гайде покажем, как правильно делать ссылки и вставлять их в любые элементы сайта на Tilda. Без помощи верстальщика и дизайнера.

Как добавить ссылку в Tilda на разные элементы

Tilda позволяет добавлять ссылки в текст, кнопки, изображения и другие элементы на странице. Просто открываете раздел «Контент» нужного блока, находите поле «Ссылка» и вставляете URL. После сохранения изменений и повторной публикации страницы элемент станет кликабельным. Покажем на примерах, как это сделать.

Текстовые ссылки

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

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

Добавьте ссылку в поле для ввода и замените текст по необходимости. Здесь же можно задать дополнительные параметры: изменить цвет и стиль ссылки, отметить чекбокс, чтобы ссылка открывалась в новом окне, задать запрет на переход по ссылке для поисковых роботов (Rel nofollow). Нажмите на кнопку «Применить», чтобы сохранить все изменения. 

После этого текст со ссылкой станет кликабельным.

Ссылки в кнопках

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

Чтобы добавить такую ссылку, откройте настройки кнопки и найдите поле «Ссылка». В него можно вставить внешний URL, указать якорь на конкретный раздел или внутреннюю страницу проекта из списка. При необходимости отметьте открытие в новом окне и сохраните изменения.

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

Изображения как ссылки

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

Чтобы добавить ссылку в изображение, наведите курсор на нужный блок и нажмите на кнопку «Контент». В открывшемся окне найдите поле «Ссылка» и вставьте туда любой URL. 

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

Как сделать якорную ссылку в Tilda

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

Пользователь нажимает на ссылку, и экран плавно перемещается к нужному месту, не прерывая взаимодействия.

Tilda позволяет задать точку перехода двумя способами: через специальный блок T173 и через ID блока.

Через блок T173 (Якорь). Этот вариант удобно использовать, когда нужно поставить якорь не на весь блок, а на конкретное место между секциями. Для этого нажимаете на значок «+» («Добавить блок») в том месте, куда планируете сделать переход, и выбираете в библиотеке блоков T173. Быстрее найти его через поиск.

В настройках этого блока задаете имя якоря — например, contacts, без символа # — и сохраняете изменения.

После этого в ссылке блока, который хотите связать с якорем, указываете параметр #contacts и жмете на кнопку «Сохранить». Когда пользователь нажмет на кнопку или текст с такой ссылкой, страница будет прокручиваться к блоку, где установлен якорь.

Через ID существующего блока. У каждого блока в Tilda есть свой ID. Его можно посмотреть в настройках блока. Для этого нажмите на кнопку «Контент», прокрутите контекстное меню в самый низ и скопируйте ID.

Если хотите, чтобы ссылка вела к конкретному разделу, достаточно указать в ссылке #ID_блока. В таком случае вставлять дополнительно блок T173 не нужно. Этот способ быстрее, но если ID некорректный, переход не сработает.

Если якорь ведет на другую страницу, формат ссылки будет таким: /page-name#contacts. Сначала указываете адрес страницы, затем через # — имя якоря. После публикации клик по ссылке будет открывать нужную страницу с прокруткой к заданному блоку.

Специфические виды ссылок

Сайт на Tilda можно дополнить ссылками, которые будут мотивировать совершить целевое действие: подписаться на рассылку, скачать прайс или КП, позвонить, связаться в мессенджерах или по email. Такие ссылки обычно вставляют в кнопки, баннеры и попапы. Разберем подробнее, как их настроить.

Ссылка на попап

Попап — это всплывающее окно, которое появляется в зависимости от поведения пользователя: при клике по ссылке или кнопке, скролле страницы, попытке закрыть вкладку или через определенный промежуток времени на сайте. 

Чаще всего в попапы на Tilda добавляют формы подписки на email-рассылку, соцсети и мессенджеры, чтобы собирать данные потенциальных клиентов и вести их дальше по воронке продаж.

Чтобы создать всплывающее окно с формой подписки, которое будет появляться после клика по кнопке или ссылке, добавьте на страницу блок попапа. Для этого нажимаете на «+» («Добавить блок»), переходите в раздел библиотеки «Попап» и выбираете нужный шаблон. 

В настройках нового блока задаете уникальный ID — например, #popup:subscription. 

После этого настраиваете элемент, который будет открывать всплывающее окно — например, кнопку. Открываете настройки кнопки и добавляете ссылку на попап в поле «Ссылка для кнопки» через # — #popup:subscription.

После сохранения изменений клик по кнопке будет выводить попап с формой.

А чтобы отредактировать внешний вид и содержимое всплывающего окна, нужно перейти в раздел «Контент» попапа.

И заменить данные в разделах «Заголовок, описание, изображение», «Поля для ввода», «Сообщение об успехе», «Текст кнопки» и «Текст под формой». 

Телефон и Email

Чтобы пользователь мог быстро позвонить или написать письмо прямо со страницы, в Tilda используют специальные префиксы. Для телефона это tel:, для электронной почты — mailto:. Достаточно добавить такой префикс перед номером или адресом в поле «Ссылка» на кнопке, тексте или любом другом элементе.

Ссылка для телефона в Tilda выглядит так: tel:+71234567890 (все без пробелов и дополнительных символов). Если пользователь откроет сайт на мобильном, клик по такому элементу сразу предложит позвонить. На компьютере — откроет установленное приложение для звонков, например, FaceTime или Skype.

Чтобы email стал кликабельным, в поле «Ссылка» указывают адрес с префиксом mailto:, например: mailto:hello@mycompany.com. При клике откроется почтовое приложение с шаблоном нового письма.

Ссылки на соцсети и мессенджеры

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

Чтобы добавить такой блок, нажмите на значок «+» («Добавить блок») и откройте раздел «Соцсети». Выберите блок с подходящим расположением кнопок — например, SM101, SM102, SM103 или SM501.

Нажмите на кнопку «Контент», чтобы заменить кнопки и их расположение в блоке, добавить ссылки.

Чтобы удалить ненужные соцсети и мессенджеры, нажмите на крестик рядом с иконкой. А для добавления новых каналов, кликните по кнопке «Добавить пункт».

В библиотеке иконок Tilda есть кнопки почти для всех популярных мессенджеров и соцсетей, включая Telegram, Max, ВКонтакте, Одноклассники. Просто кликаете по иконке в списке и следуете инструкциям.

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

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

Как повысить конверсию сайта на Tilda с помощью ссылок

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

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