主要外卖
- Elementor 图像热点是一个固定在照片上的标记,可在悬停或点击时打开短标签,主插件图像热点小部件为其热点列表中的每个项目添加一个标记。
- Image Hotspot 小部件需要 Elementor 和 Master Addons Pro,因为免费 Elementor 没有热点小部件,Elementor Pro 提供了自己的单独热点小部件。
- 每个图像热点标记都放置有图像百分比的水平和垂直位置滑块,并且该位置适用于桌面、平板电脑和手机。
- 图像热点工具提示仅显示纯文本,因为当页面渲染时,输入到工具提示内容框中的粗体文本、链接、图像和短代码将被删除。
- "图像热点工具提示"部分中的"点击触发"使标记在手机上工作, 但只有当工具提示在悬停时打开时, 才会遵循标记的链接。
- 图像热点小部件可以用作带有链接点标记的简单图像地图,但它无法像 SVG 图像地图插件那样绘制可点击的形状或房间轮廓。
Elementor 图像热点是一个小标记, 固定在照片上, 当访客悬停或轻点它时显示一个短标签, 免费 Elementor 没有这个小部件, 因此本指南使用 主插件图像热点小部件的,它为来自 Elementor 面板的任何图像添加标记,而无需自定义代码,您需要 Master Addons Pro 来进行。
下面的步骤将您从一个空容器带到已发布的交互式图像:按百分比放置标记、为每个标记编写标签以及为桌面和手机的标记进行造型。后来的部分涵盖了构建之前要了解的限制、如何使用热点作为简单的图像地图,以及该小部件如何与 Elementor Pro 中的热点小部件进行比较。
目录
Elementor 中的图像热点是什么
點(image hotspot)是放置在圖像上設定點的標記,每個標記都帶有自己的短標籤,如果您想要,還有一個鏈接,在桌面上標籤會出現在懸停電話上,訪客會點擊標記。
产品照片可以在每个功能上有一个标记,平面图可以标记房间或书桌,屏幕截图可以指向新用户需要的按钮。图像保持不变,标记让访问者探索它,而无需向下滚动到单独的规格列表或图例。
Free Elementor没有热点小部件,Elementor Pro有一个叫做热点,Master Addons Pro添加了图像热点,也可以使用小图片作为标记,本指南涵盖了Master Addons小部件。
如果您只想在按钮或标题上显示悬停提示,那么热点是错误的工具。 工具提示小部件 无需 Master Addons Pro 即可处理此问题 工具提示扩展 (Pro) 为页面上已有的元素添加提示。
想要在构建之前看到它有效吗? 的 图片热点小部件页面 拥有现场演示、完整设置列表以及与 Elementor Pro Hotspot 并排。
Elementor 中如何添加图像热点
对于具有四个或五个标记的图像,设置大约需要五分钟。
步骤 1:安装主插件并激活 Pro
WordPress仪表板中,转到插件,添加新内容并搜索“大师插件”安装并激活它,然后输入您的 专业许可证 master Addons 下, 许可证。图像热点仅在 Pro 处于活动状态后才会出现在 Elementor 面板中。它与免费 Elementor 一起工作。
2步:将图像热点小部件拖到页面上
Elementor编辑器中打开页面,在Elements面板中搜索“热点”, MA徽章的结果是图像热点, 如果你旁边还看到一个挂锁的热点小部件, 那一个属于Elementor Pro的图像热点拖到容器中。
3步:选择你的图像
Content选项卡中,打开图像部分,点击选择图像如果照片有精细的细节,将图像分辨率设置为全或大,因为标记位于渲染的图像上,并且缩小比例的副本使每个引脚看起来近似对齐,将图像左侧,中心或右侧放置在其列中。
4步:添加热点并设置其位置
开热点部分,列表中每一项都是一个标记,所以每要标记一个点,点击添加一项一次,项目数量没有限制。
每个项目都有内容、样式和位置选项卡,在位置选项卡上移动水平位置(%)和垂直位置(%)滑块以放置标记,值是图像的百分比,因此 50 和 50 将标记放在中央。您不能在画布上拖动标记,并且新项目都从左上角开始,直到移动它们,因此三个新鲜项目可以看起来像一个。
1个位置适用于每种屏幕尺寸,22%宽和52%下方的标记位于笔记本电脑和手机上照片的同一部分。
在列表下,禁用脉冲效应?关闭小部件中每个标记周围的脉冲环。
5步:挑选标记类型,写出标签
在每个项目的"内容"选项卡上,类型设置标记内部出现的内容:无(一个纯点)、文本(默认情况下为加号,或者您输入的数字或单词)、图标(任何字体"太棒"图标)或图像(小图片)。将类型混合在一个图像上可以正常工作。
Link字段在访问者点击标记时将访问者发送到另一个页面,当工具提示在悬停打开时会跟随它,在点击触发器打开时(步骤6),点击打开工具提示,链接将被忽略。
Tooltip Content是出现在热点工具提示中的行,框内看起来像一个全文编辑器,但工具提示显示的是纯文本:粗体、斜体、链接、图像和短代码在页面渲染时都去掉,写一行短。
6步:选择标记的打开方式
回到"内容"选项卡,工具提示部分同时控制小部件中的每个标记。
- Show Position 选取工具提示打开的一侧:顶部、底部、左侧或右侧。标记可以在其位置选项卡上使用"显示"选项覆盖它。
- 动画设置揭示效果:移位、移位、淡入淡出、比例或视角。
- Arrow 将工具提示中的指针添加到标记。
- 偏移和距离使工具尖端沿着标记移动并远离标记。
- Trigger on Click 在点击或轻按时打开工具提示。手机没有悬停,因此如果许多访问者使用手机,请打开此选项。
7步:预览和发布
击"发布,在新选项卡中打开页面,将每个标记"悬停以检查工具提示文本和侧面,然后将窗口调整为手机宽度,并检查标记是否相互覆盖。
样式标记和图像
样式发生在两个地方:每个标记自己的样式选项卡和小部件的主样式选项卡。
每个标记样式
Style标签页在热点项目内部有默认和悬停设置的颜色,背景和不透明度,用它给一个标记一个不同的颜色,例如产品照片上的销售项目。
Pick与后面的照片形成对比的标记颜色,忙碌的照片上静音的标记会丢失,游客不会注意到有什么东西可以悬停。
图像
Style 主选项卡的 Image 部分控制照片:不透明度、边框、边框半径、框阴影和 CSS 滤镜。半径和柔和的阴影有助于图像位于卡片布局内。
热点
Hotspots 部分同时对每个标记进行样式设计:大小、填充、边框半径、不透明度、颜色和背景,每个标记都有一个悬停版本。单个标记上的设置将赢得这些。
工具提示
Tooltips 部分为热点工具提示设计样式:文本对齐、填充、边框半径、背景、文本颜色、箭头颜色和排版。
在 Elementor 中构建交互式图像
交互式图像是当访客指向它时回答问题的照片。在 Elementor 中,您可以通过按照上述步骤构建带有图像热点的照片:每个点一个标记,每个点上有一个单行工具提示,如果您的流量大部分是移动的,则触发点击。
将图像与旁边的短列表配对效果很好,访问者可以悬停标记或读取列表,并且两者都指向相同的项目。 购买此房间演示 在客厅照片上使用编号标记,旁边有价目表。
适合交互式图像的其他布局包括每部分都带有标记的手表或小工具、灯光和车轮上带有标记的汽车列表、每项功能上带有标签的房产照片以及每个人身上都有名字的团队照片。
使用图像热点作为简单的图像地图
图像地图使图片的部分内容可点击。图像热点涵盖了常见的情况:每个点上都有一个标记,并带有指向另一个页面的链接,当工具提示在悬停时打开时,该标记会跟随。它只放置点标记。它不会绘制可点击的形状,因此每个房间轮廓都必须可点击的平面图需要专门的图像地图插件,例如 图片地图专业版的,它会在图像上绘制矢量形状(截至2026年11月)。
对于校园地图、商店布局或健身房地板上的别针,标记足够且更快地设置。 健身房区域地图演示 1张照片上标示5个区域,每个标记链接到该区域的预订页面。
手机和平板电脑上的图像热点
Marker位置是图像的百分之一,因此每个标记在每个屏幕尺寸下都停留在照片的同一部分,平板电脑或手机没有单独的位置。
Markers随着图像的缩小而保持其大小,默认情况下约为40px 在手机上,带有许多标记的图像会变得拥挤 使用更少的标记,在样式下使用更低的大小,热点,或者给电话访问者一个更简单的图像。
Phone没有悬停,所以在工具提示部分打开Trigger on Click,访问者点击一个标记来打开它的工具提示,请记住,点击模式打开,点击打开工具提示,标记的链接不会被遵循,所以如果链接比工具提示更重要,请在Trigger Click off上留下。
您需要使用图像热点
| 设置 | 您获得的热点小部件 |
|---|---|
| 自由元素本身 | None。核心元素器没有热点小部件。 |
| 元素专业版 | Elementor自己的热点小部件,具有格式化的工具提示内容和自己的标记动画。 |
| 不带专业版的主插件 | 没有图像热点。还包括许多其他小部件。 |
| 与 Master Addons Pro 一起 | Image Hotspot、Tooltips 扩展以及其余 80 多个小部件和扩展。 |
主插件安装来自 WordPress 插件目录.图像热点需要 a. Master Addons Pro 许可证 之上。每个控件都列在。 图像热点设置指南.
使用图像热点的提示
- Space markers out。如果两个坐在一起靠近,则将他们的工具提示发送到带有显示的相对两侧,以在每个标记的位置选项卡上进行选项,或者丢弃一个。
- 将每个标签保留为一行。工具提示渲染为纯文本,因此请在页面上放置更长的详细信息并使用标记的链接。
- Phone width 测试,然后再发布。相同的百分比位置遍布各处,标记不会缩小,因此在桌面上看起来不错的标记可以覆盖手机上的一个小细节。
- 在标记上使用悬停颜色,以便访问者可以判断他们戴的是哪种。
- Line标记与精确的数字。打字值到百分比字段比轻推滑块的速度更快,当标记必须坐在图表或屏幕截图的小部分上。
常见问题
Elementor 中的图像热点是什么?
图像热点是一个放置在图像顶部的小标记,当访问者悬停或点击它时,照片的该部分会出现一个短标签。Elementor Pro 有自己的热点小部件,Master Addons Pro 添加了一个图像热点小部件,也可以使用小图像作为标记。
我可以在单个图像中添加多少个热点?
没有硬限制,每个图像有五到七个标记可以保持东西的可读性,而在手机上会看到的图像上则更少,因为标记不会随着图像而缩小,如果需要更多,请将内容分成两个图像。
图片热点在移动设备上工作吗?
是的。手机没有悬停,因此请在单击时打开触发器,访问者点击一个标记来打开其工具提示。位置是图像的百分比,并且在每个屏幕上都相同,因此请检查标记在手机宽度下不会相互拥挤。
我可以将热点链接到另一个页面吗?
是每个标记都有一个链接字段,当工具提示在悬停打开时,链接会被跟随,因此访问者在悬停时读取工具提示,然后点击进入页面,在触发器上点击,点击打开工具提示代替,链接不会被跟随。
我可以在热点工具提示中添加粗体文本、链接或图像吗?
号工具提示内容框是一个丰富的编辑器,但当页面渲染时会删除粗体文本、链接、图像和短代码,因此工具提示显示纯文本,写一短行,并使用标记的链接来获取更长的内容。
我需要用于图像热点的 Master Addons Pro 吗?
是的。Image Hotspot 是一个 Master Addons Pro 小部件,它与免费 Elementor 一起工作。它出现在 Elementor 面板中曾经 a 专业许可证 是活跃的。
Image Hotspot 与 Elementor Pro Hotspot 小部件有何不同?
Elementor Pro Hotspot 允许格式化的工具提示内容,具有软节拍、扩展和覆盖标记动画,并在悬停、点击或根本不打开主插件图像热点使用纯文本工具提示、标记上的脉冲效果和五个工具提示动画,并且可以使用小图片作为标记。
最后的想法
Image Hotspot 将一张平面照片变成交互式图像:四种标记类型、以百分比为单位设置的位置、每个标记一行纯文本和五种显示动画,全部来自 Elementor 面板在手机将看到的图像上保持标记很少,并在大多数流量为移动时打开触发器单击。
有关更多图像小部件,请参阅 图像比较 並 图像悬停效果。如果您需要在按钮或文本上悬停提示而不是图像,则 工具提示小部件教程 涵盖了这一点,以及完整的列表 主插件小部件和扩展 显示插件还附带什么。
获取主插件专业版 将 Image Hotspot 以及 80 多个小部件和扩展的其余部分添加到 Elementor。
