客户浏览独立站时，如果每次想联系客服都要翻到页面底部，转化机会很容易流失。悬浮按钮可以固定显示在页面右侧或底部，让访客在浏览商品、文章和公司介绍时，随时点击邮箱、电话、社交媒体或在线客服入口。
SHOPAGG主题的悬浮区块功能支持按钮、横幅和悬浮操作栏。除了联系方式，还可以制作不会完全遮挡页面的优惠券提示，兼顾营销曝光和正常浏览。
本节是《WordPress建站教程》的第12课，介绍如何通过SHOPAGG主题创建悬浮区块，并说明它与弹出窗口的区别。
什么是网站悬浮区块？
悬浮区块是固定或浮动在网页边缘的功能区域。访客滚动页面时，它通常仍然保持在右侧、底部或其他指定位置。
它适合长期提供轻量入口，例如：
- 在线客服；
- 邮件联系；
- 电话咨询；
- WhatsApp等社交媒体；
- 返回首页或指定页面；
- 应用下载；
- 优惠券提示；
- 快速操作菜单。
与弹出窗口相比，悬浮区块一般不会在打开页面时强制覆盖主要内容。访客可以点击使用，也可以暂时忽略或关闭。
SHOPAGG悬浮区块有哪些类型？
进入悬浮区块管理后，主要可以看到三类功能：
| 类型 | 主要形式 | 适合场景 |
|---|---|---|
| 按钮 | 一个或多个浮动图标 | 客服、邮箱、电话、社交媒体、应用下载 |
| 横幅 | 带图片和文字的悬浮卡片 | 优惠券、促销、新品和活动提醒 |
| 悬浮操作栏 | 集中展示多个快捷操作 | 手机端联系、购买、返回顶部等高频操作 |
选择哪一种，取决于希望访客完成什么动作。只需要一个联系入口时，用按钮即可；需要展示优惠文案时，横幅更合适；多个高频动作需要集中排列时，可以使用悬浮操作栏。
第一步：进入SHOPAGG悬浮区块设置
登录WordPress后台，在“SHOPAGG主题”中找到“悬浮区块”，然后点击添加或新建。
如果后台没有相关菜单，应先确认网站当前启用的是SHOPAGG主题。主题各项功能的总体位置，可以查看第9课：SHOPAGG网站主题设置快速预览
打开新建页面后，可以先选择按钮、横幅或悬浮操作栏，再从对应预设方案开始创建。
第二步：创建在线客服与联系按钮
选择“按钮”后，可以看到帮助按钮、在线客服按钮、社交媒体按钮和应用下载按钮等预设。
如果希望在网站右侧增加“联系我们”入口，可以选择在线客服或联系按钮模板，然后点击“创建”。
进入编辑页面后，会看到悬浮按钮的实际结构。每个按钮都可以设置对应链接或操作，例如：
- 首页按钮跳转到网站首页；
- 邮箱按钮打开访客的邮件应用；
- 电话按钮拨打指定号码；
- 社交媒体按钮打开对应账号；
- 应用下载按钮跳转到下载页面。
悬浮按钮的链接应该怎么填写？
不同按钮需要使用不同类型的链接。
普通网页链接
首页、联系页面和社交媒体可以填写完整网址，例如：
建议使用完整的HTTPS链接，保存后点击测试，避免跳转到404页面。
邮箱链接
希望点击后直接打开邮件编辑窗口，可以使用：
mailto:[email protected]
也可以只按照当前编辑器要求填写邮箱地址。如果主题已经自动处理邮箱链接，就不需要重复添加协议。
电话链接
电话按钮可以使用国际格式，例如：
tel:+8613800000000
面向海外客户时，号码应包含国家或地区代码，避免只填写国内本地号码。
社交媒体链接
填写企业真实使用的社交媒体主页或联系链接。发布前应在未登录社交账号的浏览器中测试，确认外部客户也能正常访问。
第三步：修改按钮并发布
根据实际业务，删除不需要的按钮，保留客户最常使用的联系方式，并修改图标、文字和跳转链接。
完成后点击“发布”，然后打开网站前台刷新页面。如果设置正确，页面右侧或指定位置会显示新的悬浮按钮。
逐个点击检查：
- 首页按钮是否跳转正确；
- 邮箱按钮是否打开新邮件；
- 电话按钮在手机上能否调起拨号；
- 社交媒体链接是否打开正确账号；
- 图标含义是否清楚；
- 关闭按钮是否可以正常使用。
什么时候应该使用SHOPAGG在线客服工具？
悬浮区块可以制作简单的联系按钮，但如果需要管理多种社交媒体、统一设置联系方式，或者希望使用更完整的在线客服能力，SHOPAGG还提供相应工具或插件。
根据视频中的介绍，相关客服工具支持多种社交媒体，配置也更加集中。后续课程会单独讲解如何添加和管理联系方式。
可以这样选择：
- 只需要一两个简单链接：使用悬浮按钮；
- 需要多个社交媒体和完整客服入口：使用专门的客服工具；
- 已经启用客服工具：避免再创建功能重复的悬浮按钮。
重复放置多个客服联系入口，不会必然提高转化，反而可能让页面显得杂乱。
第四步：创建悬浮优惠券横幅
除了按钮，悬浮区块还可以制作带图片、文字和行动按钮的横幅。
选择优惠券或促销类横幅模板，点击“创建”，进入内容编辑页面。可以修改：
- 促销图片；
- 标题；
- 优惠说明；
- 优惠码；
- 按钮文字；
- 按钮跳转链接；
- 颜色与基本样式。
例如将文字改为：
联系客服获取优惠码
面向海外客户时，可以写成：
Contact Us for an Exclusive Coupon
完成后保存并发布，再刷新网站前台检查实际效果。
悬浮优惠横幅应该放什么内容？
横幅空间有限，应该只保留最有价值的信息：
优惠利益点 + 必要条件 + 明确行动
例如：
10% Off Your First OrderUse code WELCOME10
按钮：Shop NowNeed Wholesale Pricing?Contact us for a custom quote.
按钮：Request a QuoteFree Shipping Over $99Limited time offer.
按钮：View Products
优惠信息必须与网站实际活动一致。活动结束后，应及时修改或关闭横幅，避免客户看到过期优惠。
悬浮区块和弹出窗口有什么区别？
两者都可以用于营销和客户联系，但对页面的影响不同。
| 对比项目 | 悬浮区块 | 弹出窗口 |
|---|---|---|
| 展示方式 | 固定在页面边缘 | 覆盖在页面内容上方 |
| 浏览影响 | 通常可以继续浏览 | 往往需要先关闭或完成操作 |
| 强制程度 | 较低 | 较高 |
| 适合内容 | 长期客服、联系方式、轻量优惠 | 重要活动、订阅、退出挽留 |
| 使用频率 | 可以持续显示 | 应控制频率和触发条件 |
| 手机端风险 | 可能遮挡按钮或文字 | 可能覆盖大部分屏幕 |
简单来说，弹出窗口强调“请先看这条信息”，悬浮区块强调“需要时可以随时使用”。
上一课已经详细介绍弹出窗口，可以结合阅读：WordPress如何设置促销与退出意图弹窗？
悬浮区块真的不会遮挡页面吗？
悬浮区块通常比弹窗干扰更小，但并不代表任何设置都不会遮挡内容。图片过大、按钮太多或位置不合理，仍可能挡住商品购买按钮、Cookie提示、手机导航和页面文字。
发布后应重点测试：
- 电脑端不同浏览器；
- 常见手机屏幕；
- 首页、商品页和结账页；
- 页面顶部、中部和底部；
- 横屏和竖屏状态；
- 与其他客服、Cookie或促销组件是否重叠。
如果影响主要操作，应缩小尺寸、减少按钮、调整位置，或只在部分页面显示。
悬浮按钮应该放多少个？
没有固定数量，但越多不一定越好。建议优先保留客户最常用的2至4个操作，例如：
- WhatsApp或主要客服；
- 企业邮箱；
- 电话；
- 返回顶部。
如果企业主要通过WhatsApp联系，就没有必要同时突出十几种社交媒体。选择最符合目标客户习惯的渠道，通常比“全部展示”更有效。
如何让悬浮区块更专业？
可以遵循以下原则：
- 使用统一的品牌颜色和图标风格；
- 图标旁的文字简短明确；
- 链接都经过实际测试；
- 按钮与页面背景有足够对比；
- 关闭按钮清楚可见；
- 不使用闪烁过快或强烈干扰的动画；
- 不与购物车、结账或Cookie按钮重叠；
- 图片经过压缩，不增加过多加载时间；
- 手机端按钮大小适合手指点击。
需要多次调整时，可以先通过SHOPAGG主机管理面板创建网站备份，再逐项修改并检查前台。
如何判断悬浮区块有没有效果？
悬浮区块上线后，可以观察：
- 客服按钮点击次数；
- 邮件、电话或社交媒体联系数量；
- 优惠券领取和使用次数；
- 询盘表单提交数量；
- 商品页面到客服的转化情况；
- 电脑端与手机端的点击差异。
如果一直显示却几乎没人点击，应检查图标是否难以理解、位置是否不明显、链接是否错误，或者所提供的联系方式并不是客户常用渠道。
常见问题
1. SHOPAGG悬浮区块在哪里设置？
启用SHOPAGG主题后，在WordPress后台打开“SHOPAGG主题”，找到悬浮区块并点击添加。
2. 悬浮区块支持哪些内容？
可以创建按钮、横幅和悬浮操作栏，用于在线客服、邮箱、电话、社交媒体、应用下载和优惠券等场景。
3. 邮箱按钮应该填写什么？
可以按照编辑器提示填写邮箱，或使用 mailto:[email protected] 格式。发布后应测试是否能够正常打开邮件应用。
4. 电话按钮应该怎么填写？
建议使用包含国家或地区代码的国际号码，并根据当前字段要求填写。使用电话链接时可以采用 tel:+国家代码号码 的格式。
5. 悬浮区块和弹窗应该选哪个？
长期客服和轻量入口更适合悬浮区块；必须及时传递的重要活动、订阅和退出挽留更适合弹出窗口。
6. 为什么发布后前台没有显示？
检查悬浮区块是否已经发布并启用、当前页面是否符合显示条件、当前主题是否为SHOPAGG主题，以及网站缓存是否仍在显示旧页面。
7. 悬浮按钮可以连接WhatsApp等社交媒体吗？
可以设置对应联系链接。需要管理多种社交渠道时，也可以使用SHOPAGG提供的专门客服工具，减少重复设置。
8. 不需要悬浮区块后怎么关闭？
可以在悬浮区块列表中关闭、设为草稿或移至回收站。促销结束后应及时停用过期内容。
本节小结
使用SHOPAGG主题创建悬浮区块，可以按照以下流程操作：
进入悬浮区块 → 选择按钮、横幅或操作栏 → 创建模板 → 修改文字、图片和链接 → 发布 → 检查电脑端与手机端。
悬浮区块比弹出窗口更轻量，适合长期显示客服和优惠入口。但仍要控制尺寸、数量和位置，确保它不会遮挡商品信息与购买操作。
通过SHOPAGG官网可以一键部署WordPress跨境独立站，并直接使用配套主题的悬浮区块、弹出窗口和其他运营功能。
