Функционал
Кликабельные номера телефонов
Кликабельный номер или click-to-call номер — это телефон на сайте, при нажатии на который сразу происходит вызов. Эта опция предназначена специально для пользователей смартфонов. Позвонить можно и с обычного компьютера, если на нем установлена программа для звонков.
Как сделать номер телефона на сайте кликабельным
Разделим условно сайт на две зоны расположения номеров телефонов:
1. различные элементы верстки/дизайна сайта, например футер (подвал) сайта.
2. непосредственно содержание страниц сайта (одно окно, контакты, ...)
разделение проведено по тому где в админке сайта находится редактирование содержания соответствующих элементов.
1. Рассмотрим как сделать кликабельными номера телефонов в подвале сайта.
Стандартное размещение содержания подвала сайта в шаблонах сайтов системы Веб-Мастерская находится в разделе Дизайн - Модули - Текстовый блок - Контактная информация в подвале
Откройте на редактирование данный модуль и на вкладке Содержание найдите записи соответствующие номерам телефонов которые необходимо сделать кликабельными.
Обычный номер телефона, который пока является простым текстом, необходимо "обернуть" в конструкцию тега <a>...</a>.
Тег <a>...</a> отвечает за гипертекст (возможность текста в коде HTML включать в себя гиперссылку), и у данного тега есть атрибут href=”” который отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
В итоге простой номер телефона +375 88 789-45-62 для того чтобы стать кликабельным должен быть прописан следующим образом: <a href="tel:+375887894562">+375 88 789-45-62</a>
Как видим, номер телефона прописывается дважды. Первый раз, после атрибута href — это ссылка на номер. Второй телефон — это элемент, который отвечает за то, как номер отображается на сайте.
ВАЖНО!!! - номер телефона должен указываться в международном формате!!!
2. Рассмотрим как сделать кликабельными номера телефонов на страницах сайта.
Предположим что Вам необходимо сделать кликабельным номер телефона на странице Контакты
Соответственно в админке сайта Вы должны найти контейнер содержащий данный номер телефона
Откройте на редактирование данный контейнер, на вкладке Содержание визуально найдите где расположен номер телефона.
И далее есть два пути - через редактирование исходного кода и через вставить/редактировать ссылку.
----------------------------------- Путь первый (html-самурая): -----------------------------------
Нажмите на кнопку "Исходный код" (<>) в нижней строке панели инструментов визуального редактора.
Откроется окно редактирования исходного HTML-кода данного контейнера
Обычный номер телефона, который пока является простым текстом, необходимо "обернуть" в конструкцию тега <a>...</a>.
Тег <a>...</a> отвечает за гипертекст (возможность текста в коде HTML включать в себя гиперссылку), и у данного тега есть атрибут href="" который отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
В итоге простой номер телефона +375 88 789-45-62 для того чтобы стать кликабельным должен быть прописан следующим образом: <a href="tel:+375887894562">+375 88 789-45-62</a>
Как видим, номер телефона прописывается дважды. Первый раз, после атрибута href — это ссылка на номер. Второй телефон — это элемент, который отвечает за то, как номер отображается на сайте.
ВАЖНО!!! - номер телефона должен указываться в международном формате!!!
Сохраните внесенные изменения в исходный HTML-код контейнера и убедитесь что номер телефона стал гиперссылкой в визуальном редакторе.
Сохраните контейнер и проверьте как теперь выглядит номер телефона на сайте.
----------------------------------------- Путь второй: -----------------------------------------
Выделите номер телефона и нажмите на кнопку "Вставить/редактировать ссылку" в панели инструментов визуального редактора.
В появившемся окне "Вставить ссылку" в поле "Адрес ссылки" введите номер телефона по шаблону tel:ХХХ где XXX — номер телефона без пробелов и тире.
ВАЖНО!!! - номер телефона должен указываться в международном формате!!!
Сохраните созданную ссылку и убедитесь что номер телефона стал гиперссылкой в визуальном редакторе.
Сохраните контейнер и проверьте как теперь выглядит номер телефона на сайте.
P.S. Каждый номер телефона оборачивается в конструкцию тега <a>...</a> отдельно от других!!!
P.P.S. Обязательно протестируйте кликабельность телефонов на Вашем сайте!!!