【通用】自定义热区模块操作说明

一、功能简介

自定义热区，即通过可视化操作方式，在单张图片上，根据实际内容，划分添加多个可点击的热点区域，绑定具体的链接。实现无需编写代码的情况下，达到快速装修店铺页面的效果。

二、PC端自定义热区模块装修

1、PC端自定义热区模块，在通栏、990~190宽度布局中均可装修使用。以通栏为例，点击【店铺装修】→【PC店铺装修】→首页/自定义页，拖入一个通栏布局后，在左侧“模块”标签下，拖入一个通栏宽度下的自定义热区模块；

拖入后如下：

2、双击自定义热区区域，或鼠标悬浮模块后，点击右上角

按钮，打开自定义热区设置界面；

3、弹窗分为左右两块区域，左边显示上传的底图和添加的热区块，右侧可进行图片的上传和热区的添加；

上传图片：根据模块的不同，要求上传的图片宽度必须等于模块宽度，高度则在150~2000px范围内，支持jpg、jpeg、png、gif格式；

如上传的图片如尺寸较大，可通过横向或垂直滚动条滚动查看。

下边距10像素开启：默认开启，取消勾选设置为不开启；

热区类型：包含热区块和文字气泡两种显示样式，热区块即矩形的热点区域，在店铺展示时可直接点击跳转；

热区列表：点击“新增”按钮，默认在底图左上角添加一个热区块，最小尺寸为100*100px；

1）选择热区块类型：

点击“新增”一个热区块。

按住并拖动热区块到底图内容具体区域，点按热区右下角小方块，可拖动改变热区块的大小。

输入热区标题（最长6个字），选择或输入绑定的苏宁内部链接，即完成一个热区块的设置。

如上传的图片过大，可以通过点击“适应窗口”，调整到合适的预览大小。

点击“原始尺寸”，恢复原图大小。

2）选择文字气泡类型：

默认文字气泡的颜色为橙色，字体颜色为白色。

可自定义设置文字气泡的气泡颜色和文字颜色

输入标题后，在店铺展示时，点击气泡进行跳转；

设置完成后，点击“保存”按钮，设置自定义热区模块成功，可在装修界面查看效果；

注：1、一个自定义热区模块最多可添加50个热区。如多个热区之间产生重叠，则重叠部分点击效果，为最新添加的热区所绑定的链接；

2、如果热区底图发生修改替换，系统将校验是否存在有热区块的位置，超过替换后的图片高度，否则无法保存。

三、一键同步

790、990、通栏宽度的自定义热区模块，支持一键同步功能，支持一键同步移动端功能，具体可同步内容如下：

底图：按比例缩放至移动端页面宽度，gif格式底图不同步；

热区块：大小、位置和层级，按比例缩放至移动端。同时，为保证同步后的热区块在移动端可有效点击，规定通栏自定义热区，尺寸小于264*264px的热区块不同步；990自定义热区，尺寸小于137*137px的热区块不同步；790自定义热区，尺寸小于109*109px的热区块不同步。建议装修PC页面时尽量扩大热区块覆盖区域；

热区链接：必须为苏宁内部链接，店铺基础页、自定义页、商品页、商品分类页链接自动转换为移动端地址；

热区类型为热区块，文字标签样式暂不支持同步；

下边距10像素配置值：直接同步。