tạo ảnh before after trong wordpress wdi blog

Tạo ảnh Before After trong WordPress với plugin Twenty20 Image Before-After4 phút đọc

Tạo ảnh Before After trong WordPress nghe có vẻ lạ với nhiều bạn nhưng thực sự đây là một hiệu ứng ảnh rất phổ biến trên thế giới.Hiệu ứng này sẽ giúp khách hàng hình dung được trạng thái của sản phẩm trước khi thực hiện thao tác A và sau khi thực hiện thao tác A.

Và plugin sẽ giúp bạn làm việc này đó chính là plugin mang tên Twenty20 Image Before-After.Hãy cùng mình tìm hiểu cách hoạt động của plugin này nhé.

Bạn lưu ý là trước khi cài đặt plugin bạn nên sao lưu lại website.Nếu sau khi kích hoạt plugin bạn thấy website của mình có dấu hiệu bất thường về hiển thị hay chức năng thì hãy vô hiệu hóa hoặc xóa plugin đi.Có thể lỗi do xung đột code và điều này có thể xảy ra với bất kì plugin hay theme nào hiện nay.

Cài đặt plugin Twenty20 Image Before-After

tạo ảnh before after trong wordpress

Bạn hãy vào thư viện plugin của wordpress tìm plugin có tên Twenty20 Image Before-After, sau đó tiến hành cài đặt và kích hoạt nó lên.

Ngoài ra bạn cũng có thể download plugin này từ trên trang chủ của wordpress về, sau đó tải lên để sử dụng như bình thường.

Tạo ảnh Before After trong WordPress

tạo ảnh before after trong wordpress 2

Sau khi cài đặt và kích hoạt plugin Twenty20 Image Before-After lên bạn sẽ không phải thiết lập settings cho nó giống như nhiều plugin khác.Bạn chỉ việc tạo ra bài viết rồi chọn vị trí để tạo ảnh before after trong wordpress là xong.

Trong màn hình soạn thảo bài viết của wordpress sẽ xuất hiện thêm một menu có tên là Add Twenty20 như mình khoanh đỏ ở hình trên đây.Bạn hãy kích vào menu đó để mở ra phần lựa chọn chức năng cho ảnh before after.

tạo ảnh before after trong wordpress 3

Trước tiên bạn hãy chọn hai ảnh đã chuẩn bị sẵn.Một ảnh đóng vài trò là ảnh before và ảnh còn lại sẽ là after.Hai ảnh này tốt nhất nên cùng một kích thước để khi hiển thị trông sẽ tự nhiên hơn.Chọn hai ảnh xong bạn hãy nhấn nút Insert để đưa ảnh vào.

tạo ảnh before after trong wordpress 4

Tiếp theo đến phần tạo Shortcode điều chỉnh hiển thị của ảnh before after được tạo ra.Dưới đây là phần giải thích ý nghĩa của các tùy chọn trong Twenty20 Shortcode.

Before Text : text hiển thị bên phần ảnh before

After Text : text hiển thị bên phần ảnh after

Width : chiều rộng tối đa của ảnh before after

Offset : tỉ lệ chiều rộng hoặc chiều cao giữa hai ảnh before và after

Direction : hướng mũi tên di chuyển theo chiều dọc hay ngang

Alignment : căn chỉnh vị trí ảnh before after

Move slider on mouse hover ? : có tự động di chuyển mũi tên theo con trỏ chuột hay không ?

Có một số tùy chọn khá khó hiểu nhưng bạn đừng lo lắng chỉ cần nhìn vào kết quả dưới đây và tự thực hành tạo một ảnh before after là bạn sẽ hiểu ngay thôi.

tạo ảnh before after trong wordpress 5

Sau khi chọn xong các bạn nhấn nút Insert Shortcode và sẽ xuất hiện thêm một dòng shortcode tương tự như hình trên trong bài viết của các bạn.

tạo ảnh before after trong wordpress 6

Giờ bạn ra xem ở chế độ xem trước hoặc công bố bài viết để thấy thành quả nhé.Trên đây là hình ảnh minh họa cho thiết lập trong ví dụ của mình ở trên.

Kết luận

Rất nhiều website hiện nay như website bán hàng sẽ rất cần tạo ảnh before after trong wordpress và sự lựa chọn hàng đầu chắc chắn là plugin Twenty20 Image Before-After mà mình giới thiệu với các bạn trong bài viết này.

Hi vọng plugin này sẽ có ích trong công việc của các bạn trong tương lai.Hẹn gặp lại bạn trong các bài viết khác về wordpress plugin nhé.

Bài viết trước

Bài viết sau

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x