子比主题美化：页面左下角添加铃铛动画欢迎提示框

本次教程为大家分享子比主题专属美化技巧，可在网站页面左下角添加一款带铃铛动画的胶囊式欢迎光临提示框。该美化效果能够有效提升网站的视觉层次感，拉近站点与访客的距离，增强页面亲和力与用户浏览体验，适配子比主题深浅色模式，且兼顾移动端展示适配需求。

安装教程

本美化代码支持拆分添加，也可合并保存使用，大家可根据自身后台操作习惯自由选择。教程采用分开添加的方式，步骤清晰、不易出错，具体操作如下：

添加CSS样式代码

将以下完整CSS代码复制，粘贴到子比主题后台对应的自定义CSS代码编辑区域，用于实现提示框的样式、动画、适配等全部视觉效果。

添加JavaScript交互代码

将下方JS代码粘贴至主题自定义JavaScript代码区域，主要用于实现提示框关闭动画、点击移除等交互功能，保障操作流畅度。

添加底部HTML结构代码

将以下HTML代码添加到主题自定义底部HTML区域，用于构建欢迎提示框的整体结构、铃铛图标与文字内容。

图标自定义替换说明

教程默认配备铃铛SVG图标，大家可根据网站风格自由替换图标，自定义方式灵活多样，具体替换方案如下：

• 可前往阿里巴巴矢量图标库挑选适配的免费图标，替换代码中的SVG标签内容
• 下载SVG图标文件后，通过img标签引入本地或线上SVG文件使用
• 支持引入Font Awesome等主流图标库图标，直接修改对应图标代码即可
• 也可直接使用图片格式图标，替换原有图标模块代码即可生效

使用注意事项

1. 三段代码需分别对应粘贴至CSS、JavaScript、底部HTML对应编辑框，粘贴后保存设置，刷新网站即可生效；

2. 自定义图标时，建议选择尺寸适配的图标，避免出现显示错位、变形问题。