WordPress divi主题

如何在部分中浮动元素以在 Divi 中创建动态滚动效果

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

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

当用户向下滚动页面时,部分中的浮动元素可以提供一种有效且独特的方式来显示内容。 使用 Divi,您只需使用可用的内置位置选项给它们一个固定位置,就可以浮动元素。 当你将固定元素与静态元素、动画和视差结合起来时,你的内容就会变得生动起来!

google广告开户

在本教程中,我们将向您展示如何在 Divi 的一个部分中浮动元素(图像和简介模块)以创建漂亮的动态滚动效果!

让我们开始吧!

抢先看

这是我们将构建的浮动元素设计的快速浏览。

Divi 部分中的浮动元素

订阅我们的 Youtube 频道

免费下载布局

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

要将布局导入您的页面,只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

注意:如果要在可视模式下使用 Divi Builder 编辑项目,则需要部署线框视图模式并恢复中间部分的默认 Z 索引。

WordPress divi主题

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。 之后,您将有一个空白画布开始在 Divi 中进行设计。
  4. 为了使用本教程中使用的相同图像,您可以单击此处从 Candy Shop Layout Pack 下载图像。

创建具有三列的部分

让我们通过创建一个三列的行来让事情顺利进行。

Divi 部分中的浮动元素

然后按如下方式更新行设置:

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

Divi 部分中的浮动元素

打开第 1 列的设置并添加以下填充:

  • 填充:10vw 顶部,5vw 底部

这将有助于稍微错开图像的布局并为我们的列增加一些高度。

Divi 部分中的浮动元素

fiverr建站WordPress程序员

打开第 2 列的设置并添加以下 Z 索引:

Divi 部分中的浮动元素

这将确保我们将添加到中间列的简介模块将保持在该部分的所有其他内容之上。

添加具有静态和固定位置的图像

下一步是将浮动图像添加到我们的左右列。 其中四个图像将保持其静态(默认)位置,但我们将给其中两个固定位置。 这将有助于产生一些漂浮的错觉。

图片 #1(静态)

将新的图像模块添加到第 1 列。

独立站选品工具

Divi 部分中的浮动元素

将图像上传到模块。

Divi 部分中的浮动元素

更新图像的以下设计设置:

  • 宽度:200 像素
  • 模块对齐:右
  • 模糊:2px
  • 变换平移(Y):-58px
  • 变换平移(X):63px

Divi 部分中的浮动元素

高质量外链购买

图片 #2(固定)

在第 1 列的第一个图像模块下添加第二个图像模块。

Divi 部分中的浮动元素

将新图像上传到模块。

Divi 部分中的浮动元素

更新图像 #2 的设计设置,如下所示:

JasperAI 10000字免费额度试用
  • 宽度:200 像素
  • 位置:固定
  • 位置:左上角
  • 垂直偏移:7%
  • 水平偏移:5%

Divi 部分中的浮动元素

图片#3(静态)

在第 1 列的第二个下方添加第三个图像。

Divi 部分中的浮动元素

将新图像上传到模块。

Divi 部分中的浮动元素

WordPress备份工具updrafplus

更新图像的设计设置,如下所示:

  • 宽度:300 像素
  • 模块对齐:右
  • 变换平移(Y):179px
  • 变换平移(X):128px

Divi 部分中的浮动元素

图片#4(静态)

将第四个图像模块添加到第 3 列。

Divi 部分中的浮动元素

将新图像上传到模块。

Divi 部分中的浮动元素

更新图像 #4 的设计设置,如下所示:

  • 宽度:200 像素
  • 模块对齐:左
  • 模糊:4px
  • 变换平移(Y):-9px
  • 变换平移(X):-30px

Divi 部分中的浮动元素

模糊效果有助于产生图像距离较远的错觉。

图片#5(固定)

接下来,在第 3 列的图像 #4 下添加一个新的图像模块。

Divi 部分中的浮动元素

将新图像上传到模块,如下所示:

Divi 部分中的浮动元素

更新图像 #5 的设计设置,如下所示:

  • 宽度:200 像素
  • 位置:固定
  • 位置:右下角
  • 垂直偏移:7%
  • 水平偏移:5%

Divi 部分中的浮动元素

图片#6(静态)

在第 3 列的图像 #5 下添加第六个也是最后一个图像。

Divi 部分中的浮动元素

将新图像上传到模块。

Divi 部分中的浮动元素

更新图像 #6 的设计设置,如下所示:

  • 宽度:300 像素
  • 模块对齐:左
  • 变换平移(Y):62px
  • 变换平移(X):-122px

Divi 部分中的浮动元素

添加具有固定位置的模糊

我们已准备好将最后一段内容添加到我们的部分。 这将是主要的特色宣传,也将处于固定位置。

在中间列(第 2 列)添加一个简介模块。

Divi 部分中的浮动元素

然后更新简介的内容如下:

然后将以下 HTML 添加到文本选项卡下的正文中:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

<a href="#">Learn More</a>

Divi 部分中的浮动元素

将图像添加到简介中。

Divi 部分中的浮动元素

通过更新以下设置来设计简介:

  • 背景颜色:#ffffff
  • 文本对齐:居中
  • 标题字体:音乐会一
  • 标题文字颜色:#0a2d61
  • 标题文字大小:50px
  • 正文字体:音乐会一号
  • 正文大小:20px
  • 车身线高:1.8em
  • 链接字体样式:TT
  • 链接文字颜色:#ff3d97
  • 链接文字大小:20px
  • 链接字母间距:5px
  • 宽度:400 像素
  • 内边距:顶部 30 像素,底部 30 像素,左侧 30 像素,右侧 30 像素

Divi 部分中的浮动元素

  • 圆角:10px
  • 盒子阴影:见截图
  • 盒子阴影模糊强度:80px

Divi 部分中的浮动元素

然后最后给简介一个固定的位置和一个中心位置。

  • 位置:固定
  • 位置:中间/中心

Divi 部分中的浮动元素

创建模拟顶部和底部部分

在当前部分下添加一个新的常规部分。

Divi 部分中的浮动元素

为该部分提供背景颜色。

  • 背景颜色:#4DB9FF

Divi 部分中的浮动元素

然后给它一些高度,这样我们就可以有足够的空间来滚动浏览带有浮动元素的部分。

Divi 部分中的浮动元素

复制模拟部分并将副本移动到页面顶部,以便我们带有浮动元素的主要部分成为中间部分。

Divi 部分中的浮动元素

中段的最后润色

为了完成设计,我们将通过向该部分添加视差背景来添加另一层运动。 我们还需要隐藏溢出。 但主要问题是我们的固定元素仍然显示在顶部和底部部分之上。 为了解决这个问题,我们需要给我们的部分一个 -1 Z 索引。

  • 背景图片:插入图片
  • 使用视差效果:是
  • 视差效果:真实视差
  • 水平溢出:隐藏
  • 垂直溢出:隐藏
  • Z指数:-1

Divi 部分中的浮动元素

笔记:一旦您给该部分的 Z 索引 -1,桌面视图模式下的可视化构建器可能无法正常工作。 因此,您可能需要部署线框视图模式以进一步编辑该部分。

静态元素的附加动画

使用多选选择四个静态图像,然后使用以下动画设置更新元素设置:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画时长:4000ms
  • 动画开始不透明度:100%

Divi 部分中的浮动元素

当图像在滚动时出现时,这将添加图像的浮动效果。

最后结果

这是最终结果。

Divi 部分中的浮动元素

最后的想法

在 Divi 中浮动元素只需单击几下即可为其提供固定位置,然后使用偏移量将其放置在您希望它在浏览器中保持固定的确切位置。 然后您可以使用 Z 索引来确保固定元素仅在特定部分可见。 完成基本设置后,您可以通过添加额外的静态元素、视差背景和动画来改善滚动效果,使该部分栩栩如生。 我希望这能激发您在下一个 Divi 构建中获得一些创意。

如果您想将此部分提升到一个全新的水平,请查看我们现在内置于 Divi 的新滚动效果。

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

干杯!

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