Cách thêm hiệu ứng rê chuột vào hình ảnh trong WordPress (5 cách dễ dàng)

Việc thêm hiệu ứng di chuột vào website của bạn có vẻ như là một chi tiết nhỏ, nhưng nó có thể nâng cao diện mạo và khả năng sử dụng của trang web. Khi khách truy cập di chuột qua hình ảnh hoặc nút và thấy nó thay đổi nhẹ, điều đó báo hiệu rằng phần tử đó có tính tương tác. 

Hiệu ứng chuyển động tinh tế này sẽ cải thiện sự tương tác và giúp giảm tỷ lệ thoát trang. Hiệu ứng rê chuột đặc biệt hữu ích trong thương mại điện tử. Chúng cho phép người mua xem trước sản phẩm kỹ hơn, khuyến khích họ khám phá thêm và tiến hành thanh toán.

Có nhiều cách để thêm hiệu ứng rê chuột vào hình ảnh trong WordPress, từ hiệu ứng mờ dần đơn giản đến hiệu ứng lật bắt mắt. Dưới đây, bạn sẽ tìm thấy một số phương pháp để bắt đầu!

Cách thêm hiệu ứng rê chuột vào hình ảnh trong WordPress

Trong bài viết này, chúng tôi đã tổng hợp năm cách dễ dàng để thêm hiệu ứng di chuột vào trang web của bạn. Hãy chọn cách phù hợp nhất với bạn!

Phương pháp 1: Sử dụng Plugin

Sử dụng plugin sẽ giúp bạn tiết kiệm rất nhiều thời gian và công sức, đặc biệt nếu bạn muốn sử dụng nhiều hiệu ứng di chuột khác nhau trên cùng một trang web.

Ví dụ, nếu bạn có nhiều thư viện hình ảnh, bạn có thể áp dụng các hiệu ứng khác nhau cho mỗi thư viện, chẳng hạn như hiệu ứng phóng to đơn giản cho hình thu nhỏ bài đăng blog hoặc hiệu ứng lật cho hình ảnh sản phẩm.

Sử dụng một plugin như Image Hover Effects Ultimate sẽ giúp quá trình này dễ dàng hơn nhiều. Plugin này miễn phí cho tất cả mọi người và cung cấp nhiều hiệu ứng cho từng phần tử. Để bắt đầu, chỉ cần cài đặt nó bằng cách làm theo hướng dẫn bên dưới: 

Cài đặt Plugin

• Mở trang quản trị WordPress của bạn.
• Nhấp vào Thêm Plugin từ Plugin ở thanh bên.

• Nhập "Image Hover Effects Ultimate" vào thanh tìm kiếm.

• Chọn kết quả đầu tiên và nhấp vào "Cài đặt ngay" để bắt đầu tải xuống.
• Sau khi quá trình cài đặt hoàn tất, hãy nhấp vào Kích hoạt để bắt đầu sử dụng plugin.

Sử dụng plugin Image Hover Effects cho WordPress

• Sau khi cài đặt plugin, bạn sẽ thấy một Hiệu ứng di chuột hình ảnh trong bảng điều khiển của mình.

• Nhấp vào menu để mở cài đặt plugin. 

• Hãy chọn bất kỳ hiệu ứng nào bạn muốn sử dụng. Trong hướng dẫn này, chúng ta sẽ thử nghiệm với hiệu ứng Phóng to hình ảnh (Image Magnifier ).
• Sau khi chọn hiệu ứng, bạn sẽ thấy nhiều kiểu hoạt ảnh khác nhau.

Khi bạn tìm được kiểu ưng ý, hãy nhấp vào Tạo kiểu .

• Một cửa sổ bật lên sẽ xuất hiện. Nhập tiêu đề vào Tên và chọn hiệu ứng từ bố cục (thứ nhất, thứ hai hoặc thứ ba). Sau đó nhấp vào Lưu để tiếp tục.
• Bạn sẽ được chuyển đến một trang mới, nơi bạn có thể tùy chỉnh các cài đặt như chiều cao, chiều rộng và độ mờ. Hãy thử nghiệm để xem cài đặt nào trông đẹp nhất.

• Sau khi bạn hài lòng với các cài đặt, hãy nhấp vào Chỉnh sửa để tùy chỉnh hình ảnh của mình.

• Một cửa sổ bật lên khác sẽ xuất hiện. Tại đây, bạn có thể tùy chỉnh vị trí phóng đại. 

• Bạn cũng có thể thay thế hình ảnh bằng cách sử dụng "Chọn hình ảnh" .
• Sau khi thiết lập mọi thứ, hãy nhấp vào Gửi để lưu hiệu ứng di chuột.

• Để áp dụng hiệu ứng này cho trang web của bạn, hãy sao chép và dán shortcode vào bài đăng hoặc trang của bạn. 

• Giờ đây, hiệu ứng di chuột đơn giản trên hình ảnh đã sẵn sàng để sử dụng ở bất kỳ vị trí nào trên trang web của bạn. 

Phương pháp 2: Sử dụng CSS

Bạn không cần cài đặt bất kỳ plugin nào cho phương pháp này. Bằng cách sử dụng CSS tùy chỉnh, bạn có thể thêm nhiều hiệu ứng di chuột khác nhau vào themecủa mình.

Chúng ta sẽ bắt đầu với một hiệu ứng đơn giản, chẳng hạn như hiệu ứng gạch chân khi rê chuột. Nếu bạn muốn thêm hiệu ứng này vào themecủa mình, hãy làm theo các bước đơn giản dưới đây:

• Điều hướng đến bài viết mà bạn muốn thêm hiệu ứng rê chuột.
• Thêm hình ảnh bằng cách nhấp vào Ảnh bìa từ dấu + .

• Nhập nội dung của bạn vào Ảnh bìa . Tại đây, chúng ta sẽ thêm tiêu đề và nút.

• Bạn có thể tùy chỉnh phông chữ và kiểu chữ theo ý thích.
• Lưu trang này dưới dạng bản nháp.
• Tiếp theo, hãy vào Giao diện trong bảng điều khiển của bạn.

• Tiếp theo, nhấp vào Tùy chỉnh và chuyển đến CSS bổ sung . Thêm đoạn mã sau:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Nhấp vào nút "Xuất bản " để lưu mã.

• Bây giờ hãy quay lại bài đăng của bạn và chọn đoạn văn bản mà bạn muốn áp dụng hiệu ứng gạch chân.
• Mở Nâng cao trong thanh bên của khối và nhập underline-hover vào Lớp CSS bổ sung .

• Lưu trang và xem trước để thấy hiệu quả. 

Có rất nhiều hiệu ứng rê chuột để lựa chọn, vì vậy hãy chọn hiệu ứng phù hợp nhất với phong cách của bạn. Bạn có thể tự học cách viết CSS hoặc tìm ví dụ từ cộng đồng WordPress. Tất cả đều có sẵn!

Phương pháp 3: Sử dụng trình tạo trang (ví dụ: Elementor)

Trình tạo trang như Elementor cho phép bạn xây dựng website của mình với rất nhiều sự sáng tạo. Nó có các hiệu ứng di chuột tích hợp sẵn, tất cả đều sẵn sàng để sử dụng nhằm làm cho trang web của bạn trở nên sinh động hơn mà không cần lập trình.

Bạn cũng có thể sử dụng nó để tạo hiệu ứng di chuột lên hình ảnh trong WordPress. Trong phần này, chúng ta sẽ thử nghiệm các hiệu ứng di chuột tích hợp sẵn trong chính trình tạo trang.

Để thiết lập các hiệu ứng:

• Mở Elementor từ bảng điều khiển quản trị.
• Thêm ảnh của bạn.

• Chọn ảnh của bạn, sau đó chuyển đến Kiểu .
• Cuộn xuống và nhấn vào Di chuột .

• Trong Hiệu ứng di chuột (Hover Animation ), bạn sẽ tìm thấy nhiều hiệu ứng có sẵn để sử dụng.

• Ở đây, chúng tôi đã chọn Grow làm ví dụ. Sau đó, bạn có thể tùy chỉnh thời lượng chuyển đổi, độ mờ và các cài đặt khác để phù hợp với thiết kế trang web của mình.

• Sau khi hoàn tất, bạn sẽ thấy hiệu quả ngay lập tức mà không cần xem trước. 

Phương pháp 4: Sử dụng plugin Flipbox

Nếu bạn muốn tìm cách nhanh hơn, bạn có thể cài đặt plugin Flipbox. Hiệu ứng Flipbox là khi một hình ảnh lật để hiển thị nội dung ở mặt trước hoặc mặt sau khi bạn di chuột qua nó.

Hiệu ứng này rất tuyệt vời cho hình ảnh chụp ảnh, nơi bạn có thể hiển thị ảnh ở mặt trước và thông tin chi tiết về máy ảnh ở mặt sau. Nhưng khả năng ứng dụng là vô tận.

• Từ trang quản trị WordPress của bạn, hãy nhấp vào Plugin . Sau đó, chọn Thêm Plugin .
• Nhập "Flipbox - Awesome Flip Boxes Image Overlay" vào thanh tìm kiếm.

• Nhấp vào Cài đặt ngay , sau đó Kích hoạt plugin.

• Để tạo hộp lật, hãy vào Hộp lật và nhấp vào Tạo mới .
• Hãy chọn bất kỳ hiệu ứng hoạt hình nào bạn thích. Sau khi tìm được hiệu ứng ưng ý, hãy nhấp vào Tạo kiểu .

• Một cửa sổ bật lên sẽ xuất hiện. Chọn bố cục mong muốn (thứ nhất, thứ hai hoặc thứ ba) và nhập tiêu đề. 

• Nhấp vào Lưu để tiếp tục.
• Tiếp theo, bạn sẽ được chuyển đến menu tùy chỉnh, nơi bạn có thể thiết lập hiệu ứng và thêm nội dung của mình.

• Cuộn xuống để tìm Xem trước . Nhấp vào Chỉnh sửa để tùy chỉnh nội dung cho cả mặt trước và mặt sau của hộp lật.

• Sau khi hoàn tất, hãy nhấp vào nút Gửi để lưu lại.

• Để thêm hộp thoại lật này vào trang của bạn, chỉ cần sao chép và dán shortcode được tạo vào bất kỳ phần nào trên trang web của bạn. 

• Và thế là xong, đây là sản phẩm hoàn chỉnh! 

Phương pháp 5: Sử dụng khối Gutenberg

Gutenberg là trình soạn thảo khối mặc định của WordPress cho phép bạn thêm hiệu ứng di chuột trực tiếp trong trình soạn thảo.

Mặc dù không cung cấp các hiệu ứng di chuột nâng cao, bạn có thể cải thiện hoạt ảnh bằng cách sử dụng CSS tùy chỉnh.

Ví dụ, chúng ta hãy tạo hiệu ứng mờ dần đơn giản khi di chuột. Dưới đây là hướng dẫn từng bước:

• Điều hướng đến bài viết hoặc trang mà bạn muốn thêm hiệu ứng rê chuột.
• Nhấp vào dấu + để thêm khối mới, sau đó chọn Cover .

• Bên trong Cover , hãy thêm một Paragraph .

• Nhập tiêu đề và mô tả ngắn gọn.
• Tùy chỉnh kích thước phông chữ, độ mờ, căn chỉnh và màu sắc theo nhu cầu.

• Sau đó, chọn Cover để thêm lớp CSS tùy chỉnh.
• Mở Nâng cao ở thanh bên phải.
• Nhập fade-hover-effect vào trường Lớp CSS bổ sung .

• Sau đó, lưu trang đó dưới dạng bản nháp.

• Vào Plugin và chọn plugin đoạn mã của bạn. Trong ví dụ này, chúng ta đang sử dụng WPCode .
• Tạo một đoạn mã CSS mới, sau đó dán đoạn mã sau vào:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Lưu đoạn mã và kích hoạt nó.
• Giờ hãy xem trước trang của bạn để thấy hiệu ứng mờ dần khi rê chuột hoạt động như thế nào.

Bạn có thể tái sử dụng hiệu ứng này bằng cách thêm lớp `fade-hover-effect` vào bất kỳ khối hoặc hình ảnh nào. Nhưng nếu bạn đang xử lý nhiều hình ảnh, hãy cân nhắc sử dụng một plugin như WP Media Folder để sắp xếp thư viện phương tiện của bạn thành các thư mục. Điều này giúp bạn dễ dàng tìm và tái sử dụng nội dung liên quan.

Việc sử dụng quá nhiều hiệu ứng có ảnh hưởng đến hiệu suất không?

Đúng vậy, việc sử dụng quá nhiều hiệu ứng di chuột trên trang web của bạn có thể ảnh hưởng đến hiệu suất, đặc biệt nếu không được tối ưu hóa đúng cách. Điều này là do một số hiệu ứng di chuột yêu cầu thêm CSS. Kích thước của CSS trên trang web có thể tăng lên và làm chậm thời gian tải trang.

Tốt nhất là chỉ nên sử dụng các hiệu ứng di chuột cần thiết để nâng cao trải nghiệm người dùng mà không làm quá tải trang web của bạn.

Tóm lại

Học cách thêm hiệu ứng rê chuột lên hình ảnh trong WordPress có thể giúp tăng cường trang web của bạn bằng cách cải thiện tương tác người dùng và giữ chân họ.

Với nhiều cách để thêm hiệu ứng rê chuột, dù là thông qua plugin, CSS tùy chỉnh hay trình tạo trang, bạn có quyền tự do lựa chọn phương pháp phù hợp nhất. Hãy thử nghiệm với các kiểu khác nhau để tìm ra kiểu phù hợp nhất với trang web của bạn!