WordPress divi主题

如何将时尚的预加载器添加到您的 Divi 网站

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

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

特色插件现已在 Divi 市场上出售

Divi 预加载器可在 Divi 市场中获得! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以访问市场上的 Divi Professional 以查看他们所有可用的产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

google广告开户

在 Divi 市场购买

看屏幕加载很无聊。 如果我们无法分辨正在发生的事情,这也可能令人担忧。 当我们点击某些东西时,我们希望看到某种反馈。 我们想知道计算机接受了我们的点击并得到了我们所要求的。 然后,加载屏幕可以从预加载器中受益。

预加载器是在页面加载时出现在屏幕上的动画图形。 预加载器是显示页面正在加载的一些视觉提示的好方法,甚至可以在您访问时招待客人。 在本教程中,我们将看到如何使用名为 DP Preloader 的插件将预加载器添加到 Divi。 它易于使用,您甚至可以自定义您的预加载器以使其成为您自己的。

让我们来看看。

抢先看

我正在使用 Bike Repair 布局包中的登录页面。 我还使用了来自 #4 Theme Builder 布局包的标题的自定义版本。 我选择了一个与网站元素配合得很好的预加载器,并设置了预加载器的样式,使其适合登录页面的设计。 这是桌面屏幕上的预加载器。

这就是预加载器在手机上的外观。 你可以让它在手机上显示或不显示,你甚至可以设置断点来确定它将显示在什么屏幕尺寸上。 我已经为手机启用了它,所以我们可以看看它是如何工作的。

订阅我们的 Youtube 频道

安装 DP 预加载器

安装 DP 预加载器

WordPress divi主题

从 Divi Marketplace 购买 DP Preloader。 DP Preloader 是一个第三方插件,有很多关于预加载器的显示方式和位置的选项。 它通常花费 13 美元,包括无限的网站使用和一年的支持和更新。

它有 55 个预定义的预加载器、一个使用 GIF 作为预加载器的自定义上传选项、动画、在特定页面上显示它的选项、在移动设备上隐藏它、设置移动断点等。它似乎不适用于空白模板,但它与使用标准标题或主题生成器的默认模板完美配合。 这是将预制和自定义预加载器添加到您的 Divi 网站的绝佳选择。

安装 DP 预加载器

购买并下载插件后,转到 WordPress 仪表板中的插件菜单,然后单击 添新. 当插件列表出现时,选择 上传插件 在屏幕顶部。

安装 DP 预加载器

选择 选择文件 并导航到计算机上的压缩文件并选择它。 点击 现在安装 并等待它完成安装。

安装 DP 预加载器

安装完成后,点击 激活插件. 预加载器现在可以设置为与您的 Divi 网站一起使用。

DP 预加载器选项

DP 预加载器选项

DP Preloader 需要在它显示在您的网站上之前进行设置。 转到 WordPress 仪表板中的 Divi 菜单,选择 主题选项,然后选择 DP预加载器 标签。 与 Divi 选项屏幕中的任何设置一样,请务必保存更改以使设置生效。

fiverr建站WordPress程序员

DP 预加载器常规选项

DP 预加载器常规选项

预加载器默认禁用,因此需要启用。 我将其他常规设置保留为默认设置,但您可以选择在具有您规格或更小的设备宽度的移动设备上隐藏它。

  • 在现场显示预加载器 – 启用

DP 预加载器图像设置

DP 预加载器图像设置

DP Preloader 让我们为图标和全屏背景覆盖选择颜色。 在我们看到我的设置之前,我想展示我从哪里得到我的设计理念。 对于图像设置,我使用的是布局中的颜色。 Bike Repair 登陆页面的背景为白色,高亮为红色。 我将使用整个布局中的红色作为图标,使用白色作为背景。

  • 红色——#ea3900
  • 白色 – #ffffff

DP 预加载器图像设置

独立站选品工具

在选择预加载器时,我可以查看我的布局中有几个设计队列。 我专门查看图标以查看它们的形状、颜色和大小。 布局有很多轮子和齿轮。 还有一些工具。 由于一些预加载器的形状与工具相似,因此它们也是设计理念的候选者。 不过,现在,我将专注于车轮和齿轮。

DP 预加载器图像设置

有 55 个预加载器可供选择。 我选择了一个让我想起齿轮的。 一些预加载器有默认颜色,但我们可以在下一节中调整每个预加载器的颜色,因此我们不必根据颜色选择一个。

DP 预加载器图像设置

在预加载器下是另一组选项,您可以在其中将自定义预加载器上传为 GIF。 您还可以调整其宽度和高度。 由于我使用的是内置预加载器之一,因此无需调整大小。 这些将保持默认设置,但我想显示设置以防您想上传自己的预加载器。

高质量外链购买

DP 预加载器颜色设置

DP 预加载器颜色设置

您可以控制颜色和不透明度的预加载器和背景颜色。 对于预加载器,选择彩色点并在字段中输入十六进制代码或使用选择器选择您的颜色。 对背景颜色执行相同的操作。 背景颜色已经是我想要的颜色,所以我将背景颜色保留为默认值。

  • 红色——#ea3900
  • 白色 – #ffffff

DP 预加载器动画设置

DP 预加载器动画设置

对于动画设置,您可以控制显示两种效果中的哪一种(FadeOut 或 SlideUp)、淡出速度、延迟时间和主体不透明度。 我已将效果更改为 SlideUp,选择了较慢的淡出速度以使预加载器更加可见,并在延迟时间上增加了 2000 毫秒(2 秒),以便预加载器在我的示例中停留在屏幕上的时间更长。

  • 预加载器效果 – SlideUp
  • 预加载器淡出速度 – 慢
  • 预加载器延迟时间 – 2350

结果

这是预加载器在桌面上的外观。 它完全按预期工作,并且与我的布局非常匹配。 看起来它属于我的网站,这对于品牌一致性很重要。

JasperAI 10000字免费额度试用

这是预加载器在手机上的外观。

我决定尝试使用红色作为背景和白色作为预加载器的反向选项。 我对颜色所做的唯一更改是为背景添加 75% 的不透明度,以便页面在加载时显示出来。 我还选择了一个不同的预加载器,以便我们可以看到不同的东西并将预加载器效果更改为淡出。 这是桌面视图。

这是电话视图。

结束的想法

这就是我们对如何为您的 Divi 网站添加时尚预加载器的看法。 将预加载器添加到您的 Divi 网站有助于通知用户后台正在发生某些事情。 DP Preloader 非常适合这一点。 它很容易使用。 您有很多预加载器可供选择,并且您可以控制预加载器和背景的颜色。 如果您想进一步自定义它,您可以上传自己的 Gif 并将其用作预加载器。

现在您可以轻松地将自定义预加载器添加到您的 Divi 网站!

WordPress备份工具updrafplus

我们希望收到你的来信。 您是否已将预加载器添加到您的 Divi 网站? 在下面的评论中让我们知道。

特色图片来自 FastMotion / shutterstock.com

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