Bây giờ Nam sẽ hướng dẫn các bạn cách thêm hotspot với Elementor Pro các bạn nhé!
Hotspot là 1 kiểu show hình ảnh khá thú vị và có tính tương tác cao mà các bạn nên sử dụng để show ảnh sản phẩm tuyển chọn trên website.
Cách Thêm Hotspot Với Elementor Pro
Đầu tiên thì chúng ta sẽ tìm và sử dụng widget Hotspot.
Lưu ý là hotspot chỉ có ở Elementor bản Pro thôi nhé các bạn!
Điều đâu tiên là chúng ta thêm hình ảnh vào và nên chọn kích thước hình ảnh là Hết mức để giữ độ nét.
Sau đó chúng ta xuống tab Hotspot và click vào Mục 1 để edit hotspot. Đầu tiên là chúng ta điền label để đặt tên cho hotspot. Đồng thời label sẽ hiện ra ngoài luôn.
Tiếp theo thì chúng ta edit Tooltip Content bằng cách điền nội dung vào.
Tooltip là nội dung sẽ hiện ra khi chúng ta tương tác với hotspot.
Để edit vị trí của hotspot thì chúng ta click vào tab Position.
Tại đây thì chúng ta sẽ thấy Horizontal Orientation và Vertical Orientation (Tương ứng với vị trí của chiều ngang và chiều dọc) . Để edit vị trí theo ý thì bạn kéo thanh Offset bên dưới tùy ý theo cả 2 chiều.
Tiếp theo thì chúng ta sẽ qua tab Tooltip nhé! Đầu tiên là tùy chỉnh vị trí qua mục Position để tooltip nằm trên dưới, trái phải tùy ý. Tiếp đến là Trigger để tooltip hiện ra thì chúng ta có thể chọn mặc định là Click để khi click vào hotspot nó hiện ra hay Hover để chỉ cần rê chuột vào hotspot là nó hiện ra. Chúng ta cũng có thể chọn các kiểu animation qua mục Animation nhé!
Để có thể thêm 1 hotspot khác thì bạn có thể trở lại tab Hotspot và bấm Thêm Mục để thêm 1 hotspot nữa bạn nhé!
Chúc các bạn ứng dụng thành công hướng dẫn này và hãy thường xuyên ghé thăm blog của Nam để tham khảo những hướng dẫn về Elementor các bạn nhé!
