我们都喜欢新的转换选项。 它们帮助我们创造出令人惊叹的设计,并实时了解我们所做的改变。 当与悬停选项结合使用时,您绝对可以创建一些令人惊叹的效果。 在本教程中,我们将向您展示如何通过结合 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 模块更具交互性,同时在较小的屏幕尺寸上也保持所需的结果。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!