Bạn có muốn tìm hiểu cách tạo hình ảnh tương tác với Hotspots trong WordPress nhờ Elementor và Addons cần thiết?
Hình ảnh là một công cụ tuyệt vời để truyền tải thông tin. Mọi người đều biết rằng thông tin được truyền tải qua hình ảnh — và toàn bộ hình thức trực quan — dễ hiểu và dễ nhớ hơn.
Trong ngữ cảnh của web, bạn có thể sử dụng nhiều định dạng hình ảnh. Từ một đồ họa thông tin, một bức ảnh, một mẩu truyện tranh, một hình minh họa, v.v….
Nếu bạn muốn tạo nội dung web như giải phẫu của một thứ gì đó, địa danh thành phố, bản đồ hoặc chỉ đường, thì việc xây dựng hình ảnh với Hotspot có thể là một ý tưởng tuyệt vời.
Ý tưởng của loại nội dung này là cung cấp một hình ảnh tương tác giúp độc giả của bạn dễ dàng hiểu thông tin bạn đang truyền tải. Bạn có thể thêm các Điểm phát sóng trên một hình ảnh có chứa chú giải công cụ trên mỗi Điểm phát sóng. Đây là một ví dụ.
Nếu bạn có một website dựa trên WordPress, việc tạo một hình ảnh với các điểm nóng không quá khó thực hiện. Bạn có thể tạo một cái bằng cách sử dụng mô-đun Addons cần thiết .
Mô-đun Addons cần thiết là gì?
Essential Addons là một tiện ích bổ sung choElementor. Đây là một trong những mod phổ biến nhất với hơn 2 triệu lượt tải xuống. Tiện ích bổ sung này bổ sung thêm khoảng 60 tiện ích bổ sung vào Elementor.
Một trong những vật dụng được cung cấp bởi Essential Addons là Điểm truy cập hình ảnh EA mà bạn có thể sử dụng để tạo một hình ảnh tương tác. Bản thân Essential Addons là một addon freemium, nhưng bạn phải sử dụng phiên bản pro để tạo hình ảnh với Hotspots vì tiện ích EA Image Hotspots chỉ khả dụng trên phiên bản này.
Cách sử dụng module Essential Addons để tạo ảnh với Hotspot
Trước tiên, bạn cần cài đặt các mô-đun Elementor và Essential Addons trên WordPress của mình. Bạn có thể tải phiên bản chuyên nghiệp của Essential Addons trên website chính thức. Trong khi đối với Elementor, bạn có thể sử dụng phiên bản miễn phí.
Xem thêm: Cách sử dụng tiện ích toàn cầu trong Elementor
Phiên bản miễn phí của Elementor có sẵn trên thư mục của Plugin WordPress để bạn có thể cài đặt nó bằng cách gõ “elementor” trên hộp tìm kiếm trình cài đặt plugin (Plugin -> Thêm).
Khi Elementor và Essential Addons được cài đặt, hãy tạo một trang mới (Trang -> Thêm) hoặc một mục mới (Mục -> Thêm) và chỉnh sửa nó bằng Elementor. Bạn sẽ được chuyển hướng đến trình chỉnh sửa Elementor sau khi nhấp vào nút Chỉnh sửa bằng phần tử.
Trước khi tạo hình ảnh với các điểm nóng, trước tiên bạn có thể đặt bố cục. Để thực hiện việc này, hãy mở bảng cài đặt trang bằng cách nhấp vào biểu tượng bánh răng ở góc dưới bên trái của bảng điều khiển bên trái.
Đọc cũng: Cách sử dụng Widget bài viết của Elementor
Đặt bố cục trên menu thả xuống Giao diện
Thêm phần mới bằng cách nhấp vào biểu tượng dấu cộng trong hộp chỉnh sửa và thêm tiện ích EA Image Hotspots từ bảng điều khiển bên trái.
Thêm hình ảnh của bạn bằng cách nhấp vào bộ chọn hình ảnh trong bảng điều khiển bên trái.
tùy chọn mở Hotspot trên bảng điều khiển bên trái để thêm các điểm truy cập. Theo mặc định, tiện ích EA Image Hotspots chứa một điểm phát sóng. Bạn có thể nhấp vào điểm truy cập mặc định để chỉnh sửa nội dung của nó.
Theo mặc định, loại điểm truy cập được đặt thành biểu tượng. Bạn có thể thay đổi nó thành Văn bản hoặc rời đi Vide nếu bạn muốn nó.
bấm vào tab CHỨC VỤ để đặt vị trí của điểm truy cập. Đặt vị trí X và Y bằng cách kéo thanh trượt.
bấm vào tab CÔNG CỤ để thêm nội dung tooltip. Kích hoạt chú giải công cụ và thêm nội dung của bạn vào trình chỉnh sửa. Bạn cũng có thể đặt vị trí của chú giải công cụ, trên cùng, dưới cùng, bên trái hoặc bên phải.
Để thêm nhiều Điểm phát sóng, chỉ cần nhấp vào nút THÊM PHẦN TỬ trong phần Hotspot và lặp lại các bước trên để đặt vị trí điểm phát sóng, nội dung chú giải công cụ và vị trí chú giải công cụ.
Mở phần Cài đặt chú giải công cụ để đặt kích thước của chú giải công cụ và hiệu ứng hoạt hình.
Bây giờ hãy chuyển đến tab Phong cách để tạo kiểu cho các điểm nóng cũng như chú giải công cụ của bạn. Đầu tiên, mở tùy chọn Hình ảnh để thiết lập kích thước hình ảnh.
Mở phần Hotspot để tùy chỉnh lẩu. Bạn có thể đặt kích thước, màu biểu tượng (hoặc văn bản tùy thuộc vào loại điểm phát bạn đã chọn), màu nền, bán kính đường viền, v.v.
Khám phá thêm: Cách thêm các mục liên quan trong Elementor
Mở phần Tooltip để tùy chỉnh chú giải công cụ. Bạn có thể đặt màu nền, màu văn bản, kiểu chữ (cỡ chữ, họ phông chữ, kiểu phông chữ) và chiều rộng.
Cho đến nay, bạn đã tạo thành công hình ảnh với các điểm nóng. Bạn có thể thử với bảng điều khiển bên trái để tùy chỉnh hình ảnh của mình bằng các điểm phát sóng cho đến khi bạn hài lòng với kết quả. Khi bạn đã hoàn tất, bạn có thể nhấp vào nút PUBLISH để xuất bản trang của bạn.
Thêm hình ảnh có điểm nóng vào Gutenberg
Nếu bạn muốn thêm hình ảnh có điểm nóng làm tài liệu hỗ trợ cho bài viết đang làm, bạn có thể tích hợp nó với Gutenberg (trình chỉnh sửa mặc định của WordPress) bằng cách sử dụng plugin Elementor Blocks cho Gutenberg. Plugin này cho phép bạn sử dụng mẫu Elementor làm khối Gutenberg.
Để lưu hình ảnh với các điểm nóng ở trên dưới dạng mẫu phần Elementor, hãy nhấp chuột phải vào phần xử lý và chọn Lưu dưới dạng Mẫu.
Đặt tên cho mô hình của bạn và nhấp vào nút NĂNG LƯỢNG.
Mở bài viết mà bạn muốn thêm hình ảnh với các điểm nóng. Thêm một khối mới, chọn thư viện phần tử và chọn mẫu hình ảnh có các điểm nóng bạn vừa tạo.
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Đây ! Đó là nó cho bài viết này chỉ cho bạn cách tạo hình ảnh tương tác với Hotspots trong WordPress nhờ Elementor và Essential Addons. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho họ biết trong ý 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.
...
