WordPress divi主题

如何使用点击通话、电子邮件、短信和方向链接创建 Divi 移动联系人栏

by | May 4, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

随着世界生活在移动设备上,在您的网站上提供可点击的联系链接以利用移动体验是有意义的。 这些联系链接,就像点击通话链接一样,只需单击一下即可在您的手机上启动通话。 其他的,例如路线链接,可以在 Google 地图中打开前往商家地址的路线。 这些对用户来说真的很方便,对某些企业来说是必须的。

google广告开户

在本教程中,我们将向您展示如何使用点击通话、电子邮件、短信和方向链接创建 Divi 移动联系人栏。 为此,我们将使用 Divi 构建器来设计栏和全局页脚上的按钮。 然后,我们将为每个联系链接添加自定义 URL,以将我们需要的功能带回家。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

divi移动联系栏

divi移动联系栏

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

如何将固定联系栏模板下载添加到您的 Divi 站点

警告!:添加此模板将覆盖 Divi 网站上的默认网站模板(如果有)。 我们建议将此添加到测试站点,这样您就不会在实时站点上搞砸任何事情。

要将固定页脚栏模板导入您自己的网站,请解压缩下载的 zip 文件以访问 JSON 文件。

然后转到 WordPress 仪表板并导航到 Divi > Theme Builder。

WordPress divi主题

然后单击页面右上角的可移植性图标。

在可移植性弹出窗口中,选择您刚刚解压缩的 JSON 文件并选择“导入前下载备份”选项,以防您之前在默认网站模板中有您不想覆盖的内容。

然后单击导入按钮。

divi移动联系栏

最后,保存 Theme Builder 更改并查看实时页面以查看固定的页脚栏。

divi移动联系栏

现在,让我们进入教程,好吗?

第 1 部分:创建全局页脚

对于本教程,我们将使用 Divi Theme Builder 将移动联系人栏添加到全局页脚。 首先导航到 Divi > Theme Builder。 然后单击默认网站模板内的全局页脚区域。 从下拉列表中,选择构建全局页脚。

divi移动联系栏

注意:如果您已经有一个全局页脚,您可以打开编辑全局页脚并在当前页脚之外添加联系栏。

fiverr建站WordPress程序员

选择“从头开始构建”选项。

divi移动联系栏

第 2 部分:创建固定内容栏

在 Global Footer Layout Editor 中,通过将一列行添加到默认部分来开始设计过程。

divi移动联系栏

部分设置

独立站选品工具

在我们开始添加模块之前,打开部分设置给它一个设置的高度,如下所示:

divi移动联系栏

这对于在页面底部创建固定行最终停止的空间很重要。 我们还将取出默认的顶部和底部填充。

  • 内边距:0px 顶部,0px 底部

divi移动联系栏

行设置

现在我们的部分已经准备就绪,我们准备自定义该行以用作固定联系栏。 打开该行的设置,然后更新以下内容:

高质量外链购买

背景

  • 背景颜色:#751136

divi移动联系栏

尺寸

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%
  • 身高:继承

尽管行是固定的,但我们希望行的高度与父节的高度相匹配,以便页面底部的空间能够充分包含行。 为此,我们必须输入文本“继承”作为高度。

divi移动联系栏

间距

  • 内边距:顶部 0px,底部 0px,左侧 15%,右侧 15%

divi移动联系栏

自定义 CSS

我们希望确保行中的内容保持垂直对齐,并且列不会在移动设备上中断。 为此,请将以下自定义 CSS 添加到行的主元素:

JasperAI 10000字免费额度试用
display:flex;
flex-wrap:nowrap;
align-items:center;

divi移动联系栏

固定定位

为了使该行固定,使其浮动在屏幕底部,我们需要在左下角位置给它一个固定位置,如下所示:

  • 位置:固定
  • 地点:左下角
  • Z指数:99999

divi移动联系栏

第 3 部分:建立点击、电子邮件、短信和方向链接

现在我们的联系栏已经完成,我们准备添加可点击的联系按钮以及自定义 URL。

设计点击通话按钮

我们要创建的第一个联系按钮是点击通话按钮。 要创建它,请在列中添加一个新的简介模块。

WordPress备份工具updrafplus

divi移动联系栏

内容

在内容选项卡下,向简介添加标题和图标,如下所示:

  • 标题:打电话
  • 使用图标:是
  • 图标:电话

divi移动联系栏

背景

给它一个白色的背景颜色:

  • 背景颜色:#ffffff

divi移动联系栏

设计设置

跳转到设计选项卡,并按如下方式更新设置:

图标
  • 图标颜色:#751136
  • 使用图标字体大小:是
  • 图标字体大小:2em

divi移动联系栏

标题字体
  • 字体样式:TT
  • 标题文本对齐方式:居中
  • 标题文字颜色:#751136
  • 标题文字大小:1em

divi移动联系栏

正文文本大小

如果你注意到了,我们一直在使用“em”长度单位来调整 blurb 元素的大小。 这与正文的大小有关。 因此,调整简介正文的大小(即使它没有显示正文)将使用 em 长度单位调整所有简介元素的大小。 这只是一种方便的方式来更改按钮的大小,而无需单独调整每个元素。

更新正文如下:

divi移动联系栏

尺寸

给简介一个设定的高度和宽度,如下所示:

  • 宽度:4.5em
  • 模块对齐:中心
  • 高度:4.5em

divi移动联系栏

填充和角落

divi移动联系栏

盒子阴影
  • 盒子阴影:见截图
  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:2px
  • 阴影颜色:rgba(255,255,255,0.55)

divi移动联系栏

自定义 CSS

为了使 blurb 模块的内容垂直居中,将以下自定义 CSS 添加到主元素:

display:flex;
align-items:center;

并通过添加以下 Blurb Image 来去除 blurb 图标下的间距:

margin-bottom: 0.3em;

divi移动联系栏

添加呼叫链接 URL

要添加将在手机上发起呼叫的呼叫链接 URL,请在前缀“tel:”后添加号码。

  • 模块链接网址:电话:555-555-5555

divi移动联系栏

设计电子邮件按钮

要创建电子邮件按钮,请复制整个列。

divi移动联系栏

添加电子邮件图标和链接 URL

然后使用新的标题和图标更新第 2 列中的重复简介。

为了添加将在移动应用程序上发起电子邮件的呼叫链接 URL,请在前缀“mailto:”之后添加电子邮件地址。

divi移动联系栏

设计 SMS(文本消息)按钮

要创建 SMS 按钮,请复制第 2 列。

divi移动联系栏

添加 SMS 图标和链接 URL

然后使用新的标题和图标更新第 2 列中的重复简介。

为了添加将在移动应用程序上发起电子邮件的呼叫链接 URL,请在前缀“sms:”之后添加电子邮件地址。

  • 模块链接地址:短信:+15555555555

divi移动联系栏

设计方向按钮

要创建 SMS 按钮,请复制第 3 列。

添加方向图标和链接 URL

然后用新的标题和图标更新第 3 列中的重复简介。

要添加将通过 Google 地图启动路线的呼叫链接 URL,请使用这些路线 URL 结构。

对于本教程,我们将添加一个路线链接,该链接将生成从用户当前位置到加利福尼亚州山景城的 GooglePlex 的路线。

divi移动联系栏

要将您自己的地址添加到 URL,请替换 URL 中“destination=”之后的文本,确保用加号 (“+”) 分隔单词。

divi移动联系栏

点击按钮应该会给你类似的东西……

divi移动联系栏

在桌面上隐藏部分

因为我们希望联系人栏只显示在移动设备上,所以我们可以禁用桌面上的整个部分。 为此,请打开部分设置并更新以下内容:

divi移动联系栏

最终结果

divi移动联系栏

divi移动联系栏

更多联系链接

使用 HTML5,您不仅限于电话号码。 您可以添加其他号召性用语,例如电子邮件、消息传递、传真等。HTML5 协议包括:

电话: – 拨打电话
mailto: – 打开一个电子邮件应用程序
callto:打开Skype
短信: – 发送短信
传真: – 发送传真

如果需要,您还可以为路线 URL 添加有针对性的位智链接。

最后的想法

联系栏似乎是对任何希望让用户方便地通过移动设备联系他们的公司网站的一个很好的补充。 一旦您熟悉了链接 URL 的结构,您就可以使用您想要的任何类型的联系链接。

有关更多信息,请查看我们关于电话链接的帖子。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题