如何在 Elementor 中添加图像比较滑块(免费)

的 主插件图像比较小部件 让您在任何 Elementor 页面中丢弃一个免费的先后滑块,无需 Elementor Pro,也无需额外的插件订阅。您安装主插件,将小部件拖到您的页面上,上传两张图像,访问者将获得一个可拖动的句柄,可以在它们之间擦除。

本指南贯穿了每个设置:启用小部件、将其添加到页面、在第一次尝试时几乎会绊倒每个人的尺寸规则、方向、可见比例、手柄类型、造型以及当滑块在移动设备上行为不端时该怎么办。如果机制点击后了解更多前后设计想法,请参阅 完整的展前指南.

开始之前您需要什么

• WordPress 安装了 Elementor 并处于活动状态。Elementor 的免费版本就足够了。
• Elementor 已安装和活动的主插件 免费计划涵盖此小部件 请参阅 安装指南 如果该插件对您来说是新的。
• 2个图像裁剪到完全相同的像素尺寸,更多关于为什么在片刻,它比人们预期的更重要。

步骤 1:启用图像比较小部件

Master Addons 附带数十个小部件,并且并非所有小部件默认在每次安装时都加载。转到 主插件 → 小部件 在您的 WordPress 仪表板中并确认 图像比较 是打开的,如果片刻之后它没有出现在元素者的元素面板中,这几乎总是为什么。

第 2 步:将小部件添加到您的页面

Elementor打开一个页面,在Elements面板中搜索图像比较(查找紫色MA徽章),然后拖到你的页面上,它加载了两个占位符图像和一个工作滑块,所以在触摸单个设置之前可以看到布局。

第 3 步:上传您的前后图像

打开 内容 选项卡,然后 图像 部分。它有一个 之前 选项卡和一个 之后 tab,并且每个都有自己的选择一个图像字段、标签字段和图像分辨率设置,在before标签上设置before照片,切换到after,设置第二张照片,很容易将两个图像错误上传到同一个标签,所以在选择图像之前检查哪个标签是活动的。

如果您想要覆盖标题,请在每个选项卡上键入一个简短的标签,例如"“之前"和"“之后",”或"旧设计”和"“红色设计。"

让每个人都兴奋的规则:匹配图像尺寸

2张影像都需要完全相同的像素尺寸、相同的宽度和相同的高度,如果一张照片是1600×1000,另一张是1200×800,滑块拉伸或裁剪其中一张来贴合,而对比看起来在有人拖动手柄的那一刻就扭曲或错位。

WordPress 自己的任何编辑器中,在上传之前,将两个图像裁剪到相同的尺寸,从而修复此问题 内置图像编辑器 upload 后。在小部件中的两个选项卡上设置固定的图像分辨率有帮助, 但它不会修复两个源照片之间截然不同的宽高比。

4步:设置方向

在设置部分中,方向切换在垂直分割(默认情况下为左右擦拭)和水平分割(上下擦拭)之间切换。垂直适合宽阔的风景镜头。水平通常对于高或肖像图像读数更好,因为狭窄的左右条子不能同时显示足够的高照片。

5步:设置可见比率和句柄类型

Visible Ratio 设置页面加载时句柄所在的位置,以百分比表示。将其打开大约 50% 以获得中立的第一印象,或者如果您希望前后图像在加载中占主导地位,请将其启动到更靠近一侧的位置。

Move Handle决定什么触发幻灯片:拖动或滑动,点击或悬停拖动在桌面上运行良好,访问者希望抓取和拉动悬停在鼠标上感觉很光滑,但对于根本不会悬停的触摸用户来说可能会失火,因此如果您的许多流量是移动的,拖动/滑动或点击是更安全的默认值。

第 6 步:为滑块设计样式

Style 选项卡涵盖了 Layout Style(边框、半径、整个小部件周围的框阴影)、Handle(颜色、大小、图标)和 Label(每侧颜色、排版、背景和标题覆盖的间距)。这些都不会改变滑块的工作方式,只会改变滑块的外观,因此在第一次通过时跳过并在机制正确后返回是安全的。

移动和触摸行为

Elementor默认是响应式的,所以小部件在没有额外设置的情况下,就与viewport一起调整大小,实际上需要在手机上进行测试的是移动手柄设置,用手指自然拖动和滑动工作,点击也工作,在触摸屏上不存在悬停,因此设置为悬停的滑块只是静止地放置在移动访问者身上,只显示启动的可见比率,而无法移动它。

Elementor 自己的指南 响应式设计 如果您还需要调整平板电脑或移动设备的小部件本身的大小,请与手柄行为分开,请涵盖断点基础知识。

主插件与其他元素比较选项

Elementor内核,免费或Pro,没有自己的原生图像比较小部件,无论你走哪条路线,你都以任何一种方式安装第三方小部件,所以诚实的比较是在那些小部件之间,而不是插件和“内置Elementor”之间

排除常见问题的麻烦

• "元素"面板中缺少的小部件: 重新检查主插件 → 小部件并确认启用图像比较。
• 滑块看起来拉伸或倾斜: 这两个图像的像素尺寸不同;裁剪它们以匹配。
• Handle 不会在手机上移动: 移动句柄设置为悬停;将其切换到拖动/滑动或单击。
• 标签未显示: 确认"设置"中的"覆盖"切换已打开,并且两个选项卡上实际上都输入了标签。

如果您喜欢这种拖动显示交互, 图片热点小部件 和 图像悬停效果小部件 使用类似的悬停和点击模式来注释或动画图像。

常见问题

相关阅读

• 完整的展前指南
• 图像比较文档
• 主插件小部件和扩展库