Nếu bạn muốn hiển thị ảnh trước và sau thể hiện sự thay đổi của vật thể trên trang web Flatsome của mình, bạn không cần phải Photoshop hoặc có bất kỳ kỹ năng thiết kế nào. Trong hướng dẫn ngắn này, Flatsomea-z sẽ hướng dẫn cách thêm hiệu ứng ảnh trước và sau cho Flatsome.

Hướng dẫn cách thêm ảnh trước và sau cho Flatsome:

Sử dụng Plugin Twenty20 Image Before-After

Có rất nhiều cách để tạo hình ảnh trước và sau, nhưng nếu bạn muốn tạo nó nhanh chóng và được thiết kế đẹp cùng một lúc, hãy cài đặt plugin Twenty20 Image Before-After. Khi bạn có plugin này, bạn có thể tạo ảnh trước và sau mới bất cứ khi nào bạn muốn và đặt chúng trên bất kỳ trang nào trên trang web của bạn.

Thay vì một hình ảnh tĩnh, khách truy cập trang web của bạn nhận được một thanh trượt tương tác. Tất nhiên, plugin này có thể được sử dụng để so sánh hoặc hiển thị hai mặt của cùng một sản phẩm.

Vì plugin Twenty20 Image Before-After là mã nguồn mở nên bạn có thể tìm thấy nó trong thư mục plugin WordPress. Chỉ cần đi tới bảng quản trị và nhấp vào Plugins> Add New. Bạn sẽ tìm thấy plugin mình cần bằng cách nhập tên của nó vào thanh tìm kiếm.

Chọn plugin và nhấp vào nút install. Khi WordPress tải xuống và cài đặt plugin, bạn sẽ thấy một thông báo với liên kết kích hoạt. Nhấp vào nó để kích hoạt plugin. Bây giờ bạn đã sẵn sàng để sử dụng nó.

Khi soạn thảo bài viết, bạn muốn tạo hiệu ứng hình ảnh trước và sau, hãy chuyển đến phần phụ trợ của trang. Bạn sẽ thấy mã ngắn Twenty20.

Nhấp vào nó để mở thư viện phương tiện WordPress hoặc tải lên ảnh bạn cần. Chọn hai ảnh và nhấp vào nút Insert.

Khi làm điều đó, bạn sẽ thấy cửa sổ bật lên với các trường nơi bạn có thể thêm văn bản và điều chỉnh chiều rộng, giá trị, căn chỉnh, hành động kích hoạt, hướng thanh trượt, v.v. Khi bạn tùy chỉnh ảnh trước và sau của mình, hãy nhấp vào Shortcode.

Xem trước trang và kiểm tra hình ảnh trước và sau của bạn trông như thế nào. Khi bạn trượt tay cầm sang một bên, hình ảnh khác sẽ xuất hiện.

Vậy là thành công rồi! Lưu và xuất bản để tận hưởng thành quả nhé ^^