[WordPress] 外掛分享： Twenty20 Image Before-After

WordPress 外掛 Twenty20 Image Before-After 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Twenty20 Image Before-After」是 2016-04-27 上架。
  • 目前有 30000 個安裝啟用數。
  • 上一次更新是 2025-03-02，距離現在已有 61 天。
  • 外掛最低要求 WordPress 5.9 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
  • 有 55 人給過評分。
  • 論壇上目前有 2 個提問，問題解答率 0%

外掛協作開發者

hammal | zayedbaloch |

外掛標籤

elementor | image slider | visual composer | image comparison | before after slider |

內容簡介

Twenty20 是由 Zurb 團隊開發的 TwentyTwenty 腳本的 WordPress 外掛。

這啟發了我們一些新的想法，如何為我們自己的需求做類似的兩張圖片之間滑動來顯示「之前」和「之後」的效果，最重要的是，它必須是響應式的。

實際演示

特點

支持所有設備的響應式和功能性。
無需圖像即可運行。
簡單干淨的用戶界面
在小工具上添加「之前」和「之後」效果。
支持流行的網頁生成器。
支持 WP 圖像 alt 作為圖像 alt 和標題。

支持的網頁生成器

WP Bakery Visual Composer。
Elementor Page Builder。
UX Builder by UXThemes。

快速示例

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="之前" after="之後" hover="true"]

簡碼參數

img1 – 圖像 ID。
img1 – 圖像 ID。
offset – 0.1 至 1.0。
direction – horizontal|vertical。
align – none|right|left。
width – 支持 px 和 % 兩種格式。
before – 文字。
after – 文字。
hover – true 或 false。

視頻演示

原文外掛簡介

Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:

Photography portfolios
Real estate before/after
Renovation projects
Design makeovers
Product comparisons
Restoration work
Medical procedures
And much more!

Video Tutorial

Live Demo
Check the Live Demo.
Key Features

Responsive design – works perfectly on all devices
Horizontal and vertical sliding options
Customizable slider position and orientation
Custom “before” and “after” labels
Adjustable image widths and alignments
Mouse hover sliding effect
Touch-enabled for mobile devices
Multiple sliders per page
Widget support for sidebars
SEO-friendly with proper alt tag support
Accessibility compliant image comparisons

Page Builder Support

Elementor
WPBakery Page Builder (Visual Composer)
Flatsome UX Builder
Classic Editor

Perfect For

Photography before/after edits
Home renovation comparisons
Web design makeovers
Product transformations
Restoration projects
Beauty transformations
Real estate renovations

Usage
Shortcode Example
Quick Example
[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Shortcode Parameters

img1 – image ID.
img2 – image ID.
offset – range from 0.1 to 1.0.
direction – horizontal|vertical.
align – none|right|left.
width – supports both px and %.
before – text for the “before” label.
after – text for the “after” label.
hover – true or false.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Twenty20 Image Before-After」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.7.0 | 1.7.1 | 1.7.2 | 1.7.3 | 1.7.4 | 1.7.5 | 1.7.6 | 2.0.0 | 2.0.1 | 2.0.2 | 2.0.3 | 2.0.4 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Apply Filters
Close
Mastodon