WordPress divi主题

如何同时触发模块、列和行的悬停效果

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

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

使用 Divi 构建网站的最大好处之一是每个构建块都包含设计选项。 每个模块、列、行和部分都包含默认和悬停状态的设计设置。 这为在将这些元素组合在一起时触发多个悬停效果打开了大门。

google广告开户

在本教程中,我将向您展示如何同时触发模块、列和行的悬停效果。 诀窍是确保所有元素共享相同的大小和悬停空间。 但是一旦你有了这些元素,你就可以通过悬停效果和设计获得极大的创意。

让我们开始吧。

抢先看

这是一个快速示例,说明如何同时触发不同 Divi 元素的悬停效果。

触发悬停效果

免费下载设计实例

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

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

订阅我们的 Youtube 频道

让我们进入教程,好吗?

WordPress divi主题

了解如何同时触发多个 Divi 元素的悬停状态。

Divi 中的每个元素(部分、行或模块)都有自己的悬停空间,基本上是元素本身的大小。

触发悬停效果

这些元素中的每一个都有内置的悬停选项,当悬停在该元素或其包含的任何子元素上时会激活这些选项。

因此,例如,如果您已将悬停选项添加到某个部分,则这些悬停选项将在您悬停该部分时变为活动状态。

触发悬停效果

然后,如果您将鼠标悬停在该部分内的行悬停空间上,您将激活该行和该部分的悬停选项。 这是因为该行是该部分的子元素。

触发悬停效果

每当您将鼠标悬停在某个列上时,都会激活该列、行和该部分的悬停状态。

触发悬停效果

最后,每当您将鼠标悬停在模块上时,都会触发模块及其所有父元素(列、行和部分)的悬停状态。

fiverr建站WordPress程序员

触发悬停效果

默认情况下,这些元素中的每一个都将具有间距(填充),从而在悬停空间中创建间隙,从而使用户能够有选择地悬停每个元素。 但是,如果你去掉每个元素之间的间距,你将能够同时触发所有元素的悬停状态。

触发悬停效果

这为许多悬停效果组合打开了大门,当您组合每个元素的悬停选项并在共享悬停空间上激活它们时,这些组合可以同时发生。

组合悬停效果的示例

这是一个如何与 Divi 一起使用的示例。

独立站选品工具

在下面的示例中,我们有一行带有背景图像。 在悬停时,我们有一个延迟的盒子阴影,它显示为一种边框设计元素。

在该行内,我们有一列已被黑色框阴影填充。 悬停时,列的框阴影逐渐减小以显示行背景图像。

在列内,我们有一个蓝色背景的简介模块。 悬停时,蓝色背景变为半透明蓝色,以便您可以看到背景图像。

由于每个元素之间都有间距,当我们将鼠标悬停在每个单独的悬停空间上时,我们可以看到每个元素的特定悬停效果。

触发悬停效果

高质量外链购买

但是,如果我们去掉间距并给行一个自定义宽度,所有元素将共享相同的悬停空间。 或者换一种说法,模块占据了列和行的整个空间。 因此,当我们将鼠标悬停在模块上时,模块、列和行的悬停效果会同时激活。

触发悬停效果

转换延迟非常适合此设置

请记住,在上面的示例中,行和列悬停效果存在过渡延迟,这确实很好地突出了这个概念的功能。 如果我们试图仅向模块添加类似的悬停效果组合,我们将无法利用对每个悬停效果单独应用不同的过渡延迟和持续时间的优势。

在 Divi 中重新创建设计示例

为了给你一些关于如何在 Divi 的现实世界中发挥作用的指导,让我们重新创建上面描述的示例。

你需要什么开始

要开始,您需要具备以下条件:

JasperAI 10000字免费额度试用
  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像

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

添加节和行

您需要做的第一件事是创建一个具有单列行的常规部分。

触发悬停效果

更新行和列设置

接下来,打开行设置并为该行提供背景图像。

触发悬停效果

WordPress备份工具updrafplus

然后我们需要去掉默认的填充,这样行和列之间的悬停空间就没有间隙了。

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

触发悬停效果

然后将以下框阴影添加到悬停时的行。

  • 盒子阴影:见截图
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:0px(桌面),10px(悬停)
  • 阴影颜色:#063c68

触发悬停效果

接下来使用持续时间和延迟更新转换选项,如下所示:

  • 转换持续时间:500ms
  • 转换延迟:700ms

触发悬停效果

现在打开列设置并更新以下内容:

  • 盒子阴影:见截图
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:200px(桌面),0px(悬停)
  • 阴影颜色:#000000
  • 转换持续时间:500ms
  • 转换延迟:200ms

触发悬停效果

添加模糊模块

现在向该行添加一个简介模块。

触发悬停效果

然后更新简介如下:

  • 图片: [insert blurb image]
  • 背景颜色:#0c71c3
  • 背景颜色(悬停):rgba(12,113,195,0.35)

触发悬停效果

  • 文字对齐:居中
  • 文字颜色:浅色
  • 内边距:顶部 20 像素,底部 20 像素,左侧 20 像素,右侧 20 像素

触发悬停效果

最后结果

查看最终结果。

触发悬停效果

最后的想法和提示

了解如何同时触发多个 Divi 元素的悬停状态开启了一些令人兴奋的设计可能性。 这篇文章中的示例仅突出显示了当您组合模块、列和行的悬停状态时可能出现的许多悬停效果组合中的一小部分。 另外,我们甚至没有探索结合部分悬停选项带来的可能性,这将为您提供更多悬停选项。 当您自己探索这些悬停效果时,这里有一些提示和想法可以帮助您。

  • 使用框阴影而不是边框​​——边框实际上为元素添加了额外的空间,因此这可能会导致不需要的悬停间隙。 盒子阴影添加了一个不增加实际空间的设计元素。
  • 探索背景过渡悬停效果 – 每个 Divi 元素都有背景悬停选项,可以组合用于创意悬停效果层。
  • 使用变换悬停选项 – 变换悬停选项可以添加创意元素,例如悬停时缩放和旋转元素。 但是,在悬停时旋转多个元素可能具有挑战性,因为它会导致跳跃。
  • 利用过渡选项——在每个元素的悬停状态上添加不同的过渡持续时间和延迟可以创建独特的悬停动画。

我希望本教程能激发您探索 Divi 中一些惊人的悬停效果组合。

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

干杯!

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