Twenty20 是一款专业级图像对比工具,能帮助你以极具吸引力的方式展示变化。非常适合:
摄影作品集、改造前/后、翻新项目、设计改造、产品对比、修复工作、医疗程序、还有更多!
通过插件 Twenty20 Image Before-After 提供的短代码在文章中添加两张图片,可以在两张图片之间滑动,用于图片效果比较。安装启用插件后,编辑文章时会在添加媒体按钮旁边新增添加滑块按钮,选择两张图片插入到文章中,兼容移动端,效果如下。
主要功能
响应式设计 – 在所有设备上完美运行
水平和垂直滑动选项
可自定义的滑块位置和方向
自定义“之前”和“之后”标签
可调整的图片宽度和对齐方式
鼠标悬停滑动效果
支持移动设备触控
每页多个滑块
支持侧边栏小工具
对SEO友好且支持合适的alt标签
符合无障碍标准的图像对比
使用教程
添加一个 Twenty20 前后对比图
从媒体库中选择任意两张图片
Twenty20 短代码设置页面
简码
[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
简码参数
img1– 图像ID。
img2– 图像ID。
offset– 范围为0.1到1.0。
direction – horizontal|vertical.
align – none|right|left.
width– 支持两者px和%.
before– “之前”标签的文本。
after– “之后”标签的文本。
hover – true或false.
Twenty20在行动
多个不同方向的滑块
Twenty20小部件
正在运行的组件
WP Bakery 可视化编辑器设置
Elementor 元素
UX构建器元素
官网地址
https://cn.wordpress.org/plugins/twenty20/
好消息
本站使用的 知更鸟主题 Begin 已经集成短代码,不需要插件
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!欢迎打赏!














