WordPress divi主题

Divi 插件亮点:终极 Divi Builder 插件

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

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

Divi Builder Addons 是一个第三方插件,在 Divi Builder 中添加了大量高端网站使用的 jQuery 脚本。 只需切换您想要的脚本并将 CSS 类添加到 Divi Builder 模块。 它易于使用,并包含许多功能和动画。

google广告开户

Ultimate Divi Builder插件菜单

正常上传并激活插件。 仪表板菜单中添加了一个新菜单项,称为 Ultimate Divi Builder Addons。 单击此按钮会在左侧窗口中打开一个包含许多功能的屏幕。 单击其中任何一个都会在右侧窗口中显示切换和信息。 右侧窗口还包括一些效果的 CSS 类,并显示如何使用它们。 其他包括用于更多功能和选项的多个切换,例如颜色、图像大小、持续时间等。默认情况下,它们都被禁用。

以紫色显示的功能已启用,而以灰色显示的功能已禁用。 在上面的示例中,该功能包括其他选项以及 CSS 类。 当您单击它时,您需要的有关如何使用特定功能的所有信息都会显示在右侧窗口中。

特点包括:

  • 自定义滚动条
  • DoSlide 水平
  • 淡入视野
  • 翻转文本
  • 向下滚动时隐藏 Divi 主题标题
  • jQuery Pageflipping 垂直滚动
  • jQuery Pageflipping 水平滚动
  • jQuery 滚动流
  • jQuery ScrollFX
  • jQuery 滚动触发器
  • jQuery 结束页框
  • 滚动效果1时加载标题
  • 滚动效果2时加载标题
  • 滚动效果3时加载标题
  • 滚动效果4时加载标题
  • 启示者动画
  • ScrollMagic 响应持续时间
  • 滚动显示
  • StickyStack:jQuery 堆叠效果
  • 滚动窗口
  • 超级简单的文本旋转器/收录器
  • 哇动画

Ultimate Divi Builder插件示例

以下是与 Divi 布局一起使用时的一些功能示例。

自定义滚动条

自定义滚动条可让您在内容上放置滚动条。 它有8种不同的效果。 将 CSS 类粘贴到要使用效果的部分、行或模块的 CSS 类字段中。 在这一个中,我在 Esports 布局中的文本模块内容中添加了自定义滚动条效果。

WordPress divi主题

现在悬停时会出现一个滚动条,因此我可以滚动以在同一空间中查看更多内容。 这是效果1。在现场有不同的设计。 我已经把背景调亮了,所以它很突出。

这是效果 3。它在幻灯片的顶部和底部添加了箭头。

效果 5 将手柄从线更改为点,并更改箭头的样式。

翻转文本

翻转文本是一种文本输入效果,可创建滴答作响的介绍动画。 它有5种效果。 对于此示例,我将翻转文本添加到律师助理布局中。 这是第一个翻转文本输入效果。 它一次输入一个字母。 您可以使用几个不同的类。 每个类型以不同的速度。

jQuery 滚动流

jQuery Scroll Flow 将滚动动画添加到行或模块。 它有5个动画。 我已将这个添加到律师助理布局中的一行中,以便它同时影响所有模块。 您还可以将它添加到该行中的一个模块中,以便它滑动到位以适应已经存在的其余内容。

fiverr建站WordPress程序员

当我滚动到该行时,内容开始显示。 它比正常的要小,并且不透明度设置得足够低以允许背景显示出来。

再滚动一点会增加内容的大小和不透明度,直到它以全宽和不透明度显示出来。 当我向上滚动时,它再次减小。 这个仍然在相同的位置,但它有几个其他类,因此您可以在调整其大小和不透明度的同时使其从右侧、左侧或向上或向下滑动。

jQuery ScrollFX

jQuery ScrollFX 缩放文本并更改背景不透明度。 scrollfx 类被添加到该部分。 本节中的模块在您滚动到它们以及它们在屏幕上时会正常显示。

独立站选品工具

当您滚动经过它们时,该部分的内容会减小大小并且它们会降低不透明度。

jQuery 滚动触发器

jQuery 滚动触发器在页面滚动时滑动模块。 将滚动触发器类添加到该部分。 这是度假村的布局。 添加类时,背景图像会自动移到一边。

高质量外链购买

当您到达该部分时,包括图像、按钮、文本等在内的所有内容都会滑动到位。

一旦一切就绪,它就会安定下来。

jQuery 结束页框

jQuery End Page Box 放置一个位于屏幕底部的框。 它是通过将代码添加到部分末尾的文本模块来创建的。

JasperAI 10000字免费额度试用

这会添加一个显示在屏幕底部的框,并更改为显示您为每个部分指定的不同内容。

这是下一部分。 盒子从不同的方向滑出和滑入,或者每个部分都有不同的动画。

滚动时加载标题

WordPress备份工具updrafplus

滚动时加载页眉会在菜单中添加一个栏,显示您查看了多少页面。 它不需要 CSS 类。 您可以自定义滚动条的颜色。 有四种款式可供选择。

这是效果 1。它在屏幕顶部添加了一条滚动线。 当您滚动时,它的大小会增加,显示访问者查看了多少页面。

这是效果 2。它显示了一个更宽的条形图。

这是效果 3。它在您滚动时垂直增长,占据徽标的高度。 它不会变得很大,但它仍然显示滚动效果。

效果 4 采用徽标的宽度。

启示者

Revealator 将滚动触发动画添加到部分、行或模块。 它有近 40 个选项。 我在面包店布局中添加了一个简介。 直到它的容器在屏幕上完全可见之前,该简介才会丢失。

它会根据您选择的课程在屏幕上显示动画。 这个有很多动画选项,包括淡入淡出、向左旋转、向右旋转、向左滑动、向右滑动、向上滑动、向下滑动、放大和缩小。

Scroll Magic Section 湿巾

Scroll Magic Section Wipes 创建一个动画,在您滚动时将内容擦除到屏幕上。 我认为这是我最喜欢的所有效果。 它已添加到该部分。

一旦该部分完全显示在屏幕上,它就会冻结在适当的位置,并且下一部分会在其上滚动。 您可以将其添加到尽可能多的部分,为整个页面创建有趣的滚动方法。 如果您希望每个部分都重叠,那么您会对 StickyStack 功能感兴趣。

滚动显示

Scroll Reveal 显示滚动上的模块。 从 17 种不同的动画中进行选择。 您可以将其添加到部分、行或模块中。 底部的部分在滚动时向读者缩放。

这是效果1f。 当您滚动到该行时,该行将旋转到位。

StickyStack:jQuery 堆叠效果

StickyStack:jQuery Stacking Effect 在面板到达视口顶部时堆叠面板。 换句话说,当您滚动时,每个部分都会在屏幕上冻结,而下一个部分会滚动以重叠它。 结果在滚动上看起来很棒。 这是风险管理布局。

这是同一页面的另一部分。 重叠部分完美地工作。

超级简单的文本旋转器/收录器

Super Simple Text Rotator/Ticker 让您可以在文本中添加标记并旋转多个单词。 它有5种动画风格。 这个在“简单”和“可定制”这两个词之间旋转。

在这里,它被旋转以显示第二个单词。 这两个词都会淡入淡出。

Ultimate Divi Builder 插件价格

Ultimate Divi Builder Addons 是 59 美元,可在无限网站上使用,包括终身更新。 更新通常会添加新功能。 您可以免费试用一个演示,看看您是否喜欢它。

结束的想法

Ultimate Divi Builder Addons 可以提供很多功能,并且可以节省大量开发功能和动画的时间。 所包含的功能数量以及它们的易用性给我留下了深刻的印象。

如果没有用大 GIF 填充这篇文章,有些内容会更难展示。 例如,Wow Animation 有 75 种动画可供选择,您可以更改延迟、持续时间、距离和重复次数。

该插件确实需要您将 CSS 类粘贴到部分、行或模块中。 幸运的是,这很容易做到,并且在 Divi 文档中有大量关于在 CSS 类中粘贴的信息。

如果您对向 Divi 添加大量功能和动画的简单方法感兴趣,Ultimate Divi Builder Addons 值得一试。

我们希望收到你的来信。 您是否尝试过 Ultimate Divi Builder 插件? 在评论中让我们知道您对此的看法。

特色图片来自 GoodStudio / shutterstock.com

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