静态并排图像并不能公正地完成工作。一张照片编辑、一张家庭装修、一张产品改造,它们都值得比两张相邻的照片更好。安 elementor 图像比较滑块 fixes that。visitors拖动一个手柄在图像上显示前后版本本身,那一点点交互使它们在您的页面上保持更长的时间。
Master Addons Image Comparison 小部件我一直在客户端登陆页面上使用,它始终比静态截图获得更多的参与度,本教程涵盖了设置、自定义以及一些值得您在发布之前了解的小部件是免费的,它像任何其他小部件一样位于 Elementor 的面板内,并且您可以在大约两分钟内运行它。
本指南涵盖的内容:
什么是图像比较滑块?
1个图像比较滑块,将2个图像相互叠加,中间有一个可拖动的分隔符,用户左右(或上下)滑动,将1个图像显示在1个图像上,您在编辑器中设置了“前”图像和“后”图像,其余部分由小部件处理。
您可能在摄影作品集、牙科网站或显示翻新项目的房地产页面上看到过这些内容,访问者不是被动地查看两张单独的照片,而是与比较进行物理交互,这种交互会增加页面上的时间,这有助于您的 搜索引擎优化 并降低反弹率。
谁需要 Elementor 中的前后滑块?
示变身的人, 这些是我最常遇到的用例:
网页设计师和代理机构
网站重新设计在比较滑块中看起来很棒。让潜在的客户端在新旧设计之间拖动比平坦的屏幕截图更值得信赖。您可以将此与 图像悬停效果小部件 如果您想要在作品集页面上提供额外的视觉多样性。
摄影师和照片编辑
可能是最自然的贴合。如果您进行修饰、颜色分级或修复工作,图像比较滑块可以让潜在客户准确地看到您可以做什么。左侧是原始文件,右侧是编辑版本。说的比任何标题都多。
电子商务商店
销售护肤品、清洁产品或任何有明显效果的东西? A 之前进行图像比较 on your product page 比一段文案更有说服力,对于视觉差异非常大的化妆品和家装产品,我看过这部作品特别好。
房地产和建筑
Renvation项目是天生的一对,工作开始前拍一张照片,完成后再拍一张,都掉进比较小部件中,你的作品集获得更多的互动,访客往往会花更多的时间浏览你的项目。
数字营销人员
Analytics仪表板, 广告性能, 网站流量图表。显示与我们合作之前的“和与我们合作之后的“结果与拖动比较滑块。比将两个截图粘贴到案例研究中效果更好。
主插件图像比较小部件:您得到的
添加 a 有多种方法 elementor 中的"slider"之前。有些需要独立插件,有些需要自定义代码,有些锁定在高级插件订阅后面。主插件包括 图像比较小部件 在免费版本中。值得注意的是,大多数竞争插件(ultimate Addons、PowerPack、The Plus Addons)都将此功能置于付费墙后面。
该小部件包括:
- 本机元素器集成: Elementor面板拖放,没有短代码,没有单独的设置页面,从安装 WordPress 插件存储库 它会立即显示在您的小部件列表中。
- 免费使用: 图像比较小部件是免费版本的一部分。无需专业版许可。
- 多种控制风格: 柄(拖动)、鼠标移动(悬停)或点击,同时支持水平和垂直比较方向。
- 自定义标签: 将“前”和“后”文本更改为任何你想要的、任何语言的文字。标签颜色、排版和定位均可调节。
- 响应式: 适用于桌面、平板电脑和移动设备。触摸和滑动手势可在移动设备上运行。
主插件有 80多个小部件和扩展 total。image 比较小部件是在登陆页面和投资组合项目中出现很多的一个。
如何在 Elementor 中创建前后滑块(一步一步)
在开始之前,您需要两者 元素 and 安装并激活的主插件,两者都是免费的,转到 插件 > 添加新内容、搜索每个插件名称、安装和激活。
步骤 1:启用图像比较小部件
Image Comparison 小部件默认启用,如果您已经关闭了一些小部件以保持面板精简,请检查它是否仍在打开。转到 主插件 > 插件和扩展 在您的 WordPress 仪表板中,确认已打开图像比较。 图像比较文档 有完整的设置细节,当你在那个仪表板中时,你可能会注意到其他值得打开的小部件,比如 动画标题 或 画廊滑块.
第 2 步:在 Elementor 中打开页面
Elementor 创建新页面或打开现有页面,我已经为本教程创建了一个新的着陆页面,但比较滑块以相同的方式掉入任何现有页面。
步骤 3:添加图像比较小部件
Elementor面板左侧,搜索“图像比较”(你会看到旁边的主插件图标)。将小部件拖到你的页面中,无论你想让滑块出现。
第 4 步:上传您的前后图像
单击小部件,您将看到两个图像上传字段:一个用于前图,一个用于后图。两者都上传,预览更新立即在中心使用分隔符句柄。
快速单挑: 两种图像的尺寸应该相同。如果一个是1200×800,另一个是900×600,布局会看不出来,上传前裁剪成一样大小,这比什么都绊倒人。
第 5 步:自定义标签文本
默认标签上写着"“之前"和"“之后",但您可以将这些更改为任何东西。销售产品吗?使用 “Without” 和 “With。” 显示翻新?尝试 “Day 1” 和 “Finished。” 标签字段接受任何文本,包括非英文字符,因此本地化不是问题。
6步:配置滑块设置
"内容"选项卡下, 还有一些值得调整的设置:
- 方向: 横(左/右)和垂直(上/下)比较之间切换,水平是默认值,适用于大多数情况。
- 可见度比: 控制分割器开始的位置。将其设置为 50% 以进行居中分割,或者将其移位以显示初始图像中的更多图像。
- 覆盖: 启用或禁用图像上的颜色覆盖。
- 手柄类型: 鼠标拖动或鼠标悬停之间进行选择进行比较。拖动需要访问者单击并拖动。悬停揭示了鼠标的运动,感觉更流畅,但在某些布局上可能会迷失方向。
第 7 步:为滑块设计样式
Style标签页切换可视化自定义,可以更改分隔符颜色,在比较容器周围添加边框,调整标签排版(字体族、大小、重量),添加框阴影,控制间距,在这里花几分钟,匹配您网站的设计,有足够的控制,您最终不会得到一个通用外观的滑块。
点击发布和您的 之前滑动 是活的。从开始到结束大约两分钟,假设你的图像已经准备好了。
更好的图像比较技巧
Widget处理技术面,但是比较本身只和你的设置一样好,我在客户端站点上构建这些我已经学到的几件事:
匹配您的图像尺寸
I已经提到过,但这是我最常看到的错误,如果你的前图是1920×1080,你的后图是800×600,滑块会迫使它们对齐,结果看起来是扭曲的,在上传之前将两个图像裁剪到完全相同的像素尺寸。每次。
保持构图相似
2张照片都用相同的角度、相同的距离、相同的取景,如果你的前照是宽幅拍摄,后照是特写镜头,对比度就不会按你想要的方式降落,当两幅图像的差别只有实际变化时,滑块看起来最好。
转型中心
Zai图像中心附近放上最明显的变化, 那是分割器开始De地方, 所以是人们与滑块互动时首先注意到的事, Ru果变化偏向一边, 调整可见度比引起注意。
不要做得太过分
1个页面板块强力对比就够了,我看过有五六个滑块叠在一起的页面,它会浇灌下冲击力,挑选你最好的一对前后,并特色那一对,如果你有多个比较,就把它们组织在一个 可过滤图像库 或 图片旋转木马 相反。
附近添加 CTA
如果比较位于销售或投资组合页面上,请在它的正下方掉一个号召性用语按钮。刚刚拖过令人印象深刻的转变的人已经订婚了。 “获得免费报价”或“立即购物”按钮就倾向于转换得很好。
故障排除:当滑块不行时
大多数设置都可以,但有一些东西会让人们兴奋不已。以下是如何修复我被问到的内容。
- 滑块没有出现。 十分之九的小部件被禁用。去 主插件,然后是插件和扩展并且确认图像比较已打开。如果已打开但仍然丢失,请清除缓存(LiteSpeed、WP Rocket 或 Cloudflare),以便页面旧副本停止服务。
- 手柄不会拖动。 JavaScript冲突或者是组合或者推迟小部件脚本的缓存插件,这几乎都是。从JS组合和推迟中排除Master Addons脚本,清除缓存,再测试一次。
- 这两个图像看起来拉伸或错位。 它们是不同的维度。既裁剪到相同的像素维度又重新上传,这是最常见的原因。
- 它可以在桌面上工作,但在移动设备上不工作。 检查父容器中没有溢出隐藏样式剪切触摸区域,并且滑块上没有东西卡住滑块来卡住滑动。触摸开箱即用,因此滑动失败几乎总是布局或 z 索引问题。
- 标签前后均被切断。 Style标签下缩短标签文字或缩小标签字体大小;很长的标签会溢出到小屏幕上的图像外面。
如果这些都没有修复,请将详细信息发布在 主插件支持论坛 主题和活动插件通常会很快确定冲突。
图像比较小部件与替代品
快速查看主插件与其他插件的比较 wordpress 图像比较滑块 元素器的选项:
| 特点 | 主插件 | 终极插件(阿联酋) | 元素套件 | 电源包 |
|---|---|---|---|---|
| 免费图像比较小部件 | 是的 | 否(仅限专业人士) | 是的 | 否(仅限专业人士) |
| 水平+垂直 | 是的 | 是的 | 是的 | 是的 |
| 自定义标签文本 | 是的 | 是的 | 是的 | 是的 |
| 鼠标悬停模式 | 是的 | 是的 | 否 | 是的 |
| 可见度比控制 | 是的 | 是的 | 否 | 是的 |
| 移动触摸/滑动 | 是的 | 是的 | 是的 | 是的 |
| 插件中的总小部件 | 80岁以上 | 40个以上 | 90岁以上 | 60岁以上 |
Pro插件,差别很大就是免费可用,如果不想为了获得前后滑块而付费,Master插件和ElementsKit是你的选择,Master插件还包括 文本叠加技术 並 图像悬停效果 在免费层中,因此您无需升级即可获得更广泛的图像工具集。
为什么要使用主插件进行图像比较?
图像比较小部件是 80 多个元素和扩展之一 Elementor 的主插件.很多用户为一个小部件安装它,最后在同一个项目上使用了其他几个小部件,我也是这样开始的。
除了单独的小部件之外,您还可以获得一个 主题构建器 对于自定义标题、页脚和存档页面。有一个 弹出窗口生成器 具有退出意图和滚动触发器。和 模板库 使用预构建部分,您可以一键导入。
V3.0。0明显比旧版本更快,该插件被积极维护,并且它在40,000多个WordPress网站上运行。 硕士插件专业版 如果您需要这些功能,请添加小部件生成器、白标模式和高级支持。
开始
设置a 在图像比较滑块之前 in Elementor 使用 Master Addons 需要几分钟,没有代码,没有高级插件购买,没有单独的比较插件安装。该小部件是免费的,适用于任何 Elementor 设置,自定义涵盖从标签文本到分隔色的所有内容。
免费下载主插件 并在下一个项目中尝试图像比较小部件。如果您需要在 Elementor 构建中添加更多内容,请查看 专业计划.
相关阅读: 元素图像旋转木马教程 | Elementor 可过滤图库插件 | 25 元素文本过图像技术
喜欢观看吗?以下是《元素》中的快速攻略:
常见问题
如何在 Elementor 中添加滑块前后?
装(免费)主插件,在Elementor中打开你的页面,在面板中搜索图片比较小部件,拖到你的页面上,上传你的前后图片,如果需要调整标签,发布时间大约两分钟。
Elementor 有免费的图像比较小部件吗?
是的。主插件包含免费的图像比较小部件,具有水平/垂直模式、自定义标签、拖动和悬停控件以及完整的样式选项。无需 Pro 升级。
WordPress 的滑块插件之前最好的是什么?
Elementor用户来说,Master Addons是一个坚实的免费选项,具有原生集成和多种控制样式,如果您不在Elementor上,像BEAF(之前之后的画廊)这样的独立插件可以与古腾堡和其他构建器一起使用。
如何在图像之前和之后创建而不进行编码?
Master Addons 图像比较小部件使用 Elementor。将其拖到您的页面上, 上传两个图像, 从可视面板配置设置。任何时候都不需要代码。
我可以在移动设备上使用图像比较滑块吗?
Yes。widget 响应灵敏,支持触摸手势,访问者用手指滑动分隔器比较图像,和在桌面上拖动一样。
图像前后尺寸应是多少?
2张影像都需要尺寸完全相同,1200×800或1920×1080是常见的选择,尺寸不匹配导致滑块强制对准,扭曲了比较。
如何进行水平和垂直图像比较?
Widget 设置中,在内容选项卡下查找方向选项,在水平(左/右分隔符)和垂直(上/下分隔符)之间切换,水平是默认值。
图像比较滑块会减慢我的页面速度吗?
Not meaningfully,只要你的图片优化了,小部件脚本轻量级;真正的权重是两个图片本身,按照它们实际显示的大小作为压缩的WebP服务,并保持每个在150KB或更少,滑块增加了可以忽略不计的加载时间。
为什么我发布后我的图像比较滑块不起作用?
几乎总是缓存或脚本冲突清除您的页面缓存(LiteSpeed、Cloudflare 或 WP Rocket)和硬重载。如果句柄仍然不会拖动,请将主插件 JavaScript 排除在任何组合或延迟设置之外,清除缓存,并重新测试。主插件插件和扩展面板中最近禁用的图像比较小部件是另一个常见原因。
