如何在 WordPress 中创建和使用热点图像（5 个简单步骤）

一张图片可以帮助解释一个复杂的想法，这比描述更有效。 因为您可以放大并探索图像以获取更多细节。 但是要使图像变得生动，您需要使其可点击。 为此，您需要使用热点图像。

众所周知，通过图像传达的信息更容易理解和记忆。

图像热点的想法是为用户提供交互式图像，帮助他们理解你试图传达的信息。 热点是图像中区域的点，单击时会弹出一个窗口。 该弹出窗口可以包含工具提示、文本、视频或 URL 链接。 这是一个例子，

要了解自行车零件，您可以单击指出的区域并知道哪个零件是什么。 您无需阅读说明。

但是，创建热点图像是一项复杂的任务。 除非您有 WordPress 网站。 然后，您可以使用 HappyAddons 创建带有热点的图像。

HappyAddons 是终极的 Elementor 插件。 它拥有 100,000 多个活动安装，是目前业内流行的 Elementor 插件之一。 它目前拥有 88 个专业和免费小部件以及 16 个独特功能。 在专业小部件中，Happy Addons 提供了一个热点小部件，您可以使用它来创建像上面这样的交互式图像。

因此，在今天的帖子中，我们将向您展示如何使图像响应热点以及如何使用这些图像的一些灵感。

如何使用快乐插件为 WordPress 创建热点图像

在图像中添加热点是与用户互动的一种有趣方式，也是吸引他们注意力的好方法。 它鼓励他们参与您的内容。

考虑到这一点，我们将向您展示如何使用 HappyAddons 热点小部件通过五个步骤创建完美的热点图像。

第 1 步：选择小部件并放入该部分

首先，打开 Elementor 编辑器并从左侧边栏中选择热点小部件。 然后将其拖放到编辑部分。

第 2 步：选择要添加的图像

现在您需要添加图像。 单击标记区域并选择图像。 您可以选择现有图像或上传新图像。

第 3 步：将热点添加到图像

添加图像后，您将在图像中看到一个点。 现在，寻找“ Spot ”选项。 单击点选项时，您可以添加任意数量的点。

您可以使用任意数量的点的原因，这样您就不会无法标记图像的重要部分。

此外，您可以单独自定义斑点。 您将找到添加文本、图标和图像的选项。 但是这个决定完全取决于你的背景图片。

如果您选择添加文本，则可以当场添加整体文本。 您的文本将出现在一个蓝色的弹出窗口中。

单击“工具提示”选项。 您可以在此处添加要显示的文本。 您需要按照相同的过程在所有其他热点中添加文本。

第 4 步：风格化热点

正如我们之前所说，您可以单独自定义热点。 您将在“样式”选项中找到所有自定义选项。

在那里您可以编辑热点的各种元素，例如，

• 宽度
• 高度
• 填充
• 边境
• 颜色
• 文字颜色
• 和工具提示背景颜色。

您可以根据您的设计或布局调整这些选项，您将获得您想要的结果。

如果需要，您可以自定义工具提示。 单击工具提示选项并进行调整，直到根据您的布局找到正确的组合。

第 5 步：使用高级部分添加更多效果

如果您想添加动作效果、快乐效果、背景或使页面具有响应性，请单击“高级”以探索这些选项。 “高级”是 Elementor 的默认功能。 阅读本文档以了解有关高级功能及其用途的更多信息。

而已。

注意：可以添加到图像地图的热点数量没有限制。

此外，使用 Elementor 响应模式，您可以轻松确定图像是否在所有平台上完美对齐。

热点图像：用例和重要性

“一张图胜一千字”是一句著名的英语短语。 但这并不意味着您可以用一张图片说出所有内容。 这就是热点图像发挥作用的地方。 因为此功能为您的图像提供了额外的上下文。 此外，它使图像用户友好且具有交互性。

当您将图像与文本结合时，您会得到很好的响应。 以下是图像热点将派上用场的一些示例。

产品营销

到2021 年，网上商店的数量在 12 到 2400 万之间。

数字内圈

这是一个显而易见的选择。 全球有数百万家在线商店。 那么，用户为什么会选择你的商店呢？ 你在做什么与其他商店不同？ – 产品图片中的热点。

为了脱颖而出，在产品图片中使用热点是一个好主意。 它将显示有关产品的额外信息。 但主要的吸引力在于，客户只需点击产品图片即可掌握您产品的概念。

此外，您可以轻松地提出独特的观点，而不是在文本中描述它们。 因为用户可能会错过描述。

信息图表

信息图表是向用户传达信息的好方法。 您会发现许多信息图表包含教程、统计数据、指南等。换句话说，信息图表非常具有交互性。

但是，如果您可以将热点功能应用于这些信息图表，那么它将变得更具响应性。 您可以在不改变信息图设计的情况下添加额外信息。

学习

图像热点是在课堂上展示交互式图像的好方法。 这里有些例子，

生物学

好吧，我们不必告诉您了解人体的最佳方式是通过图像。 通过图像热点，您可以通过标记正确的点来添加所有身体部位的名称。 这是一个简短的例子，

地理

好吧，如果你问学生他们觉得哪门课最无聊和最难，地理会列在名单上。 因为，通过阅读很难记住任何国家和大陆的名称。 那么，在地图上显示它们怎么样。 是的，有了热点，您可以在地图上标记国家。 这样学生就可以轻松记住所有国家。

历史

好吧，在历史课中使用热点功能是不寻常的。 但是，它可以使用。 在解释涉及名人的历史事件时，您可以使用热点标记谁。 这样学生就可以轻松识别著名的传说，并记住任何历史事件。

关于热点图像的常见问题解答

使用热点交互式图像推动更多转化

设计网站时，您应该始终寻找吸引更多用户并吸引他们的方法。 热点图像可能是一个可行的选择。 您可以使您的图像更具交互性和吸引力。 但更重要的是，它将为您的网站及其内容增加价值。

您可以从我们的文章中看到，使用 HappyAddons Hot Spot Widget 创建图像热点非常容易。 使用 Elementor 的响应模式，您可以轻松检查图像在所有平台上的显示方式。

如果您有任何疑问，请不要忘记与我们联系。