Bạn có muốn hiển thị ảnh before và after trên website không? Ảnh before và after rất hữu ích để so sánh hai hình ảnh giống hệt nhau với những khác biệt nhỏ. Trong bài viết này, tôi sẽ chia sẻ cách đơn giản để hiển thị ảnh before và after trong WordPress.

Hiệu ứng ảnh before và after hoạt động như thế nào?

Thông thường mọi người sử dụng Photoshop để tạo ảnh before và after. Công cụ này chỉ hiển thị một ảnh duy nhất có hiệu ứng before/after và bạn có thể sử dụng ảnh đó làm hình ảnh tĩnh trên website WordPress.

Tuy nhiên chúng ta có thể sử dụng chức năng thanh trượt ảnh để hiển thị 2 phiên bản khác nhau của hình ảnh ở cùng một kích thước. Bạn có thể di chuyển thanh trượt để so sánh hai hình ảnh ở cạnh nhau.

Chúng ta hãy cùng tìm hiểu xem làm thế nào để hiển thị ảnh trước và sau trong WordPress.

Hiển thị ảnh before và after trong WordPress

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Twenty20 Image Before-After, hãy xem hướng dẫn cụ thể của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần tạo hoặc chỉnh sửa một post/page trong khu vực quản trị WordPress, nơi bạn muốn hiển thị hình ảnh before và after. Giờ thì nhấp vào nút Add Twenty20 ở phía trên Text Editor.

Thao tác này sẽ mở cửa sổ popup của WordPress Media Library. Tại đây, bạn cần chọn hai hình ảnh before và after.

Sau khi đã chọn ảnh, hãy nhấp vào nút Insert để chèn ảnh vào bài viết/trang

Tiếp đó, nó sẽ hiển thị các trường văn bản để bạn thêm nội dung vào trên ảnh before và after. Bạn cũng có thể thêm độ rộng của thanh trượt, giá trị offset, hướng thanh trượt và nhiều tùy chọn khác.

Sau đó, nhấp vào nút Insert Shortcode để thêm ảnh ảnh before after vào trang web WordPress của bạn.

Bạn cũng có thể sử dụng widget Twenty20 để hiển thị ảnh trước và sau ở thanh bên. Chỉ cần truy cập vào Appearance » Widgets trong khu vực quản trị WordPress và kéo widget Twenty20 Slider vào khu vực widget ở thanh bên.

Widget Twenty20 Slider có các cài đặt tương tự như ảnh trước và sau mà bọn mình chia sẻ trong bài viết này. Bạn có thể chọn 2 hình ảnh theo từng cái một trong các thiết lập widget để tạo thanh trượt ảnh trước và sau.

Giờ đây, bạn có thể truy cập website của mình để xem ảnh trước và sau hoạt động như thế nào.

Khi người dùng trượt tay kéo về phía mỗi hình ảnh, hình ảnh khác sẽ được hiển thị. Người dùng có thể đẩy thanh trượt ở bên phải hoặc bên trái để xem toàn bộ ảnh trước và sau. Khi người dùng kéo thì 2 chữ Before và after sẽ biến mất.

Plugin này hoạt động tốt với các page builder nổi tiểng như Beaver Builder và Elementor để nhanh chóng hiển thị ảnh before after trong các trang trên website WordPress mà không cần sử dụng shortcode.

Chúng tôi hy vọng bài viết này đã giúp bạn biết cách hiển thị ảnh before after trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về Cách thêm hình ảnh vào Sidebar Widget trong WordPress .

Nếu bạn thích bài viết này, hãy like hoặc share nhé. Hãy theo dõi fanpage Diều Hâu để nhận thêm nhiều thông tin hữu ích, nếu có bất cứ thắc mắc gì hãy comment ở dưới nhé.