WordPress divi主题

使用 Divi 的新图像替换悬停选项获得创意

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

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

Divi 的新图像替换悬停选项使您的项目具有全新的创造力。 在这篇文章中,我们将向您展示如何创建一个漂亮的部分,其中的图像在悬停时会发生变化。 我们希望这种设计能激发您使用 Divi 的图像替换悬停选项创建自己的创意部分。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载图像替换布局

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

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

间距

首先创建一个新页面或向现有页面添加一个新部分。 在添加行之前,调整部分的间距设置。

  • 上下边距:2vw
  • 左右边距:2vw

WordPress divi主题

边界

然后,添加一些边界半径。

添加新行

立柱结构

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

背景

在添加任何模块之前,添加淡鲑鱼渐变背景。

  • 背景:渐变
  • 渐变色 1:淡鲑鱼 #f4e9de
  • 渐变色 2:更浅的鲑鱼色 #fff0e8

浆纱

继续调整行的宽度。

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

间距

最后,调整间距。

  • 顶部填充:
  • 左填充:
  • 右填充:
    • 台式机:7vw
    • 平板电脑+手机:5vw

fiverr建站WordPress程序员

将文本模块添加到第 1 列

添加H2含量

是时候开始添加模块了! 将文本模块添加到第 1 列并插入您选择的一些 H2 内容。

标题文字

转到设计选项卡并相应地设置 H2 文本设置的样式:

  • 标题文本级别:H2
  • H2字体:安妮用你的望远镜
  • H2 字体粗细:粗体
  • H2 文本对齐:居中
  • H2 文字颜色:棕色 #793715
  • H2 文字颜色:
    • 台式机:7.2vw
    • 平板电脑:12vw
    • 电话:11vw

浆纱

接下来修改桌面上的宽度。

独立站选品工具
  • 宽度:
    • 台式机:45vw
    • 平板电脑+手机:100%

转换

最后但同样重要的是,使用变换设置旋转文本并更改其位置。

  • 变换旋转:
  • 变换翻译:
    • x轴:-10vw
    • y轴:19vw

将第一个图像模块添加到第 1 列

添加透明插图

在文本模块正下方添加一个新图像模块并上传您选择的插图。 您可以通过下载本文开头的压缩文件夹找到我们在本教程中使用的图像。

高质量外链购买

浆纱

现在,强制图像大小为全角。

间距

然后,调整间距设置。

  • 最高边距:
  • 左边距:
    • 桌面:-2vw
    • 平板电脑+手机:-36vw
  • 左右填充:
    • 台式机:10vw
    • 平板电脑+手机:34vw

JasperAI 10000字免费额度试用

将第二个图像模块添加到第 1 列

添加透明插图

在第一个图像模块的正下方,添加另一个。 插入您选择的插图。

浆纱

强制模块为全角。

间距

然后,调整间距设置。

WordPress备份工具updrafplus
  • 最高边距:
    • 桌面:-2vw
    • 平板电脑+手机:-10vw
  • 左边距:
  • 左右填充:
    • 台式机:7vw
    • 平板电脑+手机:35vw

将第三个图像模块添加到第 1 列

添加图像

将另一个图像模块添加到列并插入插图。

浆纱

然后,强制模块全宽。

间距

最后,调整间距。

  • 最高边距:
  • 左边距:
    • 桌面:-13vw
    • 平板电脑+手机:10vw
  • 左右填充:
    • 台式机:7vw
    • 平板电脑+手机:35vw

将第 4 个图像模块添加到第 1 列

添加图像

第 1 列中的最后一个模块是另一个图像模块。 插入插图。

浆纱

强制模块为全角。

间距

然后,调整间距。

  • 最高边距:
    • 台式机:3vw
    • 平板电脑+手机:-15vw
  • 左边距:
    • 桌面:-3vw
    • 平板电脑+手机:30vw
  • 左右填充:
    • 台式机:10vw
    • 平板电脑+手机:35vw

转换

最后但同样重要的是,旋转插图。

将第一个文本模块添加到第 2 列

添加内容

进入下一栏! 添加带有您选择的一些 H3 内容的文本模块。

添加链接

然后,添加到模块的链接。

背景

转到背景设置,然后添加背景颜色。

  • 背景颜色
  • 背景颜色:棕色 #793715

标题文字

然后,在设计选项卡中设置 H3 文本的样式。

  • 标题文本级别:H3
  • H3字体:安妮用你的望远镜
  • H3 颜色:白色#ffffff
  • H3 字体大小:
    • 台式机:2vw
    • 平板电脑:5vw
    • 电话:6vw

浆纱

现在,调整大小设置。

  • 宽度:33%
  • 模块对齐:中心

间距

然后,在不同的屏幕尺寸上添加一些间距值。

  • 底边距:1vw
  • 顶部填充:
    • 台式机:0.5vw
    • 平板电脑+手机:2.3vw
  • 底部填充:

边界

继续添加一些边界半径。

  • 圆角:1vw 所有角

盒子阴影

最后,添加一个盒子阴影。

  • 盒子阴影:第一个选项
  • 水平位置:7px
  • 模糊强度:25px

将第一个图像模块添加到第 2 列

添加图片

第 2 列中我们需要的下一个模块是图像模块。 上传两张不同的图片:一张用于静态,一张用于悬停。

  • 静态:第一张图片
  • 悬停:第二张图片

浆纱

强制图像为全角。

间距

然后,调整间距值。

  • 最高边距:
    • 桌面:-2vw
    • 平板电脑+手机:20vw
  • 底边距:
  • 左边距:

边界

接下来添加圆角。

  • 圆角:10 px 所有角

盒子阴影

也给图像一个微妙的盒子阴影。

  • 盒子阴影:第二种选择
  • 垂直位置:20px
  • 模糊强度:80px

转换

最后,调整悬停时的变换比例值。

  • 悬停时变换比例:110%

第 2 列中的重复文本和图像模块

克隆这两个模块并以正确的顺序放置副本。

调整第 2 列中的第 2 个文本模块

更改内容和链接

更改重复文本模块中的内容。

调整第 2 列中的第 2 个图像模块

更改图像

更改静态和悬停设置中的图像。

克隆列 2

删除第 3 列并复制第 2 列

返回行设置并删除第三列。 然后,复制第二列。

调整第 3 列中的第一个文本模块

更改内容和链接

复制第 2 列后,调整第 3 列第 1 个文本模块中的文本和链接。

调整第 3 列中的第一个图像模块

更改图像

更改图像模块中的图像。

间距

然后,调整间距。

  • 最高边距:
    • 桌面:-2vw
    • 平板电脑+手机:11vw
  • 底边距

调整第 3 列中的第二个文本模块

更改内容和链接

更改第 3 列中最后一个文本模块的文本和链接。

调整第 3 列中的第二个图像模块

更改图像

更改最后一个图像模块的静态和悬停图像。

间距

最后,调整图片模块的间距,大功告成!

  • 最高边距:
    • 桌面:-3vw
    • 平板电脑+手机:7vw

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

移动的

结论

在这篇文章中,我们向您展示了如何使用 Divi 的新图像替换悬停选项创建设计。 此功能可以带来许多创造性的可能性。 我们希望您能在自己的项目中使用它们。 请记住对静态图像和悬停图像使用相同的图像尺寸。 如果您有任何问题或建议,请随时将它们留在下面的评论部分!

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