WordPress divi主题

如何使用 Divi 更改悬停时的图像

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

悬停效果是用户可以与网站进行的一些最简单的微交互。 Divi 主题有一组非常简单的悬停效果,您可以使用它们为访问您网站的每个人创建引人入胜的用户体验。 Divi 中这些效果中更引人注目和有用的一个是能够在用户将光标悬停在图像上时更改图像。 从电子商务商店到投资组合,甚至只是为您的用户带来有趣的惊喜,在悬停时更改图像可以为您的网站添加一个全新的维度。 让我们深入了解一下 Divi 是多么容易做到这一点。

google广告开户

预览

桌面

移动的

加载 Divi Visual Builder

我们需要做的第一件事是加载可视化构建器。 在本教程中,我们将使用 Dog Groomers 布局包作为示例。 您也可以将它与您设计或加载的任何布局一起使用。

加载您的页面或布局包

要加载包,当您在 Divi 中打开新页面时,选择 选择预制布局,然后搜索“狗美容”。

添加预制布局以在悬停时更改图像

您也可以通过点击 紫色 + 图标 在 Divi Builder 的底部并做同样的事情。

预制布局

查找您的图像

当您在 Divi Builder 中时,只需找到要添加效果的任何图像。 虽然每个效果都将单独添加,但您绝对可以将悬停效果添加到页面上的任意数量的元素。

我们要注意,您可以在 任何包含图像的元素. 此效果不仅限于 Divi 图像模块。 因此,无论您使用的是 Blurb 还是 CTA 甚至是 Column 背景,您都可以启用此悬停效果来更改图像。

悬停时更改的doggo图像

打开模块设置

做出决定后,单击齿轮图标并输入 模块设置 对于包含图像的任何模块。 在这个布局包的例子中,我们要应用悬停效果的图像是第一行最右边一列的背景。 但正如我们之前所说,它可以是任何以任何方式使用图像的元素。 Divi 的悬停效果非常强大。

WordPress divi主题

行和列设置以在悬停时更改图像

在设置中找到图像

一旦你在正确的 柱子 设置,请务必选择 内容 标签。 滚动直到找到 背景 选项。

背景

在下面 背景, Divi 让您可以选择使用纯色、渐变、图像或 .mp4 格式的视频。 虽然悬停效果可以应用于任何这些,但我们正在 图片 选项卡,左起第三个。

悬停在图像上

启用悬停效果

将鼠标移到单词上 背景 (较小的副标题),并找到 箭头图标 在出现的选项中。 这是切换 Divi 悬停效果. 这个相同的选项将出现在 Divi Builder 中您可以应用悬停效果的任何元素旁边/上方,而不仅仅是图像。 因此,对于其他设计也要记住这一点。

启用悬停

启用此功能后,将出现两个新选项卡。 左侧选项卡是显示没有交互的基本图像。 它也适用于移动设备,除非在 响应能力 设置。

启用悬停选项

选择你的新形象

当您将光标向下移动到图像上时,您将获得正常选项: 替换图像 或者 删除图像. 如果您选择垃圾桶图标,这将启用悬停效果,只有它会使图像消失。 因为我们想 改变 悬停的图像,而不是删除它,我们要么 单击图像本身 或者 齿轮图标.

fiverr建站WordPress程序员

两个选项

选择悬停(替换)图像

这样做将打开您的媒体库。 然后,您可以选择希望用户在将鼠标悬停在原始图像上时看到的新图像。

媒体库

您选择的任何图像现在都将显示在可视化构建器中以及列设置的悬停选项卡下。

新图片

独立站选品工具

检查原始图像的错误

我们始终建议确保原始图像也保持不变。 所以要验证,点击进入 左侧标签 并确保原始图像仍然存在。

原始图像

如果一切正常,那么您可以保存设置。 我们还尝试向用户指出,在行的列子设置中工作时,您必须确保单击 绿色保存复选标记 两次。 保存时看起来好像您的图像消失了,但这只是 Divi 将您带出列设置并返回行。

保存行设置

只需按下 绿色复选标记 再一次,你会一切准备就绪。 现在只需保存整个页面设置,您的更改就会生效并准备好让您的用户将鼠标悬停在上面!

高质量外链购买

请注意,Divi 可能不会在 Visual Builder 本身内呈现悬停效果。 这是因为其他任务使用构建器内部的悬停交互。 但是当你按下绿色 节省 按钮,更改将显示在您网站的前端。

最终结果

如果您已完成本教程的步骤,那么您的最终结果应该如下所示。

桌面

移动的

结论

Divi Builder 充满了强大的工具,任何人都可以使用这些工具来制作有趣的交互式网站。 无论您是想为客户展示之前和之后,一件艺术品的流程时间表,还是只是为碰巧将鼠标悬停在单个图像上的用户作为复活节彩蛋进行有趣的交换,Divi 为您提供了这种能力只需点击几下。 并且通过悬停效果来更改任何元素上的图像,而不仅仅是图像或图库模块,您可以使用您喜欢的元素以您的正常样式设计您的网站,而无需更改使您的设计独特的因素以适应专门的模块。 玩得开心!

通过在悬停时更改图像,您能够完成哪些有趣的交互? 让我们在评论中知道!

文章特色图片由 AlexTanya / shutterstock.com

JasperAI 10000字免费额度试用

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