图片热点

有些图像需要一点解释,例如产品拍摄、平面图或地图。 图片热点 小部件在 Elementor 的主插件 pins 可点击标记在图像上的任何位置,并且每个都显示一个工具提示,当访问者悬停或点击它时,它带有文本或链接。

您加载图像,将热点放在您想要的位置,添加工具提示文本,然后对标记进行样式设置工具提示的行为。本指南涵盖了小部件中的每个设置。

Image 热点小部件的作用 #

Widget 将标记放在单个图像的顶部,每个热点都有自己的位置、图标和工具提示,因此您可以标记照片的某些部分或将其链接到其他页面,然后悬停或单击标记,其工具提示就会弹出到旁边。

三个选项卡运行它。 内容 保存图像、热点和工具提示行为。 风格 处理图像、标记颜色和工具提示外观。 高级 是通常的元素间隔和可见性。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 图像以及您希望每个热点显示的标签或链接。

如何添加图像热点小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 图片热点的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到页面上,它加载了您可以编辑的示例图像和标记。

选择图像 #

打开 内容 选项卡。 图像 部分是您加载热点所在的基础图片的地方。

• 选择图像: 从媒体库中选择图片。
• 图像分辨率: 提供的尺寸,如大号或满号。
• 对齐: 其列内的左侧、中心或右侧。

添加热点 #

打开 热点 section。是一个中继器,所以每个标记都是自己的项目,用add Item添加标记,拖到图像上就位。

• 添加项目: 根据图像需要添加尽可能多的热点。
• 禁用脉冲效应: 关闭标记上的脉冲动画。
• 拖动到位置: 移动图像上的每个标记,或设置精确的坐标。

设置每个热点 #

单击热点打开其设置。 内容 tab 设置标记类型、其工具提示文本和一个可选链接。

• 类型: 在标记内不显示任何内容、图标或图像。
• 文本和链接: 标记的短标签和 URL。
• 工具提示内容: 悬停时显示全文,在所见即所得框中编辑。

风格每个热点 #

的 风格 tab 在热点上设置其颜色。您将获得正常状态的颜色和背景以及悬停的单独设置,以及不透明滑块。

• 默认颜色和背景: 休息时的标记。
• 悬停颜色和背景: 悬停时它如何变化。
• 不透明度: 标记看起来多么坚固。

控制工具提示 #

返回主内容选项卡, 工具提示 section 控制每个工具提示的行为方式:它所在的位置、动画方式,以及它是否在悬停或单击时打开。

• 显示位置和箭头: 工具提示打开哪一侧以及是否有指针。
• 动画: 显露效果,如向转移。
• 单击触发: 单击打开工具提示而不是悬停,更适合触摸。

设置图像和工具提示 #

打开 风格 小部件上的选项卡。 图像 section 设置图片的不透明度、边框和过滤器,并进行分离 热点 並 工具提示 部分设计了标记和工具提示框。

• 图片: 不透明度、边框半径、盒子阴影和 CSS 滤波器。
• 热点: 标记的全局尺寸和颜色。
• 工具提示: 工具提示背景、文本颜色和排版。

常见用例 #

• 产品图像 将特征或规格固定到照片的部分内容。
• 地图和平面图 标记房间、摊位或位置。
• 信息图表 添加细节而不使图像混乱。
• 团队或办公室照片 标记人物或区域。
• 教程 指出屏幕截图上的步骤或部分。

使用图像热点小部件的技巧 #

• 保持热点可读。 将它们间隔开,以便标记和工具提示不会在较小的屏幕上重叠。
• 使用单击手机。 在"点击"上打开"触发器",以便触摸用户可以打开工具提示,因为手机上没有悬停。
• 对比标记。 从后面的图像中选择一种突出的标记颜色,否则一张忙碌的照片就会吞下它。
• 保持工具提示文本短。 一两行读起来比塞进浮动盒子里的段落更好。
• 设置确切的位置。 用位置选项卡进行精确放置,而不是眼球阻力。

观看视频教程 #

喜欢在屏幕上跟进?下面的视频教程从头到尾浏览图像热点元素,显示图像、热点、工具提示和造型在 Elementor 编辑器中的工作原理。

常见问题 #

包裹起来 #

Image Hotspot 小部件将平面图像变成交互式图像:加载图片、固定标记、添加工具提示,然后对标记进行样式设置工具提示行为,相关小部件请参见 图像比较小部件 和 图像悬停效果小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。