黔南做网站公司:如何在您的网站中添加“可呼叫”链接&CTA的链接-极简慕枫

黔南做网站公司:如何在您的网站中添加“可呼叫”链接&CTA的链接

2019-04-24

许多商业网站显示一个电话号码,以便他们的客户可以联系他们。当台式机成为访问这些网站最流行的方式时,用户会记录下电话号码,并从另一个设备上拨打电话。当然,大多数用户现在访问该网站,并从同一设备打电话。这将打开一个添加呼叫链接的机会-创建一个可点击的HTML电话号码。

在本文中,我们将介绍如何添加呼叫链接以及其他一些可点击的链接,如电子邮件和其他CTA。

呼叫链接是如何工作的

黔南做网站公司使一个电话号码可点击是很容易完成的HTML。HTML 5包括浏览器可以使用的诸如tel:和mailto:之类的协议。浏览器对这些协议的响应不同。有些人会启动手机应用程序,并在等待你点击呼叫按钮时将号码添加到显示器上。其他人会打电话,而其他人会先问是否可以。

因为它是HTML,所以您可以在站点的任何地方添加协议,包括页眉、页脚、侧边栏、帖子和页面内容以及小部件。

向网站添加HTML电话号码链接

将代码作为文本添加到希望链接出现的位置:

<a href="tel:123-456-7890">123-456-7890</a>

href=tel:创建调用链接。这告诉浏览器如何使用数字。

“电话:123-456-7890”创建HTML电话号码。引号中的数字是它将调用的数字。

显示消息而不是数字的方式如下所示:

<a href="tel:123-456-7890">CLICK TO CALL</a>

你的访问者会看到文字,但当他们点击它时,他们会看到他们手机的拨号屏幕,你的号码准备好让他们点击呼叫按钮。

添加扩展

有些电话号码有分机。您可以添加代码,在拨号分机号码之前创建一个短暂的暂停。加法P在扩展前面将添加一个一秒的暂停。代码可能如下所示:

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

这拨号码,等待一秒,然后拨分机。

您可以通过以下方式让它等待拨号音:w而不是p.

添加国家代码

国家代码可以通过包括+还有你国家的电话号码之前的密码。一个例子可能如下所示:

<a href="tel:+1123-456-7890">123-456-7890</a>

为本地SEO添加微数据

黔南做网站公司

黔南做网站公司最喜欢随身携带智能手机的便利之一是,当我搜索一家本地企业时,谷歌的结果给了我一个可点击的电话号码。我可以点击这个号码打电话,而不必把它写下来,也不用试着记住它。这个特性现在是必要的。幸运的是,你可以把它添加到你的网站上,这样谷歌就可以在本地搜索中提供你的电话号码。

这是用微观数据完成的。微数据告诉搜索引擎,这些号码是一个电话号码,因此它们被显示为一个可点击的呼叫链接。您可以通过为本地搜索添加几个标记来丰富标记来创建该标记。

例如,代码可能如下所示:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

其他行动呼吁

使用HTML 5,您不仅限于电话号码。您可以在操作中添加其他调用,如电子邮件、消息传递、传真等。HTML 5协议包括:

  • 电话:-打个电话
  • mailto:-打开电子邮件应用程序
  • 呼叫:打开Skype
  • 短信:-发送短信
  • 传真:-发传真

所有这些协议的使用方式都与我们在上面看到的一样。让我们看几个例子。

将代码添加到联系人页面

一个最好的地方添加一个电话链接是在您的联系方式美国页。

黔南做网站公司无论是使用经典编辑器还是新的Gutenberg编辑器,都需要查看页面的文本版本。在经典编辑器中,单击文本标签。在Gutenberg中,单击三点在右上角选择代码编辑器.

添加代码代替您的电话号码。

退出代码编辑器或预览页面,您将看到您的电话号码现在是一个可点击的链接。

为电子邮件链接或URL创建代码

电子邮件的HTML代码是mailto:将电子邮件地址添加到末尾,如下所示:

<a href="mailto:email@example.com"> email@example.com </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: email@example.com"> Click here to send me an email</a>

就像电话链接一样,您可以使用可视部分添加消息,例如:

< href="mailto: email@example.com"; Click here to send me an email</a>

下面是Spa布局包的联系人页面中的一个示例。我添加了一个带有图标的blurb模块,文本发送了一封电子邮件。我选择了文本选项卡并添加了电子邮件HTML。文本现在可点击,并将打开您的电子邮件应用程序。

向打开的URL添加代码

黔南做网站公司可以让HTML打开任何您想要的URL。这是好的,如果你想把读者发送到页面的通讯注册,活动等。为了链接到它们,HTML代码将包含URL。例如:

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

黔南做网站公司

我添加了另一个带有代码的信息,以查看事件页面。

禁用桌面和平板电脑

调用链接的一个问题是,它们对桌面或平板电脑没有用处。您可以通过创建特定于每种类型的设备的模块,然后在其他设备上禁用它们来解决这个问题。

在这里,黔南做网站公司创建了两个带有电话号码的模块:一个包含HTML电话号码,另一个没有。我已经禁用了平板电脑和台式机上可点击号码的链接,这样他们就永远看不到链接了。我还禁用了没有手机链接的模块,因此电话用户只会看到带有链接的模块。

将代码添加到页眉或页脚

可以使用主题编辑器将代码添加到页眉或页脚。始终使用儿童主题否则,在更新主题时,PHP代码将被覆盖。这将需要一些CSS样式看起来很好。

在你的仪表板上外观>编辑器>主题标题(或主题 页脚)。将代码放在代码的部分中。我查找一个结束标记,单击Enter以添加一些额外的行,并粘贴到我的代码中。您可以在这里看到第28和29行的代码。

这是当我把呼叫链接和电子邮件链接放在二十个主题的标题中时的样子。它在那里,而且很管用,但它不太漂亮。这是固定的,增加颜色和边缘空间,这样他们将站在彼此之间。当然,这是在CSS中完成的。

设计链接

您需要向Customizer中的附加CSS字段添加代码。

您的代码可能如下所示:

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

这将告诉CSS如何为tel:和mailto:的文本设置样式。它将电话号码字体更改为棕色,电子邮件字体为橙色,并在每个链接的右侧添加一个小空白。

CSS在代码所在的地方工作,包括小部件、帖子等。你甚至可以用图标而不是文字。

将代码添加到Divi辅助菜单

divi可以将您的电话号码和电子邮件包含在标题上方的辅助菜单中。默认情况下,电子邮件按钮已经可以点击,但电话号码不是。通过使用我们在前面的示例中使用的类似的HTML电话号码,可以将电话号码转换为呼叫链接。

主题定制器 > 标头与导航 > 标头元素。这将给您一个文本框,您可以添加您的电话号码。幸运的是,你不仅限于数字。您还可以添加HTML。我从前面的例子中添加了HTML。我还增加了电话号码的字体大小,使它更容易看到图像。

您可以通过向链接的可视部分添加一条消息来说明它是可点击的。可以用消息替换数字,也可以将消息添加到数字的末尾。它看起来可能是这样的:

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

这个例子只显示了文本。

黔南做网站公司

在这篇文章中,我把电话号码和短信加在了一起。

移动测试

我建议使用移动设备测试链接,以确保其工作正常。如果你不能使用智能手机,你可以使用谷歌Chrome的开发工具。

右键单击您的主页并选择检查。在屏幕的左上角,您将看到一个设备列表。选择一个以查看您的网站在该屏幕上的外观。点击HTML电话号码链接应该打开一个对话框,要求你选择一个应用程序。如果你看到这个链接就能工作。我仍然建议在实际的智能手机上试用,但这是一个很好的迹象,它的链接做了些什么。

使用插件添加调用链接

您也可以添加一个调用链接到您的标题与插件。它们通常包括样式设计、在操作中添加多个调用以及根据访问者的设备打开或关闭的功能。它们也很容易设置和使用。如果您不想处理代码,这些都是很好的选择。以下是一些最好的选择。

呼叫现在按钮

Call Now Button为您的移动访问者在屏幕底部添加了一个单击呼叫按钮。它不显示在其他设备上。如果需要,还可以添加文本。这个按钮是一个电话图标,所以很容易理解它的用途。你所要做的就是打开按钮并输入你的电话号码。可以在高级设置中更改默认行为。

更多信息

粘边按钮

这个插件可以让你添加一些按钮,这些按钮会粘在你的网站上,当用户滚动的时候,它就会留在屏幕上。您可以添加可点击的电话号码、电子邮件地址、社交媒体图标和存储位置。将它们设置在右侧或左侧,选择动画和滚动样式,自定义颜色,并选择它们显示的位置。

更多信息

速度接触棒

黔南做网站公司

它添加了一个联系人栏,其中包括电话号码、传真号码、标题、地址、电子邮件、社交网络和自定义URL的可点击链接。将条形图设置为顶部或底部,并调整文本和链接的大小、颜色以及条形的反应方式。您也可以调整大小。您可以使用过滤器挂钩添加更多内容。

更多信息

移动接触棒

当你在移动设备上浏览时,这个插件会增加你网站的链接。您可以从13个选项中选择显示哪些链接,包括电话、电子邮件、Skype、自定义URL和社交网络。它为图标提供了完美的集成。您可以样式的链接,并选择大小,边框,不透明度等。将菜单设置在屏幕的顶部或底部。当用户滚动时,菜单将保留在屏幕上。它还包括滚动到顶部和带有项目计数器按钮的WooCommerce购物车。

更多信息

最后思想

智能手机访问网站的普及率每天都在增加。这种流行使得呼叫链接从简单的方便到完全必要。添加可点击的电话号码可以在用户打电话给你的公司或你的竞争对手之间产生区别。幸运的是,创建可点击的链接将HTML电话号码添加到WordPress网站的标题、页脚、小部件、页面和帖子中并不那么困难。