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

🗓️ Обновлено: 19.11.2020
💬Комментариев: 0
👁️Просмотров: 937

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

Давайте рассмотрим конкретный пример для сайтов в Тильде.

Кликабельность телефона в меню (Header)

Меню вы можете расположить на странице сайта (если у вас лендинг) или в специальной странице сайта Header, где располагается сквозная шапка для всех страниц. Находим свое меню и заходим в КОНТЕНТ этого блока.

Находим в моем случае раздел «Дополнительно» (у вас телефон может быть, скажем, в логотипе). Выделяем свой телефон и в появивишейся панели сверху нажимаем на значок ссылки:

Далее нажимаем на «Вставить ссылку» и заполняем следующее окно:

  1. В поле URL вставляем tel:ваш_номер. В моем случае это поле нужно заполнить так:

tel:+380996543445

Удаляем с номера все пробелы, тире, скобочки — ЭТО ВАЖНО. Если вы используете телефон в международном формате с кодом страны, то + оставляем, если без кода страны, то в поле URL можно вставить такую ссылку:

tel:0996543445

  1. Меняем цвет ссылки на тот, который вам нужно.
  2. Ставим «Размер линии» = 0 , чтобы не было подчеркивания как у обычных ссылок.

Если вы «загнали» телефон в логотип, то там все еще проще. Заходим в КОНТЕНТ блока и ищем раздел «Логотип». Вставляем в поле «ССЫЛКА» ваш ссылку с номером телефона

tel:+380996543445

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

Смотрим результат на своем мобильном. Вуаля.

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

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

Заходим в КОНТЕНТ блока. Находим карточку (для товаров, отзывов, команды и т.д.) или текстовое поле с номером телефона.

Выделяем телефон и кликаем на значке ссылки. Дальше выполняем уже знакомые нам действия:

  1. В поле URL вставляем tel:ваш_номер. В моем случае это поле нужно заполнить так: «tel:380996543445» . Удаляем с номер все пробелы, тире, скобочки. Если вы используете телефон в международном формате с кодом страны, то + оставляем, если без кода страны, то в поле URL можно вставить такую ссылку: «tel:0996543445»
  2. Меняем цвет ссылки на тот, который вам нужно.
  3. Ставим «Размер линии» = 0 , чтобы не было подчеркивания как у обычных ссылок.

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

Как сделать кликабельный телефон в Footer (подвале) сайта.

Тут все просто. Выполняем ровным счетом такие же действия, как в инструкции для Меню (смотрите выше).

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

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

Статья была полезной?
👍
Да - 0
👎
Нет - 0
💬 Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab