Tạo hiệu ứng Before – After cho hình ảnh trong WordPress

0
152

Hiệu ứng Before – After cho hình ảnh – bạn đã từng xem một số trang review về máy ảnh, đặc biệt là khi so sánh các camera với nhau thì chắc hẳn các bạn đã trải nghiệm hiệu ứng Before – After. Đây là một hiệu ứng giúp người dùng có thể so sánh trực quan giữa 2 ảnh với nhau.

Nếu bạn đang sở hữu blog sử dụng WordPress và bạn muốn có hiệu ứng này ngay trên trang của mình thì thật may mắn, bài viết này là dành cho bạn. Hôm nay tôi sẽ hướng dẫn các bạn thêm hiệu ứng Before – After cho hình ảnh trong WordPress bằng plugin Twenty20 Image Before-After.

Đây là một plugin miễn phí, được phân phối ngay trên kho plugin của WordPress nên tôi sẽ không hướng dẫn các bạn cài đặt nữa. Bởi vì nó quá đơn giản rồi phải không? Giờ chúng ta đi vào phần hướng dẫn luôn.

Plugin này hoàn toàn không có phần cấu hình riêng biệt, mà mỗi khi cần so sánh ảnh thì thiết lập ngay trong thanh công cụ soạn thảo của bài viết. Cụ thể sau khi kích hoạt plugin thành công, bạn vào tạo bài viết mới thì sẽ thấy thêm 1 nút mới như hình.

Khi click vào nút đó, bạn sẽ nhận được một khung để chọn ảnh, có thể chọn ảnh có sẵn hoặc tải ảnh mới lên. Bạn chọn lấy 2 hình cần so sánh nhé, rồi click Insert.

Đây là phần cấu hình.

Trong đó:

Width: Độ rộng. Mặc định 100% độ rộng ảnh. Bạn có thể chỉnh lại (đơn vị là % hoặc px)

Offset: Có các giá trị từ 0.1 đến 1.0. Để 0.5 thì khung di chuyển sẽ chính giữa.

Direction: So sánh theo chiều ngang (Horizontal) hoặc chiều dọc (Vertical).

Alignment: Căn chỉnh ảnh (Lệch trái hoặc phải. Mặc định là không).

Sau khi chỉnh các thông số xong xuôi, plugin sẽ tạo ra cho bạn một shortcode, bạn có thể chèn vào bất cứ vị trí nào trong bài viết để có thể hiển thị.

Tổng kết

Trên đây tôi đã hướng dẫn cho các bạn xong cách tạo hiệu ứng Before – After cho hình ảnh trong WordPress, đây là một hiệu ứng rất tốt cho các bạn khi muốn so sánh chất lượng 2 hình ảnh với nhau. Nếu có khó khăn gì thì hãy cho tôi biết ở phần comment nhé. Chúc các bạn thành công.

Advertisement

BÌNH LUẬN

Please enter your comment!
Please enter your name here