图像比较是一个简单的插件,可让您通过比较图像前后的对比来展示产品和服务的功能。您可以通过简码或VC元素使用这款wordpress插件。
插件功能
- 从左到右或从上到下比较图像
- 在所需位置设置起点比较点
- 在图像的前后添加标签
- 使用您自己的CSS进一步自定义
插件功能
您可以从左到右或从上到下比较图像。为图像添加标签,以便客户了解您的服务效率。更改比较点以获得最大效果。使用您自己的CSS类进一步自定义它。
如何使用?
如果您需要一个简单的图像比较显示,只有两张照片并排显示,那么这个简单的短代码就可以解决问题:
[images-comparison image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望选择水平或垂直比较图像的方式,则需要使用direction参数。水平表示您的比较点将在图像之间左右移动。垂直意味着您的比较点将在图像之间上下移动。默认为水平。
[images-comparison orientation="vertical" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果要更改两个图像之间的比较点的位置,可以使用 default_offset_pct参数。它的值可以在0到1之间。它定义了该点距左边距(水平方向)或顶部距边缘(垂直方向)的距离(以百分比为单位)。例如:0.5表示距边距的50%,0.3表示距边距的30%,0.8表示距边距的80%。默认值为0.5。
[images-comparison orientation="vertical" default_offset_pct="0.4" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望为照片添加标签,则可以使用before_label和after_label参数。前标签用于图像1,后标签用于图像2。
[images-comparison before_label="Before" after_label="After" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望为元素添加CSS类,则可以使用el_css参数。您可以添加用逗号分隔的类。
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
我可以添加自己的CSS吗?
是的,您在VC元素中有一个专用字段,并且有一个用于简码的参数:
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]