Как сделать ссылку активной – советы для разных случаев

Почему важно уметь? Сделать ссылку активной — важная часть создания сайта или блога. Она позволяет пользователям легко переходить с одной страницы на другую и может стать эффективным способом задержать посетителей на вашем сайте.

Какие есть способы? Активные ссылки используются на сайтах, в личных блогах, соцсетях и мессенджерах. Распространены они и в документах. И способы сделать их активными существуют разные. Где-то нужен html-код, а где-то достаточно воспользоваться простыми подсказками, как в случае с офисными программами.

В статье рассказывается:

1. Что такое активная ссылка
2. Как сделать активную ссылку в HTML
3. Активная ссылка в Word
4. Как сделать ссылку активной в Excel
5. Добавление ссылки в соцсетях и мессенджерах

6. Пройди тест и узнай, какая сфера тебе подходит:
   

   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

Что значит активная ссылка

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

Когда в такой ссылке применяется фраза или слово, то есть текст, то этот вид ссылок принято называть анкором.

Что значит активная ссылка

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

Выделим еще несколько важных плюсов в сравнении с неактивными ссылками:

• когда ссылка активна, у пользователя нет необходимости совершать много действий – сначала скопировать ссылку, потом вставить ее в браузере, а по активной ссылке достаточно просто один раз кликнуть;
• переходы с активных ссылок значительно повышают показатели посещаемости страниц, на которые ведут.

Как сделать активную ссылку в HTML

Как сделать ссылку активной на сайте в HTML-разметке? Для этого необходимо написать следующую комбинацию кода:

<a href=»site.com»>ссылка или текст ссылки</a>

Как сделать интернет-ссылку активной с открытием в новой вкладке браузера? Просто добавьте к коду атрибут “target”:

<a href=»page.com» target=»_blank»>ссылка/текст ссылки</a>

В примере выше атрибут “target” имеет значение “blank”, а оно как раз и обозначает новую вкладку. Именно этот атрибут наиболее популярен, однако есть и другие, чаще применяемые для JavaScript.

Есть еще один способ создать кликабельную ссылку в HTML-коде:

[url=скопированная из браузера ссылка [/url]

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

Активная ссылка в Word

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

Когда нужно создать ссылку на сайт

Для этих целей используется функция гиперссылки:

• выделите слово, фразу или символы, которым хотите присвоить ссылку;
• правой кнопкой мыши вызовите контекстное меню;
• выберите пункт «гиперссылка» и вставьте адрес сайта, на который пользователь должен перейти;
• также гиперссылку можно поставить через раздел «вставка» в верхнем меню.

Проделав эти манипуляции, вы прикрепите ссылку к тексту, который станет синего цвета. Если пользователь нажмет на выделенную часть, он попадет на сайт, указанный в ссылке.

Активная ссылка в Word

Для открытия интернет-сайта важно одновременно нажать левую кнопку мыши и клавишу Ctrl. Вы можете поменять это сочетание в настройках, если оно будет неудобно.

Ссылка на часть текста в документе

Ссылка может вести не только на сайт, но и на какой-то объект документа, который вы выберете. Выделяем нужный элемент, присваиваем ему закладку через верхнее меню – раздел «Вставка». Находим в этом разделе пункт «Ссылки» и внутри нее выбираем пункт «Закладка». Далее заполняем название ссылки и добавляем закладку к объекту.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20478

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

После вы увидите список с закладками, кликаем по последней и завершаем действие командой «ОК».

Ссылки на другие документы

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

Для начала выберите за основу текст в рабочем документе. Он станет активной гиперссылкой. После этого воспользуйтесь ПКМ, найдите контекстное меню и нажмите на гиперссылку во вкладке «вставка». Чтобы добавить ссылку в выбранный документ или страницу, вам нужно выбрать опцию «Связать». При необходимости можно выбрать документ из проводника или поместить источник в адресное поле. В меню компьютера выберите элемент файловой системы.

Активная ссылка на элемент другого документа

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

• Запустите документ и подсветите ту часть, что будет потенциальной гиперссылкой.
• Добавьте эту часть в закладки.
• Запустите рабочий документ и выделите активный раздел.
• Далее нужно запустить раздел «Вставка гиперссылки» и выполнить действия из предыдущего пункта.
• Чтобы соединить два файла, выберите «Веб-страница» и «Закладка».
• Осталось только выбрать выделенную закладку.

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

Активная ссылка на адрес электронной почты

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

Чтобы сделать это, вам необходимо запустить окно «Добавить гиперссылку» и повторить действия из предыдущих пунктов. Отметьте вкладку «Электронная почта» в пункте «Установить соединение» и введите свой emai в поле «Адрес». Еще и другие способы создать ссылку в Word. Самый простой — набрать непосредственный адрес ссылки и Enter или скопировать URL — она создастся автоматически.

Активная ссылка на адрес электронной почты

Можно упростить использование гиперссылки. Кликните левой кнопкой мыши «Добавить гиперссылку» и в «Текст подсказки» напишите себе подсказку, которая напомнит, для чего ссылка или куда ведет. При наведении курсора мыши на ссылку, шпаргалка всплывет автоматически.

В обычное время для запуска ссылки в ворд нужно зажать «Ctrl» и нажать на гиперссылку. Она запустится в браузере. Но есть вариант открыть ссылку, не нажимая постоянно дополнительные клавиши. Для этого перейдите в меню «Параметры Word» в контекстном меню и выберите «Дополнительно». Снимите галочку «Ctrl + click для выбора гиперссылки». Теперь ссылка откроется без дополнительных манипуляций после одного щелчка мышью.

Как сделать ссылку активной в Excel

Если вы задаетесь вопросом, как сделать ссылку активной в эксель в таблице, у нас есть ответ на этот вопрос. Excel — не менее функциональная программа, чем Word. Если добавить ссылку в таблицу и ничего с ней не сделать, высока вероятность, что она не станет активной. Для таких случаев мы разобрали разные варианты.

Ссылка из браузера

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

Щелкните ссылку левой кнопкой мыши, чтобы открыть ее, и она запустит ссылку в браузере. Это самый легкий способ вставки — его удобно использовать, когда нужно заполнить таблицу несколькими ссылками.

Стоит также обратить внимание на текст во всплывающей подсказке. Его видно, если навести на ячейку со ссылкой указатель мыши. Во всплывающей подсказке сообщается, что переход выполняется одним щелчком мыши, и вам нужно удерживать кнопку, чтобы выбрать его. Это поможет вам справиться с редактированием.

Как активировать ссылку самостоятельно

Для начала подсветите ячейку со ссылкой, кликнув по ней. У вас появится контекстное меню — выберите «ссылка». Если она появляется в текстовом поле, скопируйте и переместите в поле адреса. В этот момент можно написать любой текс, который будет выделен вместо ссылки.

Советуем применять метод, когда нужно поменять ссылку на короткий title. Таблица будет смотреться аккуратнее и выигрышно в глазах руководства, а также останется функциональной и полезной.

Использование макроса

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

Работу можно автоматизировать и ускорить с помощью макроса Excel. Для этого перейдите в контекстное меню в разделе «Параметры» и выберите «Настроить ленту». Вы должны установить флажок рядом с главной вкладкой разработчика. Это заставит его появиться в панели программы — это вам и пригодится в работе. Затем вновь откройте таблицу, выберите нужную вкладку и откройте модуль Visual Basic.

Вам нужно дважды кликнуть файл книги, чтобы появилось окно редактирования кода. Затем введите его в левом нижнем углу. Не забудьте сменить значения «a2» буквой столбца с номером ячейки слева, где начинается активация. Все макросы всегда начинается с оператора Sub, после этого следует имя и перечисление входных значений. При этом мы оставляем скобки пустыми. В конце любого макроса ставят End Sub.

• Sub HyperSsylka()
• Dim cell As Rаnge, ra As Rаnge: Application.ScreenUpdating = Fаlse
• Set rа= Rаnge([а2], Range(«a» & Rows.Count).End(xlUp))
• For Each cell In ra. Cells
• If Len(cell) Then cell.Hyperlinks.Add cell, cell
• Next cell
• End Sub
• Sub HyperSsylkaSelect()
• Dim cell As Range: Application.ScreenUpdating = False
• For Each cell In Selection
• If Len(cell) Then cell.Hyperlinks.Add cell, cell
• Next cell
• End Sub

Только до 24.04

Скачай подборку тестов, чтобы определить свои самые конкурентные скиллы

Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы получить файл, укажите e-mail:

Подтвердите, что вы не робот,
указав номер телефона:

Уже скачали 7503

Зафиксируйте результат через кнопки на верхней панели или нажатием Ctrl+S. Теперь закройте редактор и включите окно макросов двойным нажатием левой кнопки мыши. Для открытия ссылки щелкните строку, содержащую созданный вами макрос. Простота способа в том, что все меняется автоматически. Просто проверьте, что ссылки работают и отображаются правильно. Теперь выберите, какой из способов работы с Excel вам больше всего нравится и используйте его.

Добавление ссылки в соцсетях и мессенджерах

Большинство пользователей посещают сайты с телефонов. Поэтому важно, чтобы на сайте была кликабельная ссылка на другие ресурсы, e-mail, телефон и прочее. Это позволит без труда посетить нужный ресурс или профиль. Не во всех социальных сетях можно применять ссылки на внешние страницы, например, ВКонтакте доступны переходы только на внутренние. Давайте разберемся в чем отличия и как сделать ссылку в посте активной.

Как сделать активной ссылку в ВК

ВКонтакте ссылки переводят на внутренние ресурсы — на аккаунты, группы, сообщества и события. Если захотите разместить линк на сторонний сайт, то ничего не получится. Если вы интересуетесь, как сделать ссылку активной в контакте, то сначала определитесь, на что хотите сослаться. От этого зависит, какой из методов подойдет.

Добавление ссылки в соцсетях и мессенджерах

• Как сделать активной ссылку на профиль в посте или комментарии

Этот метод удобен, когда вы публикуете пост про друга и хотите, чтобы он его заметил, либо создаете рекламную интеграцию с пабликом. Чтобы ссылка появилась в посте или комментарии, необходимо ввести идентификатор страницы в квадратных скобках и разделить ссылку и текст значком «|». Теперь нужно закрыть []. Точно так же делаем для сообществ, пабликов и событий.

Если id пользователя — 12 345 678, а имя — Анастасия Иванова. Ваша задача — упомянуть этого человека в посте или комментарии. Тогда мы создаем такую запись:

[id12 345 678|Анастасия Иванова]

Если вы упоминаете человека, ему приходит уведомление об этом.

• Как сделать ссылку в истории активной

ВКонтакте можно отмечать пользователей и сообщества в историях. Откройте стикеры и выберите «упоминание». Введите имя аккаунта или паблика, которое нужно отметить. Теперь другие пользователи смогут посетить страницу при нажатии на ссылку. В одной истории можно сделать десять упоминаний (прикрепить ссылки на десять аккаунтов). Так вы получаете возможность делиться ссылками на посты, видео или музыкальные плейлисты.

Как сделать Telegram ссылку активной

Ссылка на телеграм-канал позволяет другим людям просматривать сообщения или находить интересный контент, который вы им отправите. Если нужна ссылка для компьютера, зайдите в Telegram, выберите трансляцию с канала и скопируйте ссылку, щелкнув правой кнопкой мыши. Теперь вы можете использовать выбранную вами ссылку.

Если вы работаете с телефона, инструкция практически ничем не отличается, но вместо щелчка мыши нужно удерживать надпись пальцем, и также появится вкладка — скопируйте ссылку на сообщение.

Вы можете применять ссылку на телеграм-канал для постов в своем блоге, новостном сайте или добавить ее в таблицу, содержащую данные. При этом, если вы посетите необходимую страницу в Мессенджере и выберете «Копировать ссылку» (многоточие в правом верхнем углу) в раскрывающемся меню, ссылка будет создана автоматически.

Как в Viber сделать активной ссылку

Чтобы быстро привлечь клиентов на свою территорию, в данном случае в Viber, нужно создать ссылку, по которой они смогут быстро перейти и начать переписку или разговор. Это могут быть ссылки на ваш личный номер или бизнес-аккаунт компании. У Viber есть два варианта ссылок — для компьютера или телефона. Давайте разберемся, в чем их отличия.

Ссылка для ПК выглядит так:

viber://chat? number=+79 235 678 910

Ссылка для телефона выглядит так:

viber://add? number=79 235 678 910

Разница, что в ссылке для компьютера в номере используется «+», для телефона — нет. Чтобы воспользоваться ссылками, просто подставьте вместо цифр нужный номер телефона. Теперь вы можете отправлять и делиться ссылкой на свой аккаунт.

Как в WhatsApp сделать активной ссылку

WhatsApp обеспечивает связь с пользователем, даже если его нет в вашей телефонной книге — опция «прямое подключение». Она также дает возможность создавать активные ссылки. Они помогут войти в мессенджер и мгновенно связаться человеком. Это самый легкий и быстрый способ, чтобы заставить пользователя говорить с вами через WhatsApp. Собеседнику не придется искать вручную контактные данные или вводить их в своем телефоне. Один клик мышкой, и вы можете начать беседу.

Система немного отличается от той, что мы описали выше. Чтобы появилась ссылка на ваш профиль, нужно воспользоваться кодом:

https://wa.me/number и вставить ваш номер телефона без дополнительных знаков («+»).

Кроме обычного телефона, вы можете создать ссылку на чат и сопроводить ее текстом. Для этого понадобится другой код:

https://api.whatsapp.com/send?phone= (также вводится номер телефона — 7ххххххххх)& text= Привет%заходи%20по%20ссылке%20в%20Ватсап%20давай%20общаться.

Версия использует код «%20» — его нужно ставить после каждого слова вместо пробела. Вы можете написать текст и добавить его на сторонний ресурс или разослать по нужным контактам. Если пользователь кликнет по ссылке, то сразу будет перенаправлен в чат с вами. После чего он просто пишет сообщение и отправляет вам.

Гиперссылки перенаправляют пользователя на контент выбранной страницы, внешний URL-адрес или внутренние ресурсы сервисов. Для их создания нужно всего лишь воспользоваться подсказками, и у вас точно все получится. Это поможет делиться информацией из блога, ворда, соцсетей и даже мессенджеров.

Рейтинг: 5

( голосов 1 )

Поделиться статьей

Ссылки в постах и комментариях ВКонтакте: уроки wiki-разметки

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

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

Как сделать активную ссылку в ВК

На самом деле, нет никаких проблем. Вставить ссылку в ВК можно легко с помощью специальных тегов вида:

Здесь:

• id123456789 — идентификатор личной страницы Вконтакте (можно скопировать из адресной строки). Если вы его меняли на «Красивое имя ВКонтакте» — вставляете его;
• анкор — видимый читателями текст ссылки.

Таким образом создается ссылка словом в ВК (анкорная ссылка).

Как сделать активную ссылку в ВК на пост

Несмотря на красоту и простоту метода, он все же имеет существенные ограничения (здесь речь идет о размещении ссылки в посте или комментарии на стене, а не о разметке вики-страницы): анкорная ссылка Вконтакте может вести только на внутренние ресурсы соцсети — личные страницы пользователей, сообщества, группы и мероприятия. То есть, никаких внешних ссылок или ведущих на определенные посты, фото, видео. Для этих целей возможно лишь применение прямой безанкорной ссылки с http:

В приведенном примере с анкором была создана ссылка на страницу в ВК. Чтобы получить возможность ссылаться на другие ресурсы соцсети, необходимо id заменить на:

• club — для ссылок на группы;
• public — для ссылок на сообщества;
• event — для ссылок на мероприятия.

Правило с «красивыми именами» здесь работает так же, как с личными страницами. Например, если идентификатор группы club123456789 поменяли на ее название papakarlo, то ссылка будет иметь вид: [papakarlo|Клуб любителей Буратин], а предложение «Клуб любителей Буратин» в тексте сообщения станет ссылкой на соответствующую группу.

На практике это выглядит так. Пишем сообщение и вставляем в него ссылку на страницу в ВК:

Публикуем сообщение:

И наслаждаемся результатом:

Как вставить ссылку в ВК в смайлик

Можно усовершенствовать работу со ссылками в ВК и «упаковывать» их не в текст, а в смайлики, которые также стали привычным и, порой, необходимым средством выражения мыслей и эмоций. Самое главное: не забудьте, что неподготовленные пользователи могут и не отыскать ссылку в теле смайла.

Здесь все тоже просто и применяются те же теги, что мы использовали для ссылок на личные страницы, группы, сообщества и мероприятия, но только вместо анкора вставляем код выбранного смайлика:

Получаем:

Узнать коды смайлов не составит труда, достаточно попросить помощи у Яндекса или у Google. Их поисковые выдачи переполнены такими таблицами (например, здесь):

Как сделать активную ссылку в ВК на сайт

К сожалению, социальная сеть Вконтакте не позволяет создавать гиперссылки на сторонние ресурсы. Поэтому преобразовать слово в ссылку, ведущую на внешний сайт, у вас не получится. Но это не значит, что вы не можете вставлять необходимые url в свои сообщения. Более того, Вконтакте даже распознаёт внешние адреса и предлагает вставить в текст анонс страницы, находящейся по ту сторону ссылки. Выглядит это примерно так:

В качестве анонса вы получаете изображение и заголовок статьи вместе с названием ресурса. Таким образом очень удобно продвигать собственные сайты, ведь большую часть ручной работы берёт на себя сама социальная сеть, а вам лишь остаётся нажать на кнопку «Отправить сообщение». Анонсы и их репосты являются наиболее эффективным способом рекламы во Вконтакте. Тогда как «Таргетинг», некогда единственный и наиболее популярный инструмент в арсенале рекламного кабинета, отошёл на второй план.

При использовании внешних url-адресов помните, что слишком длинные ссылки автоматически обрезаются социальной сетью, а это может приводить к плачевным последствиям. Что бы избежать подобных неприятностей, вы всегда можете воспользоваться бесплатной сокращалкой, встроенной во Вконтакте: vk.cc. Помните, что практически все внешние сокращатели ссылок заблокированы социальной сетью. В большинстве случаев Вконтакте расценивает, сокращённые сторонними сервисами url-адреса, как фишинговые и блокирует. Несколько секунд, которые вам придётся потратить на использование фирменного инструмента, не стоят крайне вероятного бана.

Заключение

Теперь, зная как сделать ссылку в ВК, мы имеем в своем распоряжении еще один рабочий инструмент продвижения страниц в соцсети. В умелых руках он может увеличить активность ваших читателей, привлечь повышенное внимание к рекламному посту или просто помочь собрать побольше лайков. Используйте его с умом и сможете существенно повысить популярность своих публикаций и показатель кликабельности, а также увеличить объёмы охватываемой аудитории.

Как добавить на свой веб-сайт ссылки и призывы к действию

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

В этой статье мы рассмотрим, как добавить ссылку для вызова, а также несколько других интерактивных ссылок, таких как электронная почта и другие CTA.

Подпишитесь на наш канал Youtube

• 1 Как работают ссылки на звонки
  • 1. 1 Добавление ссылки для вызова номера телефона в формате HTML на ваш веб-сайт
  • 1,2 Добавление расширения
  • 1,3 Добавление кодов стран
  • 1,4 Добавление микроданных для локального SEO
  • 1,5 Другие призывы к действию
  • 1,6 Добавление кода на страницу контактов
  • 1,7 Создание кода для ссылки или URL-адреса электронной почты
  • 1,8 Добавление кода для открытия URL-адресов
  • 1,9 Отключить на рабочем столе и планшете
  • 1.10 Добавление кода в верхний или нижний колонтитул
  • 1.11 Стилизация ссылок
  • 1.12 Добавление кода во вторичное меню Divi
  • 1.13 Тестирование на мобильных устройствах
• 2 Добавление ссылок на вызовы с помощью плагинов
  • 2.1 Кнопка «Позвонить сейчас»
  • 2.2 Липкие боковые кнопки
  • 2.3 Панель управления скоростью
  • 2,4 Мобильная панель контактов
• 3 Последние мысли

Как работают ссылки вызовов

Сделать номер телефона интерактивным легко с помощью HTML. HTML5 включает такие протоколы, как tel: и mailto:, которые могут использовать браузеры. Браузеры по-разному реагируют на эти протоколы. Некоторые запустят приложение телефона и добавят номер на дисплей, ожидая, пока вы нажмете кнопку вызова. Другие позвонят, а другие сначала спросят, все ли в порядке.

Поскольку это HTML, вы можете добавлять протоколы в любом месте вашего сайта, включая верхний и нижний колонтитулы, боковые панели, содержимое сообщений и страниц, а также виджеты.

Добавление ссылки для вызова телефонного номера в формате HTML на ваш веб-сайт

Добавьте код в виде текста в место, где должна появиться ссылка:

 123-456-7890 

Href=tel: создает ссылку для вызова. Это говорит браузеру, как использовать номер.

«Тел.: 123-456-7890» создает номер телефона в формате HTML. Номер в кавычках — это номер, по которому он будет звонить.

Номер в тегах >< является визуальной частью и может быть чем угодно, включая номер телефона, строку текста, такую ​​как «Нажмите, чтобы позвонить» или «Позвонить сейчас», или любой другой призыв к действию. вы хотите. Это должно быть описание того, что произойдет, когда они щелкнут.

Отображение сообщения вместо номера будет выглядеть так:

 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

Ваши посетители увидят текст, но когда они нажмут на него, они увидят экран набора своих телефонов с вашим номером, готовым для нажатия кнопки вызова.

Добавление расширения

Некоторые телефонные номера имеют расширение. Вы можете добавить код, который будет создавать короткую паузу перед набором внутреннего номера. Добавление P перед расширением добавит паузу в одну секунду. Код может выглядеть так:

 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

Это набирает номер, ждет одну секунду, а затем набирает добавочный номер.

Вы можете настроить ожидание гудка, используя w вместо p .

Добавление кодов стран

Коды стран можно добавить, добавив + вместе с кодом страны перед номером телефона. Пример может выглядеть так:

 123-456-7890 

Добавление микроданных для локального SEO

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

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

Например, код может выглядеть так:

 

Тема WordPress
Телефон: 
234567890

 

Другие призывы к действию

С HTML5 вы не ограничены телефонными номерами. Вы можете добавить другие призывы к действию, такие как электронная почта, обмен сообщениями, факс и т. д. Протоколы HTML5 включают:

• тел: – позвоните по номеру
• mailto: — открыть приложение электронной почты
• вызов: открыть Skype
• смс: — отправить текстовое сообщение
• факс: – отправить факс

Все эти протоколы используются так же, как мы видели выше. Давайте рассмотрим несколько примеров.

Добавление кода на страницу контактов

Одним из лучших мест для добавления ссылки для вызова является контактная информация на странице «Контакты».

Независимо от того, используете ли вы классический редактор или новый редактор Gutenberg, вам необходимо просмотреть текстовую версию страницы. В классическом редакторе перейдите на вкладку Text . В Гутенберге нажмите три точки в правом верхнем углу и выберите Редактор кода .

Добавьте код вместо своего номера телефона.

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

Создание кода для ссылки электронной почты или URL-адреса

HTML-код для электронной почты — mailto: адрес электронной почты добавляется в конец, например:

  [электронная почта защищена] 
Как и в случае с телефонной ссылкой, вы можете использовать визуальную часть для добавления сообщения, например:
 Нажмите здесь, чтобы отправить мне электронное письмо 

Так же, как и телефонная ссылка, вы можете использовать визуальную часть для добавления сообщения, например:

 < href="mailto: [электронная почта защищена]"; Нажмите здесь, чтобы отправить мне электронное письмо 

Вот пример со страницы контактов пакета компоновки Spa. Я добавил модуль аннотации со значком и текстом «Отправить электронное письмо». Я выбрал вкладку «Текст» и добавил HTML-код электронной почты. Текст теперь доступен для кликов и откроет ваше почтовое приложение.

Добавление кода для открытия URL-адресов

Вы можете иметь HTML для открытия любого URL-адреса, который вы хотите. Это хорошо, если вы хотите отправить читателей на страницы для подписки на рассылку новостей, событий и т. д. Чтобы сделать ссылку на них, ваш HTML-код будет включать URL-адрес. Например:

  См. образец страницы> 

Я добавил еще одну аннотацию с кодом для просмотра страницы событий.

Отключить на ПК и планшетах

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

Здесь я создал два модуля с номером телефона: один включает HTML-номер телефона, а другой — нет. Я отключил тот, у которого кликабельный номер на планшетах и ​​компьютерах, поэтому они никогда не увидят ссылку. Я также отключил модуль без ссылки для телефонов, поэтому пользователи телефонов будут видеть только модуль со ссылкой.

Добавление кода в верхний или нижний колонтитул

Вы можете добавить код в верхний или нижний колонтитул с помощью редактора тем. Всегда используйте дочернюю тему, иначе ваш PHP-код будет перезаписан при обновлении темы. Это потребует некоторых стилей CSS, чтобы выглядеть хорошо.

В Личном кабинете выберите Внешний вид > Редактор > Верхний колонтитул темы (или Тема Нижний колонтитул ). Поместите код в часть кода. Я искал закрывающий тег , нажал Enter, чтобы добавить несколько дополнительных строк, и вставил свой код. Вы можете увидеть код здесь, в строках 28 и 29..

Вот как это выглядит, когда я поместил ссылку на звонок и ссылку на электронную почту в заголовок темы Twenty Nineteen. =»mailto:»] { оранжевый цвет; текстовое оформление: нет; поле справа: 0,8em; }

Указывает CSS, как стилизовать текст для tel: и mailto:. Он меняет шрифт номера телефона на коричневый, шрифт электронной почты на оранжевый и добавляет небольшое поле справа от каждой ссылки.

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

Добавление кода во вторичное меню Divi

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

Перейдите к Настройщику тем > Заголовок и навигация > Элементы заголовка . Это даст вам текстовое поле, где вы можете добавить свой номер телефона. К счастью, вы не ограничены только цифрами. Вы также можете добавить HTML. Я добавил HTML из предыдущих примеров. Я также увеличил размер шрифта номера телефона, чтобы его было легче увидеть на изображениях.

Вы можете сделать очевидным кликабельность, добавив сообщение в визуальную часть ссылки. Вы можете заменить номер сообщением или добавить сообщение в конец номера. Это может выглядеть так:

 123-456-7890 НАЖМИТЕ, ЧТОБЫ ЗВОНИТЬ 

В этом примере показан только текст.

В этом я добавил номер телефона вместе с текстом.

Тестирование на мобильных устройствах

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

Щелкните правой кнопкой мыши на главной странице и выберите 9.0083 Осмотреть . В левом верхнем углу экрана вы увидите список устройств. Выберите один, чтобы увидеть, как ваш сайт выглядит на этом экране. Если щелкнуть ссылку с номером телефона в формате HTML, должно открыться диалоговое окно с предложением выбрать приложение. Если вы видите это, ссылка работает. Я по-прежнему рекомендую попробовать его на реальном смартфоне, но это хороший признак того, что ссылка что-то делает.

Добавление ссылок на звонки с помощью плагинов

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

Кнопка вызова сейчас

Кнопка «Позвонить сейчас» добавляет кнопку вызова в нижней части экрана для мобильных посетителей. На других устройствах не отображается. Вы также можете добавить текст, если хотите. Кнопка представляет собой значок телефона, поэтому легко понять, для чего она предназначена. Все, что вам нужно сделать, это активировать кнопку и ввести свой номер телефона. Вы можете изменить поведение по умолчанию в дополнительных настройках.

Дополнительная информация

Липкие боковые кнопки

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

Дополнительная информация

Контактная планка скорости

Добавляет панель контактов, которая включает интерактивные ссылки для номера телефона, номера факса, заголовка, адреса, электронной почты, социальных сетей и настраиваемых URL-адресов. Установите панель вверху или внизу и отрегулируйте размер, цвет, цвет текста и ссылок, а также реакцию панели. Вы также можете настроить размер. вы можете добавить больше контента, используя перехватчики фильтров.

Дополнительная информация

Мобильная контактная панель

Этот плагин добавляет ссылки на ваш сайт при просмотре на мобильных устройствах. Вы можете выбрать отображаемые ссылки из 13 вариантов, включая телефон, электронную почту, Skype, настраиваемые URL-адреса и социальные сети. Он имеет интеграцию FontAwesome для значков. Вы можете стилизовать ссылки и выбрать размер, границу, непрозрачность и т. д. Установите меню вверху или внизу экрана. Меню остается на экране при прокрутке пользователем. Он также включает прокрутку вверх и корзину WooCommerce с кнопками счетчика товаров.

Дополнительная информация

Последние мысли

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

Мы хотим услышать от вас. Вы добавили ссылки для звонков на свой сайт? Сообщите нам о своем опыте в комментариях ниже.

Избранное изображение через Джейн Келли / Shutterstock.com

4 шага, чтобы добавить кликабельную ссылку на телефон в HTML

Загрузить сейчас: 25 советов по HTML и CSS

Анна Фицджеральд

Обновлено: 20 апреля 2022 г.

Опубликовано: 02 ноября 2021 г.

Размещение номера телефона на веб-сайте может помочь повысить доверие к вашему бизнесу, привлечь потенциальных клиентов и порадовать существующих.

Чтобы пользователям было как можно проще связаться с вами или кем-то из вашей команды, вы можете сделать номер телефона интерактивным в HTML. Это отличная UX-стратегия, учитывая, что на мобильные устройства приходится примерно половина веб-трафика во всем мире. Это означает, что более половины посетителей вашего веб-сайта будут использовать одно и то же устройство, чтобы найти ваш бизнес в Интернете и позвонить.

В этом посте мы рассмотрим процесс создания телефонных ссылок в формате HTML или ссылок «нажмите, чтобы позвонить».

Как связать номер телефона в HTML

1. Создайте элемент привязки.
2. Введите свой номер телефона в атрибут href.
3. Добавить тел: перед номером в кавычках.
4. Включить текст в элемент привязки.

1. Создайте элемент привязки.

Для начала создайте элемент привязки с пустым атрибутом href. Это будет выглядеть так:

2.

Введите свой номер телефона в атрибут href.

Поместите номер телефона в атрибут href внутри открывающего тега. Этот атрибут href (гипертекстовая ссылка) обеспечивает работоспособность гиперссылки. Это будет выглядеть так:

3. Добавьте тел: перед номером в кавычках.

Теперь добавьте tel: внутри атрибута href перед номером телефона. И тел:, и номер телефона должны быть заключены в кавычки без пробелов и тире. Это будет выглядеть так:

4. Включите текст в элемент привязки.

В элемент привязки можно включить текст. Хотя это и не обязательно, это может сделать призыв к действию более очевидным для пользователей. Вот код рядом с тем, как он будет выглядеть для пользователей в интерфейсе веб-сайта.

См. Pen Как связать номер телефона в HTML [со связанным текстом] от HubSpot (@hubspot) на CodePen.

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

См. Pen Как связать номер телефона в HTML [с текстом] от HubSpot (@hubspot) на CodePen.

Как связать номер телефона с расширением в HTML

Если у номера телефона, который вы хотите сделать кликабельным, есть расширение, вам потребуется выполнить дополнительный шаг.

• Вы создаете якорный элемент.
• Введите tel: и номер телефона в атрибуте href.
• Теперь после номера телефона добавьте букву «р» и добавочный номер. Это будет выглядеть так:

При нажатии на эту ссылку «щелкните, чтобы позвонить» пользователь услышит набранный номер, затем секундную паузу, затем набранный добавочный номер.

Как связать телефонный номер с кодом страны в HTML

Если телефонный номер, который вы хотите сделать интерактивным, имеет код страны, вам потребуется выполнить еще один дополнительный шаг.

• Вы создаете якорный элемент.
• Введите tel: и номер телефона в атрибуте href.
• Теперь перед номером телефона добавьте значок плюса (+) и код страны. Это будет выглядеть так:

Как добавить телефонную ссылку в формате HTML на ваш веб-сайт

Телефонную ссылку в формате HTML или ссылку «нажмите, чтобы позвонить» можно включить в различные части вашего веб-сайта. Ваша контактная страница и верхний или нижний колонтитул являются одними из наиболее распространенных. Давайте рассмотрим примеры включения этих интерактивных ссылок на веб-сайте WordPress.

Страница контактов

Точные действия по добавлению телефонной ссылки HTML на страницу контактов будут различаться в зависимости от используемой платформы и шаблона. Ниже приведен общий процесс.

• Для начала выберите готовый шаблон страницы контактов.
• Затем нажмите на блок с примером номера телефона.
• Щелкните значок с тремя точками.
• Нажмите Редактировать как HTML .

• Замените существующий номер телефона элементом привязки: (603)111-2298

• Нажмите Сохранить черновик  и Предварительный просмотр .

Верхний и нижний колонтитулы

Точные действия по добавлению телефонной ссылки в формате HTML в верхний или нижний колонтитулы зависят от платформы и используемого шаблона. Ниже приведен общий процесс.

• На панели инструментов нажмите Внешний вид  > Виджеты .

• В разделе «Нижний колонтитул» добавьте любые нужные блоки. Ради этой демонстрации я добавлю только блок абзаца.

• Когда будете готовы, нажмите Обновить .
• Теперь перейдите на одну из ваших страниц.
• Прокрутите вниз до области нижнего колонтитула и щелкните блок абзаца.

• Добавьте свой номер телефона, затем щелкните значок с тремя точками.
• Нажмите Редактировать как HTML .

• Заключите номер телефона в якорный элемент и добавьте href=»tel:6031112298″ в открывающий тег.

• Нажмите Сохранить черновик  и Предварительный просмотр .

Как оформить телефонную ссылку в формате HTML

Чтобы оформить телефонную ссылку в формате HTML, вам потребуется добавить пользовательский CSS.

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

См. Pen Как оформить телефонную ссылку HTML от HubSpot (@hubspot) на CodePen.

То, как вы добавите этот CSS на свой веб-сайт, зависит от используемой вами платформы. Например, если вы создаете свой сайт в WordPress, вы должны добавить этот CSS на вкладку «Дополнительные CSS» в настройщике WordPress.

Добавление ссылок «Click to Call» на ваш веб-сайт

Отображение номера телефона на вашем веб-сайте может помочь привлечь и обрадовать потенциальных и существующих клиентов — сделать их интерактивными еще лучше для UX. Хорошая новость заключается в том, что создать телефонную связь очень просто. Вам просто нужно немного знать HTML и CSS, чтобы создавать и оформлять эти ссылки и вставлять их в разные области вашего сайта.

Темы: HTML

Не забудьте поделиться этим постом!

Связанные статьи

• hubspot.com/website/what-is-wrapper-in-html»>

  Что такое HTML-обертка? (Полное руководство)

  17 апр. 2023 г.

• Изучение различий между HTML и XML

  12 апр. 2023 г.

• Span против Div: разница, объясненная в 1100 слов или меньше

  29 марта 2023 г.

• Полное руководство по HTML для начинающих: как его писать, изучать и использовать

  28 марта 2023 г.

• Как выделить жирный шрифт, курсив и форматировать текст в HTML

  21 марта 2023 г.

• Что такое colspan в HTML?

  16 марта 2023 г.

• HTML Mailto: как его использовать

  15 марта 2023 г.