Bạn có muốn biết cách thay đổi hình ảnh khi di chuột với DIVI không?
Hiệu ứng di chuột là một số tương tác vi mô đơn giản nhất mà người dùng có thể có với website. các Trình tạo chủ đề Divi cung cấp một tập hợp các hiệu ứng di chuột cực kỳ đơn giản mà bạn có thể sử dụng để tạo ra một tương tác hấp dẫn cho tất cả những người ghé thăm website.
Một trong những hiệu ứng hữu ích và nổi bật nhất của Divi là có thể thay đổi hình ảnh khi người dùng di con trỏ qua nó.
Trong hướng dẫn này, chúng tôi chỉ cho bạn cách đạt được sự thay đổi hình ảnh đẹp khi di con trỏ chuột qua nó.
khảo sát
Trước khi bắt đầu, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Tạo trang bằng Trình tạo chủ đề Divi
Bắt đầu bằng cách thêm một trang mới vào Website từ Bảng điều khiển WordPress.
Sau đó, đặt tiêu đề cho trang của bạn rồi nhấp vào " Sử dụng Divi Builder ".
Sau đó bấm vào " Chọn bố cục«
Tìm và chọn " Trang chủ Chải lông cho Chó »
Chọn một bố cục và nhấp vào " Chọn bố cục »
Tìm hình ảnh của bạn
Khi ở trong Divi Builder, chỉ cần xác định vị trí hình ảnh bạn muốn thêm hiệu ứng vào.
Lưu ý rằng bạn có thể sử dụng nó trên bất kỳ phần tử nào có chứa một hình ảnh
Mở cài đặt mô-đun
Khi bạn đã đưa ra quyết định của mình, hãy nhấp vào biểu tượng bánh răng và nhập thông số mô-đun có chứa hình ảnh.
Đọc cũng: Làm cách nào để nổi các bài đăng trên blog trong DIVI?
Trong trường hợp của gói bố cục này, hình ảnh chúng ta sẽ áp dụng hiệu ứng di chuột là nền của cột ngoài cùng bên phải của hàng đầu tiên.
Nhập cài đặt cột.
Tìm hình ảnh trong cài đặt
Khi bạn đã ở trong cài đặt của cột đúng, hãy nhớ chọn tab Nội dung. Cuộn xuống cho đến khi bạn tìm thấy tùy chọn Đáy.
Dưới Nền, Divi cung cấp cho bạn tùy chọn sử dụng màu đồng nhất hoặc màu chuyển sắc, hoặc hình ảnh hoặc video ở định dạng .mp4.
Và mặc dù các hiệu ứng di chuột có thể được áp dụng cho bất kỳ hiệu ứng nào trong số chúng, chúng tôi làm việc trong tab Hình ảnh, thứ ba từ bên trái.
Bật Hiệu ứng Di chuột
Di chuyển chuột qua từ Nền (phụ đề nhỏ nhất) và tìm kiếmbiểu tượng mũi tên trong các tùy chọn xuất hiện. Đây là chuyển đổi cho Hiệu ứng Divi Hover.
Khi tùy chọn này được kích hoạt, hai tab mới sẽ xuất hiện. Tab bên trái là hình ảnh cơ sở xuất hiện mà không cần tương tác.
Chọn hình ảnh mới của bạn
Khi bạn di chuyển con trỏ xuống trên hình ảnh, bạn sẽ có các tùy chọn bình thường: để thay thế hình ảnh ou xóa hình ảnh.
Nếu bạn chọn biểu tượng thùng rác, nó sẽ kích hoạt hiệu ứng di chuột, nhưng nó sẽ làm cho hình ảnh biến mất.
Vì chúng tôi muốn biến đổi hình ảnh khi di chuột, chúng tôi sẽ nhấp vào chính hình ảnh, hoặc trênbiểu tượng bánh răng .
Chọn hình ảnh di chuột (thay thế)
Thao tác này sẽ mở thư viện phương tiện của bạn. Sau đó, bạn có thể chọn hình ảnh mới mà bạn muốn người dùng của mình nhìn thấy khi họ di chuột qua hình ảnh gốc. Bấm vào 'Tải lên một hình ảnh'
Kiểm tra lỗi với hình ảnh gốc
Chúng tôi luôn đề nghị bạn đảm bảo rằng hình ảnh gốc cũng được giữ nguyên. Vì vậy, để kiểm tra, hãy nhấp vào tab bên trái và đảm bảo rằng hình ảnh gốc vẫn còn nguyên.
Nếu tất cả đều ổn, bạn có thể lưu cài đặt của mình.
- Lưu cài đặt cột
- Nhấn lại đánh dấu xanh để lưu cài đặt dòng.
Lưu cài đặt chung chung và xuất bản trang.
Kết quả
Nếu bạn đã làm theo tất cả các bước trong hướng dẫn này, bạn sẽ nhận được điều này.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trình tạo chủ đề của Divi có đầy đủ các công cụ mạnh mẽ mà bất kỳ ai cũng có thể sử dụng tạo một trang web thú vị và tương tác. Thay đổi hình ảnh khi di chuột mà chúng tôi đã chỉ cho bạn trong hướng dẫn này chỉ là một công cụ trong số rất nhiều công cụ.
Nếu bạn cần thêm các yếu tố để hoàn thành các dự án tạo trang web của mình, hãy duyệt qua hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận nói đến điều đó. Nhưng trong khi đó, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
