下面有一段规格的产品照片很少被阅读,侧面有一个图例的平面图被忽略了。问题始终是相同的:图像和信息生活在两个不同的地方,大多数访客永远不会滚动到足以连接它们的距离。
安静 图像热点 修复了这一点。您将小标记直接钉在照片上,当有人悬停或点击时,每个标记都会显示一个短标签。 图片热点小部件 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,当标签打开悬停或关闭该屏幕大小时,该 URL 即可工作。
Tooltip Content编辑器是标签文本的所见即所得框,但是标签本身显示的是纯文本,格式、图像、链接都剥离了,所以写一小行。
6步:配置标记行为
返回主内容选项卡,工具提示部分控制标签在所有标记上的行为:
- 显示位置:标签在标记的哪一侧打开(顶部、底部、左侧、右侧)。
- 箭:在标记和标签之间切换指针。
- 动画:标签出现时的显露效果,例如向上移动。
- 单击触发:从悬停到显示切换到点击显示,这是您想要移动设备的一个,因为触摸屏没有悬停。
标记造型选项
每个热点都有自己的样式选项卡,用于标记的外观:
- 默认颜色 並 默认背景:静止时的标记。
- 悬停颜色 並 悬停背景:悬停时它如何变化。
- 不透明度:标记在图像的映衬下是多么的坚固,较低的值使其更加微妙。
Zhuo后面的图像中挑出一种突出的标记颜色,忙碌的照片会吞Xia一个低对比度的标记,访客不会注意到热点。
造型图像和标签
小部件的主要样式选项卡分为三个部分。
图像面板
CSS 滤镜来控制图像本身:不透明度、边框半径、框阴影和 CSS 滤镜。边框半径或阴影有助于图像位于卡片式布局内。CSS 滤镜可让您调整亮度、对比度或饱和度,而无需重新导出图像。
标记面板
Global 设置的所有标记:大小、文本填充、边框半径、排版、一个过渡,以及颜色、背景、边框、不透明度和框阴影,用于默认和悬停。单个热点颜色覆盖这些。
标签面板
控制与标记交互时出现的浮动面板:背景色、文本色、排版、填充、边框半径和阴影。
移动设备上的响应行为
Markers 使用基于百分比的定位,因此无论屏幕大小,它们都固定在图像上的同一位置,标签调整大小并重新定位以保持在视口内。
Touch设备没有悬停,所以Tooltips部分点击切换上的触发器将整个小部件切换为点击显示,访问者点击一个标记打开标签,点击其他地方关闭它,如果您的受众大多在移动设备上,请从一开始就打开这个。
在标签开始重叠的非常小的屏幕上,您可以设置"禁用"到移动设备或平板电脑和移动设备,并让标记链接代替完成工作。每个标记仍然在点击时导航到其 URL。
图像热点与工具提示小部件:有什么区别?
Master Addons 有两个功能可以产生悬停标签,人们会将它们混合在一起:
| 特点 | 它的作用 | 最好的 |
|---|---|---|
| 图片热点小部件 | Pin 交互式标记在图像上的特定 x/y 位置。每个标记在悬停或单击时打开标签。 | 带注释的照片、产品呼叫、平面图、交互式地图。 |
| 工具提示小部件和工具提示扩展 | Tooltip 小部件是一个独立的提示,具有自己的触发器,Tooltips 扩展将悬停标签附加到现有的 Elementor 元素上,例如按钮、图标、文本块或部分。 | Hover 提示按钮, 帮助文本在表单字段, 附加上下文在任何页面元素。 |
Image Hotspot 是为图像而构建的,并按位置放置标记,如果您需要在照片上使用 Image Hotspot,对于按钮或文本块上已存在的悬停标签,请使用 工具提示扩展。如果你想要一个独立的提示,那么 工具提示小部件 这样做。
Image Hotspot 和 Tooltips 扩展需要 Master Addons Pro,而 Tooltip 小部件位于免费插件中,它们不共享选择器或事件处理程序,因此您可以在同一页面上使用它们。
使用图像热点的提示
- 空间标记已出来。 (marker)重叠,使图像难以使用,如果两个热点紧密地坐在一起,将它们的标签推到相对的两侧或掉落其中一个。
- 保持标签短。 1行或2行读起来比浮动面板内部的段落要好,使用标签进行快速总结,链接出完整的细节。
- 单击手机打开触发器。 Hover 即使在桌面上工作,触摸用户也需要一个轻点目标,小部件同时处理两种模式。
- 在不同屏幕上进行测试。 桌面上看起来间隔良好的标记可以在手机上堆积起来。在发布之前检查手机、平板电脑和宽显示器。
- 将标记与图像进行对比。 Dark 照片上的明亮标记工作,忙碌背景上的静音标记消失,当有人关注标记时,使用 Hover 状态添加强调。
- 当对齐重要时,请使用位置选项卡。 拖动对于粗略放置来说速度很快。当您需要标记来排列图表或屏幕截图的特定部分时,具有精确百分比值的位置选项卡会更好。
免费与专业人士:您得到什么
| 计划 | 图片热点 | 其他小部件 |
|---|---|---|
| 免费的 | 不包括在内 | 数十个免费小部件,例如双标题、创意按钮、信息框、高级手风琴和工具提示小部件。 |
| 专业人士 | 包含 | 所有免费小部件以及图像热点、工具提示扩展、显示条件以及其余 80 多个小部件和扩展。 |
基本插件可从以下位置免费安装 WordPress 存储库.图像热点小部件特别要求 a 专业许可证.
Elementor 中的图像热点是什么?
點(image hotspot)是放置在圖像頂部的小型互動標記,當訪客懸停或輕點它時,會出現標籤,標籤上會有文字、描述或相片的該特定區域的連結,Elementor Pro有自己的熱點小部件,而Master Addons Pro則會增加一個圖像熱點小部件,也可以使用小型圖像作為標記。
我可以在单个图像中添加多少个热点?
没有硬限制,实际上,每个图像有 5 到 7 个热点可以保持事物的可读性,除此之外,标记开始重叠,如果需要注释更多区域,请将内容分割成多个图像。
图片热点在移动设备上工作吗?
是的。触摸屏没有悬停,因此可以在点击和移动访问者点击标记来打开其标签。基于百分比的定位可正确固定屏幕尺寸的热点。
我可以将热点链接到另一个页面吗?
是每个热点都有一个链接字段,链接工作时标签打开悬停,或在屏幕上标签被关闭,所以一个标记可以显示其标签在悬停,并带访问者到产品页面或外部网址点击,与触发器点击,点击打开标签代替。
Image Hotspot 小部件是免费的还是专业的?
Image 热点小部件是 Pro 功能,基本的 Master Addons 插件是免费的,但热点小部件需要一个 专业许可证.
Image Hotspot 小部件和 Tooltip 小部件有什么区别?
图像热点小部件在图像上的特定位置引脚交互式标记,每个标记在悬停或单击时显示标签。 工具提示小部件 是具有自己的触发器的独立提示,并且tooltips扩展将悬停标签附加到现有元素,例如按钮,文本或图标。使用图像热点进行注释照片,使用工具提示选项进行其他页面元素的悬停提示。
包裹起来
Image Hotspot 小部件拍摄平面图像,并添加标记,显示悬停或点击的信息 上传图像,在需要解释的区域上掉落标记,为每个标记写一个简短的标签,并设置标记的样式以匹配您的设计。一切都发生在 Elementor 编辑器内部。
有关 Elementor 中图像的更多信息,请参阅 图像比较小部件 和 图像悬停效果小部件。如果您需要在按钮或文本上悬停标签而不是图像,则 工具提示小部件教程 涵盖了这一点。以及完整的列表 主插件小部件和扩展 如果您想查看还有什么可用,值得浏览。
获取主插件专业版 解锁 Image Hotspot 小部件以及 Elementor 的其余 80 多个小部件和扩展。
