What happens on mobile phones where there's no hover?

Turn on Trigger on Click in the Tooltips section so visitors tap a marker to open its tooltip. Markers keep the same percent position on every screen, so preview the page at phone width and lower the marker Size if they crowd the image.

Can I use a custom image instead of an icon for the hotspot marker?

Yes. Set the hotspot Type to Image and pick a picture from the media library. A small, simple image such as a product thumbnail or avatar reads best at marker size.

Can I drag markers into place in the editor?

No. Each marker has Horizontal position and Vertical position sliders in its Position tab, measured in percent of the image. Move the slider and watch the preview. Percent keeps the marker on the same spot when the image resizes.

Can I use Image Hotspot as an image map?

For point links, yes: put a marker on each spot and give it a Link, with tooltips left on hover. It does not draw clickable shapes or areas, so for room outlines on a floor plan use an image map plugin such as Image Map Pro.

Is there a hotspot widget in free Elementor?

No. Elementor’s Hotspot widget is part of Elementor Pro, and Image Hotspot needs Master Addons Pro. Some other addon packs include a hotspot widget in their free versions.

Is the base image itself responsive?

Yes. The image scales with its column, and marker positions are set in percent, so each marker stays on the same part of the image across screen sizes. On phones, turn on Trigger on Click so a tap opens the tooltip.

Is the Image Hotspot widget free?

No. Image Hotspot is part of Master Addons Pro. Without Pro you can use the Tooltip widget, which adds a hover hint to a single element but does not pin markers on an image. Elementor Pro users can also use Elementor’s own Hotspot widget.

Can I turn the pulse animation off?

Yes. Disable Pulse Effect sits at the bottom of the Hotspots section and switches the pulse off for every marker in that widget. There is no per-marker pulse toggle, so use a second Image Hotspot widget if you need both looks on one page.

Why is the formatting in my tooltip disappearing?

The widget removes HTML from Tooltip Content before it renders, so bold text, links, images and shortcodes are dropped and the tooltip shows plain text. Keep each tooltip to one short line. For formatted tooltips, Elementor Pro’s Hotspot widget supports rich text.

带工具提示的元素图像热点小部件 (Pro)

Image Hotspot是一个Master Addons Pro小部件,它将标记钉在图像的顶部,标记可以是普通点,短文本标签,字体很棒的图标或小图片,当访问者悬停它时,每个都打开一个工具提示,或者一旦打开触发器,点击它适合商店外观的照片,产品呼叫,平面图,校园地图和标记图表如果您想要的是按钮或标题上的悬停提示, 工具提示小部件 (无需 Master Addons Pro)或工具提示扩展 (Pro) 是更贴合。

如何在 Elementor 中添加图像热点

Elementor 中添加图像热点,激活 Master Addons Pro,用 Elementor 编辑页面并在小部件面板中搜索图像热点,拖入,在图像下选择您的图片,然后打开热点,单击为每个标记添加项目,设置每个标记的类型、工具提示内容和位置,然后发布。

Search the panel for “热点”两个结果回来, 标有MA的是这个小部件, 旁边挂锁的是Elementor自己的热点, 需要Elementor Pro许可证, 所以值得在你构建之前先检查一下你已经拥有哪一个。

放入小部件,选择图像并设置 图像分辨率 到 Full 如果图片带有精细的细节标记坐在渲染的图像上,因此缩小尺寸的源使每个引脚看起来都近似打开热点击, 添加项目, 并重复一次每个标记, 每个项目带有自己的内容, 样式和位置选项卡。

2件事在第一个构建上绊倒人们标记降落在左上角直到你触摸位置滑块,所以三个新鲜的项目堆叠成一个看起来像一个。并且工具提示内容框是一个完整的编辑器,这使得它诱人粘贴一段在有理由抵制那个,覆盖更下面。

包含产品照片、地图和图表的工作示例 elementor 中如何添加图像热点。每个控件都列在图像热点小部件设置指南.

图像热点一览

小部件的作用,请从 Master Addons Pro 代码中读取。

物品	图片热点小部件
标记类型	无、文本、图标或图像
每张图像的标记	添加到热点列表的次数
定位	水平和垂直滑块占图像的百分比,每个屏幕尺寸一个位置,无阻力
每个标记设置	链接、工具提示文本、工具提示侧、默认和悬停颜色、不透明
工具提示内容	纯文本(HTML 在渲染时被删除)
工具提示侧	上、下、左或右
工具提示动画	移位、移位、褪色、比例、视角
触发	悬停,或在单击时单击"触发器"
箭头、偏移和距离	是的
脉冲效应	默认情况下,一个开关会关闭小部件
标记链接	当悬停时工具提示打开时,请关注
风格	标记尺寸、填充、半径、默认颜色和悬停颜色;工具提示填充、半径、颜色、箭头颜色、排版
需求	Elementor 和 Master 插件 Pro

在 Elementor 中构建交互式图像

交互式图像是当访客指向它时回答问题的照片。在 Elementor 中,您只需三步即可构建一个带有图像热点的图像。

将图像热点放入容器中,然后在图像下选择照片。
Hotspots 中每点添加一项,选择文本、图标或图像作为标记,键入一条线工具提示,并设置水平和垂直位置(以百分比表示)。
打开工具提示,选择侧面和动画,如果大多数访问者使用手机,请在单击时打开触发器。

有关屏幕截图的完整演练,请阅读 elementor 中如何添加图像热点.

办公室照片上有四个编号标记,会议桌的工具提示打开。

使用图像热点作为简单的图像地图

图像地图使图片的部分内容可点击。图像热点涵盖了常见情况:每个点上都有一个标记,带有指向另一个页面的链接,当工具提示在悬停时打开时,该标记即可工作。它不会像图像地图 Pro 等 SVG 图像地图插件那样绘制可点击的形状或区域,因此必须可点击每个房间轮廓的平面图需要专用图像地图插件。

对于校园地图、商店布局或产品图上的引脚,标记足够且更快地设置。健身房区域地图演示这样工作。

一张图像上的四种标记类型

的类型 marker 的内容选项卡中的控制会给你四种形状,你可以在单个图像内混合所有四种形状。

没有留下一个裸露的彩色点。对于标签相互碰撞的密集图表,这是最干净的选择。

文本 marker里面打印一根短的字符串,数字在这里效果很好,因为01,02和03横跨一个产品镜头读作一个导游,没有传说可以写,较长的字符串将点变成药丸,这是你想要的样子,就像“科隆5号”。

图标从图书馆获取任何"font Awesome"图标,因此可以放置一片叶子作为成分,也可以放置一颗星星作为评级。

图像将标记从您的媒体库中交换为图片。产品缩略图和头像读得最好;任何忙碌的事情都会变成标记大小的糊状。

每个标记还接受 a 链接。当工具提示在悬停时打开时,或者在您已关闭工具提示的断点上打开时,该链接会启动。当 Trigger on Click 打开时,它不会启动,因为点击已经被打开。

按百分比放置每个标记

的位置 tab 握住两个滑块,水平位置和垂直位置,均以图像的百分比来测量设置 50 和 24 将四分之一的标记放在中间,没有画布上的拖动位置,因此您可以轻推数字并观看预览。

Percent是让标记在手机上保持诚实的原因,基础图像用容器缩放,每个标记都保持其相对位置,因此固定在瓶盖上的标签仍然在瓶盖上,宽度为390px,其中像素偏移会漂移。

同一选项卡带有每个标记 显示到的,它覆盖了那个一个标记的全局工具提示侧。当一个标记位于右边缘附近并且它的工具提示会从图像上跑出来时,这会有所帮助:将那个设置为左,其余的留在顶部。

默认情况下标记脉冲。 禁用脉冲效应 hotspots 部分底部的开关可同时关闭每个标记的动画,这通常是具有 15 个引脚的平面图所需要的。

工具提示位置、动画和移动行为

的 工具提示 section一起驱动小部件中的每个工具提示:显示位置(顶部,底部,左侧或右侧),动画(移位-离开,移位-向,淡入淡出,缩放或透视),箭头切换,加上偏移和距离,用于精细推动。

Hover上打开工具提示,手机没有悬停,所以打开 单击触发 轻按一下打开工具提示。标记位置按百分比设置一次,并应用于每个屏幕尺寸,没有单独的平板电脑或移动位置。标记将其尺寸保留在手机上,因此在窄屏幕上它们可以覆盖更多照片。保持计数较低或降低标记尺寸(风格、热点)。

1个限制来规划。工具提示内容是一个所见即所得的框,但小部件在渲染之前会剥离标记,因此粗体、链接、图像和短代码都会消失,工具提示显示纯文本。将每个都保留为一个短行。当您需要格式化的工具提示内容时,Elementor Pro 的热点小部件处理富文本,而此小部件则不然。

工具提示本身的样式是全套:对齐、填充、半径、背景、文本颜色、边框、箭头颜色、排版和框阴影。基础图像获得不透明度、边框、半径、框阴影和 CSS 滤镜。

默认和悬停的样式标记

标记造型位于两个位置,这比您知道分割后的声音更简单。

小部件的风格 tab一次覆盖每个标记:文本填充,边框半径,类型学,一个过渡组,然后默认和悬停选项卡,保存不透明度,大小,颜色,背景颜色,边框类型和框阴影。size是从0.5到2的比例乘法器,因此将悬停设置为1.15,使标记在光标下轻微提升,而不会移动页面上的其他任何内容。

Style 单个标记内部的选项卡覆盖该标记的颜色、背景和不透明度,以进行默认和悬停。这就是如何在紫色墙上将一个标记变成红色,以标记已售完的商品或标记您想要首先注意到的热点。

100处的边界半径给你圆圈和药丸。将其降至6,文本标记变成方形标签,这在建筑图纸上比一排气泡读数更好。

Elementor Pro 热点与主插件图像热点

Elementor Pro 寄送自己的热点小部件,如果你已经为 Elementor Pro 付费了,请先检查一下,因为你可能根本不需要这个。

特点	Elementor Pro 热点	主插件图像热点
价格	需要 Elementor Pro	需要 Master Addons Pro
标记类型	标签文本和图标,具有自定义大小	无、文本、图标或图像
标记动画	柔和的节拍、扩展或叠加,带有排序动画	脉冲打开或关闭
工具提示内容	丰富的文本和格式	仅纯文本
工具提示触发器	悬停、单击或无	悬停,或在单击时使用触发器单击
工具提示动画	淡入淡出和幻灯片样式,并设置持续时间	移位、移位、渐变、刻度、透视以及箭头、偏移和距离
定位	每个设备位置	水平和垂直百分比滑块,每个屏幕一个位置,画布上没有拖动
标记链接	每个热点的链接	每个标记的链接,当工具提示在悬停时打开时,会进行跟踪
需要 Elementor Pro	是的	否

Elementor Pro 在丰富的工具提示文本和标记动画上获胜。如果您想要图像标记或已经在没有 Elementor Pro 的情况下使用 Master Addons Pro,则选择 Master Addons Pro。相关: 工具提示小部件的,该工具提示扩展 (Pro), 图像比较並图像悬停效果.