热区组件

热区是在楼层切图上叠放的透明可点击区域：访客在页面上看不到色块，但鼠标点进该区域会跳转到您设置的链接。

装修时在编辑器里会显示淡蓝色框，方便对齐按钮位置；发布后只保留点击能力，不影响画面外观。

常用做法：先放好「图片背景容器」并设好背景图，再从左侧 「基础」 拖入 「热区组件」，盖在切图上的按钮、导航、产品入口等位置。

组件能做什么

• 透明点击：线上页面无颜色、无边框，不遮挡设计图。
• 任意形状区域：通过拖动和调整宽高，框住切图里任意矩形范围。
• 配置跳转链接：支持填写网址，或用链接选择器从店铺页面里选取。
• 可多块叠加：同一楼层可放多个热区，分别指向不同页面。

设置项说明

位置与大小

热区没有单独的图片属性，位置和大小在画布上调整：

常见用法

整图楼层上的多个按钮

背景图里画了「联系我们」「查看产品」等按钮，但不需要换图效果时：每个按钮位置放一个热区，分别设置对应链接即可。

大面积可点区域

整张 Banner 或某块区域都要跳转到活动页时，可拉一个较大的热区盖住该区域，不必为每个小图标单独建热区。

注意事项

• 必须放在容器里面：热区应拖进「图片背景容器」等父组件内；放在容器外会导致位置对不齐。
• 相对父容器定位：边距是相对于父容器的，改背景图或大小时，建议检查热区是否仍盖住按钮。
• 编辑器里的蓝框不会上线：发布后是透明链接，若预览时「点不到」，多半是热区偏小、偏位或链接未填。
• 链接务必检查：保存前在预览里逐块点击测试；默认「新窗口打开」适合跳商品、外链。
• 不需要换图就用热区：若按钮需要悬停变图，请用「可变化图片」，不要叠多个热区代替。

推荐操作顺序

1. 完成「图片背景容器」并设置背景图；
2. 从「基础」拖入热区，拖到第一个按钮位置并调好大小；
3. 填写链接地址，勾选是否新窗口打开；
4. 复制或再拖热区，为其余按钮重复 2～3 步；
5. 预览点击无误后保存并发布。

如有疑问，可结合「图片背景容器」「可变化图片」文档一起查看。