Hình ảnh và video luôn làm cho các trang web trở nên hấp dẫn hơn. Tuy nhiên, một hotspot image trong trang web WordPress của bạn có thể phá vỡ mọi kỷ lục trước đó về việc sử dụng hình ảnh bình thường. Hotspot image chứa các khu vực có thể nhấp sẽ cung cấp thêm thông tin cho khách truy cập trang web của bạn. Trước khi tạo một điểm truy cập hình ảnh không phải là dễ dàng. May mắn thay, giờ đây với sự trợ giúp của các addon tuyệt vời của WordPress, việc tạo một điểm truy cập hình ảnh đã trở nên cực kỳ dễ dàng. Nó thậm chí còn trở nên dễ dàng nhất nhờ addon ElementsKit. Trong bài viết này, MMe sẽ hướng dẫn bạn cách tạo hotspot image với ElementsKit.
Tại sao nên tạo Interactive hotspot images?
Interactive hotspot image trong trang web WordPress của bạn sẽ thu hút sự chú ý của khách truy cập và giúp giảm tỷ lệ thoát. Thậm chí những hình ảnh này có thể hiệu quả hơn cả video. Bạn cũng sẽ tìm thấy nhiều ví dụ về hotspot name với hiệu suất cao.
Tuy nhiên, nếu bạn muốn biết chính xác những lợi ích mà bạn sẽ nhận được từ những hình ảnh này và lý do bạn nên nỗ lực nhiều hơn để tạo ra những hình ảnh này thì chắc chắn bạn không đơn độc. Thực tế, rất nhiều người phải đối mặt với những câu hỏi này trong khi tạo hotspot image Elementor. Dưới đây là câu trả lời cho câu hỏi của bạn về lý do tại sao bạn nên tạo ra hotspot image:
- Hình ảnh tương tác của hotspot image sẽ giúp bạn tương tác với người dùng của mình nhiều hơn vì sử dụng một hình ảnh trên trang web của bạn luôn có lợi. Tuy nhiên, nó sẽ thu về lợi ích nhiều hơn khi bạn sử dụng hotspot image.
- Hotspot image sẽ giúp bạn cung cấp thêm thông tin cho khách truy cập của bạn vì nó chứa các khu vực có thể nhấp được chứa tooltip hoặc cửa sổ. Các cửa sổ này chứa ảnh, văn bản, liên kết, v.v. để cung cấp thêm thông tin.
- Hotspot image đáp ứng trên cả thiết bị di động.
8 bước tạo hotspot image
Bước 1: Chỉnh sửa một trang mới với Elementor để tạo hình ảnh tương tác (interactive images)
Đầu tiên, bạn cần cài đặt và kích hoạt ElementsKit. Sau đó, truy cập trang tổng quan WordPress của bạn và truy cập pages>> add new để tạo interactive image hotspot.
Sau đó, nhấp vào nút Edit with Elementor để tạo hotspot image mới.
Bước 3: Chỉnh sửa nội dung các Image Hotspots của bạn
Sau khi thêm hotspot widget, bây giờ là lúc chỉnh sửa nội dung của tiện ích. Đối với nó, hãy chọn kiểu và hình nền từ thư viện phương tiện WordPress hoặc máy tính của bạn, sau đó tải nó lên.
Bạn cũng có thể chỉnh sửa những thứ sau bằng ElementsKit hotspot widget:
- Hiển thị ánh sáng: Bạn có thể hiển thị và ẩn ánh sáng xuất hiện xung quanh con trỏ.
- Nhấp hoặc di chuột: Tùy chọn này sẽ giúp bạn quyết định, bạn muốn tooltips của mình xuất hiện khi nhấp hoặc di chuột. Nếu bạn chọn di chuột thì tooltips của bạn sẽ hiển thị khi di chuột hoặc nó sẽ hiển thị khi người dùng nhấp vào điểm phát sóng.
- Hoạt động hay không: Bạn cũng có thể hiển thị hoặc ẩn tất cả các tooltips bằng tùy chọn này.
Sau khi chỉnh sửa những thứ ở trên, hãy thêm tooltip cho bản đồ hotspot image của bạn. Để làm điều đó, hãy nhấp vào hộp được đánh dấu trong hình.
Bây giờ bạn phải thêm tiêu đề và mô tả cho tooltip của mình. Để thực hiện, hãy chèn tiêu đề và mô tả cho tooltip của bạn.
Sau đó, thêm một hình ảnh phù hợp cho tooltip của bạn. Nó có thể là bất kỳ hình ảnh nào.
Bây giờ bạn cần điều chỉnh vị trí của tooltip bằng cách di chuyển con trỏ từ trái sang phải hoặc từ trên xuống dưới khi sử dụng tùy chọn sau. Bạn cũng có thể thêm nhiều hotspot hơn bằng cách nhấp vào nút add item.
Bước 4: Tùy chỉnh kiểu nội dung của hotspot image WordPress
Trong bước này, bạn phải chỉnh sửa kiểu nội dung hotspot của mình, chọn màu nền và hình ảnh thích hợp để thay đổi kiểu nội dung mặc định của hotspot image Elementor của bạn. Bây giờ, hãy đặt phần đệm, chiều rộng và căn chỉnh cho nội dung mặc định của bạn.
Trong bước này, bạn cần tùy chỉnh con trỏ. Tại đây bạn có thể tùy chỉnh các khu vực sau:
- Màu nền: Chọn màu nền cho con trỏ của bạn.
- Kích thước con trỏ: Đặt kích thước con trỏ của bạn. Bạn có thể làm cho nó lớn hơn bằng cách kéo vòng tròn sang bên phải.
- Bán kính đường viền: Tùy chọn này sẽ cho phép bạn thay đổi bán kính của con trỏ nếu bạn muốn.
- Bóng hộp: Bạn có thể thêm bóng bằng con trỏ với tùy chọn này.
- Kiểu đường viền: Chọn kiểu đường viền bạn muốn cho con trỏ của mình.
- Màu điểm: Tùy chỉnh màu của điểm nằm trong con trỏ.
- Màu phát sáng: Thay đổi màu phát sáng mặc định xuất hiện xung quanh con trỏ nếu bạn cảm thấy cần thiết.
Bước 6: Thay đổi kiểu tiêu đề của hotspot image
Đối với kiểu dáng của tiêu đề, bạn cần chọn kiểu chữ phù hợp cho tiêu đề của mình. Trong phần kiểu chữ, bạn có thể thay đổi các khu vực sau:
- Kích thước
- Trọng lượng
- Biến đổi
- Phong cách
- Trang trí
- Chiều cao giữa các dòng
- Khoảng cách giữa các chữ cái
Ngoài ra, bạn cũng cần chọn màu văn bản và đặt lề bắt buộc cho tiêu đề của mình.
Bước 7: Tùy chỉnh kiểu mô tả & hình ảnh
Tại đây, bạn cần chỉnh sửa mô tả nội dung cho tooltip giống như tùy chỉnh tiêu đề. Sau đó, hãy đặt vị trí hình ảnh mà bạn muốn nó xuất hiện trên chú giải công cụ của mình.
Cuối cùng, hãy thay đổi lề và chiều rộng của hình ảnh của bạn theo mong muốn của bạn.
Bước 8: Xuất bản những thay đổi bạn đã thực hiện đối với hotspot image
Cuối cùng sau khi thực hiện tất cả các thay đổi, bây giờ đã đến lúc xuất bản. Nhấp vào nút xuất bản và bạn sẽ được thiết lập cho hotspot image của mình.
Sử dụng hình ảnh trong trang web WordPress của bạn có thể là cách hiệu quả nhất để kết nối với khách truy cập về mặt cảm xúc. Tuy nhiên, hotspot image trong trang web WordPress của bạn có thể đưa hình ảnh lên một cấp độ khác. Xin chào và hẹn gặp bạn trong bài viết tiếp theo. Nếu bạn có nhu cầu dịch vụ viết bài chuẩn SEO đăng web, hay muốn tìm đơn vị cung cấp dịch vụ SEO website uy tín, vui lòng liên hệ với chúng tôi nhé! Gọi ngay Hotline 094 456 1874 để được tư vấn thêm.
