Как сделать кликабельный номер телефона на сайте в Тильде
Это статья посвящена одному из самых важных аттрибутов современных сайтов — кликабельность номера телефона . Как это не удивительно звучит, но многие разработчики забывают сделать телефон кликабельным, а посетитель сайта потом ломает голову и пальцы, чтоб сначала скопировать этот телефон, а потом вставить его в набор.
Давайте рассмотрим конкретный пример для сайтов в Тильде.
Кликабельность телефона в меню (Header)
Меню вы можете расположить на странице сайта (если у вас лендинг) или в специальной странице сайта Header, где располагается сквозная шапка для всех страниц. Находим свое меню и заходим в КОНТЕНТ этого блока.
Находим в моем случае раздел «Дополнительно» (у вас телефон может быть, скажем, в логотипе). Выделяем свой телефон и в появивишейся панели сверху нажимаем на значок ссылки:
Далее нажимаем на «Вставить ссылку» и заполняем следующее окно:
- В поле URL вставляем tel:ваш_номер. В моем случае это поле нужно заполнить так:
Удаляем с номера все пробелы, тире, скобочки — ЭТО ВАЖНО . Если вы используете телефон в международном формате с кодом страны, то + оставляем, если без кода страны, то в поле URL можно вставить такую ссылку:
- Меняем цвет ссылки на тот, который вам нужно.
- Ставим «Размер линии» = 0 , чтобы не было подчеркивания как у обычных ссылок.
Если вы «загнали» телефон в логотип , то там все еще проще. Заходим в КОНТЕНТ блока и ищем раздел «Логотип». Вставляем в поле «ССЫЛКА» ваш ссылку с номером телефона
Сохраняем изменения и опубликовываем страницу. Если вы делали изменения в специальной странице Header, то не забываем, что нужно опубликовать все страницы сайта.
Смотрим результат на своем мобильном. Вуаля.
Как сделать телефон кликабельным в любом месте сайта в Тильде
Если вам нужно сделать телефон кликабельным в каком-то блоке, то необходимо выполнить практически такие же действия, как и в случае с Меню.
Заходим в КОНТЕНТ блока. Находим карточку (для товаров, отзывов, команды и т.д.) или текстовое поле с номером телефона.
Выделяем телефон и кликаем на значке ссылки. Дальше выполняем уже знакомые нам действия:
- В поле URL вставляем tel:ваш_номер. В моем случае это поле нужно заполнить так: «tel:380996543445» . Удаляем с номер все пробелы, тире, скобочки. Если вы используете телефон в международном формате с кодом страны, то + оставляем, если без кода страны, то в поле URL можно вставить такую ссылку: «tel:0996543445»
- Меняем цвет ссылки на тот, который вам нужно.
- Ставим «Размер линии» = 0 , чтобы не было подчеркивания как у обычных ссылок.
Публикуем свои изменения и проверяем. Все будет работать в мобильной версии сайта.
Как сделать кликабельный телефон в Footer (подвале) сайта.
Тут все просто. Выполняем ровным счетом такие же действия, как в инструкции для Меню (смотрите выше).
Не забывайте , что если вы делаете изменение в специальной странице Footer, которую назначаете в настройках сайта для всех страниц, после изменений номера телефона необходимо опубликовать все страницы сайта
Все выглядит не сложно. И так оно и есть. Для наглядности пересмотрите видео ниже, где я разбираю процедуру создания кликабельных телефонов для сайтов на Тильде на примерах:
Как на Тильде сделать кнопку «позвонить»?
Если вы хотите добавить кликабельный телефон в тексте — надо всего лишь выделить нужное нам слово и вставить ссылку. К примеру, есть текст и при нажатии на слово «телефон» должен идти звонок.
Выделите слово и нажмите на кнопку «ссылка».
Укажите ссылку — здесь пишем номер телефона через tel:
Текст — это наше слово, в данном примере это слово «телефон» и он автоматически подтягивается, так как ранее мы это слово и выделили. Можно здесь выбрать цвет выделенного слова.
Как сделать кликабельный номер телефона в конструкторе Tilda?
Сегодня мы расскажем и покажем, как сделать кликабельными телефоны, ссылки на Instagram, Facebook и другие соцсети в блочном конструкторе лендингов Тильда.
Для чего же это нужно? Конечно, для нашего с вами удобства! Согласитесь, намного удобнее и приятнее переходить по ссылкам в один клик, а не вбивать их заново в строку браузера, нажимая на номер телефона сразу звонить, а не запоминать номер телефона и набирать его вручную.
Ваши контакты на сайте – это очень важный элемент, чем больше возможностей с вами связаться, тем лучше. Потенциальный клиент, зашедший на сайт, должен иметь возможность связаться с вами удобным для него способом. Кому-то удобнее использовать для связи номер телефона, кто-то хочет воспользоваться мессенджером (Viber, WhatsApp, Telegram, Zalo, Wechat и т.д.), ну а кому-то удобнее использовать e-mail и написать в социальные сети, например, в Facebook, Instagram, VK и другие. На этапе проектирования сайте важная задача – сделать связь с менеджером максимально удобной для наших клиентов.
Как правило, номер телефона и прочие контакты расположены в хедере сайта и в футере, то есть в самом начале страницы и в конце, после смысловых блоков.
Рис. 1. Контакты в шапке, или хедере, сайта.
Рис. 2. Контакты в подвале, или футере, сайта.
Итак, начнем с номера телефона. Чтобы сделать номер кликабельным, необходимо перейти в поле «Контент», в выпадающем меню выбрать пункт «дополнительно» и нажав на кнопку, как указано на Рис. 3 ниже, добавить ссылку: tel:+номер телефона (без пробелов), после чего нажать «применить». После этого номер телефона должен стать красного цвета, это значит, что ссылка прикрепилась, далее жмем «сохранить и закрыть».
Рис. 3. Ссылка на номер телефона.
Далее делаем кликабельными социальные сети, тут все проще. В том же меню, где мы добавляли ссылку на номер телефона, выбираем пункт «ссылки на соц. сети», где заполняем поля интересующих нас социальных сетей прямыми ссылками на ваши страницы, например в поле «FACEBOOK PAGE LINK» вставляем ссылку на вашу страницу https://www.facebook.com/ваш аккаунт. Если вы хотите добавить свой Telegram, тогда ссылку необходимо ставить следующим образом:
- для мобильной версии: tg://resolve?domain=LOGIN,
- для ПК (ссылка откроется в браузере): https://telegram.me/LOGIN.
LOGIN=это ваше имя в Telegrame, которое можно посмотреть в настройках.
Почтовый ящик (e-mail) становится кликабельным ровно по тому же принципу, что и номер телефон, путем прикрепления ссылки, смотрите инструкцию ниже, на рисунке 4. После совершения этого действия вам можно будет написать в один клик, что очень удобно для клиентов.
Рис. 4. Ссылка на e-mail.