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

Rifat Jan 6, 2023

寻找一种在 WordPress? 中实现图像悬停效果的简单方法 在这种情况下, Elementor插件的图像悬停效果正是您所需要的。 它易于使用,并提供一系列 Elementor 悬停效果。

这些可以让您向照片添加位置、价格和可用性等信息。 它开辟了一个全新的图像修改程度。

今天我将教如何使用Elementor在 WordPress 中创建图像效果。

什么是图像悬停效果?

图像悬停效果是一种动态功能,可以优雅地呈现有关图片的附加信息。 有大量的悬停效果可供选择,它们不会减慢您的网站速度或扰乱其布局。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

在大多数情况下,动画会导致速度变慢,但是这些 CSS 效果并非如此。

因此,它们满足任何网站的要求。

它们有一系列的应用。 例如,如果您的网站专注于摄影,您可以添加图片悬停效果以显示位置、日期或其他相关信息。

另一个有用的应用是产品信息。 您可以上传产品图片并利用悬停效果显示其价格、可用性或其他信息。

唯一的限制是您的想象力。

添加 Elementor 悬停效果

安装图像悬停效果

Image Hover Effects - Elementor Addon 插件令人惊叹。 顾名思义,它是 Elementor Website Builder 的扩展,即使不是最伟大的 WordPress 网站构建器,也是其中之一。 因此,两者都必须安装。

该插件提供四十种不同的悬停效果,包括淡入淡出、缩放和模糊等。 除其他事项外,您可以包括标题、描述、标题标签、图标和指向其他页面的链接(适用于项目或附属机构)。

它还包括一个新的小部件,您可以使用它在网站的底部或侧边栏中显示效果。

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

可以使用提供的搜索框搜索图像悬停效果。 这将显示可能有用的额外插件。

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

如果您没有安装 Elementor Website Builder 插件,每个页面的顶部都会显示一条消息,指示您安装。 有必要。

添加图像悬停效果小部件

幸运的是,创建悬停效果很简单。 需要澄清的是,简单地向现有图像添加悬停效果是不可能的。 相反,您需要使用相应的 Elementor 小部件重新插入图片。

因此,您可能需要翻阅媒体库才能找到较旧的图像,但这应该不会太困难。 这意味着将此功能添加到您的整个网站将花费大量时间。

导航到您网站上的任何现有文章或页面。 此外,您可以构建一个新的用于测试。 在那里单击“使用 Elementor 编辑”按钮。

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

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

设置图像悬停效果

浏览这些选项应该不会超过一两分钟,而且任何人都可以理解它们。

第一选择——特效。 如前所述,有四十个选项显示在下拉菜单中。 选择您希望雇用的人。 通过选择效果并将鼠标悬停在您添加到帖子或页面的小部件上,您可以观察其效果。 如果您有时间,我建议您对每一个进行测试。

您可以做的下一件事是添加图像本身。 您所要做的就是单击它并从您的媒体库中选择一张图片。 您可以选择其下方图像的大小。

下一步是添加标题和标题标签。 标题是将显示在标题文本中的内容,标题标签是它将显示为哪种标题(H2、H3、H4 等)。

之后会有说明。 您可以在此处添加很多额外信息,但我认为最好保持简短并切中要点。 输入描述信息。

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

如果将鼠标悬停在图像上时图标未显示,那是因为 Elementor 最近已更新。 要解决此问题,请转到 Elementor > Settings > Advanced 并选中 Load Font Awesome 4 旁边的框。

选项的链接是最后一个。 这就是如何使您的图像链接到另一个页面或网站。 它适用于销售页面或作为附属链接。

如果您不想添加链接,可以将此留空。

这会处理所有设置。 单击保存或更新按钮,您可以在您的网站上看到它。

您在 WordPress 中使用 Elementor 为图像添加悬停效果做得很好。

最后的话

当人们不知道哪些图像会包含更多信息或没有更多信息时,可能会非常混乱。 事实上,有些人甚至可能不知道您的网站有悬停效果。 要解决此问题,您可以尝试在图片之前或下方放置一个标志,让您的元素或网站上的人知道发生了什么。 它确实可以帮助您充分发挥该功能的潜力。

您了解如何使用 Image Hover Effects Elementor Addon 有多容易? 您如何处理网站的悬停效果?

Divi WordPress Theme