WordPress divi主题

使用 Divi 在悬停时变换形状来装饰您的页面

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

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

创建交互式设计可以立即帮助提升任何网站的外观和感觉。 使用 Divi 的内置选项,您可以进行多次轮换并创建您的网站真正独一无二的效果。

google广告开户

在这篇文章中,我们将向您展示如何在悬停时使用变换形状来装饰您的页面。 我们将获得的结果侧重于桌面体验,但在较小的屏幕尺寸上也保持了简洁和用户友好的设计。

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下我们将从头开始重新创建的两个示例。

示例 #1

变换形状

示例 #2

变换形状

下载异形图像叠加层

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

让我们开始创作吧!

添加新部分

背景颜色

通过创建新页面或打开现有页面来吸引眼球。 添加一个常规部分,打开部分设置并添加一个完全黑色的背景颜色。

  • 背景颜色:#000000

变换形状

溢出

为了在本教程后面切断成形的图像覆盖,我们将通过向部分的主要元素添加一行 CSS 代码来确保没有超出部分容器的内容。

WordPress divi主题
overflow: hidden;

变换形状

添加新行

立柱结构

继续使用以下列结构添加新行:

变换形状

浆纱

在不添加任何模块的情况下,打开行设置并让行占据屏幕的整个宽度。

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

变换形状

将图像模块添加到行

上传异形图像叠加

是时候开始添加模块了! 我们需要的第一个模块是图像模块。 上传您可以在下载的文件夹中找到的第一个形状的图像叠加层。 您可以通过访问这篇文章、下载文件、打开 Illustrator 文件并根据您的需要自定义它们来找到更多形状的图像叠加层。 但是,如果您只想重新创建在这篇文章的预览中共享的示例,那么您在本文开头下载的文件夹就可以了。

变换形状

默认背景颜色

转到图像模块的背景设置并添加以下默认背景颜色:

  • 背景颜色:#6a00ff

变换形状

悬停背景颜色

使用以下颜色代码更改悬停时的背景颜色:

fiverr建站WordPress程序员
  • 背景颜色:#ffa216

变换形状

渐变背景

继续向图像模块添加渐变背景。

  • 颜色1:#ff2841
  • 颜色 2:rgba(255,255,255,0)
  • 渐变方向:168度
  • 结束位置:68%

变换形状

浆纱

转到设计选项卡并启用“强制全宽”选项。

变换形状

独立站选品工具

间距

我们还通过在间距设置中添加一些负上边距来隐藏部分形状的图像叠加层。 您会注意到,由于我们在教程开始时添加到部分的一行 CSS 代码,模块不会超过部分容器。

  • 最高边距:-22vw(台式机和平板电脑),0vw(手机)

变换形状

默认变换旋转

我们现在可以开始转换模块了! 将以下默认变换旋转设置添加到图像模块:

变换形状

悬停变换旋转

并在悬停时更改这些值以创建变形形状。

高质量外链购买
  • 左:250度
  • 中心:320度

变换形状

CSS ID

当悬停图像模块时,形状的图像叠加层将覆盖其顶部的所有其他模块。 为了避免这种情况,我们需要稍后在帖子上修改模块的 z-index 悬停。 为此,您需要将自定义 CSS 类添加到图像模块。

变换形状

过渡

最后但同样重要的是,我们通过在高级选项卡中增加过渡持续时间来创建平滑过渡。

  • 转换持续时间:950ms

变换形状

JasperAI 10000字免费额度试用

将文本模块 #1 添加到行

添加H2含量

我们需要的下一个模块是文本模块。 添加一些您选择的 H2 内容。

变换形状

H2 文本设置

然后,转到设计选项卡并修改 H2 文本设置。

  • 标题 2 字体:Didact Gothic
  • 标题 2 字体粗细:粗体
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文字大小:7vw
  • 标题 2 行高:0.9em

变换形状

间距

使用一些自定义边距值在此模块和图像模块之间创建重叠。

WordPress备份工具updrafplus
  • 最高边距:-68vw
  • 底边距:8vw
  • 左边距:29vw
  • 右边距:29vw

变换形状

将文本模块 #2 添加到行

添加内容

在前一个文本模块的正下方添加另一个文本模块,然后输入您选择的一些段落内容。

变换形状

文字设置

然后,转到设计选项卡并修改文本设置。

  • 文字字体:Open Sans
  • 文字颜色:#ffffff
  • 文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 文字行高:1.8em
  • 文本方向:中心

变换形状

间距

还添加一些自定义边距值。

  • 底部边距:2vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 左边距:30vw(桌面),10vw(平板电脑和手机)
  • 右边距:30vw(桌面),10vw(平板电脑和手机)

变换形状

将分隔模块添加到行

能见度

我们需要的下一个也是最后一个模块是 Divider Module。 确保启用了“显示分隔线”选项。

变换形状

颜色

然后,转到设计选项卡并更改分隔线的颜色。

变换形状

浆纱

同时修改大小值。

  • 分隔线重量:7px
  • 宽度:15%
  • 模块对齐:中心

变换形状

间距

并添加一些自定义底部填充。

变换形状

克隆整个部分

继续第二个例子! 克隆您刚刚完成的部分。

变换形状

更改图像模块

上传新的形状图像叠加

我们需要做一些改变,从形状图像叠加开始。 继续上传第二个形状的图像叠加层,您可以在本文开头下载的文件夹中找到它。

变换形状

更改默认背景颜色

然后,转到图像模块的背景设置并更改默认背景颜色。

  • 背景颜色:#2d007c

变换形状

更改悬停背景颜色

更改悬停背景颜色。

  • 背景颜色:#008089

变换形状

更改渐变背景

随着渐变背景。

  • 颜色1:#0c0c0c
  • 颜色 2:rgba(255,255,255,0)
  • 渐变方向:168度
  • 结束位置:68%

变换形状

更改默认变换旋转设置

我们也在改变变换效果。 转到变换设置并更改默认变换旋转值。

  • 左:270度
  • 中心:359度

变换形状

更改悬停变换旋转设置

在悬停时修改这些相同的值。

  • 左:192度
  • 中心:280度
  • 右:15度

变换形状

将自定义代码添加到页面

打开页面设置

现在,这篇文章的最后一部分确保当它被悬停时,变换形状保持在所有其他模块的下方。 打开页面设置。

变换形状

添加 CSS 代码

然后转到高级选项卡并添加以下 CSS 代码。

.hover-state:hover {
z-index: -99; }

我们正在使用我们在整个教程中分配给各个部分的 CSS 类。

变换形状

预览

现在我们已经完成了所有步骤,让我们来看看最终的结果。

示例 #1

变换形状

示例 #2

变换形状

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的转换选项发挥创意。 更具体地说,我们使用带有形状图像叠加层的图像模块来创建变换的背景形状。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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