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

Эта статья является логическим продолжением нашей статьи а именно как сделать телефон кликабельным на сайте . В данной статье мы рассмотрим несколько вариантов как сделать телефон кликабельным в шапке сайта . В 2019 году по статистике студий iTsiberian переходы на сайт из поисковых систем Яндекс и Гугл посетители совершают преимущественно с помощью мобильных устройств а именно смартфоны 60% ПК 36% планшеты 4% . Что получается из 100 % трафика на ваш сайт 64% приходится на мобильный устройства . Давайте сделаем ваш сайт или интернет магазин удобным для посетителей зашедших на сайт с мобильных устройств . И так давайте разберемся как сделать телефон кликабельным в шапке сайта .

Экспериментировать будем на сайте вордпресс.

Первый вариант

И так открываем сайт заходим во вкладку Внешний вид там выбираем Редактор темы . В файл header.php вставляем следующий код .

<a href="tel:+79132222222" class="roistat-phone-tel"><span class="roistat-phone-tel">Тел:8(913)2222222 </span></a> 

Это будит выглядеть вот так :

Сохраняем изменения в файле header.php переходим на сайт обновляем страницу (Ctrl+f5) . После обновления главной страницы сайта вы увидите что в шапке сайта появился кликабельный номер телефона .

Тел: 8(913)2222222

Теперь нам нада выровнять номер телефона по центру и задать отступ сверху . Для этого открываем файл style.css прокручиваем его до конца в низ и вставляем код .

.roistat-phone-tel {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}

Это будит выглядеть вот так :

Давайте посмотрим что получилась :

Второй вариант

И так открываем сайт заходим во вкладку Внешний вид там выбираем Редактор темы . В файл header.php вставляем следующий код . В этом варианте мы использовали h3 но можно использовать любое значения заголовка h2-h6 .

<a href="tel:+79132222222" class="roistat-phone-tel"><h3 class="roistat-phone-tel">Тел:8(913)2222222</h3></a>

Теперь нам нада выровнять номер телефона по центру и задать отступ сверху . Для этого открываем файл style.css прокручиваем его до конца в низ и вставляем код .

.roistat-phone-tel {
position: absolute;
top: 10%; 
left: 50%; 
transform: translate(-50%, -50%);
}

Давайте посмотрим что получилась :

Отлично наш кликабельный номер телефона стал более заметным и красивым .

Третий вариант

И так открываем сайт заходим во вкладку Внешний вид там выбираем Редактор темы . В файл header.php вставляем следующий код .

<a href="tel:+79132222222" class="roistat-phone-tel"><img src="/wp-content/uploads/2019/07/кон3.png" alt=""/></a>

Как вы наверное уже догадались в третьем примере мы будем использовать картинку . Я обычно ее делаю в фотошопе и без вона . Будим считать что ана у вас есть ) .

И так открываем сайт заходим во вкладку медиафайлы закидываем туда картинку после чего ее выделяем и копируем адрес ссылки . Пример ( wp-content/uploads/2019/07/кон3.png ) и вставляем в код .

В файл style.css вставляем код и выравниваем по центру номер телефона .

.roistat-phone-tel {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}

Давайте посмотрим что получилась :

Отлично у нас получился кликабельный номер телефона в виде картинки .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

BeTheme WordPress Theme