WordPress divi主题

如何在 Divi 中显示各个操作系统的下载按钮

| 4月 25, 2022 | Divi主题使用教程 | 0 条评论

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

如果用户不知道其操作系统的正确下载,则单击软件和/或移动应用程序的正确下载按钮可能会使用户感到困惑。 此问题的一种解决方案是在用户在您的网站上加载页面时自动检测用户的操作系统,以便您可以显示该操作系统的正确下载按钮。 这消除了失去潜在客户的风险,他们可能不容易为您的产品找到正确的下载。

google广告开户

在本教程中,我们将向您展示如何使用 Divi 的内置条件选项为各个操作系统设计和显示下载按钮。 这将使您可以完全控制每个操作系统将显示哪些按钮。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的操作系统条件下载按钮的快速浏览。 每个按钮都将被分配一个特定的操作系统显示条件。

在 divi 中显示各个操作系统的下载按钮

这将在加载页面时显示相应操作系统上的每个按钮。

在 divi 中显示各个操作系统的下载按钮

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

WordPress divi主题

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

为了加快设计过程,我们将使用 Divi 预制移动应用布局包中的移动应用主页布局。

要将预制布局加载到页面,请打开 Divi Builder 底部的设置菜单。 然后选择从库图标加载。 在 Load from Library 弹出窗口中,找到 Mobile App Layout 包并单击以使用 Mobile App Homepage Layout。

fiverr建站WordPress程序员

在 divi 中显示各个操作系统的下载按钮

这会将布局加载到页面。 现在你准备好了!

如何在 Divi 中显示各个操作系统的下载按钮

第 1 部分:显示 Mac OS 的下载按钮

对于第一个按钮,我们将使用 Divi 的条件选项仅在 Mac OS 上显示下载按钮。 为此,请打开布局标题中现有按钮的设置并更新以下按钮文本和链接 URL:

  • 按钮文本:下载 (Mac OS)
  • 按钮链接地址: [add URL to zip file]

在 divi 中显示各个操作系统的下载按钮

在设计选项卡下,更新按钮图标和间距,如下所示:

独立站选品工具
  • 按钮图标:见截图
  • 按钮图标位置:左
  • 仅在按钮悬停时显示图标:否
  • 内边距(桌面):顶部 16 像素,底部 16 像素,左侧 40 像素,右侧 20 像素
  • 内边距(电话):左侧 28 像素,右侧 12 像素

在 divi 中显示各个操作系统的下载按钮

要将操作系统条件添加到按钮,请执行以下操作:

  • 在高级选项卡下,单击以添加新的显示条件。
  • 从下拉列表中,选择操作系统条件。
  • 在操作系统设置弹出窗口中,确保选项 仅在操作系统时显示 设定为 .
  • 选择 苹果系统 列表中的操作系统。
  • 保存设置。

在 divi 中显示各个操作系统的下载按钮

这是将在 Mac OS 上显示的内容…

在 divi 中显示各个操作系统的下载按钮

高质量外链购买

第 2 部分:显示 Windows 操作系统的下载按钮

对于第二个按钮,我们将显示 Windows 操作系统的下载按钮。

首先,复制刚刚创建的按钮以创建一个新按钮。

在 divi 中显示各个操作系统的下载按钮

打开新按钮的设置并更新以下按钮文本和链接 URL:

  • 按钮文本:下载(Windows 操作系统)
  • 按钮链接地址: [add URL to zip file]

在 divi 中显示各个操作系统的下载按钮

JasperAI 10000字免费额度试用

在设计选项卡下,给按钮一个渐变背景,如下所示:

  • 渐变背景左颜色:#00f2fe
  • 渐变背景正确颜色:#4facfe
  • 渐变方向:90度

在 divi 中显示各个操作系统的下载按钮

要将操作系统条件添加到按钮,请执行以下操作:

  • 在高级选项卡下,单击以添加新的显示条件。
  • 从下拉列表中,选择操作系统条件。
  • 在操作系统设置弹出窗口中,确保选项 仅在操作系统时显示 设定为 .
  • 选择 视窗 列表中的操作系统。
  • 保存设置。

在 divi 中显示各个操作系统的下载按钮

这是将在 Windows 上显示的内容…

WordPress备份工具updrafplus

在 divi 中显示各个操作系统的下载按钮

第 3 部分:显示适用于 iOS(iPhone、iPad、iPod)的下载按钮

对于第三个按钮,我们将显示 iOS 设备的下载按钮。

要创建按钮,请复制我们创建的第一个按钮。

在 divi 中显示各个操作系统的下载按钮

打开新按钮的设置并更新以下按钮文本和链接 URL:

  • 按钮文本:在 App Store 上下载
  • 按钮链接地址: [add URL to zip file]

在 divi 中显示各个操作系统的下载按钮

在设计选项卡下,将按钮图标更新为右箭头(见屏幕截图)。

在 divi 中显示各个操作系统的下载按钮

要将操作系统条件添加到按钮,请执行以下操作:

  • 在高级选项卡下,单击以添加新的显示条件。
  • 从下拉列表中,选择操作系统条件。
  • 在操作系统设置弹出窗口中,确保选项 仅在操作系统时显示 设定为 .
  • 选择 iOS 列表中的操作系统设备(iPhone、iPad、iPod)。
  • 保存设置。

在 divi 中显示各个操作系统的下载按钮

这是它将在 iOS 设备上显示的内容……

在 divi 中显示各个操作系统的下载按钮

第 4 部分:显示 Android 的下载按钮

对于第四个按钮,我们将显示一个下载按钮 安卓 设备。

要创建按钮,请复制我们创建的上一个按钮。

在 divi 中显示各个操作系统的下载按钮

打开新按钮的设置并更新以下按钮文本和链接 URL:

  • 按钮文本:在 Google Play 上获取
  • 按钮链接地址: [add URL to zip file]

在 divi 中显示各个操作系统的下载按钮

在设计选项卡下,给按钮一个渐变背景,如下所示:

  • 渐变背景左颜色:#a8eb9d
  • 渐变背景颜色:#39abc5
  • 渐变方向:90度

在 divi 中显示各个操作系统的下载按钮

要将操作系统条件添加到按钮,请执行以下操作:

  • 在高级选项卡下,单击以添加新的显示条件。
  • 从下拉列表中,选择操作系统条件。
  • 在操作系统设置弹出窗口中,确保选项 仅在操作系统时显示 设定为 .
  • 选择 安卓 列表中的操作系统。
  • 保存设置。

在 divi 中显示各个操作系统的下载按钮

这是它将在 Android 设备上显示的内容……

在 divi 中显示各个操作系统的下载按钮

第 5 部分:为按钮使用图像或徽章

您还可以选择为按钮使用图像或徽章,以使事情看起来更正式。 例如,您可以使用 Apple 的徽章之一来显示 iOS 设备的下载按钮。 如果您想将图像用作按钮,只需将新图像添加到页面即可。

在 divi 中显示各个操作系统的下载按钮

将图片上传到模块并提供图片链接 URL 以将用户重定向到应用商店或下载页面。

在 divi 中显示各个操作系统的下载按钮

然后更新显示条件以在各自的操作系统上显示图像按钮。

您可以在 iOS 设备上显示“在 App Store 上下载”按钮图像。

在 divi 中显示各个操作系统的下载按钮

您可以在 Android 设备上显示“在 Google Play 上获取”按钮图像。在 divi 中显示各个操作系统的下载按钮

使用 Chrome DevTools 测试结果

如果您使用的是 Chrome 浏览器,您可以使用内置的 DevTools 来测试您的页面/按钮在不同操作系统上的显示。 您的计算机运行什么操作系统并不重要。 Chrome DevTools 可以欺骗操作系统以进行测试。

要使用 Chrome DevTools 在不同的操作系统上测试您的页面,请执行以下步骤:

  1. 打开开发者工具,点击窗口右上角的三点图标
  2. 从下拉列表中选择 Show Console Drawer(或者您可以简单地按 esc 来调出控制台抽屉)
  3. 在控制台抽屉中,单击抽屉左上角的三点菜单。
  4. 从下拉列表中添加网络条件选项卡。
  5. 在网络条件下,取消选择用户代理的“使用默认浏览器”选项。
  6. 然后从列表中选择自定义浏览器/操作系统。

在 divi 中显示各个操作系统的下载按钮

在 divi 中显示各个操作系统的下载按钮

完成后,您可以刷新页面以在这些网络条件下加载该页面。

最终结果

以下是在各自操作系统上显示的最终结果。

下载按钮 苹果系统

在 divi 中显示各个操作系统的下载按钮

下载按钮 视窗操作系统

在 divi 中显示各个操作系统的下载按钮

下载按钮 iOS 设备

使用 Divi 按钮

在 divi 中显示各个操作系统的下载按钮

使用图像或徽章

在 divi 中显示各个操作系统的下载按钮

下载按钮 安卓 设备

使用 Divi 按钮

在 divi 中显示各个操作系统的下载按钮

使用图像或徽章

在 divi 中显示各个操作系统的下载按钮

最后的想法

在 Divi 中创建下载按钮非常简单。 您可以使用按钮模块甚至是带有链接 URL 的图像模块来下载 zip 文件或将用户重定向到下载页面或应用商店。 之后,您可以使用 Divi 的操作系统条件选项根据用户各自的操作系统显示每个按钮,从而大大改善页面的用户体验。 这将有助于确保用户快速有效地获得他们需要的东西。 并且不要忘记使用 Chrome DevTools 在不同的网络条件下测试这些按钮,以确保用户看到正确的按钮。

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

干杯!

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