使用 Divi 的变换和悬停选项的创意交互式模糊模块

我们都喜欢新的转换选项。 它们帮助我们创造出令人惊叹的设计，并实时查看我们所做的更改。 与悬停选项结合使用时，您绝对可以创造出一些令人惊叹的效果。 在本教程中，我们将向您展示如何通过结合 Divi 的变换和悬停选项来创建交互式模糊模块。 我们将处理四个不同的示例，这些示例几乎不需要时间来创建，您可以将它们用于您想要的任何 Web 项目。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下结果。

一般步骤

添加新部分

在这篇文章的第一部分，我们将介绍一些一般步骤，这将帮助我们专注于文章后面的变换简介示例。 首先创建一个新页面或打开一个现有页面，然后向其中添加一个常规部分。

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

打开行设置并在设计选项卡中更改大小设置，以允许行占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

添加一些自定义的顶部和底部填充。

• 顶部填充：150px
• 底部填充：150px

将 Blurb 模块添加到第 1 列

添加内容

在本教程中，我们唯一需要的模块是 Blurb 模块。 一旦我们自定义了 Blurb 模块，我们将重用以实现您在文章开头看到的所有四个示例。 继续将一个 Blurb 模块添加到第一列并输入您选择的一些内容。

选择图标

继续选择一个图标。

背景颜色

接下来添加一个完全白色的背景。

• 背景颜色：#ffffff

默认图标设置

然后，更改设计选项卡中的图标设置。

• 图标颜色：#7a69e6
• 圆形图标：是
• 圆圈颜色：rgba(122,105,230,0.3)
• 图像/图标放置：顶部
• 使用图标字体大小：32px

悬停图标设置

在悬停时修改图标和圆圈颜色。

• 图标颜色：#ff758e
• 圆圈颜色：rgba(255,117,142,0.29)

标题文字设置

继续更改文本设置。

• 标题字体：Roboto
• 标题字体粗细：粗体
• 标题文本对齐：居中
• 标题文字大小：18px
• 标题行高度：1.7em

正文设置

并修改正文设置。

• 正文字体：Open Sans
• 正文对齐方式：居中
• 正文文字大小：14px
• 车身线高：1.8em

浆纱

我们还略微缩小了不同屏幕尺寸的模块尺寸。

• 宽度：74%（桌面），85%（平板电脑和手机）
• 模块对齐：居中

间距

我们也会添加一些自定义填充。

• 顶部填充：30px
• 底部填充：40px
• 左填充：20px
• 右填充：20px

边界

继续向 Blurb 模块的每个角添加“10px”。

默认框阴影

最重要的是，添加一个微妙的框阴影。

• 框阴影模糊强度：70px
• 阴影颜色：rgba(122,105,230,0.3)

悬停框阴影

更改悬停时的框阴影颜色以使其与悬停图标和圆圈颜色匹配。

• 阴影颜色：rgba(255,117,142,0.29)

克隆 Blurb 模块两次并在剩余列中放置重复项

完成自定义 Blurb 模块后，您可以继续克隆它两次。 将重复项放在剩余的两列中。

添加第 2 行

列结构

对于最后一个示例，我们需要一个单独的行。 选择以下列结构：

浆纱

在不添加任何模块的情况下，打开行设置并在设计选项卡中更改大小设置。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：1440px
• 使用自定义装订线宽度：是
• 天沟宽度：1

克隆上一行中的 Blurb 模块并放置在第 1 列中

然后，克隆前一行中的一个 Blurb 模块，并将副本放置在第二行的第一列中。

更改尺寸

在新的 Blurb 模块的大小设置中修改宽度，完成后，您将完成一般步骤！

• 宽度：100%（桌面），85%（平板电脑和手机）

重新创建示例 #1

默认变换比例

现在我们已经完成了所有一般步骤，我们可以开始关注不同的示例以及如何使用 Divi 的变换和悬停选项来实现它们。 正如您在上面的 GIF 中所注意到的，第一个示例在悬停时增加了模块的大小。 为此，请确保所有屏幕尺寸的变换比例值保持“100%”。

• 底部：100%（台式机、平板电脑和手机）
• 右：100%（台式机、平板电脑和手机）

悬停变换比例

在悬停时修改变换比例值以创建扩展效果。

• 底部：132%
• 正确：132%

重新创建示例 #2

默认变换旋转

进入第二个例子！ 我们将创建一个水平翻转效果，您可以在上面的 GIF 中看到。 为此，我们需要处理变换旋转值。 在旋转变为 0deg 之前，我们使用了可能的“最高”值。 这将允许发生翻转效果。

• 右：359.9deg

悬停变换旋转

启用变换旋转选项的悬停选项并添加“0deg”。 我们基本上做的是允许模块进行 360 度翻转（技术上为 359.9）。

• 右：0度

过渡

我们还将增加高级选项卡的过渡持续时间以创建平滑过渡。

• 转换持续时间：1000ms

重新创建示例 #3

默认变换旋转

对于第三个示例，我们将执行与前一个示例中几乎完全相同的操作，但不是进行水平翻转，而是创建垂直翻转。

• 中心：359.9deg

悬停变换旋转

确保在悬停时将已修改的值更改回“0deg”。

• 中心：0度

过渡

再次，在过渡设置中增加过渡持续时间。

• 转换持续时间：1000ms

重新创建示例 #4

默认变换比例

继续下一个也是最后一个例子！ 首先转换模块的比例，但要确保模块在较小的屏幕尺寸上保持完整。

• 底部：150%（台式机）、100%（平板电脑和手机）
• 右：150%（桌面）、100%（平板电脑和手机）

悬停变换比例

更改悬停时的变换比例以允许模块回落到桌面上的位置。

• 底部：100%
• 正确：100%

默认变换旋转

继续更改变换旋转值。 同样，通过相应地修改值，确保模块在较小的屏幕尺寸上保持完整。

• 左：322deg（桌面），0deg（平板电脑和手机）
• 右：59deg（桌面），0deg（平板电脑和手机）

悬停变换旋转

通过将您添加的值替换为“0deg”，让模块落入悬停位置。

• 左：0度
• 右：0度

默认变换倾斜

还要修改变换倾斜值。

• 底部：22deg（桌面），0deg（平板电脑和手机）
• 右：22deg（桌面），0deg（平板电脑和手机）

悬停变换倾斜

在悬停时恢复默认值。

• 底部：0度
• 右：0度

过渡

最后但并非最不重要的是，在过渡设置中增加过渡持续时间。

• 转换持续时间：500ms

克隆第 1 列中的 Blurb 模块四次并在剩余列中放置重复项

完成过渡设置后，您可以继续克隆 Blurb 模块四次。 将重复项放在剩余的列中，您就完成了！

最后的想法

在本教程中，我们向您展示了如何创造性地结合使用 Divi 的变换和悬停选项。 更具体地说，我们重新创建了四​​个不同的示例，向您展示了如何使 Blurb 模块更具交互性，同时在较小的屏幕尺寸上也保持所需的结果。 如果您有任何问题或建议，请务必在下方评论区留言！