WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

预览

在我们深入教程之前,让我们快速看一下结果。

变换悬停

一般步骤

添加新部分

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

变换悬停

添加第 1 行

立柱结构

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

变换悬停

浆纱

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

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

变换悬停

WordPress divi主题

间距

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

  • 上边距:150px
  • 底部填充:150px

变换悬停

将 Blurb 模块添加到第 1 列

添加内容

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

变换悬停

选择图标

选择一个图标继续。

变换悬停

背景颜色

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

  • 背景颜色:#ffffff

变换悬停

默认图标设置

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

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

变换悬停

fiverr建站WordPress程序员

悬停图标设置

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

  • 图标颜色:#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)

变换悬停

悬停框阴影

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

JasperAI 10000字免费额度试用
  • 阴影颜色:rgba(255,117,142,0.29)

变换悬停

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

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

变换悬停

添加第 2 行

立柱结构

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

变换悬停

WordPress备份工具updrafplus

浆纱

在尚未添加任何模块的情况下,打开行设置并在设计选项卡中更改尺寸设置。

  • 使用自定义宽度:是
  • 单位: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 模块更具交互性,同时在较小的屏幕尺寸上也保持所需的结果。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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