Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích điểm nóng – Hotspot
1. Các tiện ích Widgets trong Elementor
Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.
Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:
- Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
- Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
- Advanced (Nâng cao): Các tùy chọn nâng cao như:
- Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
- Z-index: Thứ tự hiển thị của các lớp phần tử.
- CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
- Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
- Background: Màu nền, hình ảnh nền, gradient.
- Border: Đường viền.
- Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
- Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
- Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.
2. Tiện ích Hotspot là gì ?
Tiện ích Hotspot trong Elementor là một công cụ tương tác cho phép bạn thêm các điểm đánh dấu (hotspots) vào một hình ảnh. Khi người dùng di chuột qua hoặc nhấp vào các điểm này, một chú giải công cụ (tooltip) sẽ hiển thị thông tin bổ sung, hình ảnh hoặc liên kết. Điều này rất hữu ích cho các trang sản phẩm, bản đồ tương tác, sơ đồ, hoặc bất kỳ hình ảnh nào cần cung cấp thêm chi tiết.
3. Các bước sử dụng tiện ích Hotspot
I. Nội dung (Content)
Đây là nơi bạn chọn hình ảnh nền và thêm, cấu hình các điểm hotspot.
A. Hình ảnh (Image)
- Chọn hình ảnh (Choose Image): Nhấp vào đây để tải lên hoặc chọn hình ảnh mà bạn muốn thêm các điểm hotspot vào từ thư viện phương tiện của bạn.
- Độ phân giải hình ảnh (Image Size): Chọn kích thước hình ảnh mong muốn (ví dụ: Large – 1020 x 1000).
B. Hotspot (Điểm nóng)
- Đây là khu vực bạn thêm và quản lý từng điểm hotspot trên hình ảnh.
- Nhấp vào nút “+ Thêm mục” để thêm một điểm hotspot mới.
- Đối với mỗi mục hotspot, bạn sẽ có các tùy chọn:
- Văn bản (Text): Nhập văn bản sẽ hiển thị trong chú giải công cụ khi hotspot được kích hoạt.
- Liên kết (Link): Đặt một URL mà người dùng sẽ được chuyển hướng đến khi nhấp vào hotspot.
- Vị trí (Position): Kéo và thả hotspot trực tiếp trên hình ảnh trong trình chỉnh sửa Elementor để định vị nó. Hoặc có thể có các thanh trượt Horizontal Offset (Độ lệch ngang) và Vertical Offset (Độ lệch dọc) để điều chỉnh vị trí chính xác hơn.
- Biểu tượng (Icon): Chọn một biểu tượng sẽ hiển thị trên điểm hotspot.
- Kích hoạt (Trigger): Chọn cách chú giải công cụ sẽ hiển thị (ví dụ: Hover (Di chuột qua) hoặc Click (Nhấp)).
- Hiệu ứng (Effect): Chọn hiệu ứng xuất hiện cho chú giải công cụ.
- Animation (Hoạt ảnh): Áp dụng hoạt ảnh cho biểu tượng hotspot.
- Show Arrow (Hiển thị mũi tên): Hiển thị mũi tên nhỏ trên chú giải công cụ chỉ về hotspot.
C. Tooltip (Chú giải công cụ)
- Position (Vị trí): Đặt vị trí của chú giải công cụ so với hotspot (ví dụ: Top, Bottom, Left, Right).
- Distance (Khoảng cách): Điều chỉnh khoảng cách giữa hotspot và chú giải công cụ.
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của các hotspot và chú giải công cụ.
A. Hotspot (Điểm nóng)
- Kích thước (Size): Điều chỉnh kích thước của biểu tượng hotspot.
- Màu sắc (Color): Màu của biểu tượng hotspot.
- Màu nền (Background Color): Màu nền của biểu tượng hotspot.
- Border Type (Loại đường viền): Thêm đường viền cho biểu tượng hotspot.
- Border Radius (Bán kính bo tròn): Bo tròn góc của biểu tượng hotspot.
- Box Shadow (Bóng đổ): Thêm bóng đổ cho biểu tượng hotspot.
B. Tooltip (Chú giải công cụ)
- Màu nền (Background Color): Màu nền của chú giải công cụ.
- Màu chữ (Text Color): Màu chữ của văn bản trong chú giải công cụ.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho văn bản trong chú giải công cụ.
- Padding (Khoảng đệm): Khoảng đệm bên trong chú giải công cụ.
- Border Radius (Bán kính bo tròn): Bo tròn góc của chú giải công cụ.
- Box Shadow (Bóng đổ): Thêm bóng đổ cho chú giải công cụ.
C. Hình ảnh
III. Nâng cao (Advanced)
Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Hotspot.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Hotspot với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
- Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Hotspot.
- Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
- Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
- Hiệu ứng chuyển động (Motion Effects):
- Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Hotspot khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
- Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
- Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Hotspot.
- Đường viền (Border)::
- Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
- Mặt nạ (Mask):
- Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
- Khả năng đáp ứng (Responsive):
- Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Hotspot trên các loại thiết bị khác nhau nếu cần.
- Thuộc tính (Attributes):
- Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
- CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
- Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
