Hướng dẫn thêm Hover Effects cho hình ảnh trong WordPress [NEW]

Bạn có muốn thêm hiệu ứng di chuột qua hình ảnh trong WordPress.

Hiệu ứng di chuột có thể làm cho trang web của bạn sinh động hơn, tạo ấn tượng tốt hơn với người đọc.

Điều này sẽ giúp tăng mức độ tương tác và sẽ dành nhiều thời gian hơn trên trang web của bạn.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách thêm một số Hiệu ứng Hover trong WordPress.

di chuột-hiệu-ứng-hình-ảnh

Hiệu ứng Hover là gì?

Hiệu ứng di chuột là hiệu ứng khi bạn di chuột qua hình ảnh sẽ có các tương tác bổ sung như:

  • Hoạt hình
  • Hiệu ứng thu phóng
  • Cửa sổ bật lên

Ví dụ, khi tương tác với một bức ảnh, bạn có thể lật lên và xem giá hoặc liên kết đến một địa điểm khác.

Di chuột qua hình ảnh cũng sẽ giúp bạn sáng tạo hơn để hiển thị hình ảnh, phòng trưng bày, ảnh đại diện.

Những tác động này sẽ mang lại một số lợi ích như:

  • Tăng thời gian tại chỗ của người dùng trên trang web.
  • Mang đến sự sáng tạo cho bộ sưu tập ảnh của bạn từ đó kích thích người xem.
  • Giúp khách truy cập xác định các yếu tố trên trang có khả năng tương tác.

Cách thêm hiệu ứng di chuột trong WordPress

Theo tôi, tốt nhất là bạn nên sử dụng một plugin để tạo hiệu ứng di chuột

Với một plugin, bạn không phải mất thời gian chỉnh sửa, định dạng và sau đó thêm CSS để tạo hiệu ứng hình ảnh.

Có nhiều plugin khác nhau để tạo hiệu ứng hoạt hình và di chuột độc đáo.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn 4 loại hiệu ứng di chuột phổ biến nhất:

  • Hộp lật
  • Thu phóng và phóng đại
  • Hiệu ứng hoạt hình
  • Hiệu ứng cửa sổ bật lên

1. Thêm Hiệu ứng Hover Flipbox trong WordPress

Flipbox là một loại hiệu ứng làm lật hình ảnh lên khi bạn di chuột qua nó.

Bạn có thể thêm hoạt ảnh này vào hình ảnh để hiển thị thêm thông tin hoặc thậm chí thay đổi hình ảnh.

Hover-Flipbox

Bạn hoàn toàn có thể thay đổi cách lật và thiết kế của hai mặt.

Nếu bạn là một nhiếp ảnh gia, hãy sử dụng cách này để giới thiệu tác phẩm và danh mục đầu tư của bạn.

Cách dễ nhất để thêm hiệu ứng hộp lật hình ảnh là sử dụng plugin WordPress.

Một plugin cho phép bạn tạo và tùy chỉnh các hiệu ứng này một cách nhanh chóng.

Tôi khuyên bạn nên sử dụng plugin Flipbox – Lớp phủ hình ảnh Awesomes Flip Boxes.

Đây là một plugin hộp lật khá tốt, nó cho phép bạn chỉ cần thêm nhiều hiệu ứng hộp lật vào hình ảnh WordPress.

Flipbox-settings

Nó đi kèm với rất nhiều hiệu ứng hoạt hình khác nhau và các mẫu dựng sẵn.

Ngoài ra, bạn có thể thay đổi màu sắc và thêm CSS tùy chỉnh của riêng mình.

2. Thêm hiệu ứng thu phóng và phóng đại trong WordPress

Zoom là một hiệu ứng cho phép người dùng phóng đại các chi tiết trên hình ảnh.

Đây là một hiệu ứng tuyệt vời giúp người dùng xem hình ảnh với độ chi tiết cao.

Hiệu ứng này rất thường được sử dụng trên các trang web bán hàng hoặc thương mại điện tử.

phóng to hình ảnh

Cách đơn giản nhất vẫn là sử dụng plugin để thêm hiệu ứng Thu phóng và phóng đại.

Trong bài viết, tôi khuyên bạn nên sử dụng plugin WP Image Zoom.

Plugin này cho phép bạn chỉ cần thêm các hiệu ứng thu phóng và phóng đại vào hình ảnh của mình.

di chuột-phóng đại-cài đặt

Nó có đầy đủ các tính năng cơ bản như lựa chọn biểu tượng, mức thu phóng và hơn thế nữa.

3. Thêm hiệu ứng hoạt ảnh trong WordPress

Có nhiều loại hiệu ứng di chuột khác mà bạn có thể thêm vào WordPress.

Ví dụ: Bạn có thể thêm thư viện hình ảnh động, hình ảnh hộp đèn, hình ảnh so sánh, lớp phủ văn bản….

hiệu ứng hoạt hình

Để thêm các hiệu ứng trên, mình sẽ giới thiệu với các bạn plugin Image Hover Effects Ultimate.

Plugin này khá nhẹ, hãy yên tâm rằng nó sẽ không ảnh hưởng đến tốc độ trang của bạn.

Bạn có thể thêm các hiệu ứng hình ảnh độc đáo với một vài cú nhấp chuột.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Image Hover Effects Ultimate.

Khi bạn đã cài đặt và kích hoạt plugin, bạn cần nhấp vào ‘Di chuột qua hình ảnh‘bên của thanh menu.

hình ảnh-hiệu ứng-plugin

Bạn sẽ thấy ngay 8 hiệu ứng hình ảnh mà bạn có thể lựa chọn.

Ví dụ ở đây tôi sẽ thử sử dụng hiệu ứng Hiệu ứng phụ đề, Hiệu ứng này sẽ thêm văn bản động khi di chuột.

Hiệu ứng chú thích

Ở đây có khá nhiều kiểu dáng khác nhau cho bạn lựa chọn.

Hiệu ứng mù

Tiếp theo đặt tên và chọn bố cục bạn muốn, sau đó nhấp vào Tiết kiệm.

cài đặt chung-hình ảnh-hiệu ứngTại đây bạn sẽ thấy rất nhiều tùy chọn khác nhau nhưng mình sẽ để mặc định.

Xem trước-hiệu ứng hình ảnh

Kéo xuống bạn sẽ thấy phần Preview để xem trước hình ảnh để thay đổi hình ảnh bạn chọn chỉnh sửa.

hình ảnh di chuột

Tại đây bạn có thể chọn tiêu đề, mô tả, thay đổi hình ảnh, thêm liên kết và nút.

Kiểm tra okie, vui lòng bấm gửi.

hình ảnh-hiệu ứng-mã ngắn

Một thông báo thành công sẽ xuất hiện và ở bên phải, bạn sẽ thấy một mã ngắn.

Dán mã ngắn vào bất kỳ đâu trên trang web bạn muốn hiển thị.

4. Thêm hiệu ứng cửa sổ bật lên di chuột trong WordPress

Các plugin trên sẽ giúp bạn thêm các tính năng như hộp lật, hiệu ứng di chuột, hoạt ảnh …

Tất nhiên bạn vẫn có thể thêm CSS tùy chỉnh hoặc thông qua phần tùy biến WordPress.

Nhưng bạn vẫn muốn thêm nhiều hiệu ứng hơn chỉ với một plugin duy nhất.

Tôi sẽ giới thiệu cho bạn một plugin đa năng và mạnh mẽ hơn đó là CSS Hero.

Tại sao lại sử dụng plugin này, bởi vì nó rất dễ sử dụng ngay cả đối với một người không biết cách viết mã.

CSS-hero-kích hoạt

Sau khi cài đặt xong, bạn cần nhấp vào Tiến hành kích hoạt sản phẩm để kích hoạt sản phẩm.

Ví dụ, ở đây tôi đã tạo một thư viện (cái này có sẵn từ trình chỉnh sửa khối).

Để thêm hiệu ứng di chuột vào thư viện này, bạn chỉ cần chọn đoạn trích »hiệu ứng di chuột

di chuột-hiệu ứng-css-anh hùng

Menu bên trái sẽ có sẵn rất nhiều hiệu ứng di chuột, bạn chỉ cần chọn áp dụng để áp dụng hoặc bấm vào preview để xem trước.

di chuột-hiệu ứng-xem trước

Khi bạn đã hài lòng, chỉ cần nhấn lưu và xuất bản được rồi được rồi.

Ngoài ra, với CSS Hero bạn cũng có thể chỉnh sửa rất nhiều thứ trên trang web của mình.

Trước khi mình có bài đánh giá chi tiết, bạn có thể đọc để tìm hiểu thêm.

Hy vọng bài viết này đã giúp bạn thêm hiệu ứng di chuột cho hình ảnh trong WordPress.

Ngoài ra, hãy đọc bài viết về cách tối ưu hóa hình ảnh nếu bạn chưa biết.