Bạn có muốn thay đổi hình ảnh bằng cách nhấp vào nút 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 cũng: Cách thay đổi hình ảnh khi di chuột qua văn bản bằng 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.

Hãy kéo tiện ích Hình ảnh sang cột bên trái và chèn một hình ảnh từ thư viện của chúng tôi.

Trong cột bên phải, hãy chèn một Tiện ích con tiêu đề có tiêu đề Chọn Điều Tốt nhất. Trong tab Phong cách hãy nhấp vào typography và sửa đổi Chiều cao hàng ở 1.

Xem thêm: Cách thay đổi hình ảnhge khi di chuột qua văn bản với Elementor

Hãy thêm vào bên dưới tiện ích Tiêu đề, Tiện ích trình soạn thảo văn bản.

Phía trên tiện ích Tiêu đề, hãy thả Tiện ích phân tách vào tab của nó Nội dung, hãy lấy 270 cho chiều rộng. Hãy nhấp vào Văn bản để Thêm phần tử, sau đó nhập Khuynh hướng dưới dạng văn bản. Trong tab Phong cách, sửa đổi Dầu mỡ và khoảng cách sur 2.

Khám phá thêm: Cách hiển thị văn bản phía trên hình ảnh bằng Elementor

Trong phần Văn bản, nhấp vào typography, hãy thay đổi phông chữ, Kích thước sur 18, các mỡ sur 600.

Bên dưới tiện ích Trình chỉnh sửa nội dung, hãy nộp một Phần nội bộ, xóa một trong các cột của Phần nội bộ và thả vào cột sau nút-widget

Hãy sửa đổi nút bằng cách đi tới bảng điều khiển bên cạnh và trong tab Nội dung, bấm vào thư viện biểu tượng sur biểu tượng và chèn biểu tượng Túi mua sắm, hãy cũng xóa nội dung của nút trên Văn bản

Hãy chuyển đến tab Phong cách của nút và trong Bán kính đường viền, bấm vào % và nắm bắt 50 cho tất cả các bán kính lề đường và trong Lề nội bộ, hãy lấy 20.

Hãy tùy chỉnh màu của nút bằng cách thay đổi màu của nút sau bằng cách nhấp vào cổ điển cho Loại nền và Hãy thay đổi màu sắc theo màu nổi bật trên hình ảnh.

Sau đó nhấp vào Tab tiên tiến nút của chúng tôi, sau đó trên định vị và Chiều rộng hãy chọn Nội tuyến (Tự động). Trong phần Nâng cao củaTab nâng cao, hãy lấy 10 vì lề phải.

Hãy nhân đôi nút này 4 lần và sửa đổi màu sắc của các nút này.

Tiếp theo, hãy nhân đôi tiện ích Hình ảnh của chúng tôi 4 lần, sau đó sửa đổi hình ảnh của chúng.

Trong L 'Tab nâng cao, hãy lấy tất cả hình ảnh trên đồng ruộng Các lớp CSS của mỗi hình ảnh của chúng tôi.

Sau đó trong lĩnh vực ID CSS nhập hình ảnh màu đỏ cho hình ảnh có điểm đánh dấu màu đỏ, hình ảnh màu xanh lá cây cho hình ảnh có điểm đánh dấu màu xanh lá cây và hình ảnh màu nâu cho hình ảnh có điểm đánh dấu màu nâu, v.v.

Hãy chọn của chúng tôi Phần và trongTab nâng cao, trên đồng ruộng Tuỳ chỉnh CSS sao chép và dán đoạn mã sau:

.all-images{
    display: none;
}
#red-image{
    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 bạn muốn tiếp tục, bạn cần nâng cấp phiên bản của mình)

Tiếp theo, hãy thả một tiện ích HTML vào trang của chúng tôi, sao chép và dán đoạn mã sau vào phần Mã HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Hãy chọn nút đầu tiên, trong trường Thuộc tính tùy chỉnh từ Phần thuộc tính, sao chép và dán đoạn mã sau:

data-showme|IMAGE-ID-NAME

Hãy sửa đổi phần ẢNH-ID-TÊN theo ID của các nút của bạn, đây là ID hình ảnh màu đỏ, hình ảnh màu xanh lá cây và màu sắc xanh lam, v.v.

Vì vậy, đối với mỗi nút, hãy thay đổi mã HÌNH ẢNH-ID-TÊN thành màu của nút thích hợp

Cập nhật công việc của bạn và xem trước nó ở chế độ máy tính để bàn, máy tính bảng và điện thoại thông minh trong khi kiểm tra các nút của bạn.

Ví dụ: ở chế độ điện thoại thông minh, bạn có thể căn chỉnh các nút ở trung tâm, giảm lề và hơn thế nữa.

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.

...