Bạn có muốn thay đổi hình ảnh khi di chuột qua văn bản với trang Builder Elementor ? Trong hướng dẫn mới này, chúng tôi sẽ chỉ cho bạn cách thực hiện.
Nếu bạn không biết chúng tôi muốn nói về điều gì hôm nay, mời bạn xem video sau:
Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.
Cũng khám phá hướng dẫn của chúng tôi về: Cách tạo thẻ hiệu ứng danh mục đầu tư với Elementor
Để hoàn thành hướng dẫn này, bạn sẽ cần phiên bản Pro của Elementor, bởi vì chúng tôi sẽ sử dụng mã CSS tùy chỉnh chỉ được hỗ trợ bởi phiên bản này củaElementor.
Hãy tạo một phần có 2 cột, sau đó trong bảng điều khiển bên, hãy xác định Hauteur sur Chiều cao tối thiểu, và sau đó Chiều cao tối thiểu hãy nhấp vào VH và đặt thanh trượt thành 100.
Trong tab Phong cách hãy chọn nó Loại nền en cliquant sur cổ điển, sau đó sửa đổi màu sur# F9F9F9
Trong tab tiên tiến, sửa đổi tất cả Lề nội bộ sur 25
Bây giờ chúng ta hãy thay đổi chiều rộng cột thành 40% cho cột bên trái và 60% cho cột bên phải.
Trong cột bên trái, hãy thả một Tiện ích trình soạn thảo văn bản, sau đó dán một Văn bản vào đó và sửa đổi Kích thước tiêu đề văn bản trên Tiêu đề 3.
Trong tab tiên tiến, nhập với tư cách Lề nội bộ 10-25-10-30 tương ứng cho lề trong trên, phải, dưới và bên trái
Trong phần lý lịch chuyển hướng tiên tiến, bấm vào TỔNG QUAT, sau đó chọn loại nền sur cổ điển, hãy nhập nó màu # DFF5FF et Thời lượng chuyển đổi sur 0.5.
Nếu chúng ta di chuột qua văn bản, chúng ta sẽ có cơ hội khám phá màu nền tuyệt đẹp khi di chuột.
Bây giờ chúng ta đi đến phần biên giớivà nhấp vào TỔNG QUAT, sau đó chọn Tiếp tục cho kiểu đường viền et hãy hủy kích hoạt liên kết giữa đường viền nhập 4 vì biên giới bên trái. Hãy chọn màu # 002FA7 và thêm thời lượng chuyển đổi vào 0.5
Nếu chúng ta di chuột qua hộp văn bản của mình một lần nữa, chúng ta sẽ thấy một hoạt ảnh nổi bật hơn với đường viền ở bên trái.
Trong phần Biên giới, hãy quay lại tab BÌNH THƯỜNG, hãy chọn kiểu đường viền trên Tiếp tục, hãy tắt ràng buộc giữa các đường viền, lấy 4 cho đường viền bên trái và làm cho nó rất trong suốt.
Nếu chúng ta di chuột qua văn bản một lần nữa, chúng ta sẽ thấy một quá trình chuyển đổi rất mượt mà.
Đọc cũng: Cách hiển thị văn bản phía trên hình ảnh bằng Elementor
Hãy nhân đôi văn bản này hai lần và thay đổi văn bản của mỗi văn bản nội dung như thế này.
Trong cột bên phải, hãy kéo Tiện ích hình ảnhvà chèn một hình ảnh từ thư viện của chúng tôi.
Chúng tôi sẽ tạo không gian xung quanh hình ảnh này bằng cách đi tới Tab nâng cao của cột và nhập 10 - 10 - 10 - 50 cho tất cả các lề bên trong của Trên, Phải, Dưới và Trái.
Hãy chọn hình ảnh và trong tab tiên tiến của phần sau, chúng ta hãy đi đến phần Hiệu ứng chuyển động sau đó Hoạt ảnh lối vào, lựa chọn Trong phai
Chúng ta cùng đi vào phần tiên tiến từ Tab Nâng cao và thêm một số tên lớp trong trường Lớp CSS. Vì vậy, chúng ta hãy lấy tất cả-img img-1
Hãy nhân đôi hình ảnh của chúng tôi 2 lần.
Hãy chọn hình ảnh thứ hai và thay đổi img-1 thành img-2, sau đó thay đổi hình ảnh thành một hình ảnh mới.
Xem thêm: Cách tạo thư viện hình ảnh với Elementor
Đối với hình ảnh thứ ba, chúng ta chỉ cần thay đổi img-1 thành img-3, sau đó thay đổi hình ảnh thành một hình ảnh mới.
Hãy chọn phần của chúng tôi và đi đến tab của nó tiên tiến. Trong phần Tùy chỉnh CSS, sao chép và dán đoạn mã sau:
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}(Nếu bạn không có phần này thì bạn không có phiên bản Pro, nếu muốn tiếp tục bạn cần nâng cấp phiên bản của mình).
Hãy chọn trình soạn thảo văn bản đầu tiên của chúng tôi và chuyển đến tab Nâng cao và Phần thuộc tính. Trên đồng ruộng Thuộc tính, sao chép và dán đoạn mã sau:
data-showme|img-1Thực hiện việc này cho các trình soạn thảo văn bản khác trong khi thay đổi img-1 thành img-2 hoặc thành img-3
Bây giờ, hãy thêm một tiện ích HTML vào trang của chúng ta. Sao chép và dán tập lệnh sau:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
Bây giờ hãy lưu hoặc cập nhật trang của bạn và sau đó xem trước nó.
Như vậy, bạn vừa thực hiện nhiệm vụ này một cách dễ dàng.
Tải xuống Elementor Pro ngay!
Kết luận
Đây rồi! Đó là nó cho bài viết này hướng dẫn bạn cách thay đổi hình ảnh khi di chuột qua văn bản. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo 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.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
