Hướng dẫn hiển thị ảnh Before và After trong WordPress (với hiệu ứng Slide) [NEW]

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

hình ảnh trước và sau

Hiệu ứng ảnh trước và sau hoạt động như thế nào?

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

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

Hãy cùng tìm hiểu cách hiển thị hình ảnh trước và sau trong WordPress.

Hiển thị hình ảnh trước và sau trong WordPress

Điều đầ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.

Khi kích hoạt, bạn cần tạo hoặc chỉnh sửa bài đăng / trang trong khu vực quản trị WordPress nơi bạn muốn hiển thị hình ảnh trước và sau. Bây giờ hãy nhấp vào. cái nút Thêm Twenty20 ở đầu Trình chỉnh sửa văn bản.

addtwentybutton

Thao tác này sẽ mở cửa sổ bật lên Thư viện phương tiện WordPress. Ở đây, bạn cần chọn hai hình ảnh trước và sau.

beforeafterphotos

Khi bạn đã chọn ảnh của mình, hãy nhấp vào. cái nút Chèn để chèn hình ảnh vào bài viết / trang

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

insertbeforeaftershortcode

Sau đó nhấp vào. cái nút Chèn mã ngắn để thêm hình ảnh before after vào trang web WordPress của bạn.

Bạn cũng có thể sử dụng tiện ích Twenty20 để hiển thị ảnh trước và sau trong thanh bên. Chỉ cần ghé thăm Giao diện »Tiện ích trong khu vực quản trị WordPress và kéo widget Twenty20 Slider vào vùng widget trong thanh bên.

sidebarwidgetbeforeafter

Widget Twenty20 Slider có cách cài đặt giống như ảnh chụp trước và sau mà chúng tôi chia sẻ trong bài viết này. Bạn có thể chọn lần lượt 2 ảnh trong cài đặt tiện ích để tạo thanh trượt ảnh trước và sau.

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

hình ảnh trước và sau

Khi người dùng trượt thanh kéo về phía mỗi hình ảnh, một hình ảnh khác sẽ được hiển thị. Người dùng có thể gạt thanh trượt sang phải hoặc trái để xem đầy đủ ảnh trước và sau. Khi người dùng kéo, dòng chữ Before and after sẽ biến mất.

slidebeforeafterimage

Plugin này hoạt động tốt với các trình tạo trang nổi tiếng như Beaver Builder và Elementor để nhanh chóng hiển thị hình ảnh trước và sau trong các trang trên trang web WordPress của bạn mà không cần sử dụng mã ngắn.

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 Tiện ích Thanh bên trong WordPress.

Nếu bạn thích bài viết này, xin vui lòng thích hoặc chia sẻ. Theo dõi fanpage của Kiều Hậu để nhận thêm nhiều thông tin hữu ích, nếu có thắc mắc các bạn comment bên dưới nhé.