有些事情比讲述更容易展示:修饰的照片、改建后的房间、清理前后的设计。免费的 图像比较小部件 在 Elementor 的主插件 堆叠两个图像并在它们之间掉落一个可拖动的手柄,以便访客滑动以显示差异本身。
您加载前图像和后图像,添加标签,选择垂直或水平分割,然后对手柄和标签进行样式以匹配您的网站。本指南涵盖了小部件中的每个设置。
"图像比较"小部件的作用 #
Widget 显示同一帧中的两个图像,一个在另一个之上,中间有一个滑块手柄。拖动手柄,它擦拭在前后图像之间。您可以标记每一侧,将分割从左向右翻转到顶部底部,并决定手柄是否遵循拖动(免费),或者使用 Master Addons Pro 进行单击或鼠标移动。
有两个选项卡可供使用。 内容 保存两个图像、标签和滑块行为。 风格 控制布局、覆盖标签和手柄。通常的 Elementor Advanced 选项位于它们旁边。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 两个排列的图像,大小和帧相同,因此幻灯片读取为一个场景。
如何添加图像比较小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 图像比较的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上,它加载了两个示例图像和一个滑块,您可以立即开始编辑。
加载两个图像 #
打开 内容 选项卡。 图像 部分有一个 之前 和一个 之后 tab,并且每个都设置自己的图像、标签和分辨率。
- 之前/之后选项卡: 两侧切换以设置每个图像。
- 选择图像: 从媒体库中选择该面的图片。
- 标签: 侧面的简短说明,例如"工作前"或"最终结果"。
- 图像分辨率: 提供的尺寸,如全尺寸或大尺寸。
从库中选择每张图像 #
单击 选择图像 wordpress媒体库打开,在before选项卡上设置before图片,然后切换到after选项卡,然后选择第二个容易忘记的事情:你所在的选项卡决定你要改变哪一侧,所以在你点击选择之前检查一下。
设置标签 #
A型 标签 ab上,widget将其打印为图像那一侧的覆盖层,before标签位于一侧,after标签位于另一侧,因此访问者无需您拼写即可知道哪一个是哪个。
调整滑块设置 #
打开 设置 section for slider 的行为方式,这是你设置起始位置、分割方向以及手柄移动的方向。
- 可见比率(%): 手柄从哪里开始,因此您可以在前侧或后侧打开。
- 覆盖: 显示或隐藏标签前后的内容。
- 移动手柄: 鼠标拖动/滑动是免费的。鼠标移动和鼠标点击需要 Master Addons Pro。
切换方向 #
的 方向 toggle 在水平和垂直之间切换,水平,默认,给出一个左右擦拭,垂直将前面的图像堆叠在上面,后面,用上下手柄,通常读起来更适合高大的照片。
样式布局、手柄和标签 #
打开 风格 tab。x (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab 布局风格, 叠加, 手柄、和 标签的,所以滑块符合你的设计,而不是默认的外观。
- 布局风格: 整个滑块周围的边框、填充物和边框。边框半径和框影是专业选项。
- 手柄: 拖动控制的颜色、尺寸和样式。
- 标签: 标题的每面颜色、排版、背景、边框和间距。
常见用例 #
- 照片编辑 在修饰版本旁边显示原始镜头。
- 家居和装修 改造或清理之前和之后。
- 设计和开发 旧布局与重新设计。
- 健康和健身 并排进行射击。
- 产品 完成或样式结果旁边的普通项目。
使用图像比较小部件的技巧 #
- 匹配两个图像。 大小、角度和裁剪相同,因此幻灯片读取为一个场景,而不是两张照片卡在一起。
- 设置起始比。 以可见比例打开中途,这样游客就可以知道有什么东西需要拖动。
- 保持标签短。 Before 和 After,或者两个单词,比完整的句子更干净地坐在图像上。
- 选择正确的触发器。 Drag适用于桌面和触摸屏,Pro鼠标移动选项感觉很快,但在手机上却无所作为,手机没有悬停。
- 使用垂直镜头进行高镜头。 自上而下的分体比狭窄的左右擦拭更适合肖像图像。
观看视频教程 #
喜欢在屏幕上跟进?下面的视频教程从头到尾浏览图像比较元素,显示图像、标签、滑块设置和造型在 Elementor 编辑器中的工作原理。
常见问题 #
Master Addons 中的图像比较小部件是什么?
Elementor小部件,将前后图像叠加,其间有一个可拖动的手柄,访问者滑动手柄从一个图像擦拭到另一个图像,每侧都有可选标签,全部从Elementor面板设置,没有代码。
如何在标签前后添加?
开"图像部分,在"之前选项卡和"之后选项卡上键入标签,每个标签在其图像侧面打印为覆盖层,您可以在"设置中用"覆盖层切换显示或隐藏它们,并在"样式选项卡的标签部分中对它们进行样式。
我可以使滑块垂直还是水平?
是设置部分有一个方向切换,默认是水平,左右分割;切换到垂直,图像堆叠顶部和底部,带有上下手柄,垂直对人像图像或高屏幕截图效果很好。
访客如何移动比较滑块?
"设置"中的"移动手柄"下拉设置触发器。鼠标拖动/滑动是免费的, 适用于桌面和触摸屏。鼠标移动和鼠标点击是Master Addons Pro选项。
我需要相同尺寸的图像吗?
为了获得最佳结果,是的。两个图像位于同一帧中,因此匹配的大小、角度和裁剪使幻灯片读取为一个场景。如果图像不同,请设置固定的图像分辨率,以便两者都以相同的尺寸提供。
包裹起来 #
Image Comparison 小部件将两个图像变成前后交互:加载两个图片,添加标签,设置方向和句柄,然后对滑块进行样式以匹配,相关小部件请参见 图片热点小部件 和 图像悬停效果小部件,浏览全文 主插件小部件和扩展,并看到 图像比较小部件页面 或 滑动导轨之前和之后 为例子。
