Hướng dẫn hiển thị ảnh trước và sau trong WordPress

Bạn có muốn hiển thị ảnh trước và sau khi chỉnh sửa trên website WordPress của mình? Hiển thị ảnh trước và sau khi chỉnh sửa rất hữu ích khi chúng ta muốn so sánh hai hình ảnh giống hệt nhau với một số khác biệt nhỏ. Ví dụ như ảnh trước và sau khi sử dụng các plugin nén ảnh chẳng hạn. Trong bài viết này tôi sẽ chia sẻ cách đơn giản nhất để hiển thị ảnh trước và sau trong WordPress.

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

Thường thì mọi người thường sử dụng phần mềm Adobe Photoshop để tạo ảnh trước và sau. Đó là một ảnh dùng để hiển thị hiệu ứng trước hoặc sau và bạn có thể thêm nó như là một ảnh tĩnh trên blog WordPress của mình. Nếu muốn so sánh hai ảnh, bạn cần phải thêm 02 ảnh vào bài viết của mình.

Tuy nhiên chúng ta có thể sử dụng chức năng thanh trượt ảnh để hiển thị 02 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 trước và sau 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. Để biết thêm chi tiết cách cài đặt và kích hoạt plugin bạn có thể đọc lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

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

insert twenty20 to post

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 trước và sau thanh trượt.

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 trước và sau. 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 tuỳ chọn khác.

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

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

add twenty20 to sidebar

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

Giờ 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.

after before image slider

Khi người dùng trượt tay cầm 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 trượt nhãn của hình ảnh trước và sau sẽ tự động biến mất.

Plugin này cũng hoạt động tốt với các trình tạo trang phổ biến như Beaver Builder và Elementor để nhanh chóng hiển thị ảnh trước và sau trong các trang trên website WordPress của bạn mà không cần dùng shortcode.

Tôi hy vọng rằng bài viết này sẽ giúp bạn biết cách hiển thị ảnh trước và sau trong WordPress. Có thể bạn cũng muốn tìm hiểu cách thêm ảnh phóng to trong WordPress, hãy đọc lại bài viết này.

Nếu bạn thấy bài viết hữu ích đừng quên Like và Share.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Plugins Themes Thủ thuật
Thay đổi email quản trị trong wordpress
Hướng dẫn thay đổi email quản trị trong WordPress
hướng dẫn khắc phục lỗi không gửi được email trong wordpress
Hướng dẫn khắc phục lỗi không gửi được email trong WordPress
Hướng dẫn chụp màn hình để minh hoạ cho bài viết trong WordPress
Cách chụp màn hình để minh hoạ cho các bài viết trên blog WordPress
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Cách đặt tên miền
Tên miền là gì? Cách chọn tên miền cho blog WordPress
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?