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. You can also set Disable On to Mobile or Tablet & Mobile, which hides tooltips on those screens and lets the marker Link take visitors to more information.

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.

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. Tooltips may need Trigger on Click or Disable On for small screens.

Is the Image Hotspot widget free?

No. Image Hotspot is part of Master Addons Pro. The free plugin has 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.

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

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

如何在 Elementor 中添加图像热点

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

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

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

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

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

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

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

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

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

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

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

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

按百分比放置每个标记

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

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

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

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

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

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

Hover上打开工具提示手机没有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 的情况下使用 Master Addons Pro,则选择 Master Addons Pro。相关:免费工具提示小部件的,该工具提示扩展 (Pro), 图像比较並图像悬停效果.