图像滑块之前的元素器:免费比较小部件

Image Comparison 是一个免费的 Master Addons 小部件,它将前后图像堆叠在一帧中,中间有一个手柄。访问者拖动或滑动手柄以显示更改。在每一侧添加一个标签,选择水平(左和右)或垂直(顶部和底部),设置手柄开始的位置,并设置手柄、标签和覆盖的样式。free Elementor 和 Elementor Pro 都没有前后滑块,因此此小部件填补了 free Elementor 上的空白。

如何在 Elementor 中添加前后滑块

您需要 Elementor 和 WordPress。org 的免费主插件。

  1. 检查图像比较是否已打开 主插件、小部件.
  2. 在 Elementor 编辑器中,搜索 图像比较 并将其拖到页面上。
  3. 在"前选项卡上选择第一个图像和标签,然后在"后选项卡上执行相同的操作。
  4. 在设置中,设置可见比率并选择水平或垂直。
  5. 在手机鼠标拖动/滑动时保持移动手柄,或在以桌面为中心的页面上使用 Pro 选项。
  6. Style标签页中对手柄和标签进行样式,然后在手机上测试滑块。

有关设计提示和示例,请阅读 滑动导轨之前和之后。每个设置都列在 图像比较小部件设置.

图片 比较一件白色 T 恤男士的滑块,带有绿色拖拉手柄,旁边是带有移动手柄选项的图片和设置面板

拖动和滑动后滑动

上传 之前 並 之后 images,每个都有自己的标签和图像分辨率。in 设置, 可见比率(%) 设置手柄开始的位置, 方向 是水平(默认)或垂直,并且 叠加 显示或隐藏标签。 移动手柄 是鼠标拖动/滑动在免费插件。主插件专业添加鼠标移动,其中手柄跟随光标,鼠标点击。

  • 在桌面和触摸屏上拖动和滑动工作。
  • 偏离中心启动手柄以突出显示结果。
  • 使用相同像素尺寸的图像,使两侧对齐。

可定制覆盖和清晰标签

打开 叠加 要显示图像上的前后标签。覆盖样式部分具有 Normal 和 Hover 背景。 标签 section分别用颜色、排版、边框、边框半径、边距和填充物对每一面进行样式,因此可以将“前”和“后”更改为“旧”和“新”或任何其他词。

  • 任何语言的自定义标签文本。
  • 标签前后的单独样式。
  • 悬停上的不同覆盖背景。
除了叠加渐变和标签样式设置之外,还可以在 T 恤照片上与标签前后进行图像比较
图片 在 Handle Bar 和 Handle Style 设置旁边,使用圆形手柄进行健身训练前后的男士的比较

专业手柄和容器造型

的 手柄 部分设置普通和悬停的车把颜色和尺寸、车把箱宽度和高度以及图标颜色、边框和边框半径。 布局风格 在整个滑块周围添加边框、填充物和边距。容器上的边框半径和框影是 Master Addons Pro 选项。

  • 将手柄颜色与您的品牌相匹配。
  • 细条,带有圆形手柄盒,外观干净。
  • Pro 的容器上圆角和阴影。

图片比较:免费与专业版

Elementor 在其免费或 Pro 插件中没有前后小部件,以下是免费的主插件小部件包含的内容以及 Pro 添加的内容。

特点免费的硕士插件专业版
带有标签的图像之前和之后是的是的
水平和垂直方向是的是的
可见比率起点是的是的
鼠标拖动/滑动手柄是的是的
鼠标移动和鼠标单击句柄否是的
处理、标记和覆盖造型是的是的
集装箱边框半径和盒子阴影否是的

对于大多数滑块前后来说,免费版就足够了。当您希望手柄跟随光标或需要圆角和阴影而无需自定义 CSS 时,Pro 很有意义。要在一张图像上添加注释,请参阅 图片热点 (专业版)。

模板查看器
脸书
推特
什么应用程序
复制链接
立即购买
图像比较
图像比较
垂直图像比较
垂直图像比较
T恤设计的图像比较
T恤设计的图像比较
恢复滑块记录卡
恢复滑块记录卡
颜色等级滑块面板
颜色等级滑块面板
垂直滑块测量面板
垂直滑块测量面板
带框证明滑块统计
带框证明滑块统计
分屏日夜滑块
分屏日夜滑块
拱形滑块卡三重奏
拱形滑块卡三重奏
步骤时间轴分级滑块
步骤时间轴分级滑块
垂直滑块捕获日志
垂直滑块捕获日志

用于图像比较的常见问题

了解用户对图像比较询问最多的查询,并在一个地方找到答案。
图像比较小部件免费吗?

是的。该小部件免费,包含拖动和滑动、标签、方向和手柄造型。Master Addons Pro 添加了鼠标移动和鼠标点击手柄以及容器边框半径和盒子阴影。

是的,带有免费的鼠标拖动/滑动手柄。访问者滑动以移动分隔符。Pro 鼠标移动选项依赖于悬停,因此在触摸屏上不起作用。

No。free 元素器或元素器 Pro 都未包含图像比较或小部件前后,因此您需要一个插件,例如此插件。

我应该何时使用垂直方向?

Vertical用于高大图像,如全身人像、建筑立面或长截图,前图坐上,后图坐下,上下手柄。

It can,如果图像非常大。明智地使用图像分辨率设置(例如,“Large”而不是‘Full’),并且在上传之前始终优化您的图像以获取网页。元素本身很轻量级,但图像文件大小是性能的主要因素。

No。每个小部件比较两个图像。对于更多对,每对添加一个小部件或显示几张图像在 图片旋转木马.

趋势元素小部件和扩展

在更短的时间内构建复杂的网站。

Elementor 的 Master Addons Glassmorphism 扩展:模糊值控件设置为 20px 的磨砂玻璃卡

玻璃态

首页 免费元素玻璃化扩展:一键玻璃化中的磨砂玻璃效应是磨砂的。。。
查看详细信息
Elementor 的主插件容器额外扩展:容器上限为 1400px 最大宽度,具有最大宽度、最大高度、最小宽度和最小高度控制

集装箱附加信息

主页 Elementor 容器最大宽度和最大高度控制容器附加功能是免费的 Master。。。
查看详细信息
Elementor 的 Master Addons Patterns 扩展:具有紫色渐变网格左侧样式的英雄、另外三种图案样式和启用图案面板

图案

主页 70 多个免费元素器背景模式 模式是一个免费的主插件扩展,可添加...
查看详细信息
Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案

帖子/页面复制器

主页 一键复制元素器页面和帖子 帖子/页面复制器是免费的 Master。。。
查看详细信息
Elementor 的主插件阅读进度条扩展:隐私政策页面顶部填充 42% 的蓝色条,具有启用、位置、高度和填充颜色设置

阅读进度吧

主页 在 WordPress(元素)中添加阅读进度栏 阅读进度栏是免费的。。。
查看详细信息