交互式拖放滑块
Magic在交互中,上传你的“前”和“后”图像,然后设置初始可见比率,就像从50%开始,以平等地显示两者,用户可以点击并拖动Handle在两个图像之间滑动,让他们直接控制显示方向(水平或垂直),并将交互设置为鼠标拖动或触摸滑动,这是一种身临其境的展示变化的方式。
- 直观控制:用户拖动手柄以交互式比较两个图像。
- 灵活方向:创建水平(左/右)或垂直(上/下)比较滑块。
- 可调起点:设置初始分割(例如,30%之前,70%之后)以突出显示结果。
可定制覆盖和清晰标签
确保观众了解他们所看到的内容启用覆盖层在图像上显示“Before”和“After”标签完全自定义这些标签:更改文本、排版、颜色和背景您甚至可以使用渐变来对覆盖层进行样式处理Normal和Hover分别进行状态,并控制覆盖层的填充、边距和边框,以实现抛光、集成的外观。
- 自定义标签文本:将“之前/之后”更改为“旧/新”、”“原始/增强、”等。
- 时尚叠加背景:使用纯色、渐变甚至图像作为标签背景。
- 清晰的视觉背景:确保观众永远不会想知道哪张图像是哪张。
专业手柄和容器造型
滑块看起来应该像您设计的一部分,而不是通用工具。完全定制手柄:更改其条形颜色和尺寸,将拖动盒与图标、颜色和背景一起设计,并添加 Box Shadow 和 Border Radius。然后,将主容器(布局样式)与边框、填充物和阴影一起设计。从手柄到标签再到容器中的每个元素都可以根据您的品牌量身定制。
- 拖拉手柄设计:为滑块和可拖拉盒设计图标、颜色和悬停效果。
- 容器波兰语:向小部件添加边框、阴影和间距,使其无缝融入您的布局。
- 响应式触摸:手柄设计为易于在桌面和触摸屏设备上抓取和拖动。
用于图像比较的常见问题
我可以用它来比较两个以上的图像吗?
No,这个元素是专门为直接并排比较两个图像而设计的,它非常适合前/后场景,要展示多个图像或状态,请考虑使用画廊滑块或图像旋转木马代替。
这在手机上如何工作?
Perfectly!滑块完全触控友好,用户可以向左/向右(或向上/向下)滑动手柄,元素响应灵敏,在Elementor的响应编辑模式下,可以调整标签大小和手柄大小等设置,以供移动。
我可以更改标签上的文字吗?
Absolutely。content 设置中,您可以将默认的 “Before” 和 “After” 文本更改为任何您想要的内容。这可以让您为任何场景自定义标签,例如 “Day/Night,” “Without/With,” 或 “产品 A/产品 B。”
垂直方向有什么最佳用途?
垂直滑块非常适合比较高大图像,例如全身肖像、建筑立面或任何“顶部与底部”变形。这也是一个独特的视觉选择,可以让您的比较在一页水平内容上脱颖而出。
使用两个高分辨率图像会减慢我的页面速度吗?
It can,如果图像非常大。明智地使用图像分辨率设置(例如,“Large”而不是‘Full’),并且在上传之前始终优化您的图像以获取网页。元素本身很轻量级,但图像文件大小是性能的主要因素。
我可以以大部分隐藏的"之后"图像启动滑块吗?
是的,使用可见比设置,如果设置为 90%,“After”图像将占用 90% 的空间,将大部分“After”图像隐藏到用户拖动手柄为止,这对于创建惊喜揭开非常有用。
