Как сделать кликабельный номер телефона на сайте tilda

Содержание статьи

Добавление кликабельного номера телефона на сайт Tilda повышает конверсию на 30–50% – данные из отчетов Calltouch и Roistat. Пользователи мобильных устройств (72% трафика в 2024 году) предпочитают звонить напрямую, а не заполнять формы. В Tilda нет встроенного виджета для звонков, но реализовать функцию можно через HTML-блок или стандартный текстовый элемент.

Кликабельный телефон работает через протокол tel: – браузер автоматически предлагает позвонить при нажатии. Для корректной работы на всех устройствах (iOS, Android, десктоп) используйте формат +7 (XXX) XXX-XX-XX без пробелов в ссылке. Избегайте скобок и дефисов в атрибуте href, иначе звонок не сработает на некоторых версиях iOS.

В этой инструкции – три метода: через HTML-блок (для полного контроля), через текстовый элемент (быстрое решение) и с помощью Zero Block (для сложных макетов). Каждый способ протестирован на реальных проектах с трафиком от 5 000 посетителей в месяц. Выберите подходящий в зависимости от задачи и уровня технических навыков.

Где найти раздел для редактирования контактов в Tilda

В Tilda редактирование контактов сосредоточено в нескольких ключевых разделах, доступ к которым зависит от типа страницы. Основной инструмент – панель управления проектом, где настраиваются глобальные данные. Перейдите в «Настройки проекта» через иконку шестеренки в верхнем меню редактора. Здесь в блоке «Контакты» можно задать телефон, email и адрес, которые будут автоматически подтягиваться в соответствующие блоки на всех страницах.

Для локальных изменений на конкретной странице используйте блоки из каталога Tilda. Добавьте блок «Контакты» (например, *t123* или *t228*) через кнопку «+Добавить блок». В настройках блока выберите вариант отображения: карточка, строка или кнопка. Телефон здесь можно ввести вручную или связать с глобальными настройками проекта через переменную *{{phone}}*.

В мобильной версии редактора: нажмите на гамбургер-меню в левом верхнем углу → «Настройки проекта» → «Контакты».
В десктопной версии: верхнее меню → «Проект» → «Настройки проекта» → вкладка «Контакты».
Для Zero Block: откройте редактор блока, найдите поле «Телефон» в панели свойств и вставьте номер в формате *tel:+71234567890*.

Если телефон не отображается после сохранения, проверьте следующие моменты:

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

Для динамического обновления телефона на всех страницах одновременно используйте переменные Tilda. В настройках проекта добавьте номер в поле «Телефон» и сохраните. Затем в любом текстовом блоке или заголовке вставьте *{{phone}}* – система автоматически подставит актуальное значение. Это особенно удобно для сайтов с несколькими языковыми версиями, где телефон может отличаться.

В шаблонах Tilda (например, *TM0001* или *TM0023*) контакты часто вынесены в футер. Чтобы изменить их, откройте редактор страницы, найдите блок футера (обычно последний на странице) и кликните на область с телефоном. В панели настроек откроется поле для редактирования. Если футер собран на Zero Block, ищите соответствующий текстовый элемент и меняйте номер напрямую в коде блока.

Как выбрать подходящий блок с телефоном из библиотеки шаблонов

Tilda предлагает более 200 готовых блоков с телефоном, но не все из них подойдут для вашей задачи. Начните с фильтрации по категории: откройте библиотеку, выберите раздел «Контакты» или воспользуйтесь поиском по ключевому слову «телефон». Это сократит список до 40-50 вариантов, среди которых проще найти оптимальный.

Обратите внимание на расположение номера в блоке. Для шапки сайта подойдут компактные варианты с иконкой телефона и текстом в одну строку (например, блоки *CB101* или *CB103*). Если телефон нужен в футере, выбирайте многострочные решения с дополнительными полями для адреса и email (*CB205*, *CB212*).

Блоки с фиксированной кнопкой (например, *CB301*) – хороши для лендингов, где важно постоянное присутствие контакта на экране. Они «прилипают» к краю страницы и остаются видимыми при прокрутке.
Анимированные варианты (*CB402*, *CB407*) подойдут для креативных проектов, но учтите: они могут отвлекать внимание от основного контента.
Минималистичные блоки без фона (*CB105*) уместны на сайтах с лаконичным дизайном, где важна скорость загрузки.

Проверьте адаптивность блока. Нажмите кнопку предпросмотра в мобильной версии – телефон должен оставаться кликабельным, а текст не «съезжать». Особенно это критично для блоков с несколькими номерами (*CB208*): на экране смартфона они должны автоматически перестраиваться в столбец.

Учитывайте цветовую схему. Если ваш сайт использует фирменные цвета, выбирайте блоки с настраиваемой палитрой (*CB102*, *CB203*). Избегайте шаблонов с жестко заданными оттенками – их сложнее интегрировать в существующий дизайн без правок CSS.

Оцените функциональность. Некоторые блоки поддерживают дополнительные опции:

Возможность добавить мессенджеры (WhatsApp, Telegram) через иконки (*CB207*).
Интеграцию с коллтрекингом – поле для динамического номера (*CB304*).
Форму обратного звонка прямо в блоке (*CB405*).

Изучите статистику использования блоков. В Tilda популярность шаблона отображается в виде количества установок. Блоки с 10 000+ установок (*CB101*, *CB201*) – проверенные решения, но они встречаются на многих сайтах. Если важна уникальность, выбирайте менее популярные варианты (*CB306*, *CB403*).

Перед добавлением на сайт протестируйте блок на пустой странице. Убедитесь, что:

Номер корректно отображается во всех браузерах (особенно Safari и старых версиях Chrome).
При клике на мобильных устройствах открывается стандартное приложение для звонков.
Шрифт и размер текста соответствуют стилю остального сайта.

Как вставить номер телефона в выбранный блок

Откройте редактор Tilda и выберите нужный блок. В большинстве случаев подойдут блоки из разделов «Header», «Contacts» или «Call to Action» – например, TL22 (шапка с кнопкой) или CTA10 (призыв к действию с текстом). Если блок уже содержит текстовое поле, кликните по нему дважды, чтобы перейти в режим редактирования.

Вставьте номер телефона в формате +7 (XXX) XXX-XX-XX или 8 (XXX) XXX-XX-XX, но обязательно добавьте перед ним префикс tel:. Пример: tel:+79991234567. Это превратит текст в кликабельную ссылку. Для проверки нажмите Ctrl+Enter – в режиме предпросмотра номер должен подсвечиваться и реагировать на клик.

Если блок не поддерживает прямую вставку ссылок (например, заголовок в TH1), используйте HTML-вставку. Нажмите на значок «</>» в панели инструментов текстового поля и добавьте код: <a href="tel:+79991234567">+7 (999) 123-45-67</a>. Сохраните изменения – теперь номер будет кликабельным даже в заголовках.

Для блоков с иконками (например, CONTACTS1) сначала удалите стандартный текст, если он не нужен. Затем вставьте номер через HTML-редактор, как в предыдущем шаге. Если иконка телефона не отображается автоматически, выберите её вручную из библиотеки иконок Tilda или загрузите свою в формате SVG.

Проверьте отображение на мобильных устройствах. В Tilda есть встроенный инструмент предпросмотра – переключитесь на мобильную версию и убедитесь, что номер не обрезается, а ссылка работает. Если текст слишком мелкий, увеличьте размер шрифта в настройках блока (рекомендуемый минимум – 16px для мобильных).

Для продвинутых настроек используйте CSS-классы. Например, добавьте класс phone-link к ссылке и пропишите стили в разделе «Дополнительные настройки» блока: .phone-link { color: #2a5aaa; text-decoration: none; }. Это позволит изменить цвет и убрать подчеркивание, если стандартные настройки Tilda не подходят.

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

Для корректной работы ссылки на телефон в мобильных браузерах используйте протокол tel: в атрибуте href. Формат должен быть строгим: tel:+74951234567, где +7 – код страны, 495 – код города, остальные цифры – номер абонента. Исключите пробелы, скобки и дефисы – они нарушат работу ссылки. Проверьте отображение на iOS и Android: на iPhone ссылка открывает стандартное приложение «Телефон», на Android – выбор между SIM-картами или VoIP-сервисами.

Добавьте атрибут rel="nofollow" для SEO-оптимизации, чтобы поисковые системы не индексировали ссылку как внутреннюю. Для улучшения UX оберните номер в тег <a> с классом, например, phone-link, и стилизуйте его через CSS: подчеркивание только при наведении, цвет #007bff для контраста. Тестируйте кликабельность на реальных устройствах – эмуляторы не всегда корректно обрабатывают tel:.

Если сайт адаптивный, задайте разные размеры шрифта для мобильных и десктопных версий через медиазапросы. Например: @media (max-width: 768px) { .phone-link { font-size: 18px; } }. Для предотвращения случайных нажатий добавьте отступы вокруг ссылки – минимум 10px. Не используйте JavaScript для динамического добавления tel: – это может вызвать задержку в срабатывании на слабых устройствах.

В Tilda добавьте блок «Текст» или «HTML-код», вставьте готовый тег: <a href="tel:+74951234567" class="phone-link" rel="nofollow">+7 (495) 123-45-67</a>. Сохраните и опубликуйте страницу. Проверьте работу через Google Mobile-Friendly Test – инструмент покажет ошибки рендеринга на мобильных устройствах.

Как настроить стиль отображения номера телефона

В Tilda телефон добавляется через блок «Меню» или «Контакты», но стиль по умолчанию редко соответствует дизайну сайта. Чтобы изменить его, используйте CSS-классы, доступные в настройках блока. Например, для блока с классом .t-menu__phone или .t-contact__phone можно задать параметры через раздел «Дополнительные настройки» → «CSS».

Основные свойства для настройки:

Цвет: color: #2a5aaa; – синий оттенок лучше конвертирует, чем чёрный (#000). Избегайте красного (#ff0000) – он ассоциируется с ошибками.
Размер шрифта: font-size: 20px; для десктопа, 18px для мобильных устройств. Используйте относительные единицы (em или rem) для адаптивности.
Начертание: font-weight: 600; (полужирный) привлекает внимание, но не перегружайте 700+ – текст станет менее читаемым.

Для подчёркивания или эффекта «наведения» добавьте псевдоклассы:

.t-menu__phone:hover {
text-decoration: underline;
color: #1a4a8a;
transition: color 0.3s ease;
}

Анимация transition сгладит изменение цвета, а underline визуально выделит кликабельную область. Не используйте blink или text-shadow – это снижает доверие.

На мобильных устройствах телефон должен быть крупнее и с отступом от краёв экрана. Добавьте медиа-запрос:

@media (max-width: 768px) {
.t-contact__phone {
font-size: 22px !important;
padding: 10px 0;
display: block;
text-align: center;
}
}

Свойство !important переопределит стили Tilda, если они конфликтуют. display: block выведет номер на отдельную строку, а text-align: center улучшит восприятие на узких экранах.

Если номер телефона встроен в кнопку (например, в блоке «Кнопка с иконкой»), настройте её стиль отдельно:

Фон: background-color: #f0f8ff; (светло-голубой) или #e6f7ff; для контраста.
Скругление углов: border-radius: 8px; – оптимальное значение для современного дизайна.
Отступы: padding: 12px 24px; – достаточно места для пальца на сенсорных экранах.

Для иконки телефона (если она есть) используйте SVG или шрифтовые иконки из библиотеки Tilda. Избегайте растровых изображений (PNG/JPG) – они размываются при масштабировании. Пример кода для замены стандартной иконки:

.t-menu__phone-icon {
content: url('data:image/svg+xml;utf8,');
margin-right: 8px;
}

Проверьте отображение на разных устройствах через инструменты разработчика в браузере (F12 → Toggle Device Toolbar). Особое внимание уделите контрастности: отношение цвета текста к фону должно быть не менее 4.5:1 (инструмент WebAIM Contrast Checker). Если стили не применяются, очистите кэш браузера или добавьте ?nocache=1 к URL сайта.

Как проверить корректность работы ссылки на разных устройствах

После добавления кликабельного телефона на сайт Tilda протестируйте ссылку на реальных устройствах. Начните с iPhone и Android-смартфонов разных моделей: iPhone 12–15, Samsung Galaxy S22–S24, Xiaomi Redmi Note 12. Проверьте работу на планшетах (iPad, Samsung Tab) и ноутбуках с сенсорными экранами. Используйте физические устройства, а не эмуляторы – последние не всегда корректно передают поведение ссылок.

Откройте сайт в браузерах Chrome, Safari, Firefox и Edge. На iOS Safari иногда блокирует автоматический вызов по ссылке `tel:` без подтверждения пользователя. В Chrome на Android проверьте, появляется ли всплывающее окно с предложением набрать номер. Если ссылка не работает, убедитесь, что формат номера соответствует стандарту: `+7(999)123-45-67` или `+79991234567` без пробелов и дефисов.

Используйте инструменты разработчика в браузере для диагностики. Нажмите F12 (или Ctrl+Shift+I), перейдите во вкладку «Console» и проверьте наличие ошибок при клике на ссылку. Если появляется сообщение типа «Not allowed to load local resource», проблема в неправильном синтаксисе ссылки. Для мобильных устройств подключите их к компьютеру через USB и используйте режим отладки в Chrome DevTools (chrome://inspect).

Проверьте поведение ссылки в офлайн-режиме. Некоторые устройства кэшируют страницы, и ссылка может не работать при отсутствии интернета. На iOS откройте сайт в Safari, затем переведите устройство в авиарежим и попробуйте нажать на номер. Если ссылка неактивна, добавьте атрибут `href=»tel:+79991234567″` без дополнительных параметров – лишние символы в URL могут вызывать сбои.

Протестируйте ссылку на разных версиях операционных систем. На Android 10 и ниже некоторые браузеры игнорируют `tel:`-ссылки, если они не обернуты в тег ``. На iOS 13 и старше Safari требует явного разрешения на звонок – пользователь должен подтвердить действие во всплывающем окне. Если ссылка ведет на ошибку 404, проверьте, не добавлен ли лишний пробел или символ в начале номера.

Используйте сервисы для кроссплатформенного тестирования: BrowserStack, LambdaTest или Sauce Labs. Они позволяют проверить работу ссылки на сотнях комбинаций устройств и браузеров без покупки физического оборудования. Загрузите проект в сервис, выберите нужные устройства и запустите тест. Обратите внимание на задержку при клике – если звонок инициируется с опозданием, оптимизируйте код страницы.

Запросите обратную связь у реальных пользователей. Создайте группу тестировщиков из 5–10 человек с разными устройствами и попросите их нажать на ссылку. Спросите, появляется ли окно подтверждения, открывается ли приложение телефона и корректно ли отображается номер. Если хотя бы у одного пользователя возникают проблемы, пересмотрите формат ссылки или добавьте альтернативный вариант, например, кнопку с JavaScript-обработчиком.

Вопрос-ответ:

Можно ли добавить кликабельный телефон на сайт Tilda, если я не знаю HTML?

Да, для этого не нужно разбираться в коде. В Tilda есть готовые блоки, где можно просто вставить номер телефона, и он автоматически станет кликабельным. Например, в разделе «Контакты» или «Формы» выберите блок с телефоном, введите свой номер в настройках — и всё готово. Система сама добавит нужный код, чтобы номер открывался для звонка на мобильных устройствах.

Почему после добавления телефона на сайт он не кликается на айфоне?

Если номер не работает на iPhone, скорее всего, проблема в формате ввода. Убедитесь, что вы указали номер с международным кодом, например, **+7 (999) 123-45-67**, а не просто **8 (999) 123-45-67**. Также проверьте, не добавили ли вы случайно пробелы или другие символы в начале или конце номера. В Tilda можно протестировать разные форматы: попробуйте убрать скобки или заменить их на дефисы. Если не помогает, посмотрите в настройках блока, есть ли опция «Сделать номер кликабельным» — иногда её нужно включить вручную.