图像比较

有些事情比讲述更容易展示:修饰的照片、改建后的房间、清理前后的设计。 图像比较 小部件在 Elementor 的主插件 堆叠两个图像并在它们之间掉落一个可拖动的手柄,以便访客滑动以显示差异本身。

您加载前图像和后图像,添加标签,选择垂直或水平分割,然后对手柄和标签进行样式以匹配您的网站。本指南涵盖了小部件中的每个设置。

"图像比较"小部件的作用 #

Widget 显示同一帧中的两个图像,一个在另一个上面,中间有一个滑块手柄。拖动手柄,它擦拭在前后图像之间。您可以标记每一侧,将分割从左向右翻转到上底部,并决定手柄是否遵循拖动、点击或悬停。

有两个选项卡可供使用。 内容 保存两个图像、标签和滑块行为。 风格 控制布局、覆盖标签和手柄。通常的 Elementor Advanced 选项位于它们旁边。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 两个排列的图像,大小和帧相同,因此幻灯片读取为一个场景。

如何添加图像比较小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 图像比较的,(或)滚动到主插件部分(小部件带有紫色MA徽章)。将其拖到您的页面上,它加载了两个示例图像和一个滑块,您可以立即开始编辑。

加载两个图像 #

打开 内容 选项卡。 图像 部分有一个 之前 和一个 之后 tab,并且每个都设置自己的图像、标签和分辨率。

• 之前/之后选项卡: 两侧切换以设置每个图像。
• 选择图像: 从媒体库中选择该面的图片。
• 标签: 侧面的简短说明,例如"工作前"或"最终结果"。
• 图像分辨率: 提供的尺寸,如全尺寸或大尺寸。

从库中选择每张图像 #

单击 选择图像 wordpress媒体库打开,在before选项卡上设置before图片,然后切换到after选项卡,然后选择第二个容易忘记的事情:你所在的选项卡决定你要改变哪一侧,所以在你点击选择之前检查一下。

设置标签 #

A型 标签 ab上,widget将其打印为图像那一侧的覆盖层,before标签位于一侧,after标签位于另一侧,因此访问者无需您拼写即可知道哪一个是哪个。

调整滑块设置 #

打开 设置 section for slider 的行为方式,这是你设置起始位置、分割方向以及手柄移动的方向。

• 可见比率(%): 手柄从哪里开始,因此您可以在前侧或后侧打开。
• 覆盖: 显示或隐藏标签前后的内容。
• 移动手柄: 拖动或滑动、单击或悬停以移动滑块。

切换方向 #

的 方向 toggle 将分割从垂直翻转到水平,垂直给出左右擦拭,水平将前图叠在上面,后面叠在下面,上下的手柄,对于高大的照片通常读数更好。

样式布局、手柄和标签 #

打开 风格 tab。x (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab) (tab 布局风格, 叠加, 手柄、和 标签的,所以滑块符合你的设计,而不是默认的外观。

• 布局风格: 整个滑块周围的边框类型、半径和框阴影。
• 手柄: 拖动控制的颜色、尺寸和样式。
• 标签: 标题的每面颜色、排版、背景、边框和间距。

常见用例 #

• 照片编辑 在修饰版本旁边显示原始镜头。
• 家居和装修 改造或清理之前和之后。
• 设计和开发 旧布局与重新设计。
• 健康和健身 并排进行射击。
• 产品 完成或样式结果旁边的普通项目。

使用图像比较小部件的技巧 #

• 匹配两个图像。 大小、角度和裁剪相同,因此幻灯片读取为一个场景,而不是两张照片卡在一起。
• 设置起始比。 以可见比例打开中途,这样游客就可以知道有什么东西需要拖动。
• 保持标签短。 Before 和 After,或者两个单词,比完整的句子更干净地坐在图像上。
• 选择正确的触发器。 Drag suits桌面。悬停感觉很快,但可以让触摸用户措手不及,所以在发货前先在手机上测试一下。
• 使用水平镜头进行高镜头。 自上而下的分体比狭窄的左右擦拭更适合肖像图像。

观看视频教程 #

喜欢在屏幕上跟进?下面的视频教程从头到尾浏览图像比较元素,显示图像、标签、滑块设置和造型在 Elementor 编辑器中的工作原理。

常见问题 #

包裹起来 #

Image Comparison 小部件将两个图像变成前后交互:加载两个图片,添加标签,设置方向和句柄,然后对滑块进行样式以匹配,相关小部件请参见 图片热点小部件 和 图像悬停效果小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。