有些图像需要一点解释,例如产品拍摄、平面图或地图。 图片热点小部件 在 Elementor 的主插件 是pro小部件,它可以在图像的任何位置固定可点击的标记。每个小部件都显示一个短文本工具提示,并且可以链接到另一个页面,当访问者悬停或点击它时。
您加载图像,将热点放在您想要的位置,添加工具提示文本,然后对标记进行样式设置工具提示的行为。本指南涵盖了小部件中的每个设置。
Image 热点小部件的作用 #
Widget 将标记放在单个图像的顶部,每个热点都有自己的位置、图标和工具提示,因此您可以标记照片的某些部分或将其链接到其他页面,然后悬停或单击标记,其工具提示就会弹出到旁边。
三个选项卡运行它。 内容 保存图像、热点和工具提示行为。 风格 处理图像、标记颜色和工具提示外观。 高级 是通常的元素间隔和可见性。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- 硕士插件专业版 使用活动许可证安装,因为 Image Hotspot 是 Pro 小部件。插件新功能?查看 安装指南.
- 图像以及您希望每个热点显示的标签或链接。
如何添加图像热点小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 图片热点的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到页面上,它加载了您可以编辑的示例图像和标记。
选择图像 #
打开 内容 选项卡。 图像 部分是您加载热点所在的基础图片的地方。
- 选择图像: 从媒体库中选择图片。
- 图像分辨率: 提供的尺寸,如大号或满号。
- 对齐: 其列内的左侧、中心或右侧。
添加热点 #
打开 热点 section。是一个中继器,所以每个标记都是自己的项目。使用add Item添加标记,然后将每个与滑块一起放置在其位置选项卡中。
- 添加项目: 根据图像需要添加尽可能多的热点。
- 禁用脉冲效应: 关闭标记上的脉冲动画。
- 位置选项卡: 每个标记的水平和垂直位置(百分比)。
设置每个热点 #
单击热点打开其设置。 内容 tab 设置标记类型、其工具提示文本和一个可选链接。
- 类型: 在标记内不显示任何内容、短文本、图标或图像。
- 文本和链接: 标记和 URL 内的文本,当工具提示打开悬停或在该屏幕上禁用时,该 URL 即可工作。
- 工具提示内容: tooltip文本。它是在所见即所得的框中编辑的,但工具提示仅显示纯文本。
风格每个热点 #
的 风格 tab 在热点上设置其颜色。您将获得正常状态的颜色和背景以及悬停的单独设置,以及不透明滑块。
- 默认颜色和背景: 休息时的标记。
- 悬停颜色和背景: 悬停时它如何变化。
- 不透明度: 标记看起来多么坚固。
控制工具提示 #
返回主内容选项卡, 工具提示 section 控制每个工具提示的行为方式:它所在的位置、动画方式,以及它是否在悬停或单击时打开。
- 显示位置和箭头: 工具提示打开哪一侧以及是否有指针。
- 动画: 显露效果,如向转移。
- 单击触发: 单击打开工具提示而不是悬停,更适合触摸。 禁用开启 在平板电脑和移动设备或移动设备上隐藏工具提示。
设置图像和工具提示 #
打开 风格 小部件上的选项卡。 图像 section 设置图片的不透明度、边框和过滤器,并进行分离 热点 並 工具提示 部分设计了标记和工具提示框。
- 图片: 不透明度、边框半径、盒子阴影和 CSS 滤波器。
- 热点: 标记的全局尺寸和颜色。
- 工具提示: 工具提示背景、文本颜色和排版。
常见用例 #
- 产品图像 将特征或规格固定到照片的部分内容。
- 地图和平面图 标记房间、摊位或位置。
- 信息图表 添加细节而不使图像混乱。
- 团队或办公室照片 标记人物或区域。
- 教程 指出屏幕截图上的步骤或部分。
使用图像热点小部件的技巧 #
- 保持热点可读。 将它们间隔开,以便标记和工具提示不会在较小的屏幕上重叠。
- 使用单击手机。 在"点击"上打开"触发器",以便触摸用户可以打开工具提示,因为手机上没有悬停。
- 对比标记。 从后面的图像中选择一种突出的标记颜色,否则一张忙碌的照片就会吞下它。
- 保持工具提示文本短。 一两行读起来比塞进浮动盒子里的段落更好。
- 设置确切的位置。 用位置选项卡滑块,然后在手机上预览以检查每个标记。
观看视频教程 #
喜欢在屏幕上跟进?下面的视频教程从头到尾浏览图像热点元素,显示图像、热点、工具提示和造型在 Elementor 编辑器中的工作原理。
常见问题 #
Master Addons 中的图像热点小部件是什么?
是Elementor的Master Addons Pro小部件,它将交互式标记固定在图像上,每个热点都有自己的位置、标记类型、纯文本工具提示和可选链接,显示在悬停或点击中,所有内容都从Elementor面板设置,没有代码。
如何在图像中添加更多热点?
Content 选项卡中打开热点部分,使用 Add Item 创建另一个标记,每个新热点都有自己的内容、样式和位置,然后将其与滑块一起放置在其位置选项卡中。
我可以添加热点的链接吗?
是每个热点在其内容选项卡中都有一个链接字段,因此一个标记可以指向任何 URL,当工具提示在悬停时打开或在那个屏幕上禁用时,链接可以使图像充当可点击的地图,从照片上的引脚将访问者发送到产品页面、部分或外部站点。
图片热点在移动设备上工作吗?
是的,但触摸时不存在悬停。在"工具提示"部分打开"点击触发器",以便移动用户可以点击标记来打开其工具提示。您还可以将工具提示隐藏在断点下方并使用标记链接代替。
我可以使用自定义图标或图像作为标记吗?
是每个热点在其内容选项卡中都有一个类型选项,您可以在其中显示标记内部的图标或图像,而不是默认的,这样标记就可以匹配您的品牌或图像的主题。
包裹起来 #
Image Hotspot 小部件将平面图像变成交互式图像:加载图片、固定标记、添加工具提示,然后对标记进行样式设置工具提示行为 有关示例以及与 Elementor Pro 的 Hotspot 的比较,请参阅 Elementor 图片热点小部件 page。的相关小部件,请参见 图像比较小部件 和 图像悬停效果小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
