随着世界生活在移动设备上，在您的网站上提供可点击的联系链接以利用移动体验是有意义的。 这些联系链接，就像点击通话链接一样，只需单击一下即可在您的手机上启动通话。 其他的，例如路线链接，可以在 Google 地图中打开前往商家地址的路线。 这些对用户来说真的很方便，对某些企业来说是必须的。
在本教程中，我们将向您展示如何使用点击通话、电子邮件、短信和方向链接创建 Divi 移动联系人栏。 为此，我们将使用 Divi 构建器来设计栏和全局页脚上的按钮。 然后，我们将为每个联系链接添加自定义 URL，以将我们需要的功能带回家。
让我们开始吧！
抢先看
下面是我们将在本教程中构建的设计的快速浏览。
免费下载布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
如何将固定联系栏模板下载添加到您的 Divi 站点
警告！：添加此模板将覆盖 Divi 网站上的默认网站模板（如果有）。 我们建议将此添加到测试站点，这样您就不会在实时站点上搞砸任何事情。
要将固定页脚栏模板导入您自己的网站，请解压缩下载的 zip 文件以访问 JSON 文件。
然后转到 WordPress 仪表板并导航到 Divi > Theme Builder。
然后单击页面右上角的可移植性图标。
在可移植性弹出窗口中，选择您刚刚解压缩的 JSON 文件并选择“导入前下载备份”选项，以防您之前在默认网站模板中有您不想覆盖的内容。
然后单击导入按钮。
最后，保存 Theme Builder 更改并查看实时页面以查看固定的页脚栏。
现在，让我们进入教程，好吗？
第 1 部分：创建全局页脚
对于本教程，我们将使用 Divi Theme Builder 将移动联系人栏添加到全局页脚。 首先导航到 Divi > Theme Builder。 然后单击默认网站模板内的全局页脚区域。 从下拉列表中，选择构建全局页脚。
注意：如果您已经有一个全局页脚，您可以打开编辑全局页脚并在当前页脚之外添加联系栏。
选择“从头开始构建”选项。
第 2 部分：创建固定内容栏
在 Global Footer Layout Editor 中，通过将一列行添加到默认部分来开始设计过程。
部分设置
在我们开始添加模块之前，打开部分设置给它一个设置的高度，如下所示：
这对于在页面底部创建固定行最终停止的空间很重要。 我们还将取出默认的顶部和底部填充。
- 内边距：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
标题字体
- 字体样式：TT
- 标题文本对齐方式：居中
- 标题文字颜色：#751136
- 标题文字大小：1em
正文文本大小
如果你注意到了，我们一直在使用“em”长度单位来调整 blurb 元素的大小。 这与正文的大小有关。 因此，调整简介正文的大小（即使它没有显示正文）将使用 em 长度单位调整所有简介元素的大小。 这只是一种方便的方式来更改按钮的大小，而无需单独调整每个元素。
更新正文如下：
尺寸
给简介一个设定的高度和宽度，如下所示：
- 宽度：4.5em
- 模块对齐：中心
- 高度：4.5em
填充和角落
盒子阴影
- 盒子阴影：见截图
- 盒子阴影水平位置：0px
- 盒子阴影垂直位置：2px
- 阴影颜色：rgba(255,255,255,0.55)
自定义 CSS
为了使 blurb 模块的内容垂直居中，将以下自定义 CSS 添加到主元素：
display:flex; align-items:center;
并通过添加以下 Blurb Image 来去除 blurb 图标下的间距：
margin-bottom: 0.3em;
添加呼叫链接 URL
要添加将在手机上发起呼叫的呼叫链接 URL，请在前缀“tel:”后添加号码。
- 模块链接网址：电话：555-555-5555
设计电子邮件按钮
要创建电子邮件按钮，请复制整个列。
添加电子邮件图标和链接 URL
然后使用新的标题和图标更新第 2 列中的重复简介。
为了添加将在移动应用程序上发起电子邮件的呼叫链接 URL，请在前缀“mailto:”之后添加电子邮件地址。
设计 SMS（文本消息）按钮
要创建 SMS 按钮，请复制第 2 列。
添加 SMS 图标和链接 URL
然后使用新的标题和图标更新第 2 列中的重复简介。
为了添加将在移动应用程序上发起电子邮件的呼叫链接 URL，请在前缀“sms:”之后添加电子邮件地址。
- 模块链接地址：短信：+15555555555
设计方向按钮
要创建 SMS 按钮，请复制第 3 列。
添加方向图标和链接 URL
然后用新的标题和图标更新第 3 列中的重复简介。
要添加将通过 Google 地图启动路线的呼叫链接 URL，请使用这些路线 URL 结构。
对于本教程，我们将添加一个路线链接，该链接将生成从用户当前位置到加利福尼亚州山景城的 GooglePlex 的路线。
要将您自己的地址添加到 URL，请替换 URL 中“destination=”之后的文本，确保用加号 (“+”) 分隔单词。
点击按钮应该会给你类似的东西……
在桌面上隐藏部分
因为我们希望联系人栏只显示在移动设备上，所以我们可以禁用桌面上的整个部分。 为此，请打开部分设置并更新以下内容：
最终结果
更多联系链接
使用 HTML5，您不仅限于电话号码。 您可以添加其他号召性用语，例如电子邮件、消息传递、传真等。HTML5 协议包括：
电话： – 拨打电话
mailto: – 打开一个电子邮件应用程序
callto：打开Skype
短信： – 发送短信
传真： – 发送传真
如果需要，您还可以为路线 URL 添加有针对性的位智链接。
最后的想法
联系栏似乎是对任何希望让用户方便地通过移动设备联系他们的公司网站的一个很好的补充。 一旦您熟悉了链接 URL 的结构，您就可以使用您想要的任何类型的联系链接。
有关更多信息，请查看我们关于电话链接的帖子。
我期待在评论中收到您的来信。
干杯!
