Hướng dẫn hiển thị ảnh Before và After trong WordPress

Bài viết hôm này sẻ cùng hướng dẫn mới mọi người, cách hiển thị 2 hình ảnh cùng 1 lúc để so sánh 2 hình ảnh với nhau bằng cách kéo trượt rất đẹp và chuyên nghiệp trong WordPress.

Chúng ta thường thấy việc so sánh 2 hình ảnh thường diễn ra ở các bài viết như so sánh điện thoại… để thể hiện sự khác nhau của 2 bức ảnh.

Trong WordPress để thực hiện được việc so sánh của 2 bức ảnh, chúng ta sử dụng Plugin Twenty20 Image Before-After miễn phí do Zayed Baloch phát triển. Plugin hiện tại có hơn 10.000 lượt cài đặt.

Chúng ta cài đặt Plugin Twenty20 Image Before-After cho Website:
Bước 1: Vào phần quản trị chọn Plugin –> Chọn Add New –> tìm Twenty20 Image Before-After

Bước 2: Chúng ta thực hiện Install Now –> Action. Thế là xong việc cài đặt Plugin.

Các sử dụng Plugin Twenty20 Image Before-After:
Sau khi cài đặt thành công Plugin Twenty20 Image Before-After chúng ta vào phần soạn thảo để đăng bài viết mới.

1. Trong mục soạn thảo có xuất hiện 1 trường mới Add Twenty20 –> Chúng ta chọn Add Twenty20 –> Thực hiện tại hỉnh ảnh lên –> chọn Insert.

2. Xuất hiện Twenty20 Shortcode –> Chúng ta chọn Insert Shortcode –> thế là xong

– Width: chiều rộng của hình ảnh theo % và pixel.
– Offset: Vị trí ban đầu của thanh slider.
– Direction: Hướng của thanh slider

3. Đây là kết quả giúp chúng ta có thể kéo so sánh ảnh một cách trực quan và chuyển nghiệp.

Lời kết:
Trên đây là Plugin so sánh hình ảnh before và after một cách đơn giản, nhanh chóng trên Website WordPress. Hy vọng bài viết sẻ hữu ích với mọi người đang phát triển Web WordPress.
Chúc các bạn thành công.