下面有一段规格的产品照片很少被阅读,侧面有一个图例的平面图被忽略了。问题始终是相同的:图像和信息生活在两个不同的地方,大多数访客永远不会滚动到足以连接它们的距离。
安静 图像热点 修复了这一点。您将小标记直接钉在照片上,当有人悬停或点击时,每个标记都会显示一个短标签。 图片热点小部件 from Master Addons 在 Elementor 编辑器内部执行此操作。上传图像,将标记丢弃到您想要的位置,为每个标记编写标签,然后您就完成了。没有 CSS,没有自定义代码。
Elementor 中的图像热点是什么?
图像热点是一个小型交互式标记,固定在图像上的特定位置,每个标记都有自己的标签、图标或链接,在桌面上,悬停在标记上显示一个浮动面板,内容在移动设备上,点击它可以做同样的事情。
A产品照片每个功能上都可以有一个标记,平面图可以标记各个房间,截图可以用简短的解释指出按钮或设置,图像本身不会改变,标记只是给游客一种探索的方式。
Elementor 没有内置热点小部件,Master Addons 版本处理从小部件面板开始的所有内容:标记放置、标签内容、图标、动画和造型,您通过中继器单独配置每个热点,小部件负责定位和响应能力。
为什么在您的网站上使用图像热点?
静态图像在访客所看到的和他们需要知道的之间形成一个差距。热点缩小了这个差距。
在产品照片上,在每个功能上都钉上一个标记,以便访问者无需滚动到单独的列表即可看到规格。在平面图上,标记房间或展位,以便每个位置都打开其名称和详细信息。在信息图表上,保持视觉清洁,让标记携带额外的上下文。在屏幕截图上,指出教程或入职流程的具体按钮或设置。在团队照片上,标记人员或部门。
构始终相同:一个图像,多个标记,每个标记在与之交互时都会显示内容,访问者留在图像上,而不是在图像和其下方的文本块之间弹跳。
如何在 Elementor 中添加图像热点(逐步)
整个设置大约需要五分钟。
步骤 1:安装主插件并激活 Pro
转到插件,在 WordPress 仪表板中添加新内容,然后搜索 “Master Addons。” 安装并激活免费插件。如果您有一个 专业许可证、主插件下输入,许可证。pro 活动后才会出现图像热点小部件。
第 2 步:将图像热点小部件拖入您的页面
Elementor 编辑器中打开任意页面,在左侧的 Elements 面板中,搜索图像热点或滚动到主插件部分(小部件带有紫色 MA 徽章),将其拖到页面上,它加载了一个示例图像和几个可以编辑的占位符标记。
第 3 步:上传您的图像
Content 选项卡中, 打开 Image 部分, 单击选择 Image 并从媒体库中选择图片。将图像分辨率设置为全或大以进行锐利渲染。对齐选项将图像定位在其列内:左、中或右。
4步:在图像中添加热点
开热点板块,中继器中每一项都是一个标记,点击添加项新建一个,可以根据图像需要添加多少,在图像上拖动每个标记进行定位,或者设置精确的水平和垂直坐标进行精确放置。
如果您想要静态标记而不是默认的脉冲动画,则会出现禁用脉冲效应切换。
第 5 步:设置标记类型和标签内容
单击热点项目以打开其设置。在类型下,选择标记内部出现的内容:无(只是一个点)、图标或小图像。文本字段包含浮动面板中显示的短标签。链接字段添加一个 URL,因此标记也可以在点击时导航到某个地方。
Tooltip Content 编辑器是一个用于完整标签文本的所见即所得框,您可以在其中使用格式化、图像或短代码。
6步:配置标记行为
返回主内容选项卡,工具提示部分控制标签在所有标记上的行为:
- 显示位置:标签在标记的哪一侧打开(顶部、底部、左侧、右侧)。
- 箭:在标记和标签之间切换指针。
- 动画:标签出现时的显露效果,例如向上移动。
- 单击触发:从悬停到显示切换到点击显示,这是您想要移动设备的一个,因为触摸屏没有悬停。
标记造型选项
每个热点都有自己的样式选项卡,用于标记的外观:
- 默认颜色 並 默认背景:静止时的标记。
- 悬停颜色 並 悬停背景:悬停时它如何变化。
- 不透明度:标记在图像的映衬下是多么的坚固,较低的值使其更加微妙。
Zhuo后面的图像中挑出一种突出的标记颜色,忙碌的照片会吞Xia一个低对比度的标记,访客不会注意到热点。
造型图像和标签
小部件的主要样式选项卡分为三个部分。
图像面板
CSS 滤镜来控制图像本身:不透明度、边框半径、框阴影和 CSS 滤镜。边框半径或阴影有助于图像位于卡片式布局内。CSS 滤镜可让您调整亮度、对比度或饱和度,而无需重新导出图像。
标记面板
所有标记的全局设置:大小和默认颜色。单个热点样式覆盖这些。
标签面板
控制与标记交互时出现的浮动面板:背景色、文本色、排版、填充、边框半径和阴影。
移动设备上的响应行为
Markers 使用基于百分比的定位,因此无论屏幕大小,它们都固定在图像上的同一位置,标签调整大小并重新定位以保持在视口内。
Touch设备没有悬停,所以Tooltips部分点击切换上的触发器将整个小部件切换为点击显示,访问者点击一个标记打开标签,点击其他地方关闭它,如果您的受众大多在移动设备上,请从一开始就打开这个。
Labels开始重叠的非常小的屏幕上,你可以在某个断点下方禁用它们,让标记链接代替做功,每个标记仍然在点击时导航到它的URL。
图像热点与工具提示小部件:有什么区别?
Master Addons 有两个功能可以产生悬停标签,人们会将它们混合在一起:
| 特点 | 它的作用 | 最好的 |
|---|---|---|
| 图片热点小部件 | Pin 交互式标记在图像上的特定 x/y 位置。每个标记在悬停或单击时打开标签。 | 带注释的照片、产品呼叫、平面图、交互式地图。 |
| 工具提示小部件 | 将悬停标签附加到任何 Elementor 元素:按钮、图标、文本块、部分或小部件。 | Hover 提示按钮, 帮助文本在表单字段, 附加上下文在任何页面元素。 |
Image Hotspot 是针对特定图像和基于位置的。Tooltip 可在任何 Elementor 小部件上运行。如果您需要照片上的标记,请使用 Image Hotspot。如果您需要在按钮或文本块上使用悬停标签 工具提示小部件.
Master Addons Pro 两者都附带了,它们在不同的元素上工作,不共享选择器或事件处理程序,因此您可以在同一页面上使用它们,而不会出现问题。
使用图像热点的提示
- 空间标记已出来。 (marker)重叠,使图像难以使用,如果两个热点紧密地坐在一起,将它们的标签推到相对的两侧或掉落其中一个。
- 保持标签短。 1行或2行读起来比浮动面板内部的段落要好,使用标签进行快速总结,链接出完整的细节。
- 单击手机打开触发器。 Hover 即使在桌面上工作,触摸用户也需要一个轻点目标,小部件同时处理两种模式。
- 在不同屏幕上进行测试。 桌面上看起来间隔良好的标记可以在手机上堆积起来。在发布之前检查手机、平板电脑和宽显示器。
- 将标记与图像进行对比。 Dark 照片上的明亮标记工作,忙碌背景上的静音标记消失,当有人关注标记时,使用 Hover 状态添加强调。
- 当对齐重要时,请使用位置选项卡。 拖动对于粗略放置来说速度很快。当您需要标记来排列图表或屏幕截图的特定部分时,具有精确百分比值的位置选项卡会更好。
免费与专业人士:您得到什么
| 计划 | 图片热点 | 其他小部件 |
|---|---|---|
| 免费的 | 不包括在内 | 40多个小部件,包括标题,按钮,信息框,手风琴等。 |
| 专业人士 | 包含 | 所有免费小部件以及图像热点、工具提示、巨型菜单以及总共 76 个以上的小部件和扩展。 |
基本插件可从以下位置免费安装 WordPress 存储库.图像热点小部件特别要求 a 专业许可证.
Elementor 中的图像热点是什么?
點(image hotspot)是放置在圖像頂部的小型互動標記,當訪客懸停或輕點它時,會出現標籤,標籤上會有文字、描述或相片的該特定區域的連結,而 Elementor 並不包含內建的熱點小部件,因此您需要像 Master Addons 一樣的附加元件來添加此功能。
我可以在单个图像中添加多少个热点?
没有硬限制,实际上,每个图像有 5 到 7 个热点可以保持事物的可读性,除此之外,标记开始重叠,如果需要注释更多区域,请将内容分割成多个图像。
图片热点在移动设备上工作吗?
是的。在触摸设备上,小部件从悬停切换到点击显示。您可以在单击时启用触发器,以便移动访问者点击标记来打开其标签。基于百分比的定位可正确固定屏幕尺寸上的热点。
我可以将热点链接到另一个页面吗?
是每个热点都有一个链接字段,该链接在点击时会失效,因此标记既可以在其标签中显示信息,也可以将访问者导航到产品页面、文档部分或外部 URL。
Image Hotspot 小部件是免费的还是专业的?
Image Hotspot 小部件是一项 Pro 功能,基本的 Master Addons 插件是免费的,包含 40 多个小部件,但热点小部件需要一个 专业许可证.
Image Hotspot 小部件和 Tooltip 小部件有什么区别?
图像热点小部件在图像上的特定位置引脚交互式标记,每个标记在悬停或单击时显示标签。 工具提示小部件 elementor任何元素(按钮、文本、图标)上附加悬停标签,带注释的照片使用图片热点;其他页面元素使用tooltip悬停提示。
包裹起来
Image Hotspot 小部件拍摄平面图像,并添加标记,显示悬停或点击的信息 上传图像,在需要解释的区域上掉落标记,为每个标记写一个简短的标签,并设置标记的样式以匹配您的设计。一切都发生在 Elementor 编辑器内部。
有关 Elementor 中图像的更多信息,请参阅 图像比较小部件 和 图像悬停效果小部件。如果您需要在按钮或文本上悬停标签而不是图像,则 工具提示小部件教程 涵盖了这一点。以及完整的列表 主插件小部件和扩展 如果您想查看还有什么可用,值得浏览。
获取主插件专业版 解锁 Elementor 的 Image Hotspot 小部件和 76 多个其他小部件和扩展。
