我们都喜欢新的转换选项。 它们帮助我们创造出令人惊叹的设计，并实时了解我们所做的改变。 当与悬停选项结合使用时，您绝对可以创建一些令人惊叹的效果。 在本教程中，我们将向您展示如何通过结合 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%（台式机、平板电脑和手机）
悬停变换比例
修改悬停时的变换比例值以创建扩展效果。
重新创建示例 #2
默认变换旋转
继续第二个例子！ 我们将创建一个水平翻转效果，您可以在上面的 GIF 中注意到。 为此，我们需要使用变换旋转值。 在旋转变为 0 度之前，我们正在使用可能的“最高”值。 这将允许发生翻转效果。
悬停变换旋转
启用变换旋转选项的悬停选项并添加“0度”。 我们基本上在做的是让模块进行 360 度翻转（技术上，359.9）。
过渡
我们还将增加高级选项卡的过渡持续时间以创建平滑过渡。
- 转换持续时间：1000ms
重新创建示例 #3
默认变换旋转
对于第三个示例，我们将执行与之前示例中几乎完全相同的操作，但我们创建的不是水平翻转，而是垂直翻转。
悬停变换旋转
确保在悬停时将已修改的值更改回“0deg”。
过渡
并且，再次增加转换设置中的转换持续时间。
- 转换持续时间：1000ms
重新创建示例 #4
默认变换比例
继续下一个也是最后一个示例！ 首先转换模块的比例，但要确保模块在较小的屏幕尺寸上保持不变。
- 底部：150%（台式机）、100%（平板电脑和手机）
- 右：150%（台式机）、100%（平板电脑和手机）
悬停变换比例
更改悬停时的变换比例，以使模块回到桌面上的位置。
默认变换旋转
继续更改变换旋转值。 同样，通过相应地修改值来确保模块在较小的屏幕尺寸上保持不变。
- 左：322 度（桌面），0 度（平板电脑和手机）
- 右：59 度（桌面）、0 度（平板电脑和手机）
悬停变换旋转
通过将您添加的值替换为“0deg”，允许模块落入悬停位置。
默认变换倾斜
同时修改变换倾斜值。
- 底部：22 度（桌面）、0 度（平板电脑和手机）
- 右：22 度（桌面）、0 度（平板电脑和手机）
悬停变换倾斜
在悬停时恢复默认值。
过渡
最后但同样重要的是，增加过渡设置中的过渡持续时间。
- 转换持续时间：500ms
将第 1 列中的 Blurb 模块克隆四次并在剩余列中放置重复项
完成过渡设置后，您可以继续克隆 Blurb 模块四次。 将重复项放在其余列中，您就完成了！
最后的想法
在本教程中，我们向您展示了如何创造性地结合使用 Divi 的变换和悬停选项。 更具体地说，我们重新创建了四个不同的示例，向您展示如何使 Blurb 模块更具交互性，同时在较小的屏幕尺寸上也保持所需的结果。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
