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

Thêm hiệu ứng di chuột vào website của bạn có thể trông giống như một chi tiết nhỏ, nhưng nó có thể tăng cường 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ẹ, nó báo hiệu rằng phần tử đó có thể tương tác. 

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. Hiệu ứng di 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 chặt chẽ 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 di chuột hình ảnh trong WordPress, từ các hiệu ứng mờ đơn giản đến các hoạt hình lậ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 di 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. Chọn cách phù hợp nhất với bạn!

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

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 hover 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 động khác nhau cho từng thư viện, chẳng hạn như hiệu ứng zoom đơn giản cho hình ảnh thu nhỏ của 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 giúp quá trình này trở nên dễ dàng hơn. Plugin này miễn phí cho mọi người và cung cấp một loạt các 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 dưới đây: 

Cài đặt một Plugin

• Mở khu vực quản trị WordPress của bạn.
• Nhấp Thêm Plugin từ menu Plugins trong thanh bên.

• Gõ Image Hover Effects Ultimate vào thanh tìm kiếm.

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

Sử dụng Plugin Hiệu ứng Di chuột Hình ảnh WordPress

• Khi plugin được cài đặt, bạn sẽ thấy một menu Di chuột hình ảnh mới trong bảng điều khiển của bạn.

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

• Chọn bất kỳ hiệu ứng nào bạn muốn sử dụng. Đối với hướng dẫn này, chúng tôi sẽ thử nghiệm với Kính lúp hình ảnh.
• Sau khi chọn hiệu ứng, bạn sẽ thấy nhiều kiểu hoạt hình khác nhau.

Khi bạn tìm thấy một cái bạn thích, 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 trường Tên và chọn một hiệu ứng từ bố cục (thứ 1, thứ 2 hoặc thứ 3). Sau đó nhấp vào Lưu để tiếp tục.
• Bạn sẽ được đưa đến một trang mới nơi bạn có thể tùy chỉnh các cài đặt, chẳng hạn như chiều cao, chiều rộng và độ mờ. Thử nghiệm để xem cái gì trông đẹp nhất.

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

• 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 nhấn vào nút Chọn Hình ảnh.
• Sau khi thiết lập mọi thứ, nhấp vào Gửi để lưu hiệu ứng hover của bạn.

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

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

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 tôi sẽ bắt đầu với một điều gì đó đơn giản, như hiệu ứng di chuột gạch chân. 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 di chuột.
• Thêm hình ảnh bằng cách nhấp vào khối Trình bao từ +.

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

• Thiết lập phông chữ và kiểu dáng theo ý thích của bạn.
• Lưu trang dưới dạng bản nháp.
• Tiếp theo, đi đến Giao diện menu trong bảng điều khiển của bạn.

• Sau đó, nhấp Tùy chỉnh và đi đến CSS bổ sung. Thêm mã sau:

body { hiển thị: flex; căn chỉnh: center; căn giữa: center; chiều cao: 100vh; nền: #0f0f0f; lề: 0; font-family: Arial, sans-serif; } .hover-underline { cỡ chữ: 2rem; màu: #ffffff; vị trí: relative; hiển thị: inline-block; } .hover-underline::after, .hover-underline::before { nội dung: ''; vị trí: absolute; chiều rộng: 100%; chiều cao: 2px; nền: linear-gradient(đến phải, #ff0000, #00ffff); dưới: -5px; trái: 0; biến đổi: scaleX(0); gốc biến đổi: phải; chuyển tiếp: biến đổi 0.4s ease-out; } .hover-underline::before { trên: -5px; gốc biến đổi: trái; } .hover-underline:hover::after, .hover-underline:hover::before { biến đổi: scaleX(1); }
 

• Nhấp Xuất bản để lưu mã.

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

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

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

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

Một trình tạo trang như Elementor cho phép bạn xây dựng trang web website của mình với nhiều sự sáng tạo. Nó 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 sống động mà không cần yêu cầu bất kỳ mã hóa nào.

Bạn cũng có thể sử dụng nó để tạo hiệu ứng di chuột hình ảnh trong WordPress. Trong phần này, chúng tôi sẽ thử nghiệm với các hiệu ứng di chuột tích hợp 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 hình ảnh của bạn.

• Chọn hình ảnh của bạn, sau đó chuyển đến tab Phong cách.
• Cuộn xuống và nhấp Di chuột.

• Trong menu thả xuống Hover Animation, bạn sẽ tìm thấy nhiều hiệu ứng sẵn sàng để sử dụng.

• Ở đây, chúng tôi đã chọn hiệu ứng 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 bạn hoàn thành, bạn sẽ có thể thấy hiệu ứng ngay lập tức mà không cần phải xem trước. 

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

Nếu bạn đang tìm kiếm một phím tắt, 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 sau khi bạn di chuột qua nó.

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

• Từ bảng điều khiển WordPress của bạn, nhấp vào Plugins menu. Sau đó, chọn Thêm Plugin.
• Gõ Flipbox - Awesome Flip Boxes Image Overlay vào thanh tìm kiếm.

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

• Để tạo flipbox, hãy truy cập Flip Box và nhấp Tạo mới.
• Chọn bất kỳ hiệu ứng động nào bạn thích. Khi bạn đã tìm thấy một hiệu ứng, hãy nhấp Tạo Phong Cách.

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

• Nhấp Lưu để tiếp tục.
• Tiếp theo, bạn sẽ được đưa đế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 tab Xem trước. Nhấp Chỉnh sửa để tùy chỉnh nội dung cho cả mặt trước và mặt sau của flipbox.

• Khi bạn đã hoàn thành, hãy nhấp Gửi để lưu lại.

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

• Và thế là xong, đây là sản phẩm hoàn thiện! 

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

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

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

Ví dụ, hãy tạo một hiệu ứng mờ dầ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 di chuột.
• Nhấp vào + để thêm một khối mới, sau đó chọn khối Cover.

• Bên trong khối Cover, thêm một khối đoạn văn.

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

• Sau đó, chọn khối Cover để thêm một lớp CSS tùy chỉnh.
• Mở Nâng cao trong 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.

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

.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ó.
• Bây giờ, xem trước trang của bạn để thấy hiệu ứng di chuột trong hành động.

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 vào các thư mục. Điều này giúp tìm và tái sử dụng nội dung liên quan dễ dàng hơn.

Sử dụng Quá nhiều Hiệu ứng có Ảnh hưởng đến Hiệu suất không?

Có, sử dụng quá nhiều hiệu ứng hover 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 hover yêu cầu CSS bổ sung. Kích thước của CSS trên trang web của bạn có thể tăng lên và làm chậm thời gian tải trang.

Tốt nhất bạn 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.

Kết thúc

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

Với nhiều cách để thêm hiệu ứng di chuột, cho dù thông qua plugin, CSS tùy chỉnh hoặc trình xây dựng trang, bạn có tự do lựa chọn những gì hoạt động tốt nhất cho mình. Thử nghiệm với các phong cách khác nhau để tìm ra phong cách phù hợp nhất với trang web của bạn!