之前和之后的图像比较WordPress插件

图像比较是一个简单的插件,可让您通过比较图像前后的对比来展示产品和服务的功能。您可以通过简码或VC元素使用这款wordpress插件

图像比较是一个简单的插件,可让您通过比较图像前后的对比来展示产品和服务的功能。您可以通过简码或VC元素使用这款wordpress插件

之前和之后的图像比较WordPress插件-Npcink

插件功能

  • 从左到右或从上到下比较图像
  • 在所需位置设置起点比较点
  • 在图像的前后添加标签
  • 使用您自己的CSS进一步自定义

插件功能

您可以从左到右或从上到下比较图像。为图像添加标签,以便客户了解您的服务效率。更改比较点以获得最大效果。使用您自己的CSS类进一步自定义它。

之前和之后的图像比较WordPress插件-Npcink

如何使用?

如果您需要一个简单的图像比较显示,只有两张照片并排显示,那么这个简单的短代码就可以解决问题:

[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_labelafter_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"]

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 支付以后下载 请先登录登录 评论后刷新页面下载评论 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
WP插件

Ajaxer - Ajaxify您的WordPress网站和评论的插件

2020-4-2 23:35:59

WP插件

古腾堡编辑器的Pro图标 - WordPress插件

2020-4-3 0:24:26

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索