Có một thứ mà mình không hiểu tại sao đến giờ Elementor vẫn không cập nhật vì nó thật sự được sử dụng khá thường xuyên và rộng rãi, đó là các Column có thể click được. Anh em nhìn thiết kế bên dưới sẽ hiểu tại sao các cột cần được Click
Thiết kế này mà chỉ gán link vào tiêu đề thì ông UX design sẽ “chém” mình ra tương. Kaka 😂 ## Có 2 cách để xử lý (mình đã chọn cách 1):
Cách 1: sử dụng plugin Make Column Clickable Elementor
Cập nhật 18/12/2022: Plugin này không hoạt động nếu bạn kích hoạt Flexbox Container trong Elementor
Trước đây, mình đã gặp trường hợp này nhiều lần thì lượt tải đợt đó của plugin này chỉ loanh quanh 30k nay thì em nó đã hơn 100k thì anh em cũng đủ biết độ HOT của em nó như thế nào. Hình hướng dẫn bên trên là sau khi anh em cài đặt plugin sẽ có nhé! Nhẹ não đúng không nào!?
Cách 2: sử dụng CSS + JS
Hack não hơn xíu cho anh em nào chơi hệ No-Code. Chúng ta truy cập vào Site Settings > Custom Css và thả đoạn CSS sau vào đó .pointer {cursor: pointer;} Tiếp đến vào Elementor > Custom Code chọn New code và thả đoạn code sau vào
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// Đảm bảo mã JavaScript được thực thi sau khi DOM đã được tải hoàn tất
jQuery(document).ready(function() {
// Gắn sự kiện click cho các phần tử có class là "click-child" trong cơ thể (body) của trang web
jQuery("body").on("click", ".click-child", function() {
// Lấy giá trị của thuộc tính "href" của phần tử <a> đầu tiên bên trong phần tử được kích hoạt sự kiện click
var href = jQuery(this).find("a").attr('href');
// Chuyển hướng trang web đến đường dẫn được tham chiếu bởi giá trị "href"
window.location = href;
});
});
</script>
(Anh em nhớ bỏ đi comment giải thích code nhé)
Bước cuối cùng anh em vào Elementor chọn Column bất kỳ chọn tiếp tab Advanced và thả đoạn code sau click-child pointer vào bất kỳ cột nào mà anh em muốn cho nó click được. Cách này chỉ áp dụng được nếu anh em đang xài Elementor Pro thôi nhé! Chúc anh em thành công.
