WordPress divi主题

如何在悬停时切换带有动画 Gif 的背景图像

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

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

在悬停时使用动画 GIF 切换背景图像可能是一种为您的内容带来活力的好方法,同时还为产品或服务提供了一个很酷的插图。 例如,如果您正在宣传特定软件产品的功能,动画 GIF 可以帮助说明产品功能的各个方面(我们在优雅主题中为产品这样做)。 但是,您可能希望显示该功能的静止屏幕截图,而不是最初显示该 GIF,该屏幕截图在悬停时替换为动画版本(或 GIF)。

google广告开户

在本教程中,我将向您展示如何创建一个在悬停时使用动画 GIF 切换背景(静止)图像的简介。 我们将首先介绍如何使用 Snagit(屏幕捕获软件)创建屏幕截图和 GIF。 然后我们将讨论如何将这些背景图像实现为简介,以便它们在悬停时切换。 使用 Divi 的背景悬停选项,图像的实际切换非常容易。

这种设计将有助于保持设计静态,然后在用户与内容交互时吸引他们。

让我们开始吧。

抢先看

悬停时的动画 gif

悬停时的动画 gif

免费下载悬停布局上的 GIF 背景

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

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖动到 Divi Builder 处于活动状态的新页面中。

让我们来看看教程好吗?

你需要什么开始

WordPress divi主题

订阅我们的 Youtube 频道

要开始,您将需要以下内容:

  1. Divi 主题已安装并处于活动状态
  2. 屏幕捕捉软件(或工具组合),可让您截取屏幕截图、录制屏幕视频和创建 GIF。 在本教程中,我将使用 Snagit,主要是因为它是我每天在博客文章和教程中使用的一体化解决方案。
  3. 在前端从头开始构建的新页面(可视化构建器)

之后,您将有一个空白画布开始在 Divi 中构建一些悬停选项卡。

第 1 部分:创建屏幕截图和 GIF

对于这个设计,我们想要创建一个屏幕截图来显示为一个模糊模块的静止背景图像。 然后,我们想创建一个 GIF(动画图像),让静止的背景图像栩栩如生,并简要说明产品的工作原理。 诀窍是创建看起来足够相似的图像和 GIFS,以便在悬停时切换一个图像与另一个图像时可以平滑过渡。

一旦创建了两个图像,我们就可以使用静止图像作为初始背景图像。 然后我们可以在悬停在blurb模块上时将背景图像切换为gif图像。

为了创建屏幕截图和 GIF,我将使用 Snagit。 虽然它不是免费软件,但它非常易于使用,它允许您在一个地方创建屏幕截图、录制屏幕并将屏幕录制转换为 GIF。

创建截图静止图像

要创建屏幕截图,请打开 Snagit 并打开捕获框。 然后确保通过选择屏幕区域来选择捕获图像。 这将允许您拖动屏幕上的某个区域以捕获为图像。 要初始化屏幕捕获,请单击捕获按钮。

悬停时的动画 gif

然后单击并拖动要捕获为图像的屏幕区域周围的捕获区域。

悬停时的动画 gif

fiverr建站WordPress程序员

将图像保存到您的计算机。 然后再次打开 Snagit Capture 框并选择通过选择屏幕区域来捕获视频。 要初始化屏幕捕获,请单击捕获按钮。

悬停时的动画 gif

然后单击并拖动您要捕获并录制为视频剪辑的屏幕区域周围的捕获区域。 为了在静止图像和 gif 之间创建更无缝的过渡,您需要为视频捕获与图像相同的区域(或尽可能接近)。

悬停时的动画 gif

准备好后,单击录制按钮并进行您想要录制的演示。

独立站选品工具

悬停时的动画 gif

完成后,单击停止以停止录制。 然后您可以在 Snagit 编辑器中编辑视频剪辑。 完成编辑后,单击视频旁边的 Gif 按钮以从视频中创建 Gif。

悬停时的动画 gif

在 Create Gif 弹出窗口中,根据需要修改输出设置。 确保启用循环,以便您的 gif 将重复。 然后单击创建按钮。

悬停时的动画 gif

高质量外链购买

创建 gif 文件后,将其保存到您的计算机。

现在您已经准备好将静态图像和 gif 图像添加到 Divi 中的设计中。

第 2 部分:创建一个在悬停时使用动画 Gif 图像切换背景图像的模糊

如果您还没有这样做,请创建一个新页面并部署 Divi Builder 以在前端构建。 然后创建一个具有两列行的新常规部分。

在第 1 列中,添加一个简介模块。

悬停时的动画 gif

JasperAI 10000字免费额度试用

然后更新内容设置如下:

正文:“正文在此处”
使用图标:是
图标:云(见截图)

悬停时的动画 gif

添加默认背景图像

接下来,将默认背景图像添加到简介中,如下所示:

背景图片:上传您创建的背景图片(静止截图)。
背景图像大小:适合(这将确保整个图像保持在视图中)
背景图像位置:顶部中心(这将使图像保持在简介的顶部)

WordPress备份工具updrafplus

悬停时的动画 gif

添加悬停背景 Gif 图像

准备好初始背景图像后,部署背景悬停选项并选择悬停选项卡。 然后添加 Gif 图像作为悬停状态下的新背景图像。

悬停时的动画 gif

设置 Blurb 模块的样式

通过更新以下设计设置继续设置简介模块的样式:

图标颜色:#6bb962
圆圈图标:是
圆圈颜色:#ffffff
文字对齐:居中
标题字体:Lora
标题文字大小:34px
填充:顶部 50%,底部 5%,左侧 3%,右侧 3%

这种设计的真正关键是填充。 为了将背景放置在简介内容之上,您需要添加大约 50% 的顶部填充。 而且由于背景图像大小设置为“适合”并且位置设置为“顶部中心”,因此它将很好地位于内容上方以响应浏览器宽度。

悬停时的动画 gif

最后,在悬停时给简介一个框阴影,如下所示:

盒子阴影:见截图
盒子阴影垂直位置:0px
盒子阴影模糊强度:0px(默认),24px(悬停)

悬停时的动画 gif

最后结果

这是最终结果。

悬停时的动画 gif

这是平板电脑和手机上的设计。

悬停时的动画 gif

悬停时的动画 gif

以下是带有不同屏幕截图和颜色的附加简介的样子。

悬停时的动画 gif

最后的想法

如果您不熟悉在您的网站上使用 GIF,您绝对应该考虑一下。 它们可以真正使您的内容栩栩如生,并为您的访问者提供非常有用的插图。 而且,通过 Divi 的背景悬停选项,您可以轻松地在悬停时切换带有 GIF 的静止图像。 该解决方案可以预先提供较少分散注意力的设计,在与您的内容交互时真正吸引用户。 希望您发现它对您的下一个项目有用。

我期待在评论中收到您的来信。

干杯!

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