Продолжаем публиковать полезные материалы о том, как сделать лендинг. В предыдущих статьях:

Сегодня о том, как сделать номер телефона на сайте кликабельным.

Зачем нужен кликабельный номер?

Лендинг должен быть удобным. Посетитель заходит на сайт и с первого взгляда должен понять, какую проблему он может здесь решить. Качественно сконструированный первый экран на 100% на это работает. Здесь всё должно быть удобно и понятно – меню с навигацией, фотография или видео продукта, краткое описание услуг. Кликабельный номер – часть такого удобства.

По статистике 52% пользователей интернета выходят в сеть с компьютеров и мобильных устройств, 19% – только с мобильных. Шанс, что ваш сайт будут просматривать с телефона – высок. Если номер телефона кликабельный, клиенту не придется переключаться с вкладки на вкладку – он просто нажмет на номер телефона и позвонит вам. Вы не потеряете своих клиентов.

Обычно номер размещают в меню на первом экране и в подвале среди контактов. Разбираемся, как это сделать.

Способ №1. С помощью виджета "Кнопка"

Добавим виджет “Кнопка” на секцию.

Перейдём в настройки виджета в раздел “Содержимое” и изменим название кнопки. Далее переходим в раздел “Вид” – “Текст” – “Подробные настройки” и настраиваем нужный “Размер текста”.

Во вкладку “Цвета” – “Подробные настройки” и зададим нужный цвет текста при: 1) Обычном состоянии
2) Под курсором
3) По клику

Далее переходим в раздел “Действие”, выбираем “Открыть страницу” и прописываем код телефона в поле “Ссылка”: tel:+ и ваш номер. Например, tel:+71234567890 Публикуем страницу и всё готово. Проверяем в режиме предпросмотра.

Способ №2. C помощью виджета "Текст"

Добавим виджет “Текст” в секцию и отредактируем его.

Выделим текст в режиме редактирования и установим на него ссылку в виде: tel:+71231234567 в поле “URL”. После tel:+ – ваш номер телефона. Нажимаем “Вставить” ссылку на выделенный текст. Готово! Ссылка установлена и работает для вызова.

Как убрать подчеркивание текстовой ссылки?

Переходим в “Просмотр HTML-кода” виджета “Текст” и после ссылки установим код:

style="text-decoration: none;"

Например,

<p><a href="tel:+71231234567" style="text-decoration: none;">Позвоните нам!</a></p>

Как изменить цвет ссылки?

Перейдем в “Просмотр HTML-кода” виджета “Текст” и после ссылки установим код:

color: #262626; или style="color: #262626;"

Например,

<p><a href="tel:+71231234567" style="text-decoration: none; color: #262626;">Позвоните нам!</a></p>

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

Теперь клиент может нажать на номер телефона, указанный на сайте, и перезвонить вам.

Другие рекомендации по созданию лендинга – в блоге Платформе в рубрике #сделайлендинг.

Лайфхаки для продвинутых пользователей – в рубрике #сделайлучше.