前后对比版块把两张图片叠在一起，中间有一条分隔线。顾客拖动分隔线，就能看到更多的某一张图片。用它来展示效果（使用前后）、两种颜色或产品的两种表面处理。
添加版块
- 打开建站工具，进入您想要的页面。它可用于首页、产品页、落地页、合集页和全部合集页，每页最多 3 个。
- 在版块标签中，点击添加新版块，在内容分组中选择前后对比。
- 点击其中的前后对比区块，选择您的两张图片，然后点击发布。
前后对比区块
此区块包含两张图片。它始终存在于版块中，无法删除。
- 之前的图片和之后的图片：两张照片。请使用从同一角度拍摄的照片，让它们对齐。
- 之前的标签和之后的标签：每张图片角落的短标签，例如“使用前”和“使用后”，或“黑色”和“白色”。留空即可隐藏标签。
- 方向：水平使用左右拖动的分隔线。垂直使用上下拖动的分隔线。
- 比例：画框的形状。自动跟随之前的图片，也可以选择纵向、正方形或横向。两张图片都会被裁剪成同样的画框。
- 分隔线位置：分隔线的初始位置，5% 到 95%。在 50% 时，顾客看到的是两张图片各一半。
- 出现在屏幕上时显示提示：分隔线会自己移动一下，让顾客知道可以拖动它。
- 在电脑上跟随鼠标：在电脑上，分隔线无需点击就会跟随鼠标移动。在手机上，顾客始终需要拖动。
- 使用父级配色方案：分隔线、把手和标签使用版块的颜色。关闭后可以选择其他配色方案。
版块设置和标题
可以添加最多 2 个文本区块、1 条分隔线和 1 个组，用作标题和简短文字。
- 方向：垂直把标题放在图片上方，水平把标题放在图片旁边。
- 移动端垂直堆叠：默认开启，让图片在手机上保持全宽。
- 位置和对齐、版块宽度、配色方案、内边距以及自定义 CSS标签。
在产品页面上
同样的前后对比区块也可以放进产品信息和落地页信息版块，以及折叠标签中，让对比图紧挨着购买按钮。请参阅如何在产品页面添加折叠标签、配送日期、尺码指南、徽章或前后对比图片？
小贴士
- 在线上店铺中，只有两张图片都选好后才会显示对比。在此之前，建站工具会显示示例图片。
- 顾客也可以用键盘移动分隔线。
- 在设备上开启了减少动态效果的顾客不会看到提示动画。
- 图片看起来被裁剪了？请选择最接近您照片的比例，或使用形状相同的照片。
- 只使用真实效果的真实照片。