如何使用点击呼叫、电子邮件、短信和方向链接创建 Divi 移动联系栏
已发表: 2020-06-04随着世界生活在移动设备上，在您的网站上提供可点击的联系链接以利用移动体验是有意义的。 这些联系链接，就像点击通话链接一样，只需单击一下，就可以在您的手机上快速开始通话。 其他人（如路线链接）可以在 Google 地图中打开前往商家地址的路线。 这些对用户来说真的很方便，对某些企业来说是必须的。
在本教程中，我们将向您展示如何使用点击通话、电子邮件、短信和路线链接创建 Divi 移动联系栏。 为此，我们将使用 Divi 构建器来设计全局页脚上的栏和按钮。 然后我们将向每个联系链接添加自定义 URL，以将我们需要的功能带回家。
让我们开始吧！
抢先看
这是我们将在本教程中构建的设计的快速浏览。
免费下载布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
如何将固定联系栏模板下载添加到您的 Divi 站点
警告！：添加此模板将覆盖 Divi 站点上的默认网站模板（如果有）。 我们建议将此添加到测试站点，这样您就不会在实时站点上搞砸任何事情。
要将固定页脚栏模板导入您自己的网站，请解压缩下载的 zip 文件以访问 JSON 文件。
然后转到 WordPress 仪表板并导航到 Divi > Theme Builder。
然后单击页面右上角的便携性图标。
在可移植性弹出窗口中，选择您刚刚解压缩的 JSON 文件，然后选择“导入前下载备份”选项，以防万一您之前在默认网站模板中有不想覆盖的内容。
然后单击导入按钮。
最后，保存 Theme Builder 更改并查看实时页面以查看固定的页脚栏。
现在，让我们进入教程，好吗？
第 1 部分：创建全局页脚
在本教程中，我们将使用 Divi Theme Builder 将移动联系栏添加到全局页脚。 首先导航到 Divi > Theme Builder。 然后单击默认网站模板内的全局页脚区域。 从下拉列表中，选择构建全局页脚。
注意：如果您已经有一个全局页脚，您可以打开编辑全局页脚并在当前页脚之外添加联系栏。
选择“从头开始构建”选项。
第 2 部分：创建固定内容栏
在全局页脚布局编辑器中，通过向默认部分添加一列行来开始设计过程。
部分设置
在我们开始添加模块之前，打开部分设置给它一个设置高度，如下所示：
- 高度：80px
这对于在页面底部创建固定行最终静止的空间很重要。 我们还将删除默认的顶部和底部填充。
- 填充：0px 顶部，0px 底部
行设置
现在我们的部分已经准备好了，我们准备自定义行作为固定联系栏。 打开该行的设置，然后更新以下内容：
背景
- 背景颜色：#751136
尺寸
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
- 身高：继承
尽管该行是固定的，但我们希望该行的高度与父节的高度相匹配，以便页面底部的空间能够充分容纳该行。 为此，我们必须输入文本“继承”作为高度。
间距
- 填充：顶部 0px，底部 0px，左 15%，右 15%
自定义 CSS
我们希望确保行内的内容保持垂直对齐，并且列不会在移动设备上中断。 为此，请将以下自定义 CSS 添加到行的主要元素：
display:flex; flex-wrap:nowrap; align-items:center;
固定定位
为了使行固定使其浮动在屏幕底部，我们需要在左下角位置给它一个固定位置，如下所示：
- 位置：固定
- 位置：左下角
- Z指数：99999
第 3 部分：构建点击呼叫、电子邮件、短信和方向链接
现在我们的联系栏已经完成，我们准备添加可点击的联系按钮以及自定义 URL。
设计点击通话按钮
我们要创建的第一个联系按钮是点击通话按钮。 要创建它，请向该列添加一个新的模糊模块。
内容
在内容选项卡下，将标题和图标添加到简介中，如下所示：
- 标题：打电话
- 使用图标：是
- 图标：电话
背景
给它一个白色的背景颜色：
- 背景颜色：#ffffff
设计设置
跳转到设计选项卡，并按如下方式更新设置：
图标
- 图标颜色：#751136
- 使用图标字体大小：是
- 图标字体大小：2em
标题字体
- Tite 字体样式：TT
- 标题文本对齐：居中
- 标题文字颜色：#751136
- 标题文字大小：1em
正文大小
如果您注意到，我们一直在使用“em”长度单位来调整模糊元素的大小。 这与正文的大小有关。 因此，调整简介正文的大小（即使它没有显示正文）将使用 em 长度单位调整所有简介元素的大小。 这只是一种无需单独调整每个元素即可更改按钮大小的便捷方式。
更新正文如下：
- 正文大小：12px
尺寸
给模糊设置一个高度和宽度，如下所示：
- 宽度：4.5em
- 模块对齐：居中
- 高度：4.5em
填充和角落
- 填充：0.5em 顶部
盒子阴影
- 盒子阴影：见截图
- 框阴影水平位置：0px
- 框阴影垂直位置：2px
- 阴影颜色：rgba(255,255,255,0.55)
自定义 CSS
为了使模糊模块的内容垂直居中，将以下自定义 CSS 添加到主元素：
display:flex; align-items:center;
并通过添加以下 Blurb Image 取出模糊图标下的间距：
margin-bottom: 0.3em;
添加呼叫链接 URL
要添加将在移动电话上发起呼叫的呼叫链接 URL，请在前缀“tel:”后添加号码。
- 模块链接网址：电话：555-555-5555
设计电子邮件按钮
要创建电子邮件按钮，请复制整个列。
添加电子邮件图标和链接 URL
然后使用新的标题和图标更新第 2 列中的重复信息。
要添加将在移动应用程序上发起电子邮件的呼叫链接 URL，请在前缀“mailto:”之后添加电子邮件地址。
- 模块链接 URL：mailto:[电子邮件保护]
设计 SMS(Text Message) 按钮
要创建 SMS 按钮，请复制第 2 列。
添加短信图标和链接 URL
然后使用新的标题和图标更新第 2 列中的重复信息。
要添加将在移动应用程序上发起电子邮件的呼叫链接 URL，请在前缀“sms:”之后添加电子邮件地址。
- 模块链接网址：短信：+15555555555
设计方向按钮
要创建 SMS 按钮，请复制第 3 列。
添加路线图标和链接 URL
然后使用新的标题和图标更新第 3 列中的重复信息。
要添加将通过 Google 地图启动路线的呼叫链接 URL，请使用这些路线 URL 结构。
在本教程中，我们将添加一个路线链接，该链接将生成从用户当前位置到加利福尼亚州山景城的 GooglePlex 的路线。
- 模块链接网址：
https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA
要将您自己的地址添加到 URL，请替换 URL 中“destination=”之后的文本，确保用加号 (“+”) 分隔单词。
单击按钮应该会给你类似的东西......
在桌面上隐藏部分
因为我们希望联系栏只显示在移动设备上，所以我们可以在桌面上禁用整个部分。 为此，请打开部分设置并更新以下内容：
- 禁用：桌面
最终结果
更多联系方式
使用 HTML5，您不仅限于电话号码。 您可以添加其他号召性用语，例如电子邮件、消息、传真等。 HTML5 协议包括：
电话： – 拨打电话
mailto: – 打开一个电子邮件应用程序
呼叫：打开Skype
短信： – 发送短信
传真： – 发送传真
如果需要，您还可以为路线 URL 添加有针对性的位智链接。
最后的想法
对于任何希望让用户通过移动设备与他们联系的公司网站，联系栏似乎都是一个很好的补充。 一旦您熟悉了链接 URL 的结构，您就可以设置为所需的任何类型的联系链接。
有关更多信息，请查看我们关于电话链接的帖子。
我期待在评论中收到您的来信。
干杯!