Bạn muốn tạo hiệu ứng ảnh “trước – sau” chuyên nghiệp trên website WordPress? Plugin Twenty20 Image Before-After chính là công cụ hoàn hảo giúp bạn làm điều đó chỉ trong vài phút. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết cách cài đặt, sử dụng, và tối ưu plugin này cho website của bạn.

Giới thiệu về plugin Twenty20 Image Before-After

Twenty20 Image Before-After là một plugin WordPress miễn phí giúp bạn tạo hiệu ứng so sánh hai hình ảnh “Before – After” cực kỳ đẹp mắt.
Plugin này đặc biệt hữu ích cho:

Website thẩm mỹ – spa – nha khoa (so sánh kết quả trước/sau khi làm dịch vụ).

Website thiết kế nội thất, kiến trúc, xây dựng (trước và sau khi cải tạo).

Website nhiếp ảnh – chỉnh sửa ảnh – retouch (so sánh ảnh gốc và ảnh chỉnh sửa).

Website giáo dục hoặc kỹ thuật (minh họa quá trình thay đổi, tiến hóa, hoặc kết quả).

Được phát triển bởi Zayed Baloch, plugin này có hơn 30.000 lượt cài đặt hoạt động, đánh giá cao về sự đơn giản và hiệu quả.

Cách cài đặt và kích hoạt plugin Twenty20

Bước 1: Cài đặt trực tiếp từ WordPress

Truy cập Dashboard → Plugins → Add New

Gõ từ khóa: Twenty20 Image Before-After

Chọn plugin có biểu tượng hình ảnh “Before-After” → nhấn Install Now → Activate

Bước 2: Cài đặt thủ công

Nếu bạn tải file .zip từ trang chính thức của plugin
, hãy:

Giải nén và upload thư mục twenty20 vào wp-content/plugins/

Sau đó vào Plugins → Installed Plugins → Activate

Bước 3: Kiểm tra menu cài đặt

Sau khi kích hoạt, bạn sẽ thấy mục Twenty20 xuất hiện trong thanh công cụ. Plugin này hoạt động chủ yếu bằng shortcode, nên không cần cấu hình phức tạp.

Cách tạo hiệu ứng Before-After bằng shortcode

Cú pháp cơ bản

Plugin Twenty20 sử dụng shortcode với cấu trúc như sau:

[twenty20 img1=”123″ img2=”456″ offset=”0.5″ direction=”horizontal”]

Trong đó:

Tham số Ý nghĩa
img1 ID ảnh “Before”
img2 ID ảnh “After”
offset Mức chia mặc định giữa 2 ảnh (0.1 – 1.0)
direction Hướng trượt: horizontal (ngang) hoặc vertical (dọc)
before Nhãn cho ảnh “Before”
after Nhãn cho ảnh “After”
hover Cho phép trượt khi rê chuột (true/false)

Ví dụ:

[twenty20 img1=”10″ img2=”12″ before=”Trước” after=”Sau” offset=”0.6″ hover=”true”]

Khi chèn shortcode này vào bài viết hoặc trang, bạn sẽ thấy thanh trượt so sánh 2 ảnh trực quan và mượt mà.

💡 Cách sử dụng Twenty20 trong UX Builder hoặc Elementor

Nếu bạn đang dùng theme như Flatsome, Elementor, hoặc WPBakery, plugin Twenty20 hoạt động rất tốt:

Với Flatsome UX Builder

Thêm một Shortcode element vào vị trí mong muốn.

Dán đoạn shortcode [twenty20 img1=”…” img2=”…”].

Lưu và xem trước — bạn sẽ thấy thanh trượt hiển thị hoàn chỉnh trong builder.

Với Elementor

Thêm HTML Widget hoặc Shortcode Widget.

Dán mã [twenty20 img1=”…” img2=”…” offset=”0.5″].

Có thể căn giữa hoặc thêm padding để hiển thị đẹp hơn.

💬 Gợi ý: Nên dùng ảnh có cùng kích thước (chiều rộng và chiều cao bằng nhau) để hiệu ứng mượt, không bị lệch khung.

Tùy chỉnh giao diện Before-After slider

Twenty20 cung cấp nhiều tùy chọn giúp bạn kiểm soát giao diện thanh trượt:

Thay đổi màu thanh trượt:
Bạn có thể dùng CSS để chỉnh màu hoặc độ dày:

.twenty20-handle {
background-color: #0066b2;
border-radius: 50%;
}

Thay nhãn Before/After:
Dùng thuộc tính before=”Trước” và after=”Sau” trong shortcode.

Chuyển hướng trượt:
Dọc (vertical) rất hữu ích cho ảnh chụp chân dung, hoặc ảnh so sánh chiều cao/vóc dáng.

Kích hoạt hiệu ứng hover:
Nếu bạn muốn thanh trượt di chuyển khi người dùng rê chuột, thêm hover=”true”.

Các mẹo tối ưu khi dùng plugin Twenty20

Giảm dung lượng ảnh – Dùng plugin như Smush, ShortPixel hoặc TinyPNG để tối ưu tốc độ.

Sử dụng lazy load hợp lý – Nếu site bạn bật lazy load, hãy kiểm tra xem Twenty20 có hiển thị đúng không (một số lazy load plugin có thể gây lỗi).

Giữ tỷ lệ ảnh đồng nhất – Đảm bảo cả ảnh Before và After có cùng kích thước.

Thêm tiêu đề hấp dẫn cho từng ảnh so sánh – Ví dụ: “Trước & Sau khi sơn lại căn hộ”.

Dùng trên website trình diễn sản phẩm, portfolio hoặc dịch vụ makeover để tăng độ tin cậy và thu hút người xem.

Những lỗi thường gặp và cách khắc phục

Vấn đề Nguyên nhân Cách khắc phục
Thanh trượt không hiển thị Thiếu jQuery hoặc xung đột script Đảm bảo theme load wp_enqueue_script(‘jquery’)
Ảnh không tải Plugin cache hoặc lazy load Thử tắt cache và reload trang
Hiệu ứng bị giật Ảnh có kích thước khác nhau Resize ảnh đồng nhất
Không hiển thị trong builder Dán shortcode sai vị trí Dán trong widget HTML hoặc Shortcode, không dán trong text thuần

So sánh Twenty20 với các plugin Before-After khác

Plugin Ưu điểm Nhược điểm
Twenty20 Miễn phí, dễ dùng, nhẹ Không có nhiều hiệu ứng nâng cao
Ultimate Before After Slider Nhiều hiệu ứng đẹp Bản pro trả phí
WP Before After Image Slider Dễ tích hợp với Elementor Thiếu tùy chỉnh nâng cao
Twenty20 Pro (bản mở rộng) Có thêm overlay, animation Cần trả phí

Nếu bạn chỉ cần hiệu ứng đơn giản, nhẹ, dễ cài, thì Twenty20 là lựa chọn tối ưu.

Kết luận: Có nên dùng plugin Twenty20 Image Before-After?

Nếu bạn muốn trình bày kết quả trực quan, chuyên nghiệp và thu hút người xem, thì Twenty20 Image Before-After là plugin tuyệt vời.
Với thiết kế responsive, cú pháp shortcode đơn giản, và khả năng hoạt động mượt mà trên các theme nổi tiếng như Flatsome, Astra, hay GeneratePress, Twenty20 xứng đáng là plugin so sánh ảnh trước – sau miễn phí tốt nhất trên WordPress hiện nay.

 Gợi ý: Nếu bạn là người làm web dịch vụ (thiết kế nội thất, nha khoa, làm đẹp, v.v.), hãy thử Twenty20 ngay hôm nay để tăng độ tin cậy và chuyên nghiệp cho website của bạn!