如何使用 WordPress 在 Elementor 中添加图像悬停效果

您是否正在寻找一种在 WordPress 中添加图像悬停效果的简单方法? 如果是这样,Elementor 插件的图像悬停效果正是您正在寻找的。 它使用简单,并提供多种 Elementor 悬停效果可供选择。

这些可以帮助您将重要信息添加到图像中,例如位置、价格、可用性等。 它确实为您的图像开辟了一个新的定制水平。

今天,我将演示如何在 WordPress 中使用 Elementor 添加图像效果。

WordPress中的图像悬停效果是什么?

图像悬停效果是一种交互式元素,可让您以时尚的方式显示有关图像的附加信息。 有多种悬停效果可供选择,它们不会减慢您的网站速度或扰乱您的设计。

通常,动画会导致某种形式的减速,但这些 CSS 效果并非如此。

因此,它们非常适合每个网站的需求。

它们有多种用途。 例如,如果您的网站专注于摄影,您可以添加图像悬停效果以显示照片的拍摄地点、日期或其他内容。

另一个很好的用途是产品信息。 您可以添加产品的图像并使用悬停效果来显示它何时可供订购、其价格或其他内容。

唯一的限制是你的创造力。

如何添加 Elementor 悬停效果

第 1 步:安装图像悬停效果

图像悬停效果 – Elementor 插件 插件很棒。 顾名思义,它是一个插件 Elementor 网站建设者, 这是 WordPress 最好的网站构建器之一。 因此,您必须同时安装两者。

该插件提供 40 种不同的悬停效果,包括淡入淡出、缩放、模糊等。 您可以添加标题、描述、设置标题标签、添加图标、链接到其他页面(非常适合产品或附属公司)等等。

如果您想在页脚或侧边栏区域查看效果,它还带有一个新的小部件,您可以利用它。

让我们首先单击插件并选择左侧管理面板上的添加新选项。

添新

在可用的搜索框中搜索图像悬停效果。 这将提取您可能会发现有用的其他插件。

图像悬停效果

向下滚动,直到找到 Image Hover Effects – Elementor Addon 插件,然后单击“立即安装”按钮并激活插件以供使用。

现在安装

如果您没有安装 Elementor Website Builder 插件,您将在每个页面的顶部看到一条通知,告诉您安装它。 这是必需的.

安装 Elementor

第 2 步:添加图像悬停效果小部件

幸运的是,添加悬停效果真的很容易。 需要明确的是,您不能简单地向现有图像添加悬停效果。 相反,您需要在 Elementor 编辑器中使用适当的小部件重新插入图像。

因此,您可能需要进行一些媒体库挖掘才能找到较旧的图像,但这应该不会太糟糕。 这意味着如果您想在整个网站中添加此功能,将需要相当长的时间。

转到您网站上的任何现有帖子或页面。 您还可以创建一个新的进行测试。 进入后,单击“使用 Elementor 编辑”按钮。

使用 Elementor 进行编辑

这将打开 Elementor 编辑器。 在左侧,搜索图像悬停效果并将小部件拖到页面或帖子中。

图像悬停效果

您现在可以开始自定义小部件,所有设置都可以在左侧找到。

第 3 步:设置图像悬停效果

完成这些设置只需要一两分钟,而且它们很容易让任何人理解。

第一个选项是效果。 正如我之前所说,有 40 个可供选择,它们出现在一个下拉框中。 选择您要使用的那个。

笔记: 您可以通过选择它并将鼠标悬停在您添加到帖子或页面的小部件上来查看效果。 如果您有时间,我建议您全部测试一下。

添加效果

下一个选项是添加实际图像。 只需单击它并从您的媒体库中选择一个图像。 在它下面,您可以选择图像的大小。

添加图片

接下来,您可以添加标题和标题标签。 标题是标题文本中出现的内容,而标题标签是标题的类型(H2、H3、H4 等)。

添加标题

之后,您可以找到说明。 在这里你可以添加很多额外的信息,但我个人建议保持简短和重点。 输入描述信息。

输入描述

接下来是图标设置。 您可以在此处为标题添加图标。 它只会出现在(标题左侧)或之后(标题右侧)。

笔记: 如果您将鼠标悬停在图像上时没有看到该图标,那是因为最近的 Elementor 更新。 要解决此问题,请单击 Elementor > 设置 > 高级并启用加载 Font Awesome 4 支持。

添加图标

最后是选项的链接。 这就是您可以将图像转换为指向另一个页面或网站的链接的方式。 它非常适合销售页面或附属链接。

如果您不想添加链接,请随意将其留空。

添加链接

这涵盖了所有设置,单击保存或更新按钮,您可以在您的网站上查看它。

图像悬停效果

恭喜您在 WordPress 中使用 Elementor 添加图像悬停效果。

每个图像都不需要悬停效果

像大多数效果一样,你可以拥有太多的好东西。 悬停效果可以在您网站的许多区域提供帮助,但值得指出的是,它也可能让一些访问者感到厌烦。

例如,用户在向下滚动时将鼠标留在页面中间是很常见的。 当他们向下浏览页面时,他们可能会无意中触发悬停效果。 虽然移动鼠标很简单,但它可能会很烦人。

将图像转换为链接也是如此。 访问者可能认为单击图像可能会放大或放大图像。被定向到另一个页面可能会非常麻烦。

您只需要为您的网站找到合适的平衡点,并记住倾听用户反馈并研究您的页面是如何被交互的。

与效果使用保持一致

一旦你找到了成功的完美公式,你就需要保持一致。

对于不知道哪些图像会有附加信息的访问者来说,这可能会非常令人困惑。 事实上,有些人甚至可能不知道您的网站上有悬停效果。

要解决此问题,您可以尝试在图像之前或下方添加某种指示以提示访问者。 它确实可以帮助您充分利用该功能。

您发现 Image Hover Effects Elementor Addon 使用起来有多容易? 你在你的网站上使用悬停效果是为了什么?

查看  如何在 WordPress 中添加带有加密货币小部件的代码

类似文章