如何在 WordPress 中轻松添加图像热点
已发表: 2022-05-05人类是视觉动物，很难想象有比图像更强大的工具来吸引目标群体的注意力。 但是，可能有一个元素比美丽的图像更诱人——WordPress 的图像热点。 图像热点是一种具有交互热点的图像。 当用户将鼠标悬停在热点上时，会出现一个可能包含几乎任何您想要的任何内容的弹出窗口。
WordPress 网站上的图像热点是分享有关任何给定主题的更多信息的绝佳方式——从烹饪博客到建筑网站以及介于两者之间的所有内容。 您可以显示膳食成分和措施、使用的材料类型、名称和标题以及有关您网站内容的任何其他信息。 弹出窗口可能包含文本、另一个、图像、视频或链接。 除了为您的用户提供更精细的细节之外，您还可以通过使用图像热点使您的网站更具交互性。
如果您认为您需要专业的网页设计师来为您的网站添加这个精美的元素，我们有好消息！ 您可以轻松地自己添加所有内容。 请继续关注以阅读有关如何使用插件在 WordPress 中添加图像热点的更多信息：
- 为什么我们为 Elementor 选择 Qi 插件来创建图像热点 WordPress Elemen
- 如何添加图像热点 WordPress 元素
- 调整热点图像样式
根据我们的经验，Elementor 的Qi 插件是最好的 Elementor 插件之一。 它包括 60 个免费和 40 多个高级小部件以及许多用于向网站添加不同元素的选项，并提供大量自定义和样式选项，因此您可以确保它们适合您网站的整体设计。 最重要的是，它使用起来非常简单——这就是我们经常选择这个插件的原因，它极大地改进了网站。
图像热点自定义小部件是一个高级小部件。 它允许您添加特定的图像和位置热点，其中包含特定的信息。 然后，用户通过将鼠标悬停在热点上来获取信息。 最棒的是我们可以确定响应位置，这样就不会在不同的设备上发生热点与它所指的对象不匹配的情况。 在小部件演示本身上，您可以看到作者的一些可以启发您的概念性解决方案。
将 Qi 插件添加到您的站点后，通过在搜索字段中输入“图像热点”或简单地浏览元素来找到图像热点自定义小部件。 您会注意到所有Qi 小部件都有可识别的红色图标。
当您将小部件拖动到所需位置时，您将看到它的一些默认值。 小部件有两个选项卡——自定义和样式，其中包括用于调整元素的各种选项，而高级选项卡是包含所有元素的 Elementor 选项卡。
让我们从自定义选项卡的常规选项开始。 您首先会注意到图像和三个项目的插入位置。 这些项目实际上是热点及其位置和内容设置。 默认情况下，共有三个热点，但您可以删除现有热点或添加新热点。
从库中插入图像或上传新图像后，就可以定位热点并向其添加内容了。
至于内容，您可以设置标题和副标题选项，一旦您开始修改它们，您将看到内容如何实时更改。
这里还有一个pin 字段，您可以在其中为您的 pin 选择一个图标，它不必是默认图标。 图标库供您使用，但您也可以添加自己的 SVG 图标。 例如 – SVGREPO提供了大量可用于商业用途的免费图标。
至于水平位置和垂直位置，它们服务于热点在左/中/右和上/中底部位置的方向，而偏移选项实际上允许我们微调位置。 我们不会详细解释这一点，因为我们相信您会通过更改偏移值来亲眼看到您的视频是如何移动的。 需要牢记的是，在自定义热点时，还应观察没有设置栏的预览页面，以便在全尺寸屏幕上看到所有内容。
此外，除了偏移量之外，您还会注意到带有标题的屏幕图标，即表示响应选项可用于此设置的经典图标。 确保也检查它们。 最好不要将热点放置在图像的最边缘，因为您必须考虑图像热点弹出窗口在不同屏幕尺寸上的外观。
Fade Info Position选项是热点悬停信息出现的位置。
这是我们添加图片和图钉后的结果，现在我们可以继续设置样式以完全符合我们的要求。
至于风格化，各种选项被分类在一个特殊的样式选项卡中，因此您可以看到我们在哪里对 Pins、Info、Title 和 Subtitle 进行风格化。
至于 Pin，所有的设置都很容易理解。 您可以选择一个适用于所有图钉的图标，这与项目中的设置不同，您可以为每个图钉选择一个单独的图标。 此外，您可以为其指定尺寸和颜色。 您可以使用 Pin holder 大小添加背景图标。 我们的背景是红色的，大小为 15px。
边界半径选项允许我们使背景看起来像一个圆形，因为半径应用于背景。
信息样式是指信息出现的字段的外观。 信息显示是一个选项，用于确定悬停的显示方式。 可以是 Fade 和 Reveal，我们选择了 Reveal。 您还可以在此处自定义字段颜色和填充。 信息边框半径对于我们使用的显示布局来说是一个特别有趣的选项，因为半径有助于适应信息字段和图钉图标本身。 如果我们没有在此处添加半径，则白色信息字段将位于红色图标框的图钉上方。
信息标题样式选项是指我们添加到每个引脚的标题。 此处的设置将应用于此图像热点中的每个标题。 您可能对这些选项很熟悉，乍一看，您可以指定标题标签、颜色、微调标题类型。 当您的信息字段中也有字幕时，标题页边距底部是一个重要选项，因为您可以添加此页边距以在标题和副标题之间创建一个空间。
至于 Info 字幕样式，如果您在此处添加字幕，您可以更详细地对其外观进行风格化。 在排版选项中，您可以使用不同的设置。
这就是最终结果的样子。 我们添加的文本 我们使用了部分标题 Qi 小部件也添加了文本，使这个网站部分对未来的用户更加有趣。
综上所述
Qi Addons 是一个非常直观的工具，每个人都可以完全轻松地使用零编码或任何其他技术知识。 随意探索此小部件的选项，进行试验、玩耍并享受使您的网站对用户更具吸引力的创作过程。 如果您有任何问题，请随时在评论部分与我们联系——我们期待听到您对 Qi 和热点图像的体验！
我们希望这篇文章对您有所帮助。 如果您喜欢它，请随时查看其中的一些文章！
- 将之前和之后滑块添加到您的网站的最简单方法
- 如何以简单的方式自定义您的联系表 7 样式
- 如何在 WordPress 中添加营业时间——最简单的方法